You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+23-22Lines changed: 23 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,11 +20,11 @@ Table of Contents
20
20
21
21
## Innovations
22
22
23
-
### RAPID-SPEED DEVELOPMENT WORKFLOW - no bundling!
23
+
### - RAPID-SPEED DEVELOPMENT WORKFLOW - no bundling!
24
24
No bundling during development, instead loading source files (.ts/.tsx) directly in the browser (using [plugin-typescript](https://github.com/frankwallis/plugin-typescript)).
25
25
When file changes - skipping type-checking (which is delegated to seperate process) and reloading only the changed file with hot-reload.
26
26
27
-
### DELEGATED TYPE-CHECKING
27
+
### - DELEGATED TYPE-CHECKING
28
28
Type-checking is delegated to a seperate process using following options:
29
29
-__CLI__ - TSC compiler process running in watch mode: [instruction here](#cli-workflow)
30
30
-__Editor/IDE__ - use internal TypeScript Language Service (e.g. Webstorm, VS Code, Atom, Sublime Text, alm.tools and more...)
@@ -35,40 +35,33 @@ __NOTE:__ There are two seperate __tsconfig__ - one for type-checking during dev
35
35
36
36
[tsconfig for building production bundle](https://github.com/piotrwitek/react-redux-typescript-starter-kit/blob/a00c1b5854c36ea4d31fa1255ce920134bfc3855/jspm.config.js#L129)
37
37
38
-
### HOT-RELOAD THAT SCALE
38
+
### - HOT-RELOAD THAT SCALE
39
39
Local dev server with hot-reloading out-of-the-box (using [systemjs-hot-reloader](https://github.com/capaj/systemjs-hot-reloader)).
40
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.
41
41
42
-
__This solution scale really well with increasing modules count because you reload only modules that has changed.__
42
+
__Scale well with increasing modules count because you reload only modules that has changed.__
43
43
> __Differences with Webpack workflow explained__ from real project perspective by [@jonaskello](https://github.com/jonaskello)https://github.com/Microsoft/TypeScript/issues/1564#issuecomment-252903932
44
44
45
-
### CLI WORKFLOW
45
+
### - CLI WORKFLOW
46
46
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.
47
47
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)
48
48
49
-
### Strict Null Checks Enabled
49
+
### - STRICT NULL CHECKS - Enabled
50
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
51
52
-
### ASYNC/AWAIT/GENERATORS transformation when targeting ES3/ES5 (No Babel)
53
-
Support "async & generator functions" when targeting ES3/ES5 __without Babel!__
54
-
- Async/Await - TypeScript v2.1 provide native support for ES3/ES5 transformation (https://github.com/Microsoft/TypeScript/pull/9175)
55
-
- Generators - for the moment TypeScript DevTeam have declined to support generators downlevel transformation (to ES3/ES5) (https://github.com/Microsoft/TypeScript/issues/3975#issuecomment-250859415), but you can use an alternative solution covered below:
52
+
### - ASYNC/AWAIT/GENERATORS transformation when targeting ES5 (No Babel)
53
+
Support for "async & generator functions" when targeting ES5 __without Babel!__
54
+
- Async/Await - TypeScript v2.1 provide native support for ES5 transformation (https://github.com/Microsoft/TypeScript/pull/9175)
55
+
- Generators - generators downlevel transformation (to ES5) is a work in progress ([Source](https://github.com/Microsoft/TypeScript/pull/12346)
56
+
also [here](https://github.com/Microsoft/TypeScript/issues/3975) and [here](https://github.com/Microsoft/TypeScript/issues/1564))
56
57
57
-
__Generators transformation to ES3/ES5:__
58
-
Use [Facebook Regenerator Project](https://github.com/facebook/regenerator) instead of __Babel__ as dependency to transform Generators.
59
-
_(NOTE: Internally **Babel** is also running "regenerator runtime" for async and generator functions transformations - https://babeljs.io/docs/usage/caveats/)_
58
+
__Until then use an alternative solution covered below:__
60
59
61
-
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.
60
+
[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/)_
62
61
63
-
### Optimized JSPM (SystemJS) loading speed
64
-
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.
65
-
If not leveraging HTTP/2, it is a best practice to bundle all external dependencies together and load as a one bundle.
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.
66
63
67
-
Test reload speed improvement using this simple test procedure:
68
-
1. run `npm run unbundle` -> open network tab in chrome dev tools -> reload the page -> check logged results
69
-
2. run `npm run build:dev` -> open network tab in chrome dev tools -> reload page -> compare logged results with previous
70
-
71
-
### CSS-MODULES WITH TYPED CLASS-NAMES EXPERIMENT
64
+
### - CSS-MODULES WITH TYPED CLASS-NAMES EXPERIMENT
72
65
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)):
73
66
- Define available CSS classes as interfaces in CSS-Modules to get className property auto-completion, type-checking and easy refactoring in your entire codebase.
74
67
- Auto-generate documentation for CSS styles leveraging JSDoc support in defined interfaces.
@@ -77,6 +70,14 @@ Locally scoped CSS styles, encapsulated as ES6 Modules that can be imported in U
77
70
__EXAMPLE:__[Consumer Component](src/containers/css-modules-container/index.tsx) and it's [CSS Module Styles in TypeScript Format with Class-Names Interface](src/containers/css-modules-container/container-styles.tsx)
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.
76
+
77
+
Test reload speed improvement using this simple test procedure:
78
+
1. run `npm run unbundle` -> open network tab in chrome dev tools -> reload the page -> check logged results
79
+
2. run `npm run build:dev` -> open network tab in chrome dev tools -> reload page -> compare logged results with previous
0 commit comments