Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Breathe New Life into Your Existing JavaScript Applications with Web Components

62 visualizaciones

Publicado el

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!

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Breathe New Life into Your Existing JavaScript Applications with Web Components

  1. 1. Sandeep Adwankar! Sr. Product Manager, Sencha! Twitter: @adwankar! Breath new life into your existing JavaScript components with Web Components
  2. 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. 3. Agenda! •  Components that you love…! •  Popular Open Source Frameworks! •  React ! •  Angular! •  Using Components in these environments! •  React! •  Angular! •  WebComponents!
  4. 4. JavaScript Frameworks – A History of Innovation! 4! (2006)! jQuery! (2009)! Ext JS! (2010)! AngularJS! (2013)! React! Vue! (2014)! (2016)! Angular2!
  5. 5. What’s Missing from React and Angular and Vue?! ! ! ! ! ! ! ! Components! !
  6. 6. Components that you love…! Tree! Grid! Calendar!
  7. 7. Standard Components!
  8. 8. Standard Components – page 2!
  9. 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. 10. React Component! Component data HTML
  11. 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. 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. 13. Angular Component!
  14. 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. 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. 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. 17. Web Component! Shadow DOM Custom HTML Element Templates
  18. 18. Web Component – Browser Support!
  19. 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. 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. 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. 22. Q&A! Question & Answer Session! Twitter: @adwankar www.sencha.com
  23. 23. Thank You!!

×