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 &
Brei...
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 m...
At the beginning we had the thick client
● Widget : basic building blocks of your UI
○ Encapsulation
○ Reutilisation
In th...
Web development was unlike thick-client
● HTML/CSS/JS didn't support widgets
○ Pages were the building blocks
Web apps we'...
GWT gave back widgets to web devs
● GWT uses a thick-client-like development paradigm
○ Widgets, properties, events
GWT we...
Single-page apps are a current trend
● From UX POV single-page apps are richer
○ But making them without widgets is painfu...
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 : HT...
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 com...
Another example : the RIB
● If you're French, you know what a RIB is
○ A banking account identification number
● To show a...
But we already can do that!
● In most modern frameworks we can already do
components, in a way or another
○ And all those ...
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 temp...
Templates before
● How did we do templating before
○ Using or
○ Putting it inside a
■ Type unknown to browser, it isn't in...
● Uniformising those approach with a new tag
● Content inside the tag is parsed but not interpreted
○ HTML not shown
○ Res...
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 manipula...
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 ...
My name is DOM, Shadow DOM
● Shadow DOM: ability of the browser to
○ Include a DOM subtree into the rendering
○ But not in...
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 Componen...
Using Shadow DOM
● There is a host element
○ A normal element in DOM tree
● A shadow root is associated to the host
○ Usin...
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
○ I...
● More granularity can be added :
Separate content from presentation
…
…
Result :
Why does it work for author?
Invitation ...
● CSS defined in the Shadow DOM remains there
● Outside styles don't affect Shadowed content
This is a title
And this is w...
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
■...
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...
● If an element extends another, instantiation with is keyword
Custom elements : instantiation
● If an element doesn't ext...
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 doc...
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.obse...
○ 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
○ ...
Polymer
● Principes:
○ Everything is a component
■ Encapsulation is needed for a component oriented application
○ Extreme pragmati...
● Platform technologies are already functional
○ You can use it to add templates, shadow DOM, custom elements
and imports ...
● X-Tag is a small JavaScript library
○ created and supported by Mozilla
○ that brings Web Components capabilities
○ to al...
● AngularJS directives allow to create custom elements
○ Similar but different to Web Components
AngularJS
○ First line de...
AngularJS
● AngularJS directives allow to create custom elements
○ : HTML string of that the element will be replaced by
○...
● 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:...
Thank you !
Upcoming SlideShare
Loading in...5
×

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

910

Published on

Published in: Technology, Design

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

  1. 1. By @LostInBrittany Web Components avec Polymer
  2. 2. 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
  3. 3. Introduction Because I love to tell old stories
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. Web Components Reinventing the wheel... and this time making it round
  10. 10. 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
  11. 11. Example : the Google+ button ● If you want to place a Google+ button in your page
  12. 12. Example : the Google+ button ● And what I would like is simple
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. The 5 pillars of the Web Components ● Templates ● Shadow DOM ● Custom Elements ● Decorators ● Imports
  17. 17. Templates The clone wars Image : Instructables
  18. 18. Templates ● A reusable model ○ Contains markup intended to be used later ○ Create the elements in page by cloning the template
  19. 19. 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
  20. 20. ● 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
  21. 21. Template instantiation ● Using JavaScript
  22. 22. Shadow DOM Join the shadowy side, young padawan Image: Springfield Punx
  23. 23. 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
  24. 24. Encapsulation before Shadow DOM ● Image : Star Trek the Next Generation
  25. 25. 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
  26. 26. 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
  27. 27. Looking into the Shadow ● For the slider :
  28. 28. 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
  29. 29. 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
  30. 30. Using Shadow DOM ● Quick and dirty Shadow DOM ○ DOM tree only shows ○ Rendered HTML shows ○ Markup in is ugly
  31. 31. Using Shadow DOM ● Shadow DOM with templates
  32. 32. ● 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 :
  33. 33. ● More granularity can be added : Separate content from presentation … … Result : Why does it work for author? Invitation model, first match
  34. 34. ● 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
  35. 35. Shadow DOM et CSS ● Styling the host element : @host My Button
  36. 36. 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
  37. 37. Shadow DOM et CSS ● Inheritance Cheat Sheet Image : HTML5 Rocks' Web Components 201
  38. 38. Example
  39. 39. Custom Elements Elemental mayhem ! Image : The Brick Blogger
  40. 40. Custom elements : the tag ● An element encloses template, lifecycle and behaviour ○ Templates done with tag
  41. 41. ● 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
  42. 42. ● If an element extends another, instantiation with is keyword Custom elements : instantiation ● If an element doesn't extends, its name becomes a custom tag
  43. 43. Imports Because you hate long files Image : Brikipedia
  44. 44. ● 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
  45. 45. Other interesting bits Even if outside Web Components Image : Urban moms
  46. 46. ● Provide developers a way to react to changes in DOM Mutation Observers ● Replace MutationEvents ○ Increased performance
  47. 47. ● Observe and notify of mutations to JavaScript objects ○ Properties added, updated, deleted or reconfigurated Object.observe ● Part of ECMA 6
  48. 48. ○ Mutation Observers + Object.observer = Two-ways databinding! Data-binding
  49. 49. Can I use? If not, why are you telling us all this sh*t? Image : Christoph Hauf
  50. 50. Are we componetized yet?
  51. 51. ● 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
  52. 52. Polymer
  53. 53. ● 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
  54. 54. ● 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
  55. 55. ● 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
  56. 56. ● AngularJS directives allow to create custom elements ○ Similar but different to Web Components AngularJS ○ First line declares the directive ■ The element name will be
  57. 57. 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,
  58. 58. ● Using the custom elements AngularJS
  59. 59. Polymer today Because you can already play!
  60. 60. Step-1 : get Polymer
  61. 61. Step-1.2 : define an element
  62. 62. Step-1.3 : load Polymer, import the element
  63. 63. Step-1.4 : enjoy
  64. 64. Step-2 : Add properties/methods
  65. 65. Step-2.2 : enjoy
  66. 66. Step-3 : Declarative two-ways databinding!
  67. 67. Step-3.2 : enjoy
  68. 68. ● You can get current version on github ○ Tagged step by step Work in progress
  69. 69. Conclusion That's all folks! Image : dcplanet.fr
  70. 70. 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
  71. 71. Thank you !
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×