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