web components introduction - a quick guide on …...disclaimer...
TRANSCRIPT
Web Components IntroductionA quick guide on how to create and use Web Components
Marcus Fihlon, McPringleMay 11, 2017
Software Engineer | Agile Coach | Lecturer | Speaker | Author
Disclaimer
The following presentation has been approved for open audiencesonly. Hypersensitivity to occasional profanity requires covering ears.
All logos, photos etc. used in this presentation are the property oftheir respective copyright owners and are used here for educationalpurposes only. Any and all marks used throughout this presentationare trademarks of their respective owners.
The presenter is not acting on behalf of CSS Insurance, neither as anofficial agent nor representative. The views expressed are thosesolely of the presenter.
Marcus Fihlon disclaims all responsibility for any loss or damagewhich any person may suffer from reliance on this information orany opinion, conclusion or recommendation in this presentationwhether the loss or damage is caused by any fault or negligence onthe part of presenter or otherwise.
1
About Me
Software EngineerCSS Insurance, Open Source Software
Agile CoachCSS Insurance
LecturerTEKO Swiss Technical College
SpeakerConferences, User Groups, Meetups
AuthorArticles, Books
www.fihlon.ch | github.com | hackergarten.net | jug.ch
3
Agenda
Intro
Specifications
Live Coding
Wrap-up
4
Intro
Intro
“Web Components are a set of standards currently beingproduced by Google engineers as a W3C specification thatallow for the creation of reusable widgets or components inweb documents and web applications. The intention behindthem is to bring component-based software engineering to theWorld Wide Web. The components model allows forencapsulation and interoperability of individual HTMLelements.”
Wikipedia
5
Intro
New W3C StandardAllows reuse of componentsThe standard is divided into four specifications:
TemplatesShadow DOMCustom ElementsImports
A Web Component uses well-known technologies:HTMLCSSJavaScript
No need of a framework or libraryExcept an optional polyfill to support older browsers
6
Specifications
Templates
Defines HTML parts to be reused any number of timesDefine reusable parts directly inside of HTML documentsIs defined by the new <template> tagCan be added to the DOM using JavaScriptUnlimited number of templates possible
1 <template id="my-template">2 <div>3 <img src="ok.png" width="20" height="20" />4 </div>5 </template>
7
Shadow DOM
Create an independent sub-DOMNot accessable from “outside” of the sub-DOMAvoids DOM collisions between componentsNo side-effects of CSS or JavaScript between componentsCan be added to the DOM using JavaScriptUnlimited number of Shadow DOMs possible
8
Custom Elements
Connect template and shadow DOMDefine reusable componentsCreate own tags to produce readable HTMLÕ own tags need to include a hyphenApply styles inside of the custom elementUse JavaScript for interactionThrows lifecycle events:Õ created, ready, attached, detached, attributeChanged
1 <google-hangout-button></google-hangout-button>
9
Imports
Outsourcing of HTML partsCreate own HTML files for components (higher reusability)Add components to HTML documents using imports
1 <link rel="import" href="google-chart.html">2 <google-chart type="column" data="chart.json">
10
Live Coding
Screenshot of Demo Application
11
Components of Demo Application
12
Components of Demo Application
13
Components of Demo Application
14
Wrap-up
Conclusion
Web Components…
are declarative and reuseableare combinable and extensibleare interoperational – DOM = common demoninatorallow encapsulation – scopingincrease productivity and accessibilityare standardsupport thinking in components
15
Links
W3C Web Components Specificationhttps://w3.org/standards/techs/componentsW3C Introduction to Web Componentshttp://w3.org/TR/components-intro/Informations about Web Componentshttp://webcomponents.orgDirectory of custom elementshttps://customelements.ioPolymer Projecthttps://www.polymer-project.org
16
