Building Solutions with Polymer JS

What are web components? How can I use them? How can Polymer help?

Transcript

1. BUILDING SOLUTIONS WITH POLYMERJS ANDREW STACY
2. A LITTLE ABOUT ME
3. A LITTLE ABOUT ME I’M ANDREW STACY ▸ I’m a husband to my beautiful wife, Katie. ▸ I’ve been exploring web development since 2004. ▸ I’m really into craft breweries and coffee shops. ▸ Thai 9 is my favorite restaurant. ▸ I made a custom design for my mechanical keyboard. ▸ I extremely dislike The Last Jedi.
4. WHAT DO I DO?
5. SENIOR WEB DEV STRATACACHE
6. I DEVELOP DIGITAL MENU BOARDS
7. CUSTOMERS DIGITAL MENU BOARD
8. WHAT EXACTLY IS A DMB?
9. JOINED THE TEAM FEBRUARY 2016
10. PROBLEMS WE HAD
11. FRAGMENTED SYSTEM
12. CUMBERSOME DEVELOPMENT
13. FRAGMENTED CODE
14. UNSCALABLE BUILDS
15. SIMPLICITY IS THE ULTIMATE SOPHISTICATION. Steve Jobs BUILDING SOLUTIONS WITH POLYMERJS
16. REQUIREMENTS
17. SCALABILITY
18. MAINTAINABILITY
19. AGILITY
20. REUSABILITY
21. DEPLOYABILITY
22. USABILITY
23. COMPATIBILITY
24. SO, WHY POLYMER?
25. MODULARITY WE NEED
26. Most frameworks solve the problems of a traditional web application. Most JS frameworks tend to be engineered with a focus on CRUD style apps (including Polymer).
27. Some of the major players of these styles of frameworks are Angular, Ember, React, and Vue. They handle the needs of CRUD in different ways but with the same end result.
28. REMEMBER THE GOLDEN GUN?
29. I’M KIND OF A BIG DEAL. FRAMEWORKS BE LIKE
30. There is no Golden Bullet. Your framework of choice is just your framework of choice.
31. Whatever your use case is, it’s the people involved that ultimately “decide” how good the end product truly is, whether they are developers, designers, or management. Each use-case is unique and comes with its own challenges.
32. Frameworks are for “greasing the wheels” and giving your development team a standard springboard that they can all use and be on the same page with.
33. Choose the framework that best enables YOU to solve your problem.
34. WHAT WERE WE TALKING ABOUT AGAIN? OK, I GET IT.
35. MODULARITY WE NEED
36. WE CHOSE POLYMERJS
37. WHAT IS POLYMERJS?
38. “POLYMER IS A JAVASCRIPT LIBRARY THAT HELPS YOU CREATE CUSTOM REUSABLE HTML ELEMENTS, AND USE THEM TO BUILD PERFORMANT, MAINTAINABLE APPS.” Google BUILDING SOLUTIONS WITH POLYMERJS
39. SOME REASONS WHY WE CHOSE POLYMERJS
40. YOU’VE FOUND WEB COMPONENTS!
41. POLYMER IS BASED ON WEB COMPONENTS
42. WEB COMPONENTS ARE NATIVE
43. WEB COMPONENTS ARE MODULAR BY NATURE
45. NASTY!
46. Ever found yourself researching JS Conflicts?
48. WEB COMPONENTS PACKAGE YOUR HTML, JS, AND CSS TOGETHER.
49. SHADOW DOM
50. SHADOW DOM REMOVES THE BRITTLENESS OF BUILDING WEB APPS. THE BRITTLENESS COMES FROM THE GLOBAL NATURE OF HTML, CSS, AND JS. Eric Bidelman, Google BUILDING SOLUTIONS WITH POLYMER JS
51. WHAT IS THE SHADOW DOM?
52. A CASTLE WALL THE SHADOW DOM
53. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM Shadow DOM
54. The Shadow Host is the Element that you see in your normal document flow like an <hr> or a <video>.
55. The Shadow Tree is a DOM in and of itself. It’s like a document in an <iframe> without any of the nastiness.
56. The Shadow Boundary is what separates the Shadow DOM from the Main Document DOM.
57. The Shadow Root is the like the “document” root of the component. Every child inherits from it.
58. Creating a Shadow DOM is Easy
59. CUSTOM ELEMENTS
60. The Custom Element spec provides developers with a way of defining new elements that the browser can recognize.
61. Let’s Make a Custom Element
62. HTML TEMPLATE
63. The HTML Template spec gives us a way of declaring fragments of markup that are “inactive” at page load but can be “activated” and used at a later time.
64. Let’s Write a Template Inspection!
65. Let’s Use Our Template Inspection!
66. HTML IMPORTS???
67. The HTML Import spec was controversial among the W3C. Google championed it and prematurely implemented it with Polymer through the use of polyfills. Polymer 3.0 makes use of native JS dynamic imports.
68. Write Some HTML to Import
69. Let’s Import some HTML Inspection!
70. A LOT TO ABSORB! THAT WAS
71. POLYMER TO THE RESCUE!
72. By using the Polymer framework we get all of the great, native aspects of web components in a simplified format. But that’s not all!
73. BUILDING SOLUTIONS WITH POLYMERJS ▸ Simplified creation of web components. ▸ One-Way and Two-Way data binding. ▸ Mediator Pattern for data flow. ▸ Data observers. ▸ Template helpers like <dom-repeat> and <dom-if>. ▸ A huge library of pre-made components. ▸ And more… Benefits
74. MEDIATOR PATTERN
75. Component LOGIC API CHILD 1 CHILD 2
76. We can use the mediator pattern to construct an application. At the top we have what we call the “master component” at Stratacache and what the Google Polymer team calls the “shell.”
77. At Stratacache we break down our app into 3 classes.
78. FOUNDATION
79. Foundation components include master and layout.
80. REGION
81. Base components are the smallest and usually are the building blocks of regions.
82. BASE
83. Base components are the smallest and usually are the building blocks of regions.
84. Let’s look at a Polymer Component
85. @ajstacy06 andrewstacy.com