generator-polymer-typescript

generator-polymer-typescript

generator for polymer2 typescript and redux application

Installation

First, install Yeoman and generator-polymer-typescript using npm (we assume you have pre-installed node.js). Require node version above 6.0.0

npm install -g yo
npm install -g generator-polymer-typescript

Commands

• yo polymer-typescript generates a full polymer-redux typeScript project.
• yo polymer-typescript:module generates a project for pure typeScript ES6 module.
• yo polymer-typescript:material generates project with one Polymer element.

Then generate your new project:

yo polymer-typescript

stack

These are the main technologies selected for this project and purpose of use

TypeScript

Leverage on typeScript syntax and strong typing to create a self documented code that scale at larger teams.

Resource: typeScript official site

ES6 Modules

Create standard JavaScript modules that are easy to reuse.

Resource: es6 modules explain

webCompoments with Polymer2

Polymer is a JavaScript library that helps you create custom reusable HTML elements. Resource: Polymer

State management with Polymer redux

Redux make easy complex state management of applications. Resource: polymer-redux

Routing with redux routing

Application routing integrated with Redux to mirror application state in the URL. Resource: redux-routing

Testing with webComponent tester

Power full testing suite to test both webComponent and ES6 module. Resource: web-component-tester

Bundle with webpack

Tranform our typeScrip code to packaged javascript application. ressource: webpack

Package management with npm and bower.

Bower is used to install client side package and Npm mainly to development dependency.

command

npm install: install project dependency.

npm run tsc: run typeScript compiler.

npm run build build and bundle application with webpack.

npm run demo launch application with webpack server.

npm run test bundle test files with webpack and run test with webComponent tester.

npm run build:test:watch bundle test files with webpack and watch on changes.

npm run test:persist bundle test files with webpack and watch on changes.

npm run doc generate project documentation with typedoc.

directories

|- src project source

|--- lib (API and helper) in pure ES6 TypeScript module.

  Are concerned with non UI computational tasks such as API access, data treatment, communication, data storage...

  They are stateless.

  Interact with others modules via asynchronous function calls.

  They are built from a factory and most of the time They are singletons.

|--- presentational reusable webComponent

  Are concerned with how thinks look

  Don’t specify how the data is loaded or mutated

  receive data via attributes or function calls.

  Are notifying container component of change via event bubbling

|--- container redux-polymer components

  Are concerned with how thinks works

  May encapsulate other containers and presentational modules.

  Provide data and configuration to other containers

  They act as controller between other modules.

|--- action, reducer and store Redux helper

  Register Redux action and reducer to encapsulate Redux dependency outside library and presentational modules.

|- test contains test boilerplate.

Register you modules under test `test.ts` and `modules.json`

|- types typing declare files for modules where declaration is missing.

Getting To Know Yeoman

• Yeoman has a heart of gold.
• Yeoman is a person with feelings and opinions, but is very easy to work with.
• Yeoman can be too opinionated at times but is easily convinced not to be.
• Feel free to learn more about Yeoman.

License

MIT © hubjac1