2018-polymer

Exploring Polymer Development in 2018

• 1. Setup
• 2. Scaffolding a Project
• 3. Exploring Codelabs and Tutorials

---

1. Setup

Currently using Polymer 2.0, installed using the process documented here.

Also validated install of other dependencies (node, npm, bower). The ideal way to do this is to first install Node Version Manager (nvm), then use it to install the latest version of Node (and npm), then use npm to install other dependencies (including polymer-cli and bower).

$ npm install -g polymer-cli
..

$ polymer --version
1.6.0
$ nvm --version
0.33.2
$ node --version
v8.9.4
$ npm --version
5.7.1
$ bower --version
1.8.2

RELEVANT POLYMER 2.0 LINKS

• Start
• Feature Overview
• App Toolbox
• 2.0 Docs
• Blog
• Shop Case Study with demo & source
• News Case Study with customization, demo & source

Note that there are significant changes when you migrate to Polymer 3.0 including:

• replacing bower with npm (for managing package dependencies)
• replacing HTML imports with ES6 modules (for package loading)

We will deal with those changes when Polymer 3.0 is formally released (likely in 2018). The update should provide a Polymer Modulizer tool that makes the migration frictionless.

2. Scaffolding a Project

Using Polymer shop demo (progressive web app)

$ mkdir example-shop
$ cd $example-shop
$ polymer init
? Which starter template would you like to use? shop

$ polymer serve
info:    Files in this directory are available under the following URLs
      applications: http://127.0.0.1:8081
      reusable components: http://127.0.0.1:8081/components/shop/

Using Polymer starter kit.
Note: This creates a routed multi-page app. The 'reusable components' link will give a 404.

$ mkdir example-starter
$ cd $example-starter
$ polymer init? 
Which starter template would you like to use? polymer-2-starter-kit
info:    Running template polymer-2-starter-kit...

$ polymer serve
info:    Files in this directory are available under the following URLs
      applications: http://127.0.0.1:8081
      reusable components: http://127.0.0.1:8081/components/polymer-starter-kit/

Using simple app template (without starter kit)

$ mkdir example-app
$ cd $example-app
$ polymer init
? Which starter template would you like to use? polymer-2-application
info:    Running template polymer-2-application...
? Application name my-site
? Main element name my-site-main
? Brief description of the application A simple personal website 

$ polymer serve
info:    Files in this directory are available under the following URLs
      applications: http://127.0.0.1:8081
      reusable components: 

Using custom element template

$ mkdir example-elem
$ cd $example-elem
$ polymer init? 
? Which starter template would you like to use? polymer-2-element
info:    Running template polymer-2-element...
? Element name about-me
? Brief description of the element Element that displays a business card for the person

$ polymer serve
info:    Files in this directory are available under the following URLs
      applications: http://127.0.0.1:8081
      reusable components: http://127.0.0.1:8081/components/about-me/

The projects do not check in the build/ bower components/ and node modules/ directories. Simply run "bower install" (to install dependencies) and "polymer build" (to build distributions) from code

In due course, each project/codelab folder will contain updated README.md files that provide insights/notes to help understand that specific content or code.

3. Codelabs and Tutorials

These are the relevant Polymer 2.0 codelabs.

1. Build and Deploy Polymer 2.0 App From Scratch
2. PRPL Pattern with Custom Elements and Firebase
3. Build an Image Carousel Element with Polymer 2.0
4. Image Styling with Web Components
5. How to contribute to Web Components Ecosystem
6. Build Google Maps using Web Components and no code

Also check out these older codelabs - note they are Polymer 1.0 but I hope to "update" them to validate usage with Polymer 2.0

1. Interact with Bluetooth devices on the web with Polymer
2. Build a PWA with Firebase and PolymerFire

Additional Tutorials to explore

1. Build an Element | Build an App - the starting point for learning the basics
2. Using the News App where you can explore and customize the implementation behind the design