Polymer is production ready, how about you?
•
1 gefällt mir•938 views
"Polymer is production ready, how about you?" by Maurizio Mangione Da quando è stata rilasciata la versione 1.0 Polymer è finalmente pronto per essere usato in produzione. Quali sono le cose da tenere in considerazione, gli strumenti da usare e le pratiche migliori per deployare e mantenere i propri componenti? In questo talk vedremo come creare applicazioni basate su Polymer e come integrarlo in quelle già in produzione, dove riscrivere tutto da zero non è un'opzione.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Polymer is production ready, how about you?
Ähnlich wie Polymer is production ready, how about you? (20)
Mehr von Codemotion
Mehr von Codemotion (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Polymer is production ready, how about you?
- 1. @granze Polymer is production ready. How about you? Maurizio Mangione ROME 18-19 MARCH 2016
- 2. @granze @Granze Google Developers Expert Milano JS Founder
- 3. @granze What is this talk about?
- 7. @granze HTML Imports <link rel="import" href="path/to/component.html">
- 8. @granze Templates <template id="template"> <div> <h1>Web Components</h1> <img src="http://webcomponents.org/img/logo.svg"> </div> </template>
- 9. @granze Shadow DOM var progressBar = document.createElement('div'); var shadowRoot = progressBar.attachShadow({mode: 'closed'}); var template = document.getElementById('template'); shadowRoot.appendChild(template).content.cloneNode (true)); V1
- 12. @granze “Always bet on Javascript” Brendan Eich
- 13. @granze “Always bet on the Web Platform” Me
- 14. @granze
- 15. @granze Let’s build an App
- 16. @granze 1 Create reusable elements ● Start with the seed-element ● Use Polyserve ● Publish via Bower
- 17. @granze <seed-element> ● Element boilerplate ● Test ready ● Auto generated docs
- 18. @granze
- 19. @granze Visual and non-visual elements
- 20. @granze 2 Put things together
- 21. @granze How elements talk to each other API API <child-component><child-component>
- 22. @granze <g-tag my-attr="true"> Polymer({ is: 'g-tag', properties: { myAttr: { type: Boolean } } });
- 23. @granze Mediator Pattern API API BUSINESS LOGIC wrapper <child-component><child-component>
- 25. @granze <x-app> <link rel="import" href="polymer/polymer.html"> <dom-module id="x-app"> <template> <!-- add elements here --> </template> <script> Polymer({ is: 'x-app' }); </script> </dom-module>
- 26. @granze index.html <!DOCTYPE html> <html lang="en"> <head> <link rel="import" href="x-app/x-app.html"> </head> <body> <x-app></x-app> </body> </html>
- 27. @granze <template is="dom-bind"> <body> <template id="app" is="dom-bind"> <a href="#" on-click="sayHello">Click me!</a> </template> <script> const app = document.querySelector('#app'); app.sayHello = () => { console.log('Hello') }; </script> </body>
- 28. @granze Should I use Mediator Pattern?
- 29. @granze Use what you like the most ● Events (fire, listen) ● Flux-like architecture ● Your own solution
- 31. @granze Web component tester > npm i -g web-component-tester > wct
- 33. @granze 4 The build step
- 34. @granze Tools of the trade ● Vulcanize ● Crisper ● NPM scripts or Gulp
- 35. @granze Vulcanize > vulcanize target.html > build.html
- 36. @granze Crisper > cat index.html | crisper -h build.html -j build.js
- 37. @granze So, what I need? ● Elements ● Let them talk to each other ● Test all the things ● Build/deploy
- 39. @granze PSK’s Hot features ● Offline support ● Complete build chain ● Responsive app layout
- 40. @granze Yeoman > npm i -g yo > npm install -g generator-polymer > yo polymer
- 41. @granze Ok sold, but is not so easy...
- 42. @granze
- 43. @granze You can win! One component at a time
- 44. @granzeCredits: http://nocamels.com/2014/06/israeli-researchers-create-trojan-horse-of-chemotherapy
- 45. @granze I don’t want to add more stuff to my legacy app
- 46. @granze Think about jQuery plugins
- 50. @granze
- 52. @granze Should you build your app entirely with Web Components?
- 53. @granze Is up to you!
- 54. @granze Polymer is good because ● Built on standards ● Freedom of choice ● Production ready...
- 56. @granze Thanks