Web Components, le futur atout du développeur

WEB COMPONENTS Le futur super-atout du développeur 22/05/2014 Sylvain Zyssman
@sylzys

C’était comment avant ? Tags déclaratifs, encapsulés, significatifs. ! <form>,
<select>, <input> …

C’était comment avant ?

Et puis… Plugins Boilerplates Frameworks Widgets

Et puis…

! • Aller sur la doc (ex: Boostrap) • Copier-Coller
une snippet • Utiliser le widget ! • Créer son élément • Utiliser son élément • Le partager ! Mais çà, c’était avant…

Les Web Components, c’est quoi ? Web Components enable Web
application authors to define w idgets w ith a level of visual richness and interactivity not possible w ith CSS alone, and ease of composition and reuse not possible w ith script libraries today W3C

Les Web Components, c’est quoi ? 1er draft W3C le
22 mai 2012 ! 4 composants indépendants mais utilisables ensemble

Le modèle ! Templates Custom Elements Shadow DOM Imports HTML

TEMPLATES http://www.whatwg.org/specs/web-apps/ current-work/multipage/scripting-1.html#the- template-element

TEMPLATES The template element is used to declare fragments of
HTML that can be cloned and inserted in the document by script. WhatWG

TEMPLATES Tant que la template n’est pas activée : !
• Son contenu est parsé mais inerte (markup caché dans le DOM, pas de rendering) • Scripts non exécutés, images non loadées, audio non lu… • Le contenu « n’appartient pas » au document (querySelector() renvoie null) ! La template peut être insérée n’importe où dans <head>, <body>, <frameset>. On peut aussi l’utiliser comme « enfant » d’un <table> ou d’un <select> !

TEMPLATES Activer la template Templates imbriquées Activer la template «
de 1er niveau » n’active pas les sous-templates Les templates enfants doivent être activées manuellement

TEMPLATES Support Dude, where am I ?? http://caniuse.com/#search=html %20template

TEMPLATES Liens utiles • http://www.whatwg.org/specs/web-apps/current- work/multipage/scripting-1.html#the-template- element ! • http://dvcs.w3.org/hg/webcomponents/raw-file/
tip/spec/templates/index.html

CUSTOM ELEMENTS

Custom elements let authors define their own elements, including new
presentation and API, that can be used in HTML documents CUSTOM ELEMENTS W3C • Créer de nouveaux éléments DOM/HTML • Etendre des éléments existants • « Packager » des fonctionnalités custom au sein d’un tag • Etendre l’API des éléments DOM existants • Interagir grâce aux Lifecycle Callbacks

CUSTOM ELEMENTS L’élément créé doit ! • Avoir un nom
unique, contenant un « - » • Etendre un élément existant ! Les browsers « legacy » utiliseront l’élément étendu

CUSTOM ELEMENTS 8 I see a x-special-button I see a
x-special-button Wait, WHAT ? Isn’t it just a button ??

CUSTOM ELEMENTS Instanciation Déclaration HTML Opérateur new() Création de DOM
en JS

CUSTOM ELEMENTS Styles

CUSTOM ELEMENTS Lifecycle Callbacks CreatedCallback() : l’élément est créé ReadyCallback()
: l’élément est créé ET enregistré InsertedCallback() : l’élément a été inséré dans le document RemovedCallback() : l’élément a été supprimé du document

CUSTOM ELEMENTS Support * * En développement

CUSTOM ELEMENTS Liens utiles • http://w3c.github.io/webcomponents/spec/custom/ ! • h tt
p : //www. h t m l 5 ro c k s .co m /e n /t u tor i a l s / webcomponents/customelements/ ! • http://customelements.io/ ! • http://www.polymer-project.org/platform/customelements.html ! • http://bosonic.github.io/

SHADOW DOM

SHADOW DOM Eric Bidelman Shadow DOM gives us markup encapsulation,
style boundaries, and exposes (the web developers) the same mechanics browsers vendors have been using to implement their internal UI.

SHADOW DOM <input type="date">

SHADOW DOM <video>

SHADOW DOM Usage basique

SHADOW DOM Points d’insertion

SHADOW DOM Styles • Les styles déclarés dans le Shadow
DOM ont ce scope par défaut ! • Les règles CSS déclarés dans la page ne s’appliquent pas par défaut au Shadow DOM ! • On peut changer ce comportement avec shadow.applyAuthorStyles = true;

SHADOW DOM Support * * En développement http://caniuse.com/#search=shadow %20dom

SHADOW DOM Liens utiles • http://www.w3.org/TR/shadow-dom/ ! • http://html5-demos.appspot.com/shadowdom- visualizer
! • http://subs tantia l.com/blog/2014/02/05/ accessibility-and-the-shadow-dom/

IMPORTS HTML

IMPORTS HTML • <iframe> ! • Ajax ! • <script
type="text/html"> W3C HTML Imports are HTML documents that are linked as external resources from another HTML document.

IMPORTS HTML index.html import.html

IMPORTS HTML index.html polymer-ui-tabs.html Un import peut lui-même faire des
imports Un nouveau <pol ym er-secl ec tor> serai t directement utilisable par l’utilisateur via index.html

IMPORTS HTML Management des dépendances jquery.html import.html index.html jquery.html ne
sera récupéré et parsé qu’une seule fois

IMPORTS HTML Support * *Enable « experimental Web Platform features
» in chrome:flags Oh no… not again…

IMPORTS HTML Liens utiles • h tt p : //w
w w.w 3 . o r g / T R / 2 0 1 4 / W D - h t m l - imports-20140311/ ! • http://robdodson.me/blog/2013/08/20/exploring- html-imports/

ET AUJOURD’HUI ?

Support natif http://jonrimmer.github.io/are-we-componentized-yet • chrome:flags : « Enable Experimental WebKit
features » • chrome:flags : « Enable experimental JavaScript » • DevTools : « Show Shadow DOM» Chrome Canary

Polyfills Polymer, par Google http://www.polymer-project.org ! ! X-Tag, par Mozilla
http://www.x-tags.org

WEB COMPONENTS Bonnes pratiques • Namespace • Documentation • Test
• Pas de renvoi d’erreur • Inclusion des dépendances • … http://webcomponents.org/articles/webcomponents-best-practices/

WEB COMPONENTS Et l’accessibilité dans tout çà ? • http://www.pol
ymer-project.org/articl es/ accessible-web-components.html ! • http://www.brucelawson.co.uk/2014/notes-on- accessibility-of-web-components/ ! • http://subs tantia l.com/blog/2014/02/05/ accessibility-and-the-shadow-dom/

WEB COMPONENTS Liens utiles • http://webcomponents.org/ ! • https://github.com/webcomponents !
• https://developer.mozilla.org/en-US/Apps/ Tools_and_frameworks/Web_components ! • https://www.youtube.com/watch?v=e29D1daRYrQ ! • h tt p : //c o d i n g . s m a s h i n g m a g a z i n e . c o m / 2014/03/04/introduction-to-custom-elements/

Future is now. Be a part of it.

MERCI ! DES QUESTIONS ? ! Sylvain Zyssman @sylzys

Web Components, le futur atout du développeur

Web Components, le futur atout du développeur

More Decks by sylzys

Other Decks in Technology

Featured

Transcript