It is late September 2015. The autumn weather in England is still bearable, Google's guys are finishing preparing AngularConnect in London. I am sitting in a cosy board meeting room, with a reasonable guy named Guy: the company CTO. The subject of our discussion is pretty tough, though. I am pushing the idea of using Angular 2 as a foundation for a major rewrite of our current web platform and everyone is a bit sceptical about this idea. Our current web platform has been developed for the last four years, is already bit dated, hard to maintain and we decided for complete re-design and re-development.

Picking a new framework which nobody really knows, still in early alpha version, when the public API might be changing a lot, with scarce documentation, with plenty of unknown yet bugs and issues, sounds like a pretty risky move. And we already have a major deadline for the next public release which is in a couple of months. Our team of four has just been put together, including the CTO, we do not know each other well, neither we know the business. I have been with the company for a while now, currently playing full-stack developer tune, but I am leaving soon to pursue my own project and we are actively seeking for a rockstar front-end developer. Moreover, the project is complexand ambitious on its own. We are moving away from Drupal and Symfony2 based platform, that have been under active development for the last four years, to Java tier. We need to add e-commerce functionality and integration with a payment gateway. We also need to choose or build our own, little CMS. We can see plenty of data migrations and integrations with the old platform coming.

All that seems like more than enough risky factors to add another rather big one: compose and render a whole application on the client-side, using a new, possibly great but unknown yet, Angular 2 framework.

We decided we want to give ourselves a week to sleep over the subject. In meantime I was playing furiously, day and night, with Angular 2, setting up the development environment with npm, TypeScript and WebPack, building first components and services, setting up first routes and began testing with Jasmine, Karma and Protractor. All that, so I can get a solid grasp of what state Angular 2 is currently in so the team can hit the ground running, once we have made the decision.

To cut the story short, after a week of thinking, researching, playing and discussing with the rest of the team who were not particularly keen on the idea, we decided to go for it. We are re-building our web platform, completely from scratch, using Angular 2. "Under one condition." says my CTO. "You will regularly bump the version of Angular 2 and adjust our application until Angular 2 (currently in alpha) reaches beta version. And you do this outside of work hours, at your free time". We shook hands on this.

Considerations

Front-end world has changed tremendously in the past year or two. We might say that the front-end is a new back-end. More and more complex business logic and computation are moving to the browser. There are Web Workers, Service Workers, localStorage, IndexedDB, WebGL and many other cool HTML5 APIs out there right now, which allow us to build more and more advanced apps, composed and rendered entirely in the browser. With this approach, our websites and applications can be fast and responsive, presumably faster than the native desktop apps (yes, Gmail can give you search results quicker than your good old Outlook). The back-end, more and more often, is just for storing and supplying data and making sure that data is secure and protected. The rest can be built in the browser, using JavaScript. Sometimes this approach is called SPA - Single Page Application. And yes, I do agree it is a terrible name: it is not a single and it does not have to be a page.

Our website is one of those that can benefit a lot from this approach. We are a financial research company. We produce plenty of content and financial metrics for our M&A and PE customers. We assemble our data with financial metrics from other data providers. We present this rich content and data to our clients in various ways. They want to filter and aggregate it in a flexible and fast manner. If you have such a case and want to achieve the best user experience on your web platform, you probably need to build it in the browser (and be clever about how you interact with back-end services). And you want to pick up a good, ahead-of-the-time and thus, hopefully, future-proof framework for that. We picked Angular 2. After six months of development and the project now being live, in production, we believe it was a good choice.

Our project is one of those long-term projects. Once the technology stack is picked, the team probably will stick with it for the next 3 to 5 years. Therefore setting up a foundation right is essential. Knowing that you will be developing and maintaining that project in 2020, would you pick something that is already outdated (I am talking about you, Angular 1)?

These were our key considerations when making this decision. Of course, we had shivers in our backs from excitement while reading about Angular2 and about Shadow DOM, Web Components, server rendering, new routes and Dependency Injection, Reflection API and decorators, WebPack loaders, time-ticking asynchronous tests, fast performance, awesome types from TypeScript. Of course we were excited. However, it did not affect our cold logic and focus on our priority: shifting and doing more in the browser to achieve better responsiveness of our web and picking some new, cutting-edge, ahead-of-the-time framework, which we will be happy to develop in the next couple of years.

