SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato

99 views

Published on

Have you ever wished you could use Sencha’s powerful Ext JS components in your React apps? Now you can. Learn about the new bridge we’ve created that enables you to use the Ext JS grid, treegrid, pivot grid, calendar, charts, and other components in your React based apps. We’ve integrated the frameworks, so you can manage data and respond to events using React while rendering UI controls using Ext JS with React's tag-based JSX syntax.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
99
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • HOW MANY OF YOU HAVE USED REACT?
  • WHAT HAPPENS WHEN THE APPLICATION STATE CHANGES?
  • SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato

    1. 1. Ext JS + React A Match Made in UX Heaven Mark Brocato Sr. Engineering Manager, Sencha
    2. 2. My Journey to React
    3. 3. My Journey to React
    4. 4. Scenario Builder
    5. 5. My Journey to React
    6. 6. My Journey to React
    7. 7. My Journey to React
    8. 8. My Journey to React
    9. 9. React Primer • A JavaScript library for building user interfaces • React is the just the V in MVC • Solve one problem: Build large applications with data that changes over time.
    10. 10. React Components Component data HTML
    11. 11. Views as Pure Functions data HTMLFunction
    12. 12. Views as Components import React, { Component } from 'react'; class NewsFeed extends Component { render() { const { news } = this.props; return ( <ul> { news.map(story => ( <li> <div className="title">{story.title}</div> <div>by {story.author}</div> </li> )) } </ul> ) } }
    13. 13. Views as Pure Functions function NewsFeed({ news }) { return ( <ul> { news.map(story => ( <li> <div className="title">{story.title}</div> <div>by {story.author}</div> </li> )) } </ul> ) }
    14. 14. JSX <div className="title">{story.title}</div>
    15. 15. JSX <div className="title">{story.title}</div> React.createElement('div', { className: 'title'}, store.title)
    16. 16. Views as Components function NewsFeed({ news }) { return ( React.createElement('ul', {}, news.map(story => { return React.createElement('li', {}, [ React.createElement('div', { className: 'title' }, store.title), React.createElement('div', { }, `by ${store.author}`) ]) })); ) }
    17. 17. React’s One-Way Data Flow (Flux) Store Component Component Component Component Component Component Component data API
    18. 18. Virtual DOM to the Rescue
    19. 19. React and Ext JS Similarities • Ext.Component • configs • items: [] • React.Component • props • children
    20. 20. What’s Missing? ✔ Routing: react-router ✔ Architecture: redux Components
    21. 21. @extjs/reactor
    22. 22. React Hello World import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( ( <div> Hello World! </div> ), document.getElementById('root') );
    23. 23. React Hello World w/ Ext JS import React from 'react'; import ReactDOM from 'react-dom'; import install from ’@extjs/reactor'; install(); Ext.onReady(() => { ReactDOM.render( ( <x-panel title="Ext JS in React"> Hello World! </x-panel> ), document.getElementById('root') ); });
    24. 24. @extjs/reactor • Use any xtype as a JSX tag. • Mix and match HTML and Ext JS import React from 'react'; import ReactDOM from 'react-dom'; import install from ’@extjs/reactorjs'; install(); Ext.onReady(() => { ReactDOM.render( ( <x-panel title="Ext JS in React"> Hello World! </x-panel> ), document.getElementById('root') ); }); Ext.create({ xtype: 'panel', title: 'Ext JS in React', html: 'Hello World!' });
    25. 25. Responding to Events • All props starting with “on” are automatically converted to Ext JS event listeners • You can also specify event handlers using a listeners prop, just like in traditional Ext JS import React, { Component } from 'react'; class MyComponent extends Component { onSliderChange(slider, value) { console.log('value', value); } render() { return ( <x-slider onChange={this.onSliderChange.bind(this)} /> ) } }
    26. 26. Responding to Events • All props starting with “on” are automatically converted to Ext JS event listeners • You can also specify event handlers using a listeners prop, just like in traditional Ext JS import React, { Component } from 'react'; class MyComponent extends Component { onSliderChange(slider, value) { console.log('value', value); } render() { return ( <x-slider onChange={this.onSliderChange.bind(this)} /> ) } } Ext.create({ xtype: 'slider', listeners: { change: this.onSliderChange } });
    27. 27. Component Refs • As with DOM elements, you can access Ext components by adding a “ref” prop. • Here this.refs.slider is an instance of Ext.slider.Slider import React, { Component } from 'react'; class MyComponent extends Component { onSliderChange(slider, value) { console.log('value', this.refs.slider.getValue()); } render() { return ( <x-slider ref="slider" onChange={this.onSliderChange.bind(this)} /> ) } }
    28. 28. More Complex Configs • It’s all just JavaScript. • React props => Ext JS configs class MyComponent extends Component { render() { return ( <x-grid plugins={[ { type: 'columnresizing' } ]} columns={[ { text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email' } ]} store={{ data: [ ... ] }} /> ) } }
    29. 29. Layouts • Work like you’d expect class MyComponent extends Component { render() { return ( <x-container layout="hbox"> <x-button text="Left"/> <x-button text="Right"/> </x-container> ) } }
    30. 30. Layouts • Work like you’d expect class MyComponent extends Component { render() { return ( <x-container layout="hbox"> <x-button text="Left"/> <x-button text="Right"/> </x-container> ) } } Ext.create({ xtype: 'container', layout: 'hbox', items: [ { xtype: 'button', text: 'Left' }, { xtype: 'button', text: 'Right' } ] });
    31. 31. Updates • When a prop changes, @extjs/reactor automatically calls the corresponding setter method to update your component’s configs. class MyComponent extends Component { constructor(props) { super(props); this.state = { dirty: true }; } render() { const text = this.state.dirty ? "Save Changes" : "Changes Saved"; return ( <x-button text={text} handler={this.onClick.bind(this)} /> ) } onClick() { this.setState({ dirty: false }); } }
    32. 32. Updates • When a prop changes, @extjs/reactor automatically calls the corresponding setter method to update your component’s configs. class MyComponent extends Component { constructor(props) { super(props); this.state = { dirty: true }; } render() { const text = this.state.dirty ? "Save Changes" : "Changes Saved"; return ( <x-button text={text} handler={this.onClick.bind(this)} /> ) } onClick() { this.setState({ dirty: false }); } } button.setText(text);
    33. 33. Summing Up props configs on/A-Z/ listeners child elements items: [] updates setter calls
    34. 34. @extjs/reactor-webpack- plugin
    35. 35. Setting up your React app for Ext JS ext-all.js reactor-webpack-plugin
    36. 36. Automatic Usage Detection import React, { Component } from 'react'; Ext.require('Ext.window.Toast'); export default class MyDialog extends Component { constructor(props) { super(props); this.store = Ext.create('Ext.data.Store', { ... }); } render ( <x-window> <x-grid ... /> </x-window> ) } ext.js ext.css
    37. 37. Configure Theme, Toolkit, and Packages const ExtJSReactorWebpackPlugin = require('@extjs/reactor-webpack-plugin'); module.exports = { ... plugins: [ new ExtJSReactorWebpackPlugin({ sdk: 'ext', // relative or full path to Ext JS SDK toolkit: 'modern', theme: 'theme-material', packages: ['charts'], output: path.join('build', 'ext') }) ] ... };
    38. 38. @extjs/reactor-boilerplate
    39. 39. reactor-boilerplate

    ×