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.

An Introduction to Web Components

An introduction to Web Components and Polymer as a path for modernizing Notes applications.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

  • Be the first to like this

An Introduction to Web Components

  1. 1. An Introduction To Web Components Kito Mann Senior Web Developer Keith Strickland Co-Founder Friday – 9:00 AM
  2. 2. Keith Strickland Co-Founder keith@redpillnow.com @keithstric redpillnow.comwww Atlanta, Georgia keithstric.me
  3. 3. Kito Mann Senior Web Developer kito@redpillnow.com @kito99 redpillnow.comwww Richmond, Virginia kitomann
  4. 4. Challenge the way you think about Notes data
  5. 5. Change the way you approach your next project
  6. 6. Understand the potential of web components
  7. 7. UI Components are Everywhere
  8. 8. UI Components are Everywhere
  9. 9. UI Components are Everywhere Component models have been popular since the early 90s • LotusScript/Visual Basic • Delphi • PowerBuilder • WinForms • Windows Presentation Framework • ASP.NET • Swing • JavaFX • JavaServer Faces/XPages
  10. 10. UI Components are Everywhere In the browser, component suites and frameworks must invent their own models • YUI • KendoUI • Bootstrap • jQuery UI • Infragistics • AngularJS • React
  11. 11. Why do We Build Components? • Reusable UI functionality – Within a single application – Across multiple applications You can focus on the core application functionality
  12. 12. Problem: HTML Markup Doesn't Support Components
  13. 13. We Work with Abstractions Programming model may be componentized, but native markup is not
  14. 14. JSFDataTable <p:dataTable var="car" value="#{dtPaginatorView.cars}" rows="10” paginator="true” paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}” rowsPerPageTemplate="5,10,15"> <p:column headerText="Id"> <h:outputText value="#{car.id}" /> </p:column> <p:column headerText="Year"> <h:outputText value="#{car.year}" /> </p:column> <p:column headerText="Brand"> <h:outputText value="#{car.brand}" /> </p:column> <p:column headerText="Color"> <h:outputText value="#{car.color}" /> </p:column> </p:dataTable>
  15. 15. BootstrapDropdwons <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="- 1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="- 1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="- 1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="- 1" href="#">Separated link</a></li> </ul> </div>
  16. 16. jQueryUITabs <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> ... </div> <div id="tabs-2"> ... </div> <div id="tabs-3"> ... </div>
  17. 17. Web Components bring a native component model to HTML
  18. 18. What is a Web Component?
  19. 19. WhatisaWeb Component? <paper-action-dialog backdrop autoCloseDisabled layered="false"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <paper-button affirmative autofocus>Tap me to close </paper-button> </paper-action-dialog>
  20. 20. Works together Works the same Works anywhere
  21. 21. Demo: Custom Elements
  22. 22. CustomElements <simple-counter class="counter" start="10"/>
  23. 23. CustomElements class SimpleCounter extends HTMLElement { constructor() { super(); this.count = 0; this.timer = null; this.innerText = "Simple Counter"; } connectedCallback() { this.count = Number(this.getAttribute("start")) || 0; this.start(); }; disconnectedCallback() { this.stop(); }; attributeChangedCallback(attr, oldVal, newVal) { if (attr == "start") { this.count = Number(newVal); } } adoptedCallback() { console.log("Someone adopted me!", this); }
  24. 24. CustomElements start() { var _self = this; this.timer = setInterval(function() { _self.count = _self.count + 1; _self.update(_self.count); }, 2000); } stop() { clearInterval(this.timer); this.timer = null; } update(counterValue) { this.innerHTML = counterValue; } } window.customElements.define('simple-counter', SimpleCounter);
  25. 25. HTMLTemplates <template id="template"> <div id="inner-div"> <div>Inside the template, baby!</div> </div> </template> <script> var templateClone = document.importNode( document.querySelector("#template").content, true); var body = document.querySelector("body"); body.appendChild(templateClone); var templateClone2 = document.importNode( document.querySelector("#template").content, true); body.appendChild(templateClone2); </script>
  26. 26. HTML Templates
  27. 27. HTMLImports:using Bootstraptoday <head> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.m in.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.j s"></script> <![endif]--> </head> <body> ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11. 2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body>
  28. 28. HTMLImports: bootstrap.html <link href="css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min. js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script> <![endif]--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j query.min.js"></script> <script src="js/bootstrap.min.js"></script>
  29. 29. HTMLImports: ImportingBootstrap <head> ... <link rel="import" src="imports/bootstrap.html"/> </head> <body> ... </body>
  30. 30. Demo: Shadow DOM
  31. 31. ShadowDOM class DeluxeCounter extends SimpleCounter { constructor() { super(); this.innerHTML = ''; this.counterDiv = document.createElement('div'); this.counterDiv.innerText = "Deluxe Counter"; var root = this.createShadowRoot(); root.appendChild(this.counterDiv); var _self = this; this.onclick = function() { if (_self.timer == null) { _self.start(); } else { _self.stop(); } } } ... }
  32. 32. Browser Support • Chrome/Android and Opera support everything • IE doesn't support anything • All other browsers support HTML Templates • Shadow DOM and Custom Elements in development for Firefox and Safari – "Under consideration" for Edge; likely to be added later • HTML Imports not supported in other browsers – "Under consideration" for Edge; not planned in Firefox and Safari
  33. 33. polyfill [pol-ee-fill] noun In web development, a polyfill (or polyfiller) is downloadable code which provides facilities that are not built into a web browser. It implements technology that a developer expects the browser to provide natively, providing a more uniform API landscape. For example, many features of HTML5 are not supported by versions of Internet Explorer older than version 8 or 9, but can be used by web pages if those pages install a polyfill. Web shims and HTML5 Shivs are related concepts. -- Wikipedia
  34. 34. Closing the Browser Gap Browser Support for webcomponents.js
  35. 35. Closing the Browser Gap Browser Support for X-Tag
  36. 36. Writing Web Components Polymer
  37. 37. Polymer • Open source library for building web components • Simplified programming model • Two-way data binding • Declarative event handling • Behaviors (mixins) • Property observation • Extensive set of tools – Build, testing, designer, etc. • Used in over 4 million web pages
  38. 38. Polymer • Developed by and used internally by Google • Used in over 400 Google projects – Over 1 billion users – Over 4,000 custom web components – Examples: Chrome, Play, Fi, YouTube Gaming, and Translate, Patents • Heavily promoted – Polymer Summit – Polycasts
  39. 39. Web Components in the Wild • Component Suites – Polymer Element Catalog – Bosonic – GE Predix UI – Strand Web Components – Vaadin Elements • Directory – customelements.io • Uplabs (inspiration)
  40. 40. Polymer Element Catalog Web components built by Google using Polymer
  41. 41. Demos: Polymer Element Catalog customelements.io
  42. 42. Web Components in the Wild • Companies – GE – Comcast – Atlassian – GitHub – Salesforce • Non-Google Applications – USA Today Rio Olympic Site – simpla.io – Red Pill DIG
  43. 43. Demo: Red Pill DIG

×