My Fullstack Journey to Angular 2

Introduction
After my last contract ended working on Wall street as a C++ developer, I’ve been on a journey to build my fullstack mastery. Starting out was painful, confusing and overwhelming! Anyone working with Javascript will tell you the landscape has been changing and expanding really fast. There has been an explosion of javascript modules, toolkits and frameworks, add to this the various transpilers, build systems, unit-test frameworks and module systems. Was left asking, where do I start, what do I choose?

Here is a simple build pipeline I sketched when I was learning React, long gone is the day of the simple HTML website.

When you enter the JS landscape, the choices out there will make your head spin, the community calls it javascript fatigue. If you’re starting out, it will be a daunting task to figure things out for yourself, and an uneasiness overcomes you when deciding what technology stack to go with. You will wonder, am I picking the right one, will it serve me into the future, will it make my life easier, will I be able to hire people who know it (Startup), can I make a good living off it (Consulting)?

Toolkit or Framework

No doubt if you’re a Startup, you will ask yourself this one question, toolkit or framework? Do you pick a pure JS toolkit like Backbone/Knockout/Dojo/React, add some Node, Express and jQuery to the mix. This will allow you to remain flexible and not tied down to any convention and decisions made for you by the framework gods. Maybe you want to skip all this and pick a framework like Ember, Meteor or Angular 2.

The trade-off is, do you want to do all the heavy lifting and wire things up with JS and jQuery? or do you want to leave this to the framework and focus on expressing your creative powers and getting work done. Regardless with what you decide, it will be based off either having more control and flexibility or more speed and consistency.

For me, I decided I didn’t want to consume all my time coding common patterns that have been solved by the Computer Science community. Why write your own data-binding and MVC model? You go down this route, you’re going to have to worry about bugs, speed, scalability and various browser compatibility quirks in your custom code, and don’t forget mobile. I don’t know about you, but this is the last thing I want to be doing with my valuable time, wringing up my code and testing it. I want to stand on the shoulders of giants.

Becoming a Titan
As a C++ developer I’ve done both client GUI application development, as well as server side development, networking programming and worked with various SQL databases. Likewise as a JS developer, you’re going to want to become a frontend developer, a backend developer or the very rare breed of fullstack developer. Before you start this journey, as a JS developer you need to learn the core language that is javascript, and there is no way out of learning ECMAScript 2015. All modern JS projects have embraced ECMAScript 2015/2016, or TypeScript. It’s no longer a choice to get away with basic JS skills. In time you will begin to see modern JS in NPM modules and the the backend using Node, so learn modern JS well.

The Frameworks
I personally see the duality of Frontend and Backend role disappearing into a singularity thanks to modern frameworks and JS everywhere. You can throw in mobile development, it’s becoming increasing more viable to do mobile development in pure JS with frameworks like Angual-2, Reactive Native, Meteor and thanks to Open source projects such as NativeScript and Apache Cordova. Modern frameworks are using storage patterns like Redux or the Single Store aka “Single Source of Truth” to make it more manageable to keep track of data changes using a state machine. Soon you won’t need to think where your data lives, you will just code and move easily from browser to server.

With data flow, modern frameworks are moving toward a top down data-flow model and away from entangled states. Learn Redux and it will make your life managing state and data a whole lot simpler. Once you’ve got the grasp of JS fundamentals, it’s time to dive into the framework world.

I started off with Ember, my initial choice was limited by my bias away from React and Angular because it was backed by Facebook or Google and I didn’t want to just jump on the bandwagon (Hey, I’m a serious C++ programmer!!!).

Ember for one reason or another just didn’t feel right and I found myself struggling with simple concepts, mostly with ember-data. What I disliked about Ember, is how alone I felt, no one I knew was using it or knew much about it locally in Toronto. After I moved backed to Toronto from NYC, I started to look into React because at this time I was still holding onto my Ruby on Rails crutch and was looking towards React as a drop-in dynamic-view for Rails MVC answer. However using jQuery and AJAX just sucked for Rails dynamic views. The hybrid React-Rails was maddening, now I had to code in Ruby and know Rails and also code in javascript and know React. I also had 2 build systems, 2 test framework, one for Rails and the other for React to work with. Also the idea of context switching just didn’t sit right with me. This to me is the definition of programmer insanity!

Getting Rid of Baggage
I am getting old, getting slow, I follow the KISS principle, actually it is the LAW for me. Even with my code, I don’t introduce cool new patterns and abstractions if it’s going to make my brain hurt to keep everything in my head at once, it also will trip up new developers. As a software developer, I want to simplify my life. I want to eliminate everything I can and not add to it. You cannot ever simplify your life as a programmer by finding some new technology that takes away some pain you’re feeling in one area and add it to your tech stack. If you don’t get rid of the old baggage, all you’re doing is increasing your surface area, widening your scope and stretching yourself thin. In the madness that will soon ensue you will find yourself context switching and putting so much burden on your mental faculties that you will in effect become inefficient and ineffective. This is a the path to burnout. So I tossed out Rails, and went pure JS.

