=========

A Polymer CodeLab

GDGDC DevFest 2014

• Date Nov 21st, 2014
• Location Aol Headquarters in Dulles VA
• Organizers GDGDC Meetup
• Sponsors The Web Platform Podcast

Summary

This Code Lab is based on Eric Bidelman's SPA Tutorial on the Polymer Project web application. In this code lab, you will create a single page application from a skeleton application using Web Components & Polymer. The application itself will be a basic wiki with information about Web Components & Resources.

READ BEFORE YOU ATTEND!!!

Before attending this codelab you will need to do some preparation and have some basic knowledge in a few technologies.

** System Requirements**

• Node.js (v0.10.30+) & NPM installed
• An IDE, code editor, or Chrome DevTools Workspace
• An Evergreen Browser
• Internet Explorer 10+
• Chrome latest
• Firefox latest
• Opera latest
• Safari latest

YOU NEED TO KNOW the basics & working knowledge of

• JavaScript, HTML, & CSS
• Git & Github

You SHOULD know

• Bower & NPM basics

DOWNLOAD ALL DEPENDENCIES PRIOR TO THE CODELAB!

In the event we have wifi issues at the codelab, you will need to have access to local files and have dependencies preloaded. We will allocate some time for fixes & problems but you need to be as prepped as possible. To get the files you need you must clone the repository using git and install its dependencies.

Git

Of course you could start a Polymer Application from scratch if you like using the yo polymer command for the Yeoman Generator 'generator-polymer` npm module which is what we did for this code lab but because you will be going through a step by step process you will need to clone the repository to get the benefits of the step by step process.

git clone https://github.com/thewebplatform/polymer-codelab-Devfest2014.git polymer-codelab-Devfest2014
cd polymer-codelab-Devfest2014

Install all NPM & Bower application dependencies

NPM (Node Package Manager)

npm install -g bower
npm install -g grunt-cli
npm install

Bower

bower install

View What You Are Building

Before we start, let's view what we are building by running the server and seeing the application.

grunt serve:dist

Next check out the app structure. In particular, view the app folder. That is where most of the app gets updated. This is the current way Google suggests you structure Polymer apps.

Instructions

You can view any completed section of the tutorial using git checkout step-?. To see the difference between any two steps, use the git diff command.

git diff step-?..step-?