Criando aplicações componentizadas com Polymer - C4P CEJS 2017

Transcript

1. Criando aplicacoes componentizadas com Polymer. @felipz_sousa ~ ~
2. Felipe Sousa Front End Developer GDG Fortaleza @felipz_sousa
3. Web!
4. PLATAFORMA QUE MAIS CRESCE DO MUNDO!
5. Patterns Especifications Definitions
7. back to the past…
8. Frameworks!
9. exemplo de frameworks
10. Components
11. Estrutura Estilo Funções
12. Menu Post Sidemenu
13. Web Components
14. Shadow-DOM Custom Elements Imports Templates { Web Components
15. Shadow-DOM Esconde detalhes de implementacao.
16. Custom Elements Criacao do seus proprios elementos HTML.
17. Imports Importacao de arquivos .HTML
18. Cria o escopo de um elemento customizado. Templates
20. Library > 1.8/2.0-preview Like a Web Components Open Source
21. #UseThePlatform
22. <link rel=“import” href=“../polymer/polymer.html”> <dom-module id="my-personal-component"> <template> <style> :host { … } </style> <h1> Hello! I’m a personal component! </h1> </template> <script> Polymer({ is: “my-personal-component” }); </script> </dom-module>
23. <link rel=“import” href=“../polymer/polymer.html”> <dom-module id="my-personal-component"> <template> <style> :host { … } </style> <h1> Hello! I’m a personal component! </h1> </template> <script> Polymer({ is: “my-personal-component” }); </script> </dom-module> Imports
24. <link rel=“import” href=“../polymer/polymer.html”> <dom-module id="my-personal-component"> <template> <style> :host { … } </style> <h1> Hello! I’m a personal component! </h1> </template> <script> Polymer({ is: “my-personal-component” }); </script> </dom-module> Custom Elements
25. <link rel=“import” href=“../polymer/polymer.html”> <dom-module id="my-personal-component"> <template> <style> :host { … } </style> <h1> Hello! I’m a personal component! </h1> </template> <script> Polymer({ is: “my-personal-component” }); </script> </dom-module> Templates
26. <link rel=“import” href=“../polymer/polymer.html”> <dom-module id="my-personal-component"> <template> <style> :host { … } </style> <h1> Hello! I’m a personal component! </h1> </template> <script> Polymer({ is: “my-personal-component” }); </script> </dom-module> Component!
27. variables/properties Properties
28. Repeats
29. Conditions
30. Progressive Web Apps
31. Re-engageable Connectivity- independent Installable App-like Responsive Linkable
32. https://shop.polymer-project.org
33. Who is using Polymer? https://github.com/Polymer/polymer/wiki/Who's-using-Polymer%3F
37. polymer-cli https://www.polymer-project.org/1.0/docs/tools/polymer-cli >
38. Use the Platform!
39. Available in: speakerdeck.com/felipesousa
40. THANK’S! github.com/felipesousa