Introduction to web components with Polymer

A brief web application history lesson, a discussion of Polymer, and then after a break to the code, I discuss what still needs to be done and what the future might hold.

Transcript

1. @nashvillecoder Steve Brownlee @coderfaire #cf2014 1 of 49
2. @coderfaire #cf2014 2 of 49
3. Introduction to Google Polymer @coderfaire #cf2014 3 of 49 Introduction to Web Components
4. Introduction to Polymer \ @coderfaire \ #cf2014 4 of 49
5. You won’t want to use Google Polymer Introduction to Polymer \ @coderfaire \ #cf2014 5 of 49
6. why does Google Polymer even exist? Introduction to Polymer \ @coderfaire \ #cf2014 6 of 49
7. “The network is the computer” - John Gage, 1984 Introduction to Polymer \ @coderfaire \ #cf2014 7 of 49
8. traditional programming concepts Introduction to Polymer \ @coderfaire \ #cf2014 8 of 49 graphics file system async operations packaged libraries data storage software agents
9. Introduction to Polymer \ @coderfaire \ #cf2014 9 of 49
10. web application development a brief history Introduction to Polymer \ @coderfaire \ #cf2014 10 of 49
11. 1996 - 2006 reactions to building a browser application Introduction to Polymer \ @coderfaire \ #cf2014 11 of 49
12. Introduction to Polymer \ @coderfaire \ #cf2014 12 of 49
13. Introduction to Polymer \ @coderfaire \ #cf2014 13 of 49
14. late 2000’s the Age of AJAX and jQuery or the infancy of web applications Introduction to Polymer \ @coderfaire \ #cf2014 14 of 49
15. Introduction to Polymer \ @coderfaire \ #cf2014 49 Here’s some sweet tools we can use! How do we make them all work together? Let’s just nail them all together… what could possibly go wrong?? 15 of
16. Introduction to Polymer \ @coderfaire \ #cf2014 49 16 of
17. Introduction to Polymer \ @coderfaire \ #cf2014 49 17 of
18. 2010 the Dawn of Modular applications, Automation & Packaging Introduction to Polymer \ @coderfaire \ #cf2014 49 18 of
19. Introduction to Polymer \ @coderfaire \ #cf2014 49 19 of
20. Introduction to Polymer \ @coderfaire \ #cf2014 needless to say, FEDs were quite excited 49 20 of
21. Introduction to Polymer \ @coderfaire \ #cf2014 49 21 of
22. Introduction to Polymer \ @coderfaire \ #cf2014 we’re getting close to building fully capable, synced, offline enabled, dynamic, real-time, componentized apps that do cool things like drag & drop elements, multiple file uploads, progress bars, and can access the file 49 22 of
23. Web workers Drag & drop Web storage http://www.html5rocks.com/en/ Introduction to Polymer \ @coderfaire \ #cf2014 Object.observe() Web sockets File API WebGL Web components Shadow DOM Multiple files 49 23 of
24. Web Components http://w3c.github.io/webcomponents/explainer/ Introduction to Polymer \ @coderfaire \ #cf2014 49 24 of
25. HTML5 Imports http://w3c.github.io/webcomponents/spec/imports/ Introduction to Polymer \ @coderfaire \ #cf2014 <link rel="import" href="/imports/eventList.html"> 49 25 of
26. Shadow DOM Introduction to Polymer \ @coderfaire \ #cf2014 http://w3c.github.io/webcomponents/spec/shadow/ 49 26 of
27. HTML Templates Introduction to Polymer \ @coderfaire \ #cf2014 http://www.w3.org/TR/html5/scripting-1.html#the-template-element <template> <style>input { color: orange; }</style> <input type="text"> </template> 49 27 of
28. Custom Elements Introduction to Polymer \ @coderfaire \ #cf2014 http://w3c.github.io/webcomponents/spec/custom/ <google-map lat="37.790" long="-122.390"></google-map> 49 28 of
29. Browser support Introduction to Polymer \ @coderfaire \ #cf2014 49 29 of
30. Browser support Introduction to Polymer \ @coderfaire \ #cf2014 49 30 of
31. Browser support Introduction to Polymer \ @coderfaire \ #cf2014 49 31 of
32. Browser support Introduction to Polymer \ @coderfaire \ #cf2014 49 32 of
33. Introduction to Polymer \ @coderfaire \ #cf2014 so let’s talk about Google Polymer! 33 of 49
34. Introduction to Polymer \ @coderfaire \ #cf2014 npm install http-server -g mkdir ~/dev/polymer && cd ~/dev/polymer wget https://github.com/Polymer/polymer-tutorial/archive/master.zip unzip master.zip cd polymer-tutorial-master http-server ./ Open http://localhost:8080/finished/ Getting Started 34 of 49
35. Introduction to Polymer \ @coderfaire \ #cf2014 everything is a component 35 of 49
36. Introduction to Polymer \ @coderfaire \ #cf2014 core components 36 of 49
37. Introduction to Polymer \ @coderfaire \ #cf2014 paper components an implementation of material design http://www.polymer-project.org/docs/elements/material.html 37 of 49
38. Introduction to Polymer \ @coderfaire \ #cf2014 to the code….. 38 of 49
39. Introduction to Polymer \ @coderfaire \ #cf2014 so what’s wrong with Google Polymer? a.k.a. web components 39 of 49
40. Introduction to Polymer \ @coderfaire \ #cf2014 it’s just a polyfill (but with yummy sugar) it’s not ready for production by the time it is, polyfills may be obsolete 40 of 49
41. Introduction to Polymer \ @coderfaire \ #cf2014 dependency hell dll hell 41 of 49
42. Introduction to Polymer \ @coderfaire \ #cf2014 Component A Component B Component C jQuery 1.8 jQuery 1.92 jQuery 1.11.1 42 of 49
43. Introduction to Polymer \ @coderfaire \ #cf2014 component dependency injection Possible Solutions a.k.a. hackathon projects developer tooling for testing dependencies 43 of 49
44. Introduction to Polymer \ @coderfaire \ #cf2014 it turtles all the way down 44 of 49
45. Introduction to Polymer \ @coderfaire \ #cf2014 possible security nightmare YOU EVIL 45 of 49
46. Introduction to Polymer \ @coderfaire \ #cf2014 Wrap Up 47 of 49
47. Introduction to Polymer \ @coderfaire \ #cf2014 48 of 49
48. Introduction to Polymer \ @coderfaire \ #cf2014 the future remember “the network is the computer” agents as clients? semantic profiles of components https://en.wikipedia.org/wiki/Agent-oriented_programming 46 of 49
49. Introduction to Polymer \ @coderfaire \ #cf2014 4 of 25 toys & further reading vulcanize | Build tool for imports / web components | https://github.com/Polymer/vulcanize state of web components | Browser progress on all dependant elements | http://jonrimmer.github.io/are-we-componentized-yet/ mozilla brick | Mozilla’s web component effort | http://mozbrick.github.io/ W3C custom elements polyfill| Alternate custom elements implementation|https://github.com/WebReflection/document-register-element 49 of 49