Web Components Introduction - A quick guide on …...Disclaimer Thefollowingpresentationhasbeenapprovedforopenaudiences only.Hypersensitivitytooccasionalprofanityrequirescoveringears.

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

Session Material

Slides, Code, Video

http://fihlon.ch/javacro172

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

Thank You! Questions?

Slides, Code, Video

http://fihlon.ch/javacro1717