Downloaded 30 times
Uploaded byHoracio Gonzalez
Devoxx France - Web Components, Polymer et Material Design
The document discusses the evolution and importance of web components as a W3C standard, highlighting their four pillars: templates, shadow DOM, custom elements, and imports. It emphasizes how frameworks like Polymer leverage these standards to enhance web development with a focus on encapsulation and component reusability. Furthermore, it contrasts traditional thick-client development with the emerging single-page applications and the complexities introduced in modern web development.
Devoxx France - Web Components, Polymer et Material Design
- 1. #Webcomponents @LostInBrittany#Webcomponents @LostInBrittany WebComponents avec Polymer
- 2. #Webcomponents @LostInBrittany#Webcomponents @LostInBrittany HoracioGonzalez @LostInBrittany Cityzen Data Spaniard lost in Brittany, developer, dreamer and all- around geek
- 3. #Webcomponents @LostInBrittany Introduction Because Ilove to tell old stories
- 4. #Webcomponents @LostInBrittany 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. #Webcomponents @LostInBrittany At thebeginning we had the thick client ● Widget : basic building blocks of your UI ○ Encapsulation ○ Reutilisation In thick client you create your UI by assembling widgets Image : Wikipedia
- 6. #Webcomponents @LostInBrittany Web developmentwas unlike thick-client ● HTML/CSS/JS didn't support widgets ○ Pages were the building blocks Web apps were page oriented Image : IBM
- 7. #Webcomponents @LostInBrittany GWT gaveback widgets to web devs ● GWT used a thick-client-like development paradigm ○ Widgets, properties, events GWT web apps were widget oriented : Single-page apps Image : GWT Mail sample app
- 8. #Webcomponents @LostInBrittany Single-page appsare a current trend ● From UX POV single-page apps are richer ○ But making them without widgets is risky and difficult Image : Ken Schultz comedy juggler
- 9. #Webcomponents @LostInBrittany Web Components Reinventingthe wheel... and this time making it round
- 10. #Webcomponents @LostInBrittany Example :the Google+ button ● If you want to place a Google+ button in your page
- 11. #Webcomponents @LostInBrittany Example :the Google+ button ● And what I would like is simple
- 12. #Webcomponents @LostInBrittany 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 Totally non standard...
- 13. #Webcomponents @LostInBrittany 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
- 14. #Webcomponents @LostInBrittany But wealready 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
- 15. #Webcomponents @LostInBrittany 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
- 16. #Webcomponents @LostInBrittany The 4pillars of the Web Components ● Templates ● Shadow DOM ● Custom Elements ● Imports
- 17. #Webcomponents @LostInBrittany Templates Image :Instructables The clone wars
- 18. #Webcomponents @LostInBrittany 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
- 19. #Webcomponents @LostInBrittany ● Uniformisingthose 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
- 20. #Webcomponents @LostInBrittany Template instantiation ●Create the elements in page by cloning the template
- 21. #Webcomponents @LostInBrittany Shadow DOM Image:Springfield Punx Join the shadowy side, young padawan
- 22. #Webcomponents @LostInBrittany Encapsulation ● Eachcomponent 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
- 23. #Webcomponents @LostInBrittany Encapsulation beforeShadow DOM ● Only a way : Image : Star Trek the Next Generation
- 24. #Webcomponents @LostInBrittany Your browsercheats on you ● Considerer this simple slider ○ How does the browser deal with it? ■ 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 Image: Springfield Punx
- 25. #Webcomponents @LostInBrittany My nameis 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
- 26. #Webcomponents @LostInBrittany Looking intothe Shadow ● For the slider :
- 27. #Webcomponents @LostInBrittany Shadow DOMis 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
- 28. #Webcomponents @LostInBrittany Using ShadowDOM ● 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
- 29. #Webcomponents @LostInBrittany Using ShadowDOM ● Quick and dirty Shadow DOM ○ DOM tree only shows ○ Rendered HTML shows ○ Markup in is ugly
- 30. #Webcomponents @LostInBrittany Using ShadowDOM ● Shadow DOM with templates
- 31. #Webcomponents @LostInBrittany ● CSSdefined 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
- 32. #Webcomponents @LostInBrittany Shadow DOMet CSS ● Styling the host element : @host My Button
- 33.
- 34. #Webcomponents @LostInBrittany Custom Elements Image:The Brick Blogger Elemental mayhem !
- 35. #Webcomponents @LostInBrittany Custom elements: the tag ● An element encloses template, lifecycle and behaviour ○ Templates done with tag
- 36. #Webcomponents @LostInBrittany ● Ifan element extends another, instantiation with is keyword Custom elements : instantiation ● If an element doesn't extends, its name becomes a custom tag
- 37. #Webcomponents @LostInBrittany Imports Image: Brikipedia Becauseyou hate long files
- 38. #Webcomponents @LostInBrittany ● Customelements 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
- 39. #Webcomponents @LostInBrittany Can Iuse? Image: Christoph Hauf If not, why are you telling us all this sh*t?
- 40. #Webcomponents @LostInBrittany Are wecomponetized yet?
- 41.
- 42.
- 43. #Webcomponents @LostInBrittany ● AGoogle 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 Polymer
- 44. #Webcomponents @LostInBrittany ● Whatdoes 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 Polymer Elements Polymer
- 45.
- 46. #Webcomponents @LostInBrittany ● 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 Polymer
- 47. #Webcomponents @LostInBrittany ● Principes: ○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
- 48. #Webcomponents @LostInBrittany ● Platformtechnologies 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
- 49. #Webcomponents @LostInBrittany ● X-Tagis 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
- 50. #Webcomponents @LostInBrittany ● AngularJSdirectives allow to create custom elements ○ Same spirit, different implementation AngularJS
- 51. #Webcomponents @LostInBrittany Polymer today Becauseyou can already play!
- 52. #Webcomponents @LostInBrittany Step-1 :get Polymer
- 53. #Webcomponents @LostInBrittany Step 2- Use an element
- 54. #Webcomponents @LostInBrittany Step-3.1 :define an element
- 55. #Webcomponents @LostInBrittany Step-3.2 :load Polymer, import your element
- 56.
- 57. #Webcomponents @LostInBrittany Step-4.1 :Add properties/methods
- 58.
- 59. #Webcomponents @LostInBrittany Step-5.1 :Declarative two-ways databinding!
- 60.
- 61. #Webcomponents @LostInBrittany Polymer coreelements Set of visual and non-visual utility elements
- 62.
- 63.
- 64. #Webcomponents @LostInBrittany Elements areconfigurable … Toolbar will scroll with the page
- 65. #Webcomponents @LostInBrittany Responsivity fromthe beginning …
- 66. #Webcomponents @LostInBrittany Polymer Paper Image:ToyPro Material Design on Polymer, oh yeah!
- 67. #Webcomponents @LostInBrittany Android Lollipop'slook & feel Material Design is a visual language that synthesizes the classic principles of good design with the innovation and possibility of technology and science It's like a flat design,but in 3D! Nicevisualeffects!
- 68. #Webcomponents @LostInBrittany Material Design Visuallanguage joining good design with technical innovation to create an unified experience across platforms and device sizes Responsive! Responsive!
- 69. #Webcomponents @LostInBrittany What's materialdesign? http://www.google.com/design/spec/material-design/ UIs implementing a 3D metaphor : lights & shadows, stacking
- 70. #Webcomponents @LostInBrittany Polymer Paper Aset of Polymer elements implementing Material Design guidelines
- 71.
- 72.
- 73. #Webcomponents @LostInBrittany <paper-ripple> A reactiveink effect for indicating touch and mouse actions
- 74. #Webcomponents @LostInBrittany A fulldemo of Polymer Paper https://www.polymer-project.org/apps/topeka/
- 75.
- 76. #Webcomponents @LostInBrittany Other available webcomponents Image: KNP Labs The more, the merrier!
- 77.
- 78.
- 79.
- 80.
- 81. #Webcomponents @LostInBrittany ● Youcan get current version on github ○ Tagged step by step The code samples (W.i.P)
- 82. #Webcomponents @LostInBrittany You wantto know more? ● W3C's Introduction to Web Components ● HTML5 Rocks' Shadow DOM 101 & HTML5 Rocks' Shadow DOM 201: CSS ● WebComponents.org's Introduction to Shadow DOM ● Polymer, X-Tags, Mozilla Brick ● MutationObserver & Object.observe
- 83. #Webcomponents @LostInBrittany Would youlike to know more? Then go to the Cloud endpoints, Polymer, material design hand's on lab
- 84.