Reasons for Typescript
I already gave a go to Babel, so this time it was time for Typescript. Why choose Typescript and not stay with Babel is justified by the points below.
- I love static typed languages :) and Typescript is much closer to that rather than JS
- I prefer compilation errors much more than runtime exceptions
- I believe it will be alive for at least 3 more years since it is backed by Microsoft and Google and is used as the main language for Angular 2
- Better IDE support (if I decide to use one)
I wanted to not spend more than 1-2 days so I have chosen something super simple to implement. I decided to develop a numerology calculator of your life path number :) Fancy stuff!
Calculate your life path number at https://lambrospetrou.com/numerology/
My main goal with the project was to come up with a build process using Typescript with ES6, Webpack and ReactJS. I also wanted to use Autoprefixer and SASS so I added Gulp to the mix too, but I tried to keep it at a bare minimum.
The final process is explained in the following sections.
I wanted from the beginning to consolidate the code building into one tool, and the decision was pretty easy since Webpack is the big winner (at least for now).
The requirements are simple:
- Write my code in Typescript
- Use ES6 features
- Support browsers that only have ES5 support
- As a bonus I also wrote the gulpfile in Typescript and used a hack-around to use it to actually compile the Typescript code :)
For ReactJS I needed to install react and react-dom along with their typings to allow Typescript to resolve the React types. Pretty smooth process and I also found out something I did not know before. With webpack I can use the npm modules during development but do not bundle them along with my app code to keep the footprint small. By specifying that these modules are external I just need to use script tags in my HTML to import the public ReactJS libraries and take advantage of CDNs and local cached versions.
npm install typescript typings react-dom react --save-dev typings install dt~react dt~react-dom --global --save
In order to be able to use some of the ES6 features, like Object.assign(), I had to include es5-shim and es6-shim in my HTML code right before I imported the Typescript compiled bundled which targets ES5. I also needed to install the typings for ES6 in order to stop Typescript compilation errors when using ES6 features in the code.
typings install dt~es6-shim --global --save
Use Typescript for the Gulpfile
SASS and Build
I spend some time back and forth with the Typescript documentation, expected since this is the first time I tried it, but I liked it. I am going to stick with this for a while until I find something much more productive and powerful, ScalaJS might be that one :)
Finally, I liked ReactJS too, and this is the second fun-project I do using it, but since I am an Angular die-hard I have to try the stable version of Angular 2 (which just released RC) to decide if there is a winner between them.
If you have a better pipeline for the above tools please contact me :)