Introduction to Web Components & Polymer Workshop - U of I WebCon

1. Workshop: Introduction to Web Components & Polymer University of Illinois WebCon – April 4, 2018 John Riviello @JohnRiv Chris Lorenzo @Chiefcll

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

3. WEB COMPONENTS

4. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-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? 5 … [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 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

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

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

8. What Are Web Components? 8 Custom Elements •Provides a way for authors to build their own fully-featured DOM elements. <paper-tabs selected="0" scrollable> <paper-tab>The first tab</paper-tab> <paper-tab>Tab two</paper-tab> <paper-tab>The third tab</paper-tab> <paper-tab>Fourth tab</paper-tab> </paper-tabs> Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

9. What Are Web Components? 9 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

10. What Are Web Components? 10 HTML Imports Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

11. • Means to import custom elements - <link rel="import" href="paper-tabs.html"> • Componetize the HTML, CSS & JavaScript • Built-in deduplication What Are Web Components? 11 HTML Imports Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

13. What Are Web Components? 13 Templates Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

14. What Are Web Components? 14 • 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 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

16. What Are Web Components? 16 Shadow DOM Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

17. What Are Web Components? 17 •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 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

19. Can we even use these things?

20. 20 Source: https://www.webcomponents.org/ Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

21. Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer21 Source: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/

22. Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer22 Source: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/

23. What’s Google Polymer?

24. Google Polymer Project

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

26. 29 Source: https://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0975.html v0 v0 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

27. A Bit of History 30 v0.3 “Experimental” v0.5 “Still Learning” v0.8 “Beta” Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

28. 32 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 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

29. 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

30. 34 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

32. Polymer 3.0 (Preview)

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

34. Polymer 3.0 • Official release sometime in 2018 • The Polymer Modulizer will help with updating from 2 to 3 • Roadmap is available on GitHub at https://github.com/Polymer/project/blob/master/Roadmap.md

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

40. Let’s code!

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

42. Codelab: Build Google Maps using Web Components & No Code! 46 Codelab URL: tinyurl.com/comcast-polymer-map Relevant Map Data: •latitude="40.0934616" •longitude="-88.2370608" •start-address="I Hotel and Conference Center" •end-address="Virginia Theatre" Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

43. Takeaways!

44. Intro to Web Components & Polymer Framework/Library Sizes (with GZIP compression) Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer48 Source: http://minime.stephan-brumme.com React’s size is react + react-dom & gzipped via http://cnvyr.io/online Polymer’s range is v2.6.0 with just polymer-element.html, to polymer.html without the legacy imports. Bundled, minified & gzipped. 113.7kb 57.2kb 29.2kb30.4kb 12.8kb - 21.6kb 33.3kb v3.0.0 v1.6.9 v3.3.1v2.5.16 v2.6.0v16.3.0

45. Break

46. Codelab: Build Google Maps using Web Components & No Code! 50 Back early? Try these BONUS challenges! 1. Select “DRIVING” by default - Hint: check out the Properties listed at www.webcomponents.org/element/PolymerElements/ paper-tabs/elements/paper-tabs#properties 2. Improve the styles for the search box Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

47. Codelab Part 2: Build a Toast Web Components & With Code! tinyurl.com/comcast-toast

48. Let’s code!

49. Takeaways!

51. <script href="https://polaris.xfinity.com/polaris.js"></script> <xc-header tab="myaccount" is-authed="[[isAuthed]]" login-url="/login" sign-out-url="/logout" first-name="[[openidData.given_name]]" user-name="[[openidData.preferred_username]]"> </xc-header> <xc-footer></xc-footer>

52. Source: https://elix.org/

53. “Assemblers First, Craftspeople Second” - Ben Issa, 2016 Polymer Summit Intro to Web Components & Polymer Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer58 "Puzzle Pieces Jigsaw Piece Concept" is licensed under CC0 1.0 / Color adjusted from original "Blacksmith Forging Smith Forger" is licensed under CC0 1.0 / Color adjusted from original

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

55. Codelab: Build a Polymer 2.0 App From Scratch! 60 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 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer

56. Useful Links • WebComponents.org - webcomponents.org • Polymer Website - polymer-project.org • Polymer Slack - polymer-slack.herokuapp.com • Polymer 2.x Cheat Sheet - https://meowni.ca/posts/polymer-2-cheatsheet/ • How to use Polymer with Webpack - http://robdodson.me/how-to-use-polymer-with-webpack/ • PWAs with Polymer: a checklist - https://meowni.ca/posts/polymer-pwa-checklist/ • Custom Elements Everywhere - https://custom-elements-everywhere.com/ • Polycasts on YouTube - https://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN • 2017 Polymer Summit videos on YouTube - https://www.youtube.com/playlist?list=PLNYkxOF6rcIDP0PqVaJxqNWwIgvoEPzJi • End-to-End Polymer Apps - 2017 Chrome Dev Summit video - https://youtu.be/Wu2GCRkDecI • 2017 Google I/O Polymer videos on YouTube - https://www.youtube.com/playlist?list=PL_c6rbXV248du6m1VJABo32mP7sXWVb4m Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer61

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

Introduction to Web Components & Polymer Workshop - U of I WebCon

Estás leyendo una previsualización.

Eche un vistazo a continuación

Introduction to Web Components & Polymer Workshop - U of I WebCon

Más Contenido Relacionado

Presentaciones para usted (20)

Similares a Introduction to Web Components & Polymer Workshop - U of I WebCon (20)

Más reciente (20)