Polymer Web Components and Angular.js

The Polymer project from Google has recently taken the web developer community by storm. The framework provides an interface for building reusable Web Components and provides some awesome features like data-binding, property observation, and more!

Come join us as we take a look at the Polymer Project alongside Angular.js, how the two frameworks compare, and how we can make them work together!

Transcript

1. P O LY M E R W E B C O M P O N E N T S A N D A N G U L A R . J S J O S H C R O W T H E R
2. A B O U T M E • Tech Lead @ FamilySearch • Open Source Advocate • Node.js • Web Components • Polymer • Technology Enthusiast • Internet of Things • Web J O S H C R O W T H E R - @ J S H C R O W T H E
3. P R E S E N TAT I O N R O A D M A P
4. T O P I C S • Angular.js • What is it? • What features does it have? • Who uses it? • Web Components (The Spec) • Polymer • What is it? • What features does it have? • Who uses it? • How does it stack up against Angular.js? • Web Components/Polymer in Production • Tooling • Angular + Polymer Interop • Gotchas • Principles for interoperability
5. – J O S H C R O W T H E R ( M E ) “I’m going to be showing a lot of code!”
6. A N G U L A R . J S
7. W H AT I S A N G U L A R . J S ?
8. – A N G U L A R J S . O R G “Superheroic Javascript Framework”
9. – W 3 S C H O O L S ( PA R A P H R A S E D ) “…An extension of HTML”
10. – D A N WA H L I N ( A N G U L A R . J S I N S T R U C T O R ) “Full featured SPA framework”
11. – J O S H C R O W T H E R ( M E ) “It is a framework with everything you need to build an application!”
13. W H AT C A N A N G U L A R . J S D O ?
14. W E L L K N O W N F E AT U R E S • Data Binding • Dependency Injection • MV* Architecture
15. https://www.youtube.com/watch?v=01l9GNnf22o
16. F E AT U R E L I S T ( N O T C O M P R E H E N S I V E ) • Data Binding • MVC • Routing • Testing • DOM Access • Templates • Factories • Services • ViewModel • Controllers • Views • Directives • Dependency Injection • XHR • Accesibility • Animation • Cookie Integration • Sanitization • Internationalization • Event Handling • Watch
17. Angular does all the things!
18. A P P L I C AT I O N S B U I LT W I T H A N G U L A R . J S
19. https://www.madewithangular.com/
20. A great fit for many applications!
21. W E B C O M P O N E N T S
22. Web Components are part of the DOM spec
23. PA R T S O F T H E W E B C O M P O N E N T S S P E C • Custom Elements • HTML Imports • Shadow DOM • Template Element
24. Enables a developer to define new DOM elements. These elements can have a variety of functions and behavior that are defined by the developer. The elements can then be used anywhere a normal element could be (HTML/ CSS/JS). C U S T O M E L E M E N T S
26. H T M L I M P O R T S The “#include for the web,” HTML Imports are a way of including/ reusing HTML documents inside of other HTML documents.
28. A way of nesting multiple DOM trees inside one another while keeping them functionally and stylistically isolate. S H A D O W D O M
30. T E M P L AT E E L E M E N T A way to declare a non- parsed, fragment of HTML that can later be used to recreate identical copies of that HTML.
32. Demo http://jsbin.com/hudewo/edit?html,js,output
33. B R O W S E R S U P P O R T
34. You can do web components today!
35. https://madewithpolymer.com/
36. P O LY M E R
37. W H AT I S P O LY M E R ?
38. – J O S H C R O W T H E R ( M E ) “Opinionated, web component, library”
39. O P I N I O N AT E D Like all Libraries, Polymer has a recommended set of best practices, in addition to certain conventions you should use when building Web Components.
40. Polymer is not designed to meet all of your app building needs. Polymer wants to be good at one thing, building awesome web components. L I B R A RY
41. H O W D O I B U I L D A N A P P W I T H J U S T W E B C O M P O N E N T S ?
43. H O W D O E S P O LY M E R C O M PA R E T O A N G U L A R . J S ?
44. F E AT U R E L I S T ( N O T C O M P R E H E N S I V E ) • Data Binding • Templates • Event Handling • DOM Access • Directives (Partially) • ViewModel • MVC • Routing • Testing • Factories • Services • Controllers • Views • Dependency Injection • XHR • Accesibility • Animation • Cookie Integration • Sanitization • Internationalization • Watch
46. D E V E L O P I N G W I T H P O LY M E R
47. – T H E P O LY M E R P H I L O S O P H Y “Everything is an element”
48. “ E V E RY T H I N G I S A N E L E M E N T ”
49. • AJAX Calls • Service Layers • Layout • Theming • Data virtualization • … the list goes on and on E L E M E N T S F O R E V E RY T H I N G !
50. Live Coding Demo
51. P O LY M E R D E M O ( L I V E C O D I N G ) • Polymer Data Binding • Stylistic Isolation • Passing data to components
52. https://jsbin.com/wurotu/edit?html,output
53. C O M M U N I T Y C O M P O N E N T S
54. https://elements.polymer-project.org
55. https://customelements.io/
56. P R E PA R I N G W E B C O M P O N E N T S F O R P R O D U C T I O N
57. • Node/NPM (to get the rest of these tools) • Bower • Polyserve/Polymer CLI • Vulcanize T O O L I N G
58. B O W E R
59. - B O W E R . I O “A package manager for the web”
60. https://elements.polymer-project.org/elements/ paper-button
61. Demo
62. P O LY S E R V E
65. Demo
66. V U L C A N I Z E
67. B A D LY N E E D E D I F Y O U D O N ’ T H AV E H T T P / 2
71. Demo
72. P O LY M E R + A N G U L A R I N T E R O P
73. <github-user>
74. M A K I N G W E B C O M P O N E N T S W O R K W I T H A N G U L A R . J S
75. As long as the framework/library interfaces with the DOM, it’s easy!
76. Demo
77. G O T C H A S
78. P O LY M E R - > A N G U L A R 1 . X - D ATA B I N D I N G P R O PA G AT I O N https://plnkr.co/edit/dHiWackwY1Z44JOKFND6?p=preview https://github.com/robdodson/angular-custom-elements/
79. http://jcrowther.io/2015/05/26/using-polymer-webcomponents-with- angular-js/
80. A N G U L A R 1 . X - N G T R A N S C L U D E http://plnkr.co/edit/YLjTgiXxtIrE7hWs6mFP?p=preview https://github.com/angular/angular.js/issues/12410
81. P R I N C I P L E S F O R S TA B L E I N T E R O P
82. P R I N C I P L E S • Make your Web Components entirely self contained • Don't try to include and write angular inside of a Polymer component. • Don't try to utilize polymer template functions inside of an angular app (dom-if, dom-bind, dom-repeat) • Remember that Polymer and Angular represent two different app writing methodologies. You can accomplish just about anything using just one. Just because you can use them together doesn't mean you should!
83. Q U E S T I O N S ?
84. @ J S H C R O W T H E B L O G P O S T S L I D E D E C K http://tinyurl.com/zdq2qd9 https://speakerdeck.com/jshcrowthe