Workshop: Introduction to Web Components & Polymer

1. Workshop: Introduction to Web Components & Polymer Little Rock Tech Fest - October 5, 2017 John Riviello @JohnRiv Chris Lorenzo @Chiefcll

2. Workshop materials are available at: http://tinyurl.com/ lrtf-polymer If you haven’t already, go there now :-)

3. WEB COMPONENTS

4. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer4 … a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps... Source: https://www.webcomponents.org/introduction

5. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer5 … [built] on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. Source: https://www.webcomponents.org/introduction

6. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer6 4 Specs

7. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer7 Custom Elements

8. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer8 Custom Elements •Provides a way for authors to build their own fully-featured DOM elements. - <xc-tab>Your Wifi</xc-tab>

9. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer9 HTML Imports

10. • Means to import custom elements - <link rel="import" href="../xc-tab/xc-tab.html"> • Componetize the HTML, CSS & JavaScript • Built-in deduplication What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer10 HTML Imports

11. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer11 Templates

12. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer12 • Used to declare fragments of HTML - <template id="tab"> <div class="tab-content"></div> </template> • The element itself renders nothing • Can be cloned and inserted in the document via JavaScript, which will quickly render the content Templates

13. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer13 Shadow DOM

14. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer14 •Allows you to take a DOM subtree and hide it from the document scope •Hides CSS styles as well •Common examples from HTML5 include: <select>, <video>, & <input type="date"> Shadow DOM

15. Can we even use these things?

16. Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer16 Source: https://www.webcomponents.org/

17. What’s Google Polymer?

18. Google Polymer Project

19. A Bit of History Declaration of Independence (1819), by John Trumbull is available in the US Public Domain. Color adjusted from original

20. Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer23 Source: https://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0975.html v0 v0

21. A Bit of History Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer24 v0.3 “Experimental” v0.5 “Still Learning” v0.8 “Beta”

22. Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer26 Sources: https://developers.google.com/web/fundamentals/getting-started/primers/customelements https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom Custom Elements v1 Shadow DOM v1

23. Polymer 2.0 • Uses the v1 specs • ES6 class syntax to define a Custom Element • Introduced hybrid element syntax, which works in Polymer 2.x & ^1.7

24. Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer28

26. Polymer 3.0 (Early Access Preview)

27. Polymer 3.0 • ES Modules instead of HTML Imports • Templates (HTML & CSS) move to JS • Install components via NPM (with Yarn) instead of Bower

28. Polymer 3.0 • Official release won’t be until Dec ’17 • At least 1 browser must natively support dynamic imports: import(`module.js`).then(module => { module.doSomething(); }) • Tool will help with updating from 2 to 3

33. Polymer 2.0 https://www.polymer-project.org/2.0/ docs/devguide/feature-overview

34. Let’s code!

35. Codelab: Build Google Maps using Web Components & No Code! tinyurl.com/lrtf-polymer-map

36. Codelab: Build Google Maps using Web Components & No Code! Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer40 Steps 3-5 - Relevant Map Data: •latitude="34.7489045" •longitude="-92.2711374" •start-address="Statehouse Convention Center" •end-address="Rock Town Distillery" Step 5: item-icon becomes slot="item-icon"

37. Codelab: Build Google Maps using Web Components & No Code! Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer41 Step 6 - Polymer 2.x Hybrid dom-bind syntax: <dom-bind> <template is="dom-bind">...</template> </dom-bind> More info: https://www.polymer-project.org/2.0/docs/upgrade #convert-template-extension-elements-at-the-document-level

38. Codelab: Build Google Maps using Web Components & No Code! Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer42 Step 7 - Polymer 2.x Hybrid custom-style syntax: <custom-style> <style is="custom-style">...</style> </custom-style> More info: https://www.polymer-project.org/2.0/docs/upgrade #wrap-custom-style-elements

39. Codelab: Build Google Maps using Web Components & No Code! Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer43 BONUS Challanges! 1. Select “DRIVING” by default - Hint: check out the Properties listed www.webcomponents.org/element/PolymerElements/ paper-tabs/elements/paper-tabs 2. Improve the styles for the search box

40. Demo: Little Rock Tech Fest Speaker Info As A Web Component <lrtf-speaker> </lrtf-speaker>

41. Codelab: Build a Polymer 2.0 App From Scratch tinyurl.com/lrtf-polymer-app

42. Codelab: Build a Polymer 2.0 App From Scratch! Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer46 Step 5 Notes: 1. No need to bower install throughout this Codelab 2. The 2nd time it has you preview the app, the flag WILL appear because the SVG is already in your project 3. You can skip the “Set up data for the app” section since the data is already in your project

43. Codelab: Build a Polymer 2.0 App From Scratch! Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer47 Step 7 Notes: When you’re asked to look for this code: <paper-button id="optionA">Brazil</paper-button> <paper-button id="optionB">Uruguay</paper-button> The code is actually: <paper-button id="optionA" class="answer">Brazil</paper-button> <paper-button id="optionB" class="answer">Uruguay</paper-button>

44. Codelab: Build a Polymer 2.0 App From Scratch! Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer48 BONUS Challenges! 1. Add some :focus styles 2. Fix the 404 for /data/svg/.svg 3. Have the “ANOTHER!” button NOT reload the page 4. Write Tests 5. Progressive Web App For the answers, see the commits to https://github.com/ComcastSamples/polymer-whose-flag/commits/steps

45. Useful Links •WebComponents.org - webcomponents.org • Polymer Website - polymer-project.org • Polymer Slack - polymer-slack.herokuapp.com • PWAs with Polymer: a checklist - https://meowni.ca/posts/polymer-pwa-checklist/ • How to use Polymer with Webpack - http://robdodson.me/how-to-use-polymer-with-webpack/ • Polycasts on YouTube - https://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN - Top recommended Polycast to watch: Data Binding 101 - https://youtu.be/1sx6YNn58OQ?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN • 2017 Polymer Summit videos on YouTube - https://www.youtube.com/playlist?list=PLNYkxOF6rcIDP0PqVaJxqNWwIgvoEPzJi • 2017 Google I/O Polymer videos on YouTube - https://www.youtube.com/playlist?list=PL_c6rbXV248du6m1VJABo32mP7sXWVb4m •Web Components & Polymer - 2016 Chrome Dev Summit video - https://youtu.be/Ihdp63FaRKA Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer49

46. Thank you! John Riviello @JohnRiv Chris Lorenzo @Chiefcll