Web Components: Introduction and Practical Use Cases

Web Components: Introduction and Practical Use Cases

• 1.
  WEB COMPONENTS: INTRODUCTION AND PRACTICALUSE CASES SUMIT AMAR D I R E C T O R O F E N G I N E E R I N G E L E C T R O N I C A R T S 1
• 2.
  AGENDA Brief Introduction toHTML5 Web Components – what and why Custom Elements Templates HTML Imports Shadow DOM Summary and Q&A 2
• 3.
  HTML5 INTRO Combination ofJavaScript APIs, CSS 3, and HTML Some Useful JavaScript APIs  Audio and Video playback  Web RTC (getUserMedia, DataChannel)  Web workers  Web sockets  Offline Capabilities (Local storage, Application Cache, Session Storage, Indexed DB)  History API  User Timing API (for Performance)  Drag and Drop 3
• 4.
  WEB COMPONENTS Enable creatingreusable components Reduce dependency on external frameworks Natively available in some browsers Available as Polyfills for cross browser support Enhance semantics of the application 4
• 5.
  WEB COMPONENTS Custom Elements Templates HTMLImports Shadow DOM (Document Object Model) 5
• 6.
  CUSTOM ELEMENTS Enhance markupreadability Add Semantics in Markup for SEOs Allow scripting to handle DOM changes Allow extending from existing HTML elements 6
• 7.
  Demo (Custom Elements) 7
• 8.
  TEMPLATES Allow in-DOM templatecreation Template markup remains unparsed Template can be cloned and instantiated Scripting can be used to inject dynamic data 8
• 9.
  Demo (Templates) 9
• 10.
  HTML IMPORTS Allows combiningmultiple HTML docs Allows Modularization of HTML markup Reduces dependency on server side ops Reduces markup size Encourages on-demand markup downloads Blocks rendering but not parsing. (Use of async) Requires CORS (Access-Control-Allow-Origin) configuration 10
• 11.
  Demo (HTML Imports) 11
• 12.
  SHADOW DOM Allows hidingcomplex DOM from the user Allows defining clean custom controls Allows developer to debug when required Custom elements + Shadow DOM = Powerful and concise components P K E C O N S U L T I N G 2 0 1 4 12
• 13.
  Demo (Shadow DOM) P KE C O N S U L T I N G 2 0 1 4 13
• 14.
  SUMMARY Use custom elementsto create semantic markup Use templates to reduce dependency on external frameworks Use HTML Imports to modularize markup Use Shadow DOM to hide complexity P K E C O N S U L T I N G 2 0 1 4 14
• 15.
  RESOURCES Sumit Amar -sumit@amar.co.in , @ChiefCoder Code examples – http://www.amar.co.in/code/webcomponents.zip https://developer.mozilla.org/en- US/docs/Web/Web_Components/Custom_Elements http://w3c.github.io/webcomponents/spec/imports/ http://www.html5rocks.com/en/tutorials/webcomponents/customelements/ P K E C O N S U L T I N G 2 0 1 4 15
• 16.
  THANK YOU S UM I T A M A R D I R E C T O R O F E N G I N E E R I N G E L E C T R O N I C A R T S 16