Image Source:

Aha Moments from ngconf 2016 Part 2: Angular 2.0, To do or not to do juggle

Migrating our applications to Angular 2.0 was always on our roadmap but there were always questions and doubts. We were never certain if it was the right time. But when Angular 2.0 RC was announced in the first keynote session of ngconf, we realized now is the time to give a serious thought to it.

To give a little background, we have a bunch of applications which are running on Angular 1.5 and material 1.0. The most important piece that we are working on is an abstract platform which is basically the UI standard to be followed across applications in our organization. It should define the standards, tooling, frameworks and versions to be used, examples to exhibit features which any application may import from this platform as reusable components. It is on Angular 1.5 and has clean build scripts, tooling, test cases running, etc. It is in about-to-be complete state now.

And a week after ng-conf when we were almost ready with 1.5 version of platform, the question was whether to migrate to Angular 2.0 now or later. Should we wait for it to be complete or be the part of its completion. Our UI enthusiast team has five engineers and as a team we are skilled from design to code to a complete UI solution. We can deliver a full Interface Life cycle. Every one had say & views in it. We did a lot of white boarding considering the state of our applications, what are our deliverables, what hurdles are their in the migration path but most importantly what do WE want to do.

This was what we covered/explored and eventually concluded:

Angular 1.5 with material 1.0

It’s a tried and fully tested version. Things are all hunky dory here. Other products can immediately start using it. But, are we thrilled about it, Hell NO!!!

But we recognized that material 2.0 is in a very tyro state as compared to 1.0. So we considered other options like Polymer but it has its own issues like template-styling and mixing angular with polymer is actually not a very efficient idea.

Angular 2.0 with material 2.0

We recognized that it’s tyro, insufficient documentation, material has no layouts or themes, but still its angular 2.0. It comes with Typescript which adds typing to your JavaScript which every JavaScript developer always wanted. Someone said in ng-conf presentation that

** undefined and null are 2 billion $ mistakes of JavaScript ***

Lets just say TypeScript has taken care of those mistakes now. Plus there’s a plenty of opportunity to learn, contribute and be seasoned angular 2.0 developers.

In 2 days, we were able to build a platform with minimum features but which has typescript, angular-cli build, basic material 2.0, routerLink, export/import components using typescript and we are continuously working on adding more and more features every day. We are also looking into what we require which is missing from material 2.0 as of now.

Here’s a link to a sample starter app to get started: Some things to observe in this are:
  • Map & Material Packages contain the package list which form the System config like this:
var config = { map: map, packages: packages } System.config(config);
  • ./systemjs.config.js (root)
  • clicomponent is built using cli and imported as a node_module component in this sample.
  • ./app.component.ts & ./main.ts(both on root) to understand components importing
  • The structure that we actually follow is a little different from what you see in the starter app. The better structure is to have all files/folders like angular-cli-build.js, angular-cli.json, node_modules, package.json on root level. Then instead of having app folder on root, have src on root and dist for built version of files. system-config.ts is also a prt of src folder.

We recognize that it’s a challenge to migrate to Angular 2.0 and using material 2.0 in the current state. It’s a giant leap that we are taking right now we are pretty excited about it.

In the Game of Thrones style, as the wise man once said (damn, am a GOT fan), Journey to the righteous path is never easy but eventually gives you the best results!!!