Why did Sencha develop ExtReact?
We saw a clear market opportunity for ExtReact. We have been helping organizations all over the world build data-intensive applications featuring powerful UI components for the last decade. Our focus has been on providing developers with everything they need to build data-intensive commercial web apps - meaning a full framework, robust components and productivity boosting tools.
We recognized that React is growing rapidly in popularity and that there wasn’t a full commercial component set available to the React developers. They often have to assemble the components from various open source projects and a limited number of commercial vendors. Integrating all of these components together and with the React framework can cause project delays, create integration risks and ongoing maintenance challenges. We knew we could provide a better solution with our comprehensive set of UI components.
What is the license and pricing for ExtReact? Is an Ext JS license also required?
ExtReact is a separate product with its own license and pricing. You can buy ExtReact to add components to your React apps. ExtReact Std is $695 per developer per year and ExtReact Premium is $1,195, both include Support, and you must be current on your subscription to develop applications. Rights to distribute and use applications are perpetual.
Sencha customers who already have an Ext JS license can use Ext JS components in React simply by using the extjs-reactor npm package on GitHub (which is governed by the MIT license).
How does ExtReact solve developers’ challenges?
ExtReact helps developers build beautiful web applications faster than ever before. It accelerates time to market, reduce integration risks and lower the ongoing maintenance burdens. ExtReact comes with 115+ fully tested and supported components that are all designed to work together over the lifetime of the application.
What specific benefits does ExtReact provide to end users?
ExtReact enables developers to offer their end users a great experience. Developers will be able to add sophisticated components for data analytics and data visualization which are critical as web apps are becoming more data intensive. Our theming system enables designers and developers to quickly create a fresh looking application that leverages the latest trends in application design - including Material Design. Our layout management system ensures that the application will display beautifully across device types including the desktop, tablet and smartphone ensuring that the application end user gets to have the right experience on the right screen at the right time.
How does the release of ExtReact affect Sencha’s commitment to Ext JS?
We are absolutely committed to providing fully supported commercial frameworks for developers that want to build modern web apps. We just released Ext JS 6.5, which embraces many elements of ES6 and enables developers to build progressive web apps. ExtReact uses Ext JS as its foundation, so continuing to innovate is critical.
Does ExtReact support React Native apps as well?
ExtReact is specifically for React web apps.
How does this solution fit with NPM?
We are hosting private NPM repositories for both the trial and commercial versions of ExtReact. NPM is used to download ExtReact just as you would for any other React app.
Are there any parts, such as the data package, that are shared between ExtReact and Ext JS?
Yes, ExtReact uses the data package to get data into grids, trees, charts, and more. You have the option of using a Proxy to fetch data from the back end, or simply using an in-memory store and fetching the data by other means, for example redux-thunk. To learn more, read the Using Ext.data.Store Within Flux Apps guide.
Does ExtReact play well and work with Redux?
Yes, ExtReact plays well and works with Redux. If you’re using Redux, you’re in luck because we have a lot of good examples using Redux with ExtReact. For example, our Kitchen Sink examples use Redux, and the ExtReact Conference Example uses Redux in addition to React Grabber. You can read this recent article on our blog, Using ExtReact Stores in Flux Apps, that dives into a couple of different ways you can use the Ext JS data package and store with Redux. It also includes how the two should be oriented with respect to one another. We have great support for Redux, but you can use ExtReact with any implementation of Flux.
Can we expect component definitions to be identical between ExtReact and Ext JS?
Yes, you get all the same components with both. If you’re used to using a component in Ext JS, it will do all the same things in ExtReact. It’s just the way you interact with them and create them that’s different – JSX versus Ext.create.
We're considering rewriting one of our Ext JS applications from scratch and considering Ext JS + Reactor and ExtReact right now. Between ExtReact and Ext JS + Reactor, which product do you think will have greater long-term maintenance by Sencha and the Ext JS community?
You should choose the best combination for your project, based on whether your team is focused on building Ext JS and React apps or solely focused on React apps (see next question). We are absolutely committed to providing fully supported commercial frameworks for developers who want to build modern web apps. See the Ext JS product page for details on the latest release.
Why would I use ExtReact if I already have Ext JS? Are there any things I can do in ExtReact that can't be done in Ext JS?
The components in ExtReact and Ext JS are equivalent. If you’re already developing Ext JS applications and you have no plans to do React development, then you can continue using Ext JS. If you are planning to develop both Ext JS and React apps, then you can use Ext JS + Reactor library. If you have a team that is just focused on building React apps, then ExtReact is a great way to leverage their React knowledge and harness the power of Sencha's comprehensive set of components.
Would we still use Sencha Cmd with ExtReact?
In most cases, you’re already using it. You don’t have to download, configure, and maintain Sencha Cmd. You really have no direct interaction with it, either with Ext JS + Reactor or ExtReact. The Webpack plugin has an npm-wrapped version of Sencha Cmd as a dependency, so it handles all of that for you. It calls your code, looks for the components you’re using, and feeds all of that information into Sencha Cmd. Then, Cmd can build a minimal bundle. It's all handled automatically.
Would you suggest populating our components via service calls or Ajax requests?
It depends on the architectural pattern you’re using. In React, the most common way is to use Flux or Redux, and for Redux I’ve always used Thunk as a middleware. Basically, in your action creators you can make Ajax requests to fetch data. For some of the components, like Grid, that have a lot of built-in data fetching functionality, I would suggest using a proxy on the store especially for things like doing remote sorting, filtering, and paging. Here’s a great example of that – ExtReact REST Example. You can download and run the code with a few simple commands. It basically shows you how to implement a back-end for a store proxy. It’s a simple grid that allows search as well as filtering and sorting on the server side. Your application will probably use a mix of Ajax requests through your implementation of Flux and proxies to do this kind of very efficient data fetching for these big data components like grids and charts.
Can ExtReact be used as an alternative to Sencha Touch?
Yes it can. Sencha Touch was merged with Ext JS, and it is the Modern toolkit. When you use Ext JS, you get all of the touch-related components built in. With ExtReact being built on the Modern toolkit, it has all of the evolved versions of the Sencha Touch components that you’re used to seeing.