Introduction to ExtReact, ExtAngular and ExtWebComponents

Transcript

1. Olga Petrova, @tyoushe Introduction to ExtReact, ExtAngular, ExtWebComponents Olga Petrova, @tyoushe olga@sencha.com
2. Olga Petrova, @tyoushe ExtReact & ExtAngular
3. Olga Petrova, @tyoushe
4. Olga Petrova, @tyoushe Components
5. Olga Petrova, @tyoushe Ext JS, React and Angular Ext JS Component configs items: [] Angular Component properties Children elements React Component props Children elements
6. Olga Petrova, @tyoushe Reactor Wrapper Concept Ext JS Component props state method calls event listeners transform translate configs events methods link to Ext JS Component
7. Olga Petrova, @tyoushe Architecture first and lastname React Framework Core Ext Modern Components Theme Packages Sencha Themer Angular Framework Sencha Test Premium Packages
8. Olga Petrova, @tyoushe ExtReact 8 import React, { Component } from 'react'; import { Grid, Column } from '@sencha/ext-modern'; export default class MyGrid extends Component { store = Ext.create('Ext.data.Store', {...}); render() { return ( <Grid title="Stock Prices" store={this.store}> <Column text="Company" dataIndex="name" width="150"/> <Column text="Price" width="85" dataIndex="price" formatter='usMoney‘/> </Grid> ) } } MyGrid.js
9. Olga Petrova, @tyoushe <container padding="10" layout="fit" [fitToParent]="true"> <grid title="Stock Prices" [store]="store"> <column text="Company" width="150" dataIndex="name"></column> <column text="Price" width="85" dataIndex="price" formatter="usMoney"></column> <column text="Last Updated" dataIndex="lastChange"></column> </grid> </container> ExtAngular 9 import { Component } from '@angular/core'; @Component({ selector: 'basicgrid-component‘, templateUrl: './MyGrid.html' }) export class BasicGridComponent { store = Ext.create('Ext.data.Store', {...}) constructor() { //... } } MyGrid.html MyGrid.ts
10. Olga Petrova, @tyoushe Getting Started 10 ExtReact Trial: https://www.sencha.com/products/extreact/evaluate/ ExtAngular Trial: https://www.sencha.com/products/extangular/evaluate/
11. Olga Petrova, @tyoushe npm login --registry=https://npm.sencha.com --scope=@sencha npm install -g @sencha/ext-react-gen ext-react-gen app -i Setup 11
12. Olga Petrova, @tyoushe Examples 12 ExtReact Kitchensink: https://examples.sencha.com/ExtReact/6.7.0/kitchensink/ ExtAngular Kitchensink: https://examples.sencha.com/ExtAngular/6.7.0/kitchensink/
13. Olga Petrova, @tyoushe Vue.js
14. Olga Petrova, @tyoushe WebComponents
15. Olga Petrova, @tyoushe
16. Olga Petrova, @tyoushe Specifications • Custom Elements • Shadow DOM • ES Modules • HTML Template 16
17. Olga Petrova, @tyoushe Custom HTML Tag 17 class MyAwesomeButton extends HTMLElement {...} window.customElements.define('my-awesome-button', MyAwesomeButton); <my-awesome-button class="nice_style">Click me!</my-awesome-button> var myAwesomeButton = document.createElement('my-awesome-button‘); document.body.appendChild(myAwesomeButton); document.querySelector('my-awesome-button‘) .addEventListener('click', function() {...});
18. Olga Petrova, @tyoushe
19. Olga Petrova, @tyoushe ExtWebComponents
20. Olga Petrova, @tyoushe ExtWebComponents 20 import '@sencha/ext-web-components/dist/ext-column.component'; import '@sencha/ext-web-components/dist/ext-grid.component‘;
21. Olga Petrova, @tyoushe <ext-panel width="100%" height="100%"> <ext-grid multiColumnSort=true onready="basicgrid.onGridReady" title="Stock Prices"> <ext-column text="Company" flex="1" dataIndex="name"></ext-column> <ext-column text="Price" dataIndex="price" formatter="usMoney"></ext-column> <ext-column text="Last Updated" dataIndex="lastChange"></ext-column> </ext-grid> </ext-panel> import './MyGrid.html'; export default class MyGrid { constructor() { this.store = Ext.create('Ext.data.Store', {...}); } onGridReady = (event) => { this.gridCmp = event.detail.cmp; this.gridCmp.setStore(this.store); } } ExtWebComponents 21 MyGrid.html MyGrid.js
22. Olga Petrova, @tyoushe Getting Started 22 MyGrid.ts Early adopter access to ExtWebComponents Trial: https://www.sencha.com/products/extwebcomponents/evaluate/earlyaccess/
23. Olga Petrova, @tyoushe npm login --registry=https://sencha.myget.org/F/early-adopter/npm/ --scope=@sencha npm install -g @sencha/ext-web-components-gen ext-web-components-gen app --name MyApp Setup 23 MyGrid.ts
24. Olga Petrova, @tyoushe Examples 24 ExtWebComponents Kitchensink: https://examples.sencha.com/ExtWebComponents/7.0.0/kitchensink/
25. Olga Petrova, @tyoushe • 115+ UI Components • Layout System • Sencha Themer • Sencha Test • Sencha Cmd integration • Ext JS component bridge • Webpack: Build and Bundle ExtReact ExtAngular ExtWebComponents
26. Olga Petrova, @tyoushe Introduction to ExtReact, ExtAngular, ExtWebComponents Olga Petrova, @tyoushe olga@sencha.com