The issue with picking up any new piece of tech be it a framework or entirely new language is how best to get started with it. Diving head first into a large project with deadlines is a trial by fire. You can emerge out the other side with some strong new skills and a fresh way to tackle problems, but the risk can be hard to justify when your previous ways of working are going well.

Then along comes a project, not too small and not too large with a team that already has a solid knowledge of the problem space. The technical steering team, which I am a part of, have been struggling with which frontend tech to go for (Angular2 or React). So I put myself forward to become the Angular2 guy, leaving the next project to be built in React.

Angular2

At the start of the project angular2 was at release candidate 5, several candidates off the final release. This caused some initial issues with not only implementing angular2 itself but also finding npm packages that were keeping as up to date with Angular2 as I was. Datepickers, drag+drop modules and tooltips to name a few. There is an npm package for everything you need, so it seems counter productive to build these parts internally. Though it does mean you often have to rethink your approach or patch in functionality to achieve what you need. By “npm install”-ing a package and wrapping it in your own component you have reusable code for all of your angular2 projects.

RxJS

RxJS is a set of libraries for async development and was recommended for use by the angular2 team in their quickstart guide. It is indeed powerful but wanting to use anything new and exciting got the better of me. Including RxJS into the project caused some unexpected issues, one of which has been ongoing for quite some time (Link to Github issue).  The main part of the issue is that RxJS was causing 150+ requests for its packages in order to load even just one file. This strain was not so bad on my local dev machine but when put on our dev server became the cause of fairly long load times. Bundling it and minifying did not work, thankfully the posts in the github issue led me to a solution for which I would need a build process.

As with anything in the world of web your choices are numerous. Webpack is something I almost chose as I have never used it but the need to make some progress caused me to go back to a build system I already knew…Gulp. Using gulp to build RxJS into a bundle that could then be used without causing a truckload of requests was a simple process. While I was at it I bundled up other packages being used and setup some watches for easier development.

Now I may be biased coming from an Object Oriented background but I feel that Typescript is a great addition to Angular. Type safety is such a nice thing to have and has prevented many issues in the course of this project, getting an error in your IDE is better than one from a dev server. Models and interfaces keep your code tidy and aids greatly in the reuse of functions and components.

Angular2 seems to require a fair amount of boilerplate code, this is especially true with the sizeable module file you build over the course of a project. This file contains all your components, services and modules you need for your app but just feels like it lacks some finesse. Creating a service requires a class with a special ‘@Injectable’ tag, then imported into the module and assigned to the providers where it can now be injected into a component and used. Having to remake this module file for every project you write seems a little tedious.

Angular2 itself I am somewhat less taken with, a good improvement on the first AngularJs. Especially in terms of routing and replacing the fiddly directive syntax with the much more straight forward component. The issue really is when you have so much choice in frameworks the grass always looks greener, so I can’t wait to get my hands on React. Trying something very different from the old ways of working should be an interesting experience.

Key points

Summarising an entire framework along with all the other technology needed in a short blog post isn’t really possible so here is a few key points:

• Typescript is great for any OO based developers to really break into front end development. Just remember it is still just javascript after it is transpiled.

• RxJS is clearly a very powerful library but it may be worth taking the time to research if you really need it in your project. If your work isn’t event driven then perhaps stick to the more compact Promises. This link should make good reading for those unsure: When to use RxJS

• All the boiler plate code of Angular2 is more an annoyance than a major issue. For those that have used Angular1 then Angular2, with its more reusable design approach seems the next best step. For anyone wanting to give it a try: Angular2 quickstart guide

• An entire blog could be written on build process alone, I used gulp as that is what I know. If I had to choose something different I would say Webpack sounds like the next best option.