Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

DZone's Guide to

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

Learn about Sencha's ExtReact, making cross-platform desktop and mobile components available for the React framework, in this interview.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

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.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
react ,ext js ,javascript ,cross platform ,mobile ,mobile app development ,web development

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}