Overview
This repo is made up of an LRN Developer Docker image and a hello-world example Polymer element. The LRN Developer image contains node
, polymer-cli
, bower
, and lrndeveloper
to assist in the creation of new Polymer elements and applications. It is HIGHLY recomended that you utilize the Docker installation process for Polymer training. This will allow you to follow along with the trainers.
Installation
Docker (recommended)
Install Docker from the official Docker website. Either Docker for Mac or Docker for Windows. Once Docker has been installed, open the application to allow it to run.
Verify that you have Docker installed by running:
docker
Verify that you have Docker Compose install by running:
docker-compose
If you did not receive any errors then that means you've installed it correctly and can move on to installing Git. :)
Manual Installation (not recommended)
In case you can't install Docker or prefer not to here.
- git - https://desktop.github.com/
- node - https://nodejs.org/en/ (https://askubuntu.com/questions/925416/how-to-upgrade-node-js-from-4-2-to-6-11-0-on-ubuntu-16-04)
- npm install -g polymer-cli
- npm install -g bower
Git
Install Git from https://git-scm.com/
Verify that you have Git installed by running:
git
Get the docker container to start
Once you have Git installed, git clone the polymerday repo.
git clone https://github.com/LRNWebComponents/polymer-training.git
cd polymer-training
Start Docker containers:
make start
Verify Installation
You should be able to see a "hello-world" element at http://localhost:8082/components/hello-world
Connect to the docker container to make a new project
Leave this running and open a new command prompt.
cd polymer-training
make connect
lrndev
Choose option 1 to make a new boiler plate Polymer 1.x.x hybrid element.
IDE
We recommend using the Visual Studio Code IDE. They have a number of plugins that are really handy for Polymer development. Definitely not required but we really like it. :)
Resources
- Poylmer Docs - https://www.polymer-project.org/1.0/docs/devguide/feature-overview
- Webcomponents . org - https://www.webcomponents.org/
- Drupal web components module - https://www.drupal.org/project/webcomponents
- Drupal @ PSU blog - https://drupal.psu.edu/blog
- ELMS:LN - https://www.elmsln.org/
- Similar presentation https://www.slideshare.net/BryanOllendyke1/web-components-polymer-and-aligning-drupals-destiny
Why Polymer & Web components? Why now?
- Presentation: The history of web based platforms (@btopro) (35 min)
- Getting Polymer tooling setup (@hey__mp and anyone else who can help out)
Getting into polymer
Start Docker Services
- Start all Services
make start
Making a hello-world element (@hey__mp)
- open Preview at http://0.0.0.0:8082/components/hello-world
- understanding the structure of this repo
- add
name
property - create multiple hello world elements in demo with different names
- add some css to the element
- add a
theme
property - use reflectToAttribute (https://www.polymer-project.org/1.0/docs/devguide/properties)
- create
:host[theme="light"]
and:host[theme="dark"]
css - update the demo to use both theme settings
- add click event to switch theme
nasa-search
- utilize a public API --
https://images-api.nasa.gov/search?media_type=image&q=
- utilize
iron-ajax
to make request to NASA API - utilize
template-repeat
to display a list of images - utilize
paper-input
to make search input