Skip to content

Commit 69e5a1f

Browse files
committed
updated readme
1 parent c6cda5b commit 69e5a1f

File tree

1 file changed

+20
-17
lines changed

1 file changed

+20
-17
lines changed

README.md

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
## _React v15.3 / Redux v3.6 / TypeScript v2.1_ - starter-kit
22
#### __React-Router v2.8 / Seamless-Immutable / JSPM (SystemJS & Rollup with tree-shaking)__
33

4-
> ##### Futuristic, bundle-free development environment for building _Component-Driven SPA with React, Redux and TypeScript_ - utilizing power of Static Type-checking, ES.Next, CSS-Modules, Hot-reload, in-browser transpilation, tree-shaking - powered by JSPM (SystemJS & Rollup with tree-shaking).
4+
> ##### Futuristic, bundle-free development environment for building _Component-Driven SPA with React, Redux and TypeScript_ - utilizing power of Static Type-checking, ES.Next, CSS-Modules, Hot-reload, in-browser transpilation, tree-shaking - powered by JSPM (SystemJS & Rollup with tree-shaking)
55
6-
### _Demo Page:_ http://piotrwitek.github.io/react-redux-typescript-starter-kit/
7-
### _Minimal React-like + Redux starter-kit EVER (13KB Min+Gzip):_ https://github.com/piotrwitek/preact-typescript-rollup-starter-kit
6+
### _Demo Page:_
7+
http://piotrwitek.github.io/react-redux-typescript-starter-kit/
8+
### _Check also minimal [Preact](https://github.com/developit/preact) + Redux starter-kit (13KB Min+Gzip):_
9+
https://github.com/piotrwitek/preact-typescript-rollup-starter-kit
810

