Post on 12-Apr-2017
transcript
Web ComponentsIntroduction
Eugenio Romano
2016
ENGINEER @
https://uk.linkedin.com/in/eugenio-romano-a28a4948
https://twitter.com/RomanoEugenio
http://eromano.github.io/
EUGENIO ROMANOALFRESCO
AGENDA
PART 1 INFO
PART 2 EXAMPLE
CREATE WEB COMPONENTS IN 4 STEPS
PART 1 INFO
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
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.
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.
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
5
WHO SUPPORT WEB COMPONENTSINFO
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.
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
WEB COMPONENT PROJECT STACKINFO 8
NEW BROWSERWEB COMPONENT SUPPORT
OLD BROWSER
WEBCOMPONENTS.JS
POLYMER , X-TAG , MOZILLA BRICK , BOSONIC , VANILLAJS
PART 2 EXAMPLECREATE A WEB COMPONENTS IN 4 STEP
9
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
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
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
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>
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
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
• 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
THANK YOU