2014 03-25 - GDG Nantes - Web Components avec Polymer
Upcoming SlideShare
Loading in...5

2014 03-25 - GDG Nantes - Web Components avec Polymer






Total Views
Slideshare-icon Views on SlideShare
Embed Views



2 Embeds 53

http://mj89sp3sau2k7lj1eg3k40hkeppguj6j-a-sites-opensocial.googleusercontent.com 31
https://twitter.com 22



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    2014 03-25 - GDG Nantes - Web Components avec Polymer 2014 03-25 - GDG Nantes - Web Components avec Polymer Presentation Transcript

    • By @LostInBrittany Web Components avec Polymer
    • Spaniard lost in Brittany, Java developer, dreamer and all-around geek ● Co-founder of the FinistJUG, GDG Finistère & BreizhBeans ● Senior Developer at Cityzen Data http://lostinbrittany.org/ +Horacio.Gonzalez @LostInBrittany Horacio Gonzalez
    • Introduction Because I love to tell old stories
    • Warning : I’m a web developer ● And when I tell stories, I do it from the webdev POV So please, thick-client devs, allow me some oversimplifications Image : TylkoMrok.pl
    • At the beginning we had the thick client ● Widget : basic building blocks of your UI ○ Encapsulation ○ Reutilisation In thick client you create your UI by widget assembling Image : Wikipedia
    • Web development was unlike thick-client ● HTML/CSS/JS didn't support widgets ○ Pages were the building blocks Web apps we're page oriented Image : IBM
    • GWT gave back widgets to web devs ● GWT uses a thick-client-like development paradigm ○ Widgets, properties, events GWT web apps are widget oriented : Single-page apps Image : GWT Mail sample app
    • Single-page apps are a current trend ● From UX POV single-page apps are richer ○ But making them without widgets is painful HTML/CSS/JS needed a widget standard Image : Ken Schultz comedy juggler
    • Web Components Reinventing the wheel... and this time making it round
    • Web Components : a W3C standard ● Web Components standard is being worked at W3C ○ We all know what this means ■ Clue : HTML5 They will work for years, bickering and fighting Browsers and devs will use the WiP document
    • Example : the Google+ button ● If you want to place a Google+ button in your page
    • Example : the Google+ button ● And what I would like is simple
    • Example : the Google+ button ● To be fair, Google already makes it simpler ● They create directives with JS to emulate components ○ AngularJS approach ○ Respecting the spirit of the future standard ○ Working in current browsers
    • Another example : the RIB ● If you're French, you know what a RIB is ○ A banking account identification number ● To show a RIB in HTML: ○ All styling & surface control must be done elsewhere by CSS and JS ● What I would like ○ A semantic tag ○ With encapsulated styling and surface controlling
    • But we already can do that! ● In most modern frameworks we can already do components, in a way or another ○ And all those ways are different! ○ Using different JavaScript libraries ○ Almost no component sharing between frameworks ● W3C's works aim to make a standard way ○ Supported natively by all browsers ○ Allowing for component reuse
    • The 5 pillars of the Web Components ● Templates ● Shadow DOM ● Custom Elements ● Decorators ● Imports
    • Templates The clone wars Image : Instructables
    • Templates ● A reusable model ○ Contains markup intended to be used later ○ Create the elements in page by cloning the template
    • Templates before ● How did we do templating before ○ Using or ○ Putting it inside a ■ Type unknown to browser, it isn't interpreted ■ Markup easily recovered via .innerHTML and reused ■ Approach used by many template engines
    • ● Uniformising those approach with a new tag ● Content inside the tag is parsed but not interpreted ○ HTML not shown ○ Resources are not loaded ○ Scripts not executed The tag
    • Template instantiation ● Using JavaScript
    • Shadow DOM Join the shadowy side, young padawan Image: Springfield Punx
    • Encapsulation ● Each component should have ○ Public interface ○ Private inner code ● When using a component ○ You manipulate the interface only ○ You don't need to know anything about inner code ○ No conflict between inner code and outside code
    • Encapsulation before Shadow DOM ● Image : Star Trek the Next Generation
    • Browsers already use encapsulation ● Considerer this simple slider ○ How is is done inside? ■ With HTML, CSS and JS! ○ It has a movable element, I can recover it's position ■ Why cannot see it in DOM tree? ● Browsers hide DOM sub-trees for standard components ○ They have a public interface and hidden inner code That's Shadow DOM! Image: Springfield Punx
    • My name is DOM, Shadow DOM ● Shadow DOM: ability of the browser to ○ Include a DOM subtree into the rendering ○ But not into the main document DOM tree ● In Chome you can see the Shadow DOM ○ By activating the option in Inspector
    • Looking into the Shadow ● For the slider :
    • Shadow DOM is already here ● Browser use it everyday... ○ For their inner needs ○ Not exposed to developers ● Web Components makes Shadow DOM available ○ You can use it for your own components Image: Springfield Punx
    • Using Shadow DOM ● There is a host element ○ A normal element in DOM tree ● A shadow root is associated to the host ○ Using the createShadowRoot method ○ The shadow root is the root of the hidden DOM tree Image: W3C
    • Using Shadow DOM ● Quick and dirty Shadow DOM ○ DOM tree only shows ○ Rendered HTML shows ○ Markup in is ugly
    • Using Shadow DOM ● Shadow DOM with templates
    • ● HTML elements are compositional ○ You can put a button inside a table ● Shadow DOM elements need to be compositional ○ Insertion points in the Shadow DOM Separate content from presentation … Result :
    • ● More granularity can be added : Separate content from presentation … … Result : Why does it work for author? Invitation model, first match
    • ● CSS defined in the Shadow DOM remains there ● Outside styles don't affect Shadowed content This is a title And this is widget title Widget content here Shadow DOM et CSS
    • Shadow DOM et CSS ● Styling the host element : @host My Button
    • Shadow DOM et CSS ● Inheriting and resetting styles in Shadow DOM content ○ ■ false (default) : properties are inherited ■ true : inheritable properties are reset to initial ○ ■ false (default) : author styles aren't applied ■ true: author styles bleed into the content ● widget theming
    • Shadow DOM et CSS ● Inheritance Cheat Sheet Image : HTML5 Rocks' Web Components 201
    • Example
    • Custom Elements Elemental mayhem ! Image : The Brick Blogger
    • Custom elements : the tag ● An element encloses template, lifecycle and behaviour ○ Templates done with tag
    • ● Livecycle defined with 3 callbacks ○ : called after the element is created ○ : called after the element is inserted into a document ○ : called after the element is removed Custom elements : the tag
    • ● If an element extends another, instantiation with is keyword Custom elements : instantiation ● If an element doesn't extends, its name becomes a custom tag
    • Imports Because you hate long files Image : Brikipedia
    • ● Custom elements can be loaded from external files ○ Using the link tag: ○ Only and are interpreted ○ The DOM of this document is available to script ○ Documents are retrieved according to cross-origin policies Imports
    • Other interesting bits Even if outside Web Components Image : Urban moms
    • ● Provide developers a way to react to changes in DOM Mutation Observers ● Replace MutationEvents ○ Increased performance
    • ● Observe and notify of mutations to JavaScript objects ○ Properties added, updated, deleted or reconfigurated Object.observe ● Part of ECMA 6
    • ○ Mutation Observers + Object.observer = Two-ways databinding! Data-binding
    • Can I use? If not, why are you telling us all this sh*t? Image : Christoph Hauf
    • Are we componetized yet?
    • ● New Google project ○ Introduced in Google I/O 2013 ○ New type of library for the web ○ Built on top of Web Components ○ Designed to leverage the evolving web platform ● What does it means ? ○ Polymer is comprised of two efforts : ■ A core platform to give Web Component capabilities to modern browsers ● Shims for all modern browsers ● Shared with Mozilla x-tag project ■ A next-generation web framework built upon this core platform ● Called the Polymer. Polymer
    • Polymer
    • ● Principes: ○ Everything is a component ■ Encapsulation is needed for a component oriented application ○ Extreme pragmatism ■ Boilerplate is bad ■ Anything repetitive should be re-factored into a component ● Handled by Polymer itself or ● Added into the browser platform itself ○ Salt to taste ■ Use as much or as little of the framework as you wish. ● You want polyfills only : load ● You want extra bits : load ○ Polymer elements ○ Polymer
    • ● Platform technologies are already functional ○ You can use it to add templates, shadow DOM, custom elements and imports to your app ● Lots of examples in the site Polymer
    • ● X-Tag is a small JavaScript library ○ created and supported by Mozilla ○ that brings Web Components capabilities ○ to all modern browsers. ● Polymer vs X-tags ? ○ Different features and approaches ○ Mozilla and Google are collaborating ■ building the shared polyfills platform X-Tags
    • ● AngularJS directives allow to create custom elements ○ Similar but different to Web Components AngularJS ○ First line declares the directive ■ The element name will be
    • AngularJS ● AngularJS directives allow to create custom elements ○ : HTML string of that the element will be replaced by ○ : (optional) the template HTML inside another file ○ : the linking function ■ After the template has been loaded, this function is called ● to establish the AngularJS scope ● any last-minute effect ○ jQuery animation or other logic ○ Restrict defines the element scope : E: DOM element with a custom name, A: DOM elem. with custom attribute, C: invocation via a class, M: invocation via a comment,
    • ● Using the custom elements AngularJS
    • Polymer today Because you can already play!
    • Step-1 : get Polymer
    • Step-1.2 : define an element
    • Step-1.3 : load Polymer, import the element
    • Step-1.4 : enjoy
    • Step-2 : Add properties/methods
    • Step-2.2 : enjoy
    • Step-3 : Declarative two-ways databinding!
    • Step-3.2 : enjoy
    • ● You can get current version on github ○ Tagged step by step Work in progress
    • Conclusion That's all folks! Image : dcplanet.fr
    • You want to know more? ● W3C's Introduction to Web Components ● HTML5 Rocks' Shadow Dom 101 ● HTML5 Rocks' Shadow Dom 201: CSS ● Polymer & X-Tags ● MutationObserver & Object.observe
    • Thank you !