Polymer 2.0 codelab for extreme beginners

What’s Polymer ?
Web Components
Polymer Summit
Who use Polymer ?
Create a Polymer Project
Custom style & Polymer UI Elements
Create an element
The project
Summary
Starting with Polymer
Data binding

Polymer is a JavaScript library based on web components.
It helps you create custom reusable HTML elements, and use them to build
performant, maintainable apps.
What’s Polymer ?

20172013 2015
It’s first real version is 0.4
Polymer 1.0 announced
2016
Polymer 2.0 announced
First rc Polymer version 2.0
Polymer 3.0 very early
announce, join npm
Polymer version

It allows the creation of reusable widgets or components in web documents and web applications.
Web Components are a set of standards currently being produced by Google engineers as
a W3C specification.
There are 4 standards :
Custom elements, Shadow DOM, HTML Imports and Templates HTML
Whats’ Web Components

7
Custom elements
”
HTML gives us an excellent tool for structuring a document but its
vocabulary is limited to elements the HTML standard defines.
So there is custom elements that gives you the possibility to create new
HTML tags

7
Custom elements
<div>
<div class="tab-pane" id="home" >Home</div>
<div class="tab-pane" id="profile" >Profile</div>
<div class="tab-pane" id="messages" >Messages</div>
<div class="tab-pane" id="settings" >Settings</div>
</div>
Home Profile Messages Settings
From a div soup to ….

7
Custom elements
Home Profile Messages Settings <tab-panels selected="0">
<tab-panel name="home" ></tab-panel>
<tab-panel name="profile" ></tab-panel>
<tab-panel name="messages" ></tab-panel>
<tab-panel name="settings" ></tab-panel>
</tab-panels>
Home Profile Messages Settings
... reusable HTML elements

The shadow Dom addresses the DOM tree encapsulation problem. Thus
using shadow will solve problems such as same name for classes and ids
that CSS brings in maintaining your app
Shadow DOM
”

Template helps you reuse code, by adding html code embedded in template
tag, thus reusing it
Template
”

HTML imports is a way to include html documents in other html documents,
the imports is not limited to markups, you can include CSS, and JS
HTML Import
”

Node.JS
Git
Bower
Polymer-cli
What you need to Install

1.Create a new folder 2.Polymer init 3.Choose polymer-2-application

-------bower_components
-------src
-------test
-------bower.json
-------polymer.json
-------manifest.json
-------index.html
-------README.md
Polymer-codelab folder structure

bower_components Your app has a set of dependencies - chunks of code that it depends on to
work. These dependencies are managed with Bower, a package manager, and
stored in the bower_components folder.
src/ Folder that stores the code we'll write for your app - html, javascript and
css.
test/ A placeholder folder for automated tests. You won't need this since you will
test your app manually.
bower.json Describes your app's dependencies to the package manager, Bower.
polymer.json stores information about your project structure and desired build
configuration(s). It is used by the Polymer CLI as a way to understand the
structure of your application.
manifest.json Stores metadata for your app that helps browsers to load it efficiently.
index.html Your app's landing page.
README.md README files usually describe how to install and use the app. Currently,
yours contains some default content generated by the Polymer CLI.

Serve the application
In the terminal type the following command
polymer serve
The result should look like this

Create an element
------src
|----polymer-codelab-app
|-----polymer-codelab-app.html
src/ folder structure
polymer-codelab-app is your first element !

Create an element
In your index.html file
Your element
Import of your
element

Create an element
Import polymer
Element template
Your element definition
Your element !

Create an element
1.In the folder src/polymer-codelab-app create a new file todo-list-element.html
2. Add the following polymer import
<link rel="import" href="../../bower_components/polymer/polymer.html">
3. Add a dom-module tag with the id set to todo-list-element

Create an element
4.within the dom-module tag add the template tag and the script tag
5. In the script tag define a class with the name TodoListElement that extends the Polymer.Element

Create an element
6. Add the static is method that returns the name of our element
7. Add the static properties method that returns all the attributes of our element

Create an element
8. Let’s add a header to our element with the title My First todo list
9. And now let’s add the line that define our element at the bottom of the script tag
window.customElements.define(TodoListElement.is, TodoListElement);

Create an element
10. Your new element should look like this by now
11. Let’s use our new element in the polymer-codelab-app.html

Create an element
12. Firstly import our new element
13. Use it in the template of the polymer-codelab-app
WARNING: NEVER FORGET TO IMPORT AN ELEMENT BEFORE USING IT

Create an element
14. Use Polymer serve to serve our application

Create an element
15. The result should look like this

Data Binding
A data binding connects data from a custom element to a property or attribute of an element
This is a data binding to attribute prop1

Data Binding
1.In the todo-list-element.html add the the name property
name:{
type:String,
value:”homeworks”
}
2. Change the <h1>My First todo list</h1> to <h1>[[name]]</h1> and reload the page

