Hybrid Integrated Photonic Components Based on a Polymer Platform
Devoxx France - Web Components, Polymer et Material Design
-
Upload
horacio-gonzalez -
Category
Technology
-
view
820 -
download
3
Transcript of Devoxx France - Web Components, Polymer et Material Design
![Page 1: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/1.jpg)
#Webcomponents @LostInBrittany#Webcomponents @LostInBrittany
Web Components avec Polymer
![Page 2: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/2.jpg)
#Webcomponents @LostInBrittany#Webcomponents @LostInBrittany
Horacio Gonzalez
@LostInBrittanyCityzen Data
Spaniard lost in Brittany, developer, dreamer and all-around geek
![Page 3: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/3.jpg)
#Webcomponents @LostInBrittany
IntroductionBecause I love to tell old stories
![Page 4: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/4.jpg)
#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
![Page 5: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/5.jpg)
#Webcomponents @LostInBrittany
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 assembling widgets Image : Wikipedia
![Page 6: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/6.jpg)
#Webcomponents @LostInBrittany
Web development was unlike thick-client
● HTML/CSS/JS didn't support widgets○ Pages were the building blocks
Web apps were page oriented Image : IBM
![Page 7: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/7.jpg)
#Webcomponents @LostInBrittany
GWT gave back 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
![Page 8: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/8.jpg)
#Webcomponents @LostInBrittany
Single-page apps are a current trend
● From UX POV single-page apps are richer○ But making them without widgets is risky and difficult
HTML/CSS/JS needed a widget standard
Image : Ken Schultz comedy juggler
![Page 9: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/9.jpg)
#Webcomponents @LostInBrittany
Web ComponentsReinventing the wheel... and this time making it round
![Page 10: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/10.jpg)
#Webcomponents @LostInBrittany
Example : the Google+ button
● If you want to place a Google+ button in your page
![Page 11: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/11.jpg)
#Webcomponents @LostInBrittany
Example : the Google+ button
● And what I would like is simple
![Page 12: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/12.jpg)
#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...
![Page 13: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/13.jpg)
#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
![Page 14: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/14.jpg)
#Webcomponents @LostInBrittany
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
![Page 15: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/15.jpg)
#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 fightingBrowsers and devs will use the WiP document
![Page 16: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/16.jpg)
#Webcomponents @LostInBrittany
The 4 pillars of the Web Components
● Templates
● Shadow DOM
● Custom Elements
● Imports
![Page 17: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/17.jpg)
#Webcomponents @LostInBrittany
Templates
Image : Instructables
The clone wars
![Page 18: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/18.jpg)
#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
![Page 19: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/19.jpg)
#Webcomponents @LostInBrittany
● 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
![Page 20: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/20.jpg)
#Webcomponents @LostInBrittany
Template instantiation
● Create the elements in page by cloning the template
![Page 21: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/21.jpg)
#Webcomponents @LostInBrittany
Shadow DOM
Image: Springfield Punx
Join the shadowy side, young padawan
![Page 22: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/22.jpg)
#Webcomponents @LostInBrittany
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
![Page 23: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/23.jpg)
#Webcomponents @LostInBrittany
Encapsulation before Shadow DOM
● Only a way :
Image : Star Trek the Next Generation
![Page 24: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/24.jpg)
#Webcomponents @LostInBrittany
Your browser cheats 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 componentsThey have a public interface and hidden inner code
That's Shadow DOM!
Image: Springfield Punx
![Page 25: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/25.jpg)
#Webcomponents @LostInBrittany
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
![Page 26: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/26.jpg)
#Webcomponents @LostInBrittany
Looking into the Shadow
● For the slider :
![Page 27: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/27.jpg)
#Webcomponents @LostInBrittany
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
![Page 28: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/28.jpg)
#Webcomponents @LostInBrittany
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
![Page 29: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/29.jpg)
#Webcomponents @LostInBrittany
Using Shadow DOM
● Quick and dirty Shadow DOM
○ DOM tree only shows
○ Rendered HTML shows
○ Markup in is ugly
![Page 30: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/30.jpg)
#Webcomponents @LostInBrittany
Using Shadow DOM
● Shadow DOM with templates
![Page 31: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/31.jpg)
#Webcomponents @LostInBrittany
● CSS defined in the Shadow DOM remains there● Outside styles don't affect Shadowed content
This is a titleAnd this is widget titleWidget content here
Shadow DOM et CSS
![Page 32: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/32.jpg)
#Webcomponents @LostInBrittany
Shadow DOM et CSS
● Styling the host element : @host
My Button
![Page 33: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/33.jpg)
#Webcomponents @LostInBrittany
Example
![Page 34: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/34.jpg)
#Webcomponents @LostInBrittany
Custom Elements
Image: The Brick Blogger
Elemental mayhem !
![Page 35: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/35.jpg)
#Webcomponents @LostInBrittany
Custom elements : the tag
● An element encloses template, lifecycle and behaviour
○ Templates done with tag
![Page 36: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/36.jpg)
#Webcomponents @LostInBrittany
● If an element extends another, instantiation with is keyword
Custom elements : instantiation
● If an element doesn't extends, its name becomes a custom tag
![Page 37: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/37.jpg)
#Webcomponents @LostInBrittany
Imports
Image: Brikipedia
Because you hate long files
![Page 38: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/38.jpg)
#Webcomponents @LostInBrittany
● 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
![Page 39: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/39.jpg)
#Webcomponents @LostInBrittany
Can I use?
Image: Christoph Hauf
If not, why are you telling us all this sh*t?
![Page 40: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/40.jpg)
#Webcomponents @LostInBrittany
Are we componetized yet?
![Page 41: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/41.jpg)
#Webcomponents @LostInBrittany
WebComponents.org
![Page 42: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/42.jpg)
#Webcomponents @LostInBrittany
PolymerWebcomponents for today's web
![Page 43: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/43.jpg)
#Webcomponents @LostInBrittany
● A 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
Polymer
![Page 44: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/44.jpg)
#Webcomponents @LostInBrittany
● 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 Polymer Elements
Polymer
![Page 45: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/45.jpg)
#Webcomponents @LostInBrittany
Polymer
![Page 46: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/46.jpg)
#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
![Page 47: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/47.jpg)
#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
![Page 48: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/48.jpg)
#Webcomponents @LostInBrittany
● 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
![Page 49: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/49.jpg)
#Webcomponents @LostInBrittany
● 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
![Page 50: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/50.jpg)
#Webcomponents @LostInBrittany
● AngularJS directives allow to create custom elements○ Same spirit, different implementation
AngularJS
![Page 51: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/51.jpg)
#Webcomponents @LostInBrittany
Polymer todayBecause you can already play!
![Page 52: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/52.jpg)
#Webcomponents @LostInBrittany
Step-1 : get Polymer
![Page 53: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/53.jpg)
#Webcomponents @LostInBrittany
Step 2 - Use an element
![Page 54: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/54.jpg)
#Webcomponents @LostInBrittany
Step-3.1 : define an element
![Page 55: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/55.jpg)
#Webcomponents @LostInBrittany
Step-3.2 : load Polymer, import your element
![Page 56: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/56.jpg)
#Webcomponents @LostInBrittany
Step-3.3 : enjoy
![Page 57: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/57.jpg)
#Webcomponents @LostInBrittany
Step-4.1 : Add properties/methods
![Page 58: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/58.jpg)
#Webcomponents @LostInBrittany
Step-4.2 : enjoy
![Page 59: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/59.jpg)
#Webcomponents @LostInBrittany
Step-5.1 : Declarative two-ways databinding!
![Page 60: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/60.jpg)
#Webcomponents @LostInBrittany
Step-3.2 : enjoy
![Page 61: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/61.jpg)
#Webcomponents @LostInBrittany
Polymer core elements
Set of visual and non-visual utility elements
![Page 62: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/62.jpg)
#Webcomponents @LostInBrittany
<core-toolbar>
![Page 63: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/63.jpg)
#Webcomponents @LostInBrittany
<core-header-panel>
…
![Page 64: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/64.jpg)
#Webcomponents @LostInBrittany
Elements are configurable
…
Toolbar will scroll with the page
![Page 65: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/65.jpg)
#Webcomponents @LostInBrittany
Responsivity from the beginning
…
![Page 66: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/66.jpg)
#Webcomponents @LostInBrittany
Polymer Paper
Image: ToyPro
Material Design on Polymer, oh yeah!
![Page 67: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/67.jpg)
#Webcomponents @LostInBrittany
Android Lollipop's look & 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 l
ike a fl
at
desig
n, b
ut in
3D!
Nic
e visual effects!
![Page 68: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/68.jpg)
#Webcomponents @LostInBrittany
Material Design
Visual language joining good design with technical innovation to create an unified experience across platforms and device sizes
Responsiv
e!
Responsiv
e!
![Page 69: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/69.jpg)
#Webcomponents @LostInBrittany
What's material design?
http://www.google.com/design/spec/material-design/
UIs implementing a 3D metaphor : lights & shadows, stacking
![Page 70: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/70.jpg)
#Webcomponents @LostInBrittany
Polymer PaperA set of Polymer elements implementing Material Design guidelines
![Page 71: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/71.jpg)
#Webcomponents @LostInBrittany
<paper-tabs>
![Page 72: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/72.jpg)
#Webcomponents @LostInBrittany
<paper-input>
![Page 73: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/73.jpg)
#Webcomponents @LostInBrittany
<paper-ripple>
A reactive ink effect for indicating touch and mouse actions
![Page 74: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/74.jpg)
#Webcomponents @LostInBrittany
A full demo of Polymer Paper
https://www.polymer-project.org/apps/topeka/
![Page 75: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/75.jpg)
#Webcomponents @LostInBrittany
Fully responsive
![Page 76: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/76.jpg)
#Webcomponents @LostInBrittany
Other available web components
Image: KNP Labs
The more, the merrier!
![Page 77: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/77.jpg)
#Webcomponents @LostInBrittany
GoogleWebComponents.github.io
![Page 78: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/78.jpg)
#Webcomponents @LostInBrittany
Mozilla Brick
![Page 79: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/79.jpg)
#Webcomponents @LostInBrittany
Bosomic
![Page 80: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/80.jpg)
#Webcomponents @LostInBrittany
Conclusion
Image: dcplanet.fr
That's all folks!
![Page 81: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/81.jpg)
#Webcomponents @LostInBrittany
● You can get current version on github○ Tagged step by step
The code samples (W.i.P)
![Page 82: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/82.jpg)
#Webcomponents @LostInBrittany
You want to 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
![Page 83: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/83.jpg)
#Webcomponents @LostInBrittany
Would you like to know more?
Then go to the Cloud endpoints, Polymer, material design hand's on lab
![Page 84: Devoxx France - Web Components, Polymer et Material Design](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a904831a28abe14a8b457f/html5/thumbnails/84.jpg)
#Webcomponents @LostInBrittany
Thank you !