How did it go?

In short: it went well! We went live with our project mid-March, six months after we started the project. It was a successful launch and everyone likes the new experience on our site.

Developing with Angular 2 is a breeze. Angular 2 advocates a componentized way of building your website or web app. You write components which are regular JavaScript ES2015 classes with attached component template (and, optionally, CSS) and defined inputs (data) and outputs (events) of your components. You put your model in elegant JavaScript classes. You code your complex logic in services, which can be injectable using the new and improved Dependency Injection system. With that clear separation of concerns, your code is testable - both unit and functional testing in Angular 2 is easy. Also, we chose to write everything in TypeScript, which is statically typed superset of JavaScript, which we feel was a good choice.

Funny enough, as most of our time is now spent on the front-end development, all our three Java developers quickly switched to front-end programming, despite the fact that two of them were completely new to JavaScript. I believe it is thanks to TypeScript and its typed syntax. Java developers (and anyone coming from object-oriented languages) will quickly feel at home with all these things: class, private, public, protected, static, extend, interface keywords and decorators for classes and properties. TypeScript is developed by Microsoft and Google and I believe it soon will be the .NET for the front-end side of things. Worth jumping in.

Of course, we hit issues and bugs. Some of those bugs have been quickly resolved in the following alpha or beta releases. Others stayed unresolved till today and we had to find workarounds for them.  Also, the component ecosystem is not so well developed yet: we had to write even most elementary components, like a modal window component.

Even though every week brings changes for better there were times on Saturday nights when I was cursing my deal of keeping our project up-to-date with the newest release of the framework. Updating to next alpha releases was pretty painless. But for the price of working today with the technology of tomorrow and knowing how beneficial it is for our project, the price seemed to be a cheap deal. On December the 15th 2015, Angular 2 beta.0 had been released. With the next beta releases the API should not change that much, so you are on a rather safe side. Later this year we will all hopefully see Angular 2 stable release.

There is a plethora of excellent resources to learn Angular 2 as of today. Official angular.io website offers good tutorials and developer guides including testing plus solid API reference. There are also a couple of good books, e.g. ng-book 2, Angular 2 book or Switching to Angular 2.

Get on board with Angular 2

Are you starting a green-field project or adding a substantial new functionality to an existing one? You should really consider doing it with Angular 2. Even if you are a small team with tight deadlines and budget, as we are.

Note that I do not compare Angular 2 with other excellent frameworks and libraries out there (e.g. React). The point I am making is that Angular 2 is a great modern framework and you should consider starting developing with it today, even if you have production-grade application to deliver.

If you had not have a chance to catch up with the recent development of events in the front-end world, you will need to study a little. To develop with Angular 2 you need to get familiar with ES6, TypeScript, RxJS and Webpack build and packaging tool. You do not need to master all these, just get familiar with them, prepare your environment and you will learn the rest on the way.

You can also watch this great video from NG-NL 2016 conference which will gives some overview of what you are getting into:


If you want to check out our working project, you can do it here: megabuyte.com/reports. Only reports and e-commerce sections are built with Angular 2, for now. We took hybrid migration approach to avoid the big bang and have to rewrite the entire site at once.

Quick facts about the project:
* lines of code (only JS/TypeScript): 8324
* lines of code (incl. HTML, CSS): 18339
* number of components: 62
* number of developers in the team: 4
* number of developers working on front-end code: between 2 and 4.
* tech stack: Java with Spring and Grails, Angular 2, Webpack.

Special credits go to my colleagues from Megabuyte, Paul and Joel, who wrote most of the front-end code and they simply rock.

Any feedback, opinions or questions? I'll be delighted to see and answer them in the comments below.

About the author

Marcin Ryzycki (@ryzmen) is co-founder at Prototype Brewery. He dreams of building successful startups, likes martial arts and has spent the last 15 years creating more or less awesome websites and web applications.