Migrating from Extjs to React gradually

Migrating from Extjs to React gradually

Migrating from Extjs to React gradually

Migrating from Extjs to React gradually

We were looking for a few alternatives to our big ExtJS 4 application. Since it’s not that easy to completely migrate from one front-end framework to the next, a possible solution would be to start developing new parts in another framework. There’s a lot of domain logic spread in Ext views and controllers - which shouldn’t be there, we are well aware of that. Let’s call it “legacy” :-)

The application right now uses Extjs as UI and C# as backend, and lets ext do the loading of the views/controllers (living in app.js like most ext applications). There’s no ecosystem set up like modern javascript applications - build systems like Grunt, Gulp, node package managers, Browserify, … are all not used. We do use sencha command to minify stuff. To be able to develop new modules without having to worry about extjs, one of the possibilities would be to use iframes. That enables us to (scenario) test the module using it’s own routing. It’s wrapped inside an Extjs view with an iframe:

That’s simple enough. But how would one be able to open new Ext panels from within the React sub-application? That would be done via custom events thrown to the parent window. Catching these is just a matter of adding this to some controller in Extjs:

How well does React compare to Angular2 in terms of components? For instance react doesn’t include routing by default. We’ll need to rewrite some already-extjs-custom components in the target framework.

How should we include the build ecosystem (npm, gulp/grunt/browserify, …) into our C# build solution and Teamcity build? Will http://reactjs.net/ help for instance?

Which build tool should we use? We’re being overwhelmed by choice: bower/npm as package manager, I’ve seen stuff like Webpack in conjunction with React, … The list is huge if you’ve not kept up with the JS technology news.

One of the things we liked a lot was typescript or ES6 and the ability to use => () and promises. Enabling this requires a transpiler or a polyfill like Babel JS, but maybe this as a build step in sencha command will also ease some pain we’re having with the current Ext code.