Web components Introduction
-
Upload
eugenio-romano -
Category
Software
-
view
226 -
download
0
Transcript of Web components Introduction
![Page 1: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/1.jpg)
Web ComponentsIntroduction
Eugenio Romano
2016
![Page 2: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/2.jpg)
ENGINEER @
https://uk.linkedin.com/in/eugenio-romano-a28a4948
https://twitter.com/RomanoEugenio
http://eromano.github.io/
EUGENIO ROMANOALFRESCO
![Page 3: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/3.jpg)
AGENDA
PART 1 INFO
PART 2 EXAMPLE
CREATE WEB COMPONENTS IN 4 STEPS
![Page 4: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/4.jpg)
PART 1 INFO
![Page 5: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/5.jpg)
Web Components enable the creation of UI atoms as HTML elements, atoms that you can include into your components templates, powered by Angular, Ember, React or whatever.
Web Components is the next big thing.
WHAT INTERNET SAY
You can think of Web Components as reusable user interface widgets that are created using open Web technology.
Components Are Ready For Production.
Components Are NOT Ready For Production.
This is an experimental technology. The browser you use it in must support Web Components.
Web Components: A chance to create the future.
1INFO
![Page 6: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/6.jpg)
Web Components consist of several separate technologies. You can think of Web Components as reusable user interface widgets that are created using open Web technology
2
WHAT ARE WEB COMPONETSINFO
WHAT ARE NOT WEB COMPONETS
Web Components are not a library or framework nor a set of components made by a determinate company.
Web Components are a new browser feature standardized by W3C
Web Components are part of the browser, and so they do not need external libraries.
![Page 7: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/7.jpg)
REUSE
3
WHAT IS THE WEB COMPONENTS GOAL?INFO
FAST
EASY TO TEST
INTEROPERABILITY
When you create a web component, essentially you create a new tag <web-component> this tag is reusable everywhere and could be also extended by another web component.
Web components are fast to learn in the end is just JAVASCRIPT and HTML.
Any framework is compatible with DOM so you can reuse your component in any framework. Web components are a choice for the future.
Web components are self contained and by their nature, promote the separation of concern. So they are easy to test it.
![Page 8: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/8.jpg)
HTML IMPORTLet’s you import other HTML documents into the current one.
TEMPLATESIs a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.
CUSTOM ELEMENTSOffer the capability to create your own custom HTML tags and elements. They can have their own scripted behaviour and CSS styling.
SHADOW ELEMENTSProvide encapsulation for JavaScript, CSS, and templating in a Web Component. Shadow DOM allows these things to remain separate from the DOM of the main document.
4
WEB COMPONENT TECHNOLOGIES :INFO
![Page 9: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/9.jpg)
5
WHO SUPPORT WEB COMPONENTSINFO
![Page 10: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/10.jpg)
6
WHAT CAN WE DO WITH OLD BROWSERS? INFO
WEBCOMPONENTS.JS IS A SET OF POLYFILLS BUILT ON TOP OF THE WEB COMPONENTS SPECIFICATIONS. IT MAKES IT POSSIBLE TO USE THESE STANDARDS TODAY.
![Page 11: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/11.jpg)
7
Polymer is a new type of library for the web, built on top of Web Components and designed to leverage the evolving web platform on modern browsers.
X-Tag is a small JavaScript library, created and supported by Mozilla, that brings Web Components Custom Element capabilities to all modern browsers.
Brick is a collection of UI components designed for the easy and quick building of web application UIs.
Skate is a web component library that is focused on being a tiny, performant, syntactic-sugar for binding behaviour to custom and existing elements without ever having to worry about when your element is inserted into the DOM.
AVAILABLE LIBRARIESINFO
![Page 12: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/12.jpg)
WEB COMPONENT PROJECT STACKINFO 8
NEW BROWSERWEB COMPONENT SUPPORT
OLD BROWSER
WEBCOMPONENTS.JS
POLYMER , X-TAG , MOZILLA BRICK , BOSONIC , VANILLAJS
![Page 13: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/13.jpg)
PART 2 EXAMPLECREATE A WEB COMPONENTS IN 4 STEP
9
![Page 14: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/14.jpg)
YEOMAN GENERATOREXAMPLE STEP 1
OLD BROWSER
1. $ npm install -g generator-wbelement2. $ mkdir awesome-element3. $ cd awesome-element 4. $ yo wbelement
1. What do you want to use? You can choose which library use but for this example we will pick Polymer2. Which version? If the library has different versions in this case we get the version 1.4.03. What's the GitHub repository? 4. What's your GitHub username? 5. What's the name of your element? awesome-element6. How would you describe the element? awesome example project7. Do you want to include lifecycle callbacks? 8. Do you want to include some useful Grunt tasks?
First step we are going to use a yeoman generator generator-element
10
![Page 15: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/15.jpg)
ANALYZE THE AWESOME-EXAMPLE GENERATEDEXAMPLE STEP 2
OLD BROWSER
Open the Awesome-element directory you’ll find the structure above:
10
STRUCTURE OPEN SOURCE
Open the source file src/awesome-element .html
![Page 16: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/16.jpg)
ADD SOME CODEEXAMPLE STEP 2
<template> <h1>[[title]]</h1> <p> <a href="http://thecatapi.com"> <img src="http://thecatapi.com/api/images/get?format=src&type=gif"> </a> </p></template>
ready: function() { this.title = 'CAT';},
TEMPLATE READY JAVASCRIPT
You can find the entire code here : https://github.com/eromano/example-web-componet
![Page 17: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/17.jpg)
AWESOME-ELEMENT IN ACTIONEXAMPLE STEP 3
In order to use the new tag created you need only to import the tag in the header section:
<link rel="import" href="../src/awesome-element.html">
Use the tag in the body section:
<body><awesome-element></awesome-element></body>
![Page 18: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/18.jpg)
HOW TO DISTRIBUTE YOUR NEW TAGEXAMPLE STEP 3
1. Pushing your element to GitHub$grunt deploy (or Push in some way your project on gitHub)
2. Version of your elementA) git tag -a v0.0.1 -m '0.0.1' B) git push --tags
3. Register on bower:bower register example-web-component https://github.com/(yourusername)/example-web-component.git
4. You should now be able to install your new component with bower in any project:bower install <username>/awesome-element
![Page 19: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/19.jpg)
CONCLUSIONSEND
Join the revolution
Web Components are about reusability and scalability. Rewriting components is a waste of money
Create your own tag!
We were waiting for this since HTML5
![Page 20: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/20.jpg)
• http://webcomponents.org/
• https://developer.mozilla.org/en-US/docs/Web/Web_Components
• http://www.2ality.com/2015/08/web-component-status.html
• https://www.youtube.com/watch?v=JUzjr1bIRUg
BIBLIOGRAPHYEND
![Page 21: Web components Introduction](https://reader036.fdocuments.net/reader036/viewer/2022070523/58ed3d631a28abc44a8b45bb/html5/thumbnails/21.jpg)
THANK YOU