Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Workshop: Introduction to Web Components & Polymer

349 views

Published on

From Little Rock Tech Fest 2017

With the updates to iOS and Android phones released earlier this year, Web Components are now supported natively. With libraries such as Polymer that are built on top of Web Components, it is now possible to easily create fast Progressive Web Apps (PWAs) without the overhead of a framework. In this workshop, we'll begin with a brief introduction to Web Components and Polymer, and then dive into hands-on experiences with the core aspects of Web Components: the <template> tag, Custom Elements, and the Shadow DOM.

This workshop assumes an understanding of HTML, CSS & JavaScript. No prior experience with Web Components, Polymer, or any library or framework (Web Components or otherwise) is required.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Workshop: Introduction to Web Components & Polymer

  1. 1. Workshop: Introduction to Web Components & Polymer Little Rock Tech Fest - October 5, 2017 John Riviello @JohnRiv Chris Lorenzo @Chiefcll
  2. 2. Workshop materials are available at: http://tinyurl.com/ lrtf-polymer If you haven’t already, go there now :-)
  3. 3. WEB COMPONENTS
  4. 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. 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. 6. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer6 4 Specs
  7. 7. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer7 Custom Elements
  8. 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. 9. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer9 HTML Imports
  10. 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. 11. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer11 Templates
  12. 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. 13. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer13 Shadow DOM
  14. 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. 15. Can we even use these things?
  16. 16. Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer16 Source: https://www.webcomponents.org/
  17. 17. What’s Google Polymer?
  18. 18. Google Polymer Project
  19. 19. A Bit of History Declaration of Independence (1819), by John Trumbull is available in the US Public Domain. Color adjusted from original
  20. 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. 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. 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. 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. 24. Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer28
  25. 25. Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer29
  26. 26. Polymer 3.0 (Early Access Preview)
  27. 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. 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
  29. 29. Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer33
  30. 30. Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer34
  31. 31. Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer35
  32. 32. Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer36
  33. 33. Polymer 2.0 https://www.polymer-project.org/2.0/ docs/devguide/feature-overview
  34. 34. Let’s code!
  35. 35. Codelab: Build Google Maps using Web Components & No Code! tinyurl.com/lrtf-polymer-map
  36. 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. 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. 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. 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. 40. Demo: Little Rock Tech Fest Speaker Info As A Web Component <lrtf-speaker> </lrtf-speaker>
  41. 41. Codelab: Build a Polymer 2.0 App From Scratch tinyurl.com/lrtf-polymer-app
  42. 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. 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. 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. 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. 46. Thank you! John Riviello @JohnRiv Chris Lorenzo @Chiefcll

×