Building Bridges to Angular 2 and React - SenchaCon Roadshow

Transcript

2. Building bridges to Angular 2 and React Olga Petrova Sales Engineer, Sencha
3. Definitions •  Ext JS is a full framework that handles all parts of web app development •  Angular 2 is a toolset for building the framework most suited to your application development •  React is a JavaScript library for building user interfaces
4. What’s Missing? Components
6. Bridges overview •  Enables the use of Ext JS components and layouts within Angular 2 and React •  Currently in Preview •  Need your feedback!
7. How it works •  xtype is used as a component tag •  configs are defined as standard component properties •  items are defined as child components •  layouts could be defined as component property ‘layout’ •  event listeners could be bounded •  Ext JS component instances could be accessed via special references
8. Angular 2 Bridge
9. Hello World App                         Component’s definition: selector, template, styles! Angular 2 Component’s properties and event handlers!
10.                         Component’s template •  [name] is syntax for a property •  (name) is syntax for an event •  {{name}} is binding syntax Angular 2
11.                         Hello World App Angular 2
12. angular2-extjs
13. Import Ext JS components Angular 2
14. App using Ext JS components Angular 2 Component’s definition: selector, template, styles! Component’s properties and event handlers!
15.                         Ext JS Component’s template •  x- is a prefix for all components •  xtype is used as a component tag: x-panel, x-grid •  all components have config property •  all components have fitToParent property Angular 2
16.                         Ext JS Component’s template •  all components have an Angular 2 property for each Ext JS config parameter: columns, store •  all components have an Angular 2 event for each Ext JS event: select, itemclick Angular 2
17.                         Ext JS Layouts •  all components have a layout property to specify layout: vbox, hbox, fit •  containment is used to specify Ext JS items collection Angular 2
18.                         Ext JS Component References •  all components have ready event •  event.x is an instance of Ext JS grid Angular 2
19.                         Demo Angular 2
20. React Bridge
21.                         Hello World app Component’s ! template! React Component’s ! properties ! and event handlers! Component’s ! selector!
22.                         Component’s template •  standard html code •  {name} is used for binding values React
23.                         Hello World App React
24. @extjs/reactor
25. App using Ext JS components use Ext JS components in JSX! set configs using tag props! import and install @extjs/reactor! import “reactified” Ext JS components! by xtype! React
26.                         Using Ext JS Components in React •  Import a reactified version of any Ext JS component from the modern or classic toolkit. •  Use capitalized, camel-case xtype React import { Grid, Panel } from '@extjs/reactor/modern'; ! ! import { reactify } from '@extjs/reactor'; ! const [ Grid, Panel ] = reactify('grid', 'panel'); ! ! Babel  
27.                         “Reactified” Ext JS Components •  set configs using props •  all props starting with on are automatically converted to Ext JS event listeners •  listeners prop could be used to specify event listeners, just like in traditional Ext JS React
28.                         Ext JS Layouts •  all subclasses of Ext.Container have a layout property to specify layout: vbox, hbox, fit, etc… •  containment is used to specify Ext JS items collection React
29.                         Ext JS Component References •  Ext JS components can be accessed by adding a ref prop •  this.refs.grid is an instance of Ext JS grid React
30.                         Updates •  when a prop changes, @extjs/reactor automatically calls the corresponding setter method to update the component’s configs. React
31.                         Demo React
32. Setting up Ext JS Build for Angular 2 or React Application
33. Setting up Ext JS build ext-all.js reactor-webpack-plugin angular2-extjs-webpack-plugin
34. @extjs/reactor-webpack-plugin
35. Automatic Usage Detection import React, { Component } from 'react'; import { Window, Grid } from '@extjs/reactor/classic'; Ext.require('Ext.window.Toast'); export default class MyDialog extends Component { constructor(props) { super(props); this.store = Ext.create('Ext.data.Store', { ... }); } render ( <Window> <Grid ... /> </Window> ) } ext.js   ext.css  
36. 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’] }) ] ... }; webpack.config.js
37. Supported versions
38. Supported versions Angular  2   React   Ext  JS  6.2+   Sencha  Cmd  6.2+   Angular  2   React  15.4.0+   Modern  Toolkit   Modern  and  Classic  Toolkits  
39. Links
40. Angular 2 Bridge • https://www.npmjs.com/package/angular2-extjs -  angular2-extjs • https://www.npmjs.com/package/angular2-extjs- webpack-plugin - angular2-extjs-webpack-plugin
41. React Bridge https://github.com/sencha/extjs-reactor -  reactor -  reactor-webpack-plugin -  reactor-babel-plugin -  reactor-boilerplate -  reactor-classic-boilerplate
42. React Bridge
43. reactor-boilerplate