This document gives you an overview of PolymerJS and how it can be used to build engaging user experiences being very native to all the browsers too. PolymerJS leverages the core concepts of WebComponents which is the future of Web Development as most of the important specs are coming to the browsers in latest releases.

1. mAppMechanic PolymerJS
PolymerJS
1
Session 1 - Introduction

2. PolymerJSmAppMechanic
Agenda
2
• Evolution of Web
• History of PolymerJS
• Background about Web Components
• Introduction to PolymerJS
• Setting Up Dev Environment
• Creating a Sample Polymer App
• Using a Polymer Element

3. PolymerJSmAppMechanic
Evolution of Web
3
1993 - 1997: Static HTML
Websites, GIFs, Minimal
Javascript and DHTML
1995 - 2002: Dynamic Web
Pages, Server Side
Programming - CGI, Perl,
PHP, JSP, Java
2002-2007: CMS Systems
like Wordpress, Drupal,
Joomla etc - HTML4, Initial
Ajax, Canvas, Web Fonts
2008-2012: RIA Apps, Client
Server Apps, CSS3,
Animations, Offline,
Responsive Design
2012-2014: Cloud
Apps - Salesforce,
Google Drive, MS
Office 360, Paypal
3
2015-2016: User Experience -
Front End MVC, Single Page
Apps - Angular, React, Node,
Nginx, IOT, Smartwatches

4. PolymerJSmAppMechanic
History
4
Launched at
Termed as Tectonic
Shift in the Web

5. PolymerJSmAppMechanic
Web Components
5

6. PolymerJSmAppMechanic
Web Components
6

7. PolymerJSmAppMechanic
Shadow DOM
7
• Isolated DOM
• Scoped CSS
• Composition
• Simplifies CSS
• Productivity

8. PolymerJSmAppMechanic
HTML Imports

9. PolymerJSmAppMechanic
HTML Templates

10. PolymerJSmAppMechanic
Custom Elements
<my-component-new
property=“Awesome”
onUpdate=“onChange”>
</my-component-new>
Custom elements teach the browser new tricks while
preserving the benefits of HTML.

11. PolymerJSmAppMechanic
Status
11

12. PolymerJSmAppMechanic
Introduction
12
• Official Support by Google
• Base platform includes set of Polyfills for Web Components
• On top of it, provides excellent features & utilities like 2 way
data-binding, Computed Properties to build RIA apps
today.
• Stable version 1.0 released in 2015 (28/05/2015)
• Performance & use of latest Web Standards by everyone is the
goal. It is also considering about PWA, Service Workers &
HTTP2
• Awesome catalog of re-usable elements for Rapid Dev

13. PolymerJSmAppMechanic
Introduction
13

14. PolymerJSmAppMechanic
Setting Up Dev Env
14
• Install Git.
• Install the current LTS version (6.x) of Node.js or newer.
• Install the latest version of Bower.
npm install -g bower
• Install Polymer CLI.
npm install -g polymer-cli
You're all set. Run polymer help to view a list of commands.

15. PolymerJSmAppMechanic
Creating Sample App
15
New App & Use a Simple Polymer Element

16. mAppMechanic PolymerJS 16
Thanks
mAppMechanic
twitter.com/mAppMechanic
linkedin.com/in/rahatkh
yehtechnologies@gmail.com