You probably have an existing JavaScript application using components that you love, maybe a grid, some graphs, etc. Perhaps today you use Angular and your company is thinking about moving to React, or Vue, and with new frameworks appearing every week, who knows what is next. How do you bring along those great components you have been using? That is where Web Components fits in! In this session we will look at some popular enterprise components and their usage in Angular and React. Then we will look at the Web Components spec to use those existing components you know and love in any framework - including no framework at all!

1. Sandeep Adwankar!
Sr. Product Manager, Sencha!
Twitter: @adwankar!
Breath new life into your existing JavaScript components
with Web Components

2. Abstract!
You probably have an existing JavaScript application using components that you love, maybe a
grid, some graphs, etc. Perhaps today you use Angular and your company is thinking about moving
to React, or Vue, and with new frameworks appearing every week, who knows what is next. How do
you bring along those great components you have been using? !
!
!
That is where Web Components fits in!!
!
!
In this session we will look at how you can use your favorite components in Angular and React by
building to the components specification of these frameworks. And then we will look at the Web
Components spec to use those existing components you know and love in any framework -
including no framework at all! !
!

3. Agenda!
• Components that you love…!
• Popular Open Source Frameworks!
• React !
• Angular!
• Using Components in these environments!
• React!
• Angular!
• WebComponents!

4. JavaScript Frameworks – A History of Innovation!
4!
(2006)!
jQuery!
(2009)!
Ext JS!
(2010)!
AngularJS!
(2013)!
React!
Vue!
(2014)!
(2016)!
Angular2!

5. What’s Missing from React and Angular and Vue?!
!
!
!
!
!
!
!
Components!
!

6. Components that you love…!
Tree! Grid! Calendar!

7. Standard Components!

8. Standard Components – page 2!

9. Angular, React, Vue and Ext JS Similarities!
• Ext.Component!
• configs!
• items: []!
• Angular Component!
• properties!
• Children elements!
• React.Component!
• props!
• children!
• Vue Component!
• properties!
• Children elements!

10. React Component!
Component
data
HTML

11. React Grid!
export default class MyExample extends Component {
render() {
return (
<ExtReact>
<Grid store={this.store}>
<Column text="Name" dataIndex="name" flex="1"/>
<Column text="Email" dataIndex="email" flex="1"/>
<Column text="Phone" dataIndex="phone" flex="1"/>
</Grid>
</ExtReact>
) } }

12. Store Class!
store = new Ext.data.Store({
data: [
{ "name": "Lisa", "email": "lisa@simpsons.com", "phone":
"555-111-1224" },
{ "name": "Bart", "email": "bart@simpsons.com", "phone":
"555-222-1234" },
{ "name": "Homer", "email": "home@simpsons.com", "phone":
"555-222-1244" },
{ "name": "Marge", "email": "marge@simpsons.com", "phone":
"555-222-1254" }
]
});

13. Angular Component!

14. Angular Grid!
@Component({
selector: 'app-root-1',
template: `
<container #item layout="fit">
<grid #item [store]="store" [height]="600">
<column #item text="Name" dataIndex="name" flex="1"></column>
<column #item text="Email" dataIndex="email" flex="1"></
column>
<column #item text="Phone" dataIndex="phone" flex="1"></
column>
</grid>
</container>`
})

15. Ext JS Grid!
Ext.create('Ext.grid.Grid', {
title: 'Simpsons’,
store: store,
columns: [
{ text: 'Name', dataIndex: 'name', width: 200 },
{ text: 'Email', dataIndex: 'email', width: 250 },
{ text: 'Phone', dataIndex: 'phone', width: 120 }
],
fullscreen: true
});

16. Enterprise Architectures using JavaScript Frameworks!
16!
View
System
Interface
Elements
Rendering, DOM, fonts, parallelism, security, media decode, sensors, prin8ng, network i/o... Base Services
Basic Widgets
(buAons, bars, text fields...)
Containers & Windows
(panels, cards, modals...)
Themes
Compound Widgets
(trees, grids, gauges...)
Visualiza8ons
(charts,infographics)
Styles
Layout Manager
(absolute, flex...)
Templa8ng
(itera8ons, condi8onals.)
Visual Effects
(anima8ons, filters...)
Accessibility
(focus manager, ARIA...)
Drawing
(vector, bitmap...)
Localiza8on
(RTL, locale libraries)
Interac8ons
(gestures, drag & drop)
Theming
(computed styles)
State Manager
(history, undo, routes...)
Modularity
(components, modules )
Data Binding
(1-way, 2-way)
Tes8ng
(IOC, test hooks)
Data Objects
(queues, hashtables...)
Persistent Data
(cache & sync)
Data Models & Stores
(group, sort, validate)
Mul8-Media
(3D, Audio, Video)
Logic &
Data
Server Calls
(asynch, conversion)
Sockets
Server Method
Invoca8on
Server
No8fica8ons
Server
i/o
PWA Libraries
sw-precache,
sw-toolbox
workbox

17. Web Component!
Shadow DOM
Custom HTML
Element
Templates

18. Web Component – Browser Support!

19. Grid – Web Component!
class ExtGrid extends HTMLElement {
get config() {return this.getAttribute('config')};
set config(val) {if (val) {this.setAttribute('config', val)} else
{this.removeAttribute('config')}}
connectedCallback() {
var o = JSON.parse(this.config)
o.xtype = 'grid'
o.renderTo = this
this.ext = Ext.create(o)
} }
window.customElements.define('ext-grid', ExtGrid)

20. Grid – Web Component!
<body>
<ext-grid
config=’ {
"data": [
{"name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224"},
{"name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234"},
{"name": "Homer", "email": "homer@simpsons.com", "phone":
"555-222-1244"},
{"name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254"}
]
}'></ext-grid>
</body>

21. Demos!
21!
• 100+ UI Components!
• Themer!
• Cmd!
• Ext JS component
bridges!
• Typescript transpiler!
• Webpack: Build!
ExtAngular
*All legal disclaimers apply… J!
Ext Web Components

22. Q&A!
Question & Answer Session!
Twitter: @adwankar
www.sencha.com

23. Thank You!!