generator-polymer-typescript
v0.2.3
Published
generator for polymer2, typescript and redux application. Bundle with webpack
Downloads
2
Readme
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