I found React was super easy to learn, more so than Ember, the API surface is very small and React only focuses on rendering the view. React is powerful when it comes to composable components (views), it uses JSX which is HTML like to describe the HTML sub-view, and who doesn’t know HTML?

Your component becomes a new HTML tag to be used in your HTML document, couldn’t be simpler. I went deep with React and Redux, and stopped when it was time to look into React-Router, this is when that gut feeling kicked in again. I don’t like that React-Router is a separate project, and I have this feeling React will eventually grow into a MVC! So it was one step forward, two steps back, as I ended up asking myself, “Why don’t I just start with a pure MVC.”

For me Angular had been a non-start from day one of me deciding to become a fullstack developer. I had heard the Angular 1 / Angular 2 upgrade incompatibility fiasco. I learned the Angular team decided to go with TypeScript, and I had a hate on for TypeScript. I was just walking away from the C++ world which is knee-deep in class and template coding, and the last thing I wanted to find myself doing was inelegant javascript that looks like ugly C++ template code.

I’ll spare you the ills of Object-Oriented and Class based software development, why it’s broken and simply leads to large unmaintainable code and a taxonomy of class proliferation! All this (sadly) is coming to javascript with Classes, Interfaces, Decarators, and other C# and Java ungodly creations, and yes ugly Generics! Generics are a necessary evil in a static type language like C++, in a dynamic type language like JS it’s a monstrosity.

If I am moving away from OO and classes, than the question begs what am I moving towards? Well it would be functional programming, this is where javascript shines, and the browser (as well as Node) asynchronous programming models lends well to function programming, so using classes and OO is just shoehorning crap into the language. If you really want to see what’s possible with functional asynchronous reactive programming (that’s a mouthful), take a look at RxJS. Even if you don’t end up using it, it will open your eyes into new ways of thinking about asynchronous programming.

So what happened, how did I end up not only deciding to look at Angular 2 but also making it my framework of choice? Well it all happen when I came across some online Angular-2 training from the guys at Rangle.io , what I got out of it was the following things that helped me get away from my closed-minded bias and hangups.

TypeScript is not another language, it’s a superset of javascript with static typing, but more than this it provides ECMAScript2015 stuff today. When I realized this, my feeling for TypeScript softened. I also learned that with Angular 2, things were removed to simplify, this makes for quicker learning. Not only this but Angular 2 was designed for mobile first, from the ground up. So if I can get all this under the same roof today and expect things to improve and get faster over time, it’s pretty dam easy to pick Angular 2.

Aside: Javascript is moving towards a compiled language. If you take a look at Apples Swift programming language it looks oddly similar to Microsoft TypeScript programming language.

Angular 2 components look similar to React JSX code, however Angular 2 use a ES6 template literals, a back-tick string.

As I started to code stuff in Angular 2, I found the component model to be powerful, more so than React. The Angular team actually made a lot of great choices to incorporate modern concepts, like RxJS for Observable, putting the power of asynchronous reactive functional programming at your finger tips. Moreover Angular 2 is a complete MVC framework, one reason I prefer it over having to use React and React-Router.

Aside: When it comes to rendering speed in the view, React is “currently” the hands-down winner. React showed everyone that it’s better to do all the DOM manipulation in memory and then diff the result into the browser’s DOM, thus only changes are updated. Angular 2 has made great improvements. Ember claims their Glimmer render engine which is in “secret beta” is faster than React.

Takeaway: Speed in here regardless of framework or toolkit.

Is Angular 2 For You?
I admit Angular 2 might not be for everyone, it all depends on where you are along your journey as a programmer. If you come from the static type programming language like C++, C# or Java, coding in TypeScript will be a smoother transition. However if you’re still coding in JS and just coming up to speed with ECMAScript 2015, looking at TypeScript code might be hard to get over, but the investment is well worth it. I should add, you can program Angular 2 in ES6 but TypeScript is the recommended way (ultimately the community will dictate ECMAScript or TypeScript). Also TypeScript generates faster JS code and helps catch type errors that lead to subtle hard to find bugs. For small sites this doesn’t matter, you can use ES6 linters and Flow a static type checker created by Facebook to get similar results for JS.

When you’re shopping for a new car, suddenly you start to see it everywhere on the street. That’s how I am feeling with JS and Angular 2, it’s everywhere and it is going to dominate in the coming years. The first wave is here and you must decide if you’re going to ride it out to become a master, or end up catching the 2nd or 3rd wave and playing followup. I have lived through such lucrative waves (and missed out) with Java, .Net, C# then mobile. My word of advice, be early, become the master. There is a lot of Angular 1 code out there as well as developers, eventually they are going to make the flip. You need to beat them while they work through their technical debt and migration pains! So not to worry, you will have plenty of company in the Angular 2 world.

If you decided not to go with Angular 2, I would like to know why? what did you not like about it.

[UPDATE] — There is a happy new beginning to my Journey, I am now working at Rangle.io as a developer doing all things Javascript.