Skip to content

Latest commit

 

History

History
50 lines (45 loc) · 2.5 KB

README.md

File metadata and controls

50 lines (45 loc) · 2.5 KB

cop-april2017-webcomponents

Repository for participants in the web components (Polymer) meeting of the CoP HTML5 and Frontend development.

Meeting April 12, 2017

Front end applications can be built using various frameworks. Those frameworks are often out of date before you had the opportunity to use them in your project and are sometimes characterized by major changes between versions. Additionally, performance can be an issue when using a large framework in your application. Recently, web components have gained attention as they comply with the new W3C standards. This makes front end development using web components more durable and requires little framework specific knowledge. Tonight, we would like to introduce you to web components using the light weight Polymer library and guide you in your first steps into the amazing world of web components.

Schedule

18.30 - 18.40: Presentation
18.40 - 19.00: Code example
19.00 - later: Create your own web components

Contact

Ton Hordijk (ton.hordijk@capgemini.com) - 0652159371
Millitza Kroonenberg (millitza.kroonenberg@capgemini.com) - 0625682746

Contents of this repository

Example

This repository contains a folder with a small example application. It shows the basics of firing events, event listeners, data binding and styling in Polymer.

Presentation

Your folders

Please add a folder for your individual project in this repository for others to see and learn from.

Get started

NodeJS and NPM

Make sure you have installed NodeJS and NPM on your machine (https://nodejs.org/en/download/).

Install the Polymer CLI

npm install -g polymer-cli@next

You can check the installation version with

polymer --version

Start your own project

  • Create a new folder for your project in this repository.
  • Copy the index.html file from the example application to your folder.
  • In your folder, create a new (app) element ('polymer init element' may be helpful).
  • Include the element in the index.html file.
  • View your first element in a browser by running 'polymer serve'.
  • Edit your element and include other elements from other participants or webcomponents.org.

Links

Learning materials

Polymer offers an interesting training kit to create your first element or application. See https://www.polymer-project.org/1.0/start/ for more information.