Data Binding
Bind to a host property
Bind to an attribute
● Double-curly brackets ( {{ }} ) support both upward and downward data flow.
● Double square brackets ( [[ ]] ) are one-way, and support only downward data flow.

Data Binding
3. Add a new property todoList (Array) to the todo-list-element
4. In the template tag add the following code beneath the h1 tag
5. In the polymer-codelab-app.html, create a new property a todoListCard (Object)

Data Binding
6. In the polymer-codelab-app.html change the following line <todo-list-element></todo-list-element> to
<todo-list-element name="[[todoListCard.name]]" todo-list="[[todoListCard.todoList]]"></todo-list-element>
And reload the page
7. The result should look like this

Data Binding
8. Add the style tag on the top of the template tag
9. Add a checkbox to see if a task is complete <input type="checkbox" checked>

Data Binding
10. Your element should look like this by the way

Data Binding
11. Reload the page
12. Change in polymer-codelab-app.html the todoList property of the todoListCard object to see if a task is
complete

Data Binding
13. Update the dom-repeat template of the todo-list-element

Data Binding
14. Reload the page
What if the todoList is still empty ?

Data Binding
We use the dom-if to ensure that in the case of empty array we show the user the message
“The list is empty”
15. Add the following code at the end of the template tag in todo-list-element.html
16. Add the following line to polymer-codelab-app.html
<todo-list-element name="Chores" todo-list="[]"></todo-list-element>

Data Binding
17.Reload the page, the result should look like this

Custom Style
Polymer provide custom CSS properties that you can use to style the appearance of the element in your
application.
you can use custom properties to build an interface for the users of your element so they can style it.

Custom Style
1. In the terminal write the following command line
bower install PolymerElements/paper-styles --save
It will add paper-styles in the bower_components folder and add paper-styles to your dependencies in the
bower.json file
2. Import the color.html
3. Open todo-list-element.html

Custom Style
4. Wrap your element template in a div
5. Add the following style to your div in the style tag
Custom style with default

Custom Style
6. Go back to polymer-codelab-app.html and add the following lines in the style tag
7. Reload the page, your app should look like this

Custom Style
8. In the todo-list-element.html add a new property important (boolean) this property explain whether the
todoList is important
An important todo-list-elememt must have the background-color set to a red color
To achieve it we use custom css properties and observers

Custom Style
9. Add an observer on important property
10. Define the method _importantChanged so that when important is true we change the
--todo-list-element-background-color to paper-red-500

Custom Style
11. Open polymer-codelab-app.html and add important to the second todo-list-element tag
12. Reload the page, your page should look like this

Custom Style
Now let’s add some shadow effect on the todo-list-element
13. Import the shadow.html
14.add a class to the div wrapping
15. Now let’s apply some shadow

Custom Style
16.Reload the page…..well this is some shadow

Custom Style
The element is still not really that attractive. So we will use some polymer element
1. Install paper-checkbox, in the terminal with the following line
bower install --save PolymerElements/paper-checkbox
2. Import the paper-checkbox in todo-list-element.html
3. Change the following lines of code

Custom Style
4. Reload the page, your page should look like this

Custom Style
5. Add the following style to the paper-checkbox
6. Relaod the page

Custom Style
7. Install the paper-item with the following command line
8. Import the paper-item with the following line
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
9. Change the div tag to the paper-item tag and add the style paper-item{color:#FFF;}

Custom Style
10. Install paper-card with the following command line bower install –save PolymerElements/paper-card
11. Import the paper-card in the todo-list-element.html
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
12. Change the following lines of code and delete .container style

Custom Style
13. Change the div in the style tag to paper-card and add
--paper-card-header-color:#FFF;

The project
An event app for the DevFest Algiers event
The app should show:
1. Event information
2. The event Agenda
3. The speaker of the d-day
4. Preview of last edition
5. Have a button to register for the event
6. About page
7. Contact us page

You can find code related to :
Create a polymer project in
https://github.com/amandaSalander/bookworm-training-polymer2.0/tree/master/step_1
Create an element
Data binding and data binding helpers
Custom styles
Using Polymer UI Elements

Find it interesting ?
Polymer Project
http://polymer-project.org/
Webcomponents.org
https://www.webcomponents.org/
The full codelab step by step
https://github.com/amandaSalander/bookworm-training-polymer2.0
The small little mini project
https://github.com/amandaSalander/bookworm-training-polymer2.0-devfest
Polymer Summit Copenhagen 2017
https://goo.gl/ZPRpEj

Polymer 2.0 codelab for extreme beginners

Recommended

Recommended

More Related Content

What's hot

What's hot (15)

Similar to Polymer 2.0 codelab for extreme beginners

Similar to Polymer 2.0 codelab for extreme beginners (20)

Recently uploaded

Recently uploaded (20)

Polymer 2.0 codelab for extreme beginners