911
Table of Contents
1012
1. [Innovations](#innovations)
@@ -22,7 +24,7 @@ Table of Contents
2224

2325
### - RAPID-SPEED DEVELOPMENT WORKFLOW - no bundling!
2426
No bundling during development, instead loading source files (.ts/.tsx) directly in the browser (using [plugin-typescript](https://github.com/frankwallis/plugin-typescript)).
25-
When file changes - skipping type-checking (which is delegated to seperate process) and reloading only the changed file with hot-reload.
27+
When file changes - skipping type-checking (which is delegated to seperate process) and reloading only the changed file with hot-reload
2628

2729
### - DELEGATED TYPE-CHECKING
2830
Type-checking is delegated to a seperate process using following options:
@@ -35,20 +37,20 @@ __NOTE:__ There are two seperate __tsconfig__ - one for type-checking during dev
3537

3638
[tsconfig for building production bundle](https://github.com/piotrwitek/react-redux-typescript-starter-kit/blob/a00c1b5854c36ea4d31fa1255ce920134bfc3855/jspm.config.js#L129)
3739

40+
### - STRICT NULL CHECKS - Enabled
41+
Enabled strictNullChecks with noImplicitAny tsc flags, to increase type safety and grant better tooling support using Non-nullable Types (v2.0) and Smarter Type Inference (v2.1) [Source](https://blogs.msdn.microsoft.com/typescript/2016/11/08/typescript-2-1-rc-better-inference-async-functions-and-more/)
42+
3843
### - HOT-RELOAD THAT SCALE
3944
Local dev server with hot-reloading out-of-the-box (using [systemjs-hot-reloader](https://github.com/capaj/systemjs-hot-reloader)).
40-
__How:__ Loading each module separately and using SystemJS module registry, on changes it's removing old module from registry and re-importing updated one then re-evaluating only those modules that was importing the changed module.
45+
__How:__ Loading each module separately and using SystemJS module registry, on changes it's removing old module from registry and re-importing updated one then re-evaluating only those modules that was importing the changed module
4146

42-
__Scale well with increasing modules count because you reload only modules that has changed.__
47+
__Great scaling capability with increasing module count because you reload single module files that has changed without rebuilding anything.__
4348
> __Differences with Webpack workflow explained__ from real project perspective by [@jonaskello](https://github.com/jonaskello) https://github.com/Microsoft/TypeScript/issues/1564#issuecomment-252903932
4449
4550
### - CLI WORKFLOW
4651
Most often your team is using different Editors/IDE's so you'll need to have a common way to run type-checking using a specific version of TypeScript compiler for consistent results and avoid Editor specific issues.
4752
Run `tsc -p src --watch` command for quick incremental type-checking or `tsc -p src` command for one-time complete check (JS emit is disabled to not clutter your project with intermediate JS files)
4853

49-
### - STRICT NULL CHECKS - Enabled
50-
Enabled strictNullChecks with noImplicitAny tsc flags, to increase type safety and grant better tooling support using Non-nullable Types (v2.0) and Smarter Type Inference (v2.1) [Source](https://blogs.msdn.microsoft.com/typescript/2016/11/08/typescript-2-1-rc-better-inference-async-functions-and-more/)
51-
5254
### - ASYNC/AWAIT/GENERATORS transformation when targeting ES5 (No Babel)
5355
Support for "async & generator functions" when targeting ES5 __without Babel!__
5456
- Async/Await - TypeScript v2.1 provide native support for ES5 transformation (https://github.com/Microsoft/TypeScript/pull/9175)
@@ -59,7 +61,9 @@ __Until then use an alternative solution covered below:__
5961

6062
[Facebook Regenerator Project](https://github.com/facebook/regenerator) instead of __Babel__ to transform Generator Functions. _(NOTE: Internally **Babel** is also running "regenerator runtime" for async and generator functions transformations - https://babeljs.io/docs/usage/caveats/)_
6163

62-
> When building for production use `npm run regenerator` command after completion of build step, this will run "regenerator" on app.js bundle. Alternatively use `npm run build:regenerator` command to automatically run "regenerator" with each production build.
64+
> When building for production use `npm run regenerator` command after completion of build step, this will run "regenerator" on app.js bundle. Alternatively use `npm run build:regenerator` command to automatically run "regenerator" with each production build
65+
66+
### - TESTING WITH TYPESCRIPT - writing and running tests in TypeScript runtime using source files, abstracting complicated setups and transpilation complexity (use `npm test` CLI command) - test harness using [jest](https://github.com/facebook/jest)
6367

6468
### - CSS-MODULES WITH TYPED CLASS-NAMES EXPERIMENT
6569
Locally scoped CSS styles, encapsulated as ES6 Modules that can be imported in UI components, with capability to type-check CSS class-names in your components using interfaces and leverage TypeScript IntelliSense features in Editor/IDE (using [csjs](https://github.com/rtsao/csjs#faq)):
@@ -72,7 +76,7 @@ __DEMO:__ http://piotrwitek.github.io/react-redux-typescript-starter-kit/#/css-m
7276

7377
### - Optimized JSPM (SystemJS) loading speed
7478
To speed up a full page reload by minimizing request count it is possible to create a development "vendor bundle" for external dependencies loaded from node_modules.
75-
If not leveraging HTTP/2, it is a best practice to bundle all external dependencies together and load as a one bundle.
79+
If not leveraging HTTP/2, it is a best practice to bundle all external dependencies together and load as a one bundle
7680

7781
Test reload speed improvement using this simple test procedure:
7882
1. run `npm run unbundle` -> open network tab in chrome dev tools -> reload the page -> check logged results
@@ -82,14 +86,12 @@ Test reload speed improvement using this simple test procedure:
8286

8387
## Features
8488

85-
- PRODUCTION-WORKFLOW - npm scripts for production bundling & deployment, github-hooks, linter, test runner etc.
89+
- PRODUCTION-WORKFLOW - cross-platform npm scripts for production bundling & deployment, github-hooks, linter, test runner etc.
8690
- TYPESAFE-API-CALLS - type checking contracts of REST API calls - forget constantly checking for API docs and let your IDE guide you
8791
- REACT-ROUTER - included `react-router-redux` to store your routing in state for Time-Travel capabilities
8892
- REDUX-DEV-TOOLS - installed Redux DevTools capabilities with [chrome-extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
8993
- IMMUTABLE-STORE - using `seamless-immutable` for simplicity and backwards-compatibility with vanilla JS (no hassle with `toJS()`, `get()`, `getIn()` in your containers and components)
9094
- BEM & ITCSS - using BEM with Inverted Triangle conventions to give meaning and context to CSS classes
91-
- TESTING IN TYPESCRIPT - writing and running tests from TypeScript source files without transpilation complexity (use `npm test` CLI command) - test harness using [tape](https://github.com/substack/tape) and [blue-tape](https://github.com/spion/blue-tape).
92-
- Type-safe React-Redux with TypeScript
9395

9496
#### React Best Practices & Optimizations
9597
- no mixins -> use ES6 style PureRenderMixin with PureComponent
@@ -140,12 +142,11 @@ Test reload speed improvement using this simple test procedure:
140142
│ ├── components # global reusable presentational components
141143
│ ├── containers # container components providing redux context
142144
│ ├── layouts # components defining page layouts
143-
│ ├── store # modules containing redux modules (reducers/constants/action creators)
144145
│ ├── services # modules abstracting communication with web services
146+
│ ├── store # modules containing redux modules (reducers/constants/action creators)
145147
│ ├── types # custom TypeScript definitions
146148
│ ├── utils # app utility modules
147149
│ ├── app.tsx # app entry module with routing config
148-
│ ├── test-runner.tsx # test suites config
149150
│ └── tsconfig.tsx # TypeScript compiler config
150151
├── index.html # index.html
151152
├── index.prod.html # index.html configured for production use
@@ -227,13 +228,15 @@ __NOTE: Use index.prod.html for production, it have slightly different loading l
227228

228229
#### Deployment
229230

231+
`npm run init` - install jspm packages and prebuilds vendor.dev.js bundle
232+
230233
`npm run init:deploy` - clone git repository in `/dist` folder (gh-pages branch)
231234

232235
`npm run deploy` - commit and push all changes found in `/dist` folder
233236

234237
#### Utility & Git Hooks
235238

236-
`npm run clean` - clean dist folder
239+
`npm run clean` - clean dist, node_modules, jspm_packages folder
237240

238241
`npm run lint` - run linter
239242

0 commit comments

Comments
 (0)