Sencha Releases ExtReact, Bringing Their Custom Components to the React Framework [Audio]

Sencha’s ExtJS is a venerable web framework for creating data heavy cross-platform desktop and mobile components ideal for enterprise applications. Originally conceived way back in 2007, in times when JavaScript was less advanced than it is now, the team added concepts such as classes and objects to JavaScript, and made ExtJS self-contained, requiring no dependencies. This does lead to somewhat different looking code from ‘vanilla’ JavaScript, for example:

Ext.define('PopupFormController',{
    extend:'Ext.app.ViewController',
    alias:'controller.popupform',

cancelUpdate:function(){
var view =this.getView(),
            record =view.getRecord();

view.destroy();
record.reject();
},

submitUpdate:function(me){
var view =this.getView(),
    record =view.getRecord();

view.destroy();
record.commit();
}
});

But honestly, this looks less unusual now than it did when I first encountered ExtJS.

Sencha announced their new product, ExtReact in May of 2017, making the same components available for the popular React framework, and in many ways, the code makes more sense in React:

importReact,{Component}from'react';
import{Container,Picker,Button}from'@extjs/ext-react';

exportdefaultclassMyExampleextendsComponent{

showPicker=()=>this.picker.show();

render(){
return(
<Container>
<Button ui="action" handler={this.showPicker} text="Show Picker"/>
<Picker
    ref={picker=>this.picker= picker}
    slots={[
{
    name:'limit_speed',
        title:'Speed',
        data:[
{text:'50 KB/s', value:50},
{text:'100 KB/s', value:100},
{text:'200 KB/s', value:200},
{text:'300 KB/s', value:300}
]
}
]}
/>
</Container>
)
}
}

In the interview below, I speak with Mark Brocato of Sencha about ExtReact, the companies’ journey so far, and what it’s like to create a cross-platform framework.