In this article, I’m going to introduce the core libraries of Angular and help you to get started with the framework itself.
Are you familiar with AngularJS? Have you ever tried out Angular 2 or would you like to pick up one of the top front-end frameworks? This is the perfect time to dive into Angular and I’m here to give you some tips to start!
AngularJS to Angular – a brief history
Angular is one of the most well-known solutions for SPA (single-page application) development besides React and Vue.js. It has been around for almost 10 years and it has gone through countless adjustments since then. The first version of the framework – AngularJS – started back in 2009 and laid the foundation of present-day front-end application development.
I remember trying it out myself, memorizing its unique syntax for templates, trying to understand its quirks like the two-way data binding, dependency injection and many further concepts that come with the framework. I had my ups and downs learning it – especially with its change detection system – but after a few sleepless nights, I was able to develop a high-quality web application which harnessed the power of the underlying engine.
It was not perfect due to its huge bundle size compared to other libraries, and I often bumped into performance issues, but I got a web app running that satisfied common software development criteria. I could write clean code thanks to John Papa’s style guide and develop a relatively fast running app in short time focusing on its functional requirements.
I was not the only one having issues with the framework. You can find a ton of deficiency too in the framework, that makes AngularJS half success, half failure. Its architecture and chaotic digest loop system set limitations to its performance, however its template syntax worked out so well that it was adopted by Vue.js. (v-if – ng-if, v-model – ng-model)
AngularJS refers to the 1.x versions of the framework, from 2.x it is known as Angular.
The imperfection of AngularJS was the motivation behind the complete rewrite of the framework. Due to its unpredictable change detection system and robustness, the developers at Google needed to rewrite the framework. They began using really powerful libraries. On top of the original features, they introduced approaches like AOT (Ahead-of-Time) compiling, tree-shaking and many more. AOT converts the HTML and TypeScript code into JavaScript during build time, while tree-shaking gets rid of the unused imports to achieve faster application bootstrapping and smaller footprint.
It also got a fancy CLI that can initialize new projects, generate skeletons, build and create a development application server so it’s became a pretty handy tool!
The three pillars of Angular
Before jumping into Angular, let’s familiarize ourselves with the libraries that are used by the framework. In order to do that, take a look at the dependencies in the package.json file in their Github repository.
- TypeScript is a superset of JavaScript providing type safety for your application. It is also really helpful for someone who has an object-oriented programming background – like me 🙂 – because it extends JavaScript’s functional approach with abstraction, encapsulation and inheritance. Angular itself is written using TypeScript.
- RxJS is a library for reactive programming using Observables, which represent an asynchronous stream of data which we can subscribe to. The library offers built-in operators to observe, transform and filter streams or even combines multiple together to create more powerful dataflows at once. Angular handles all pieces of information as an observable stream from routing parameters to HTTP responses.
- Observable has its formal specification by TC39 which is currently in Stage 1 proposal for EcmaScript, meaning that it might even land in the JavaScript language itself.
- Zone.js is an execution context for asynchronous operations. It monkey patches the standard APIs such as DOM event listeners and
XMLHttpRequestto run them in a “zone”. Zone is a construct that provides hooks on the asynchronous operations so we are able to get notification of their states, cancel tasks, handle errors or extend execution with additional operations.
Let’s clear up a misconception
There is a common misunderstanding that Angular’s change detection is the same thing as Zone.js. In fact, Angular forks Zone.js creating its own NgZone which emits an event when the microtasks are executed in the browser’s event loop. This event notifies the component’s change detector to run and update the components concerned.
Change detection is a really complicated topic on Angular but if you are interested getting to the bottom of it, check out this great article!
I have to admit, the dependencies of Angular might look overwhelming at first glance. All these libraries take time to master and we have not even started to learn the framework. Unfortunately, this is the point where many developers turn their back on it and start looking for another solution with a smaller learning curve.
Tip: Search on google with `-angularjs` option to omit the search results with the 1.x version.
But hey, don’t give up! Take my advice and play around with the dependencies first to get an insight into the core libraries.
Resources to boost your confidence
Check out RxJS Marbles for the built-in RxJS operators! The interactive visual diagrams are great but advance with caution, the operators can get deprecated and new ones are added from time to time. You might not find all of them in the latest version of RxJS and the library is in lack of up-to-date documentations. Go ahead and search in the source code if you have any doubts!
I really love TypeScript because its static type check assures me I am not going to make any typos. If you are new to TS, check out its type system, and go through interfaces and classes. This is more than enough to figure out the basics of Angular but still, it is really interesting to see what is the output of a compiled TS file. Do files including only interfaces have any code compiled to JS? – I will just leave this question here.
Understanding what is under the hood will definitely boost your confidence when it comes to the framework itself! Indeed, Angular might have a longer learning period compared to other front-end libraries but in return it enhances the developer experience with built-in solutions that come by importing modules.
Applications built on top of the framework are basically a tree of components that are organized into individual modules by their domain. Angular has quite a few core modules i.e.: CommonModule, FormsModule, RouterModule, etc. These modules contain custom attributes (directives), data transformation utilities (pipes), services and many other tools to speed up the process of application development. It actually lets you focus on the application logic of the product, ensuring that it runs flawlessly in the browser.
Of course, this framework is not a silver bullet for every scenario. Its true strength shines when it comes to developing data-driven, large-scale applications with complex logic.
Get started & adopt Angular
AngularJS has been widely adopted and numerous projects have been built using the first version of the framework. There is also a migration guide to the newer versions but it is really hard to move all pieces of code without breaking the functionality of the app or freezing the code for a longer period. This is the reason why many projects are stuck at version 1.x and have not been migrated to the later versions yet.
AngularJS is officially supported and plans one more relevant release, version 1.7 which will have a 3-year LTSLTS means long-term support. The acronym is often used to mark Node.js release lines that will be maintained and supported for an extended period. There are two separate kinds of LTS releases: Active and Maintenance. The Active release line often gets new features and other improvements beside security patches and bug fixes, and the Maintenance only gets the latter. It... (Long Term Support) starting from the June 2018.
The current Angular version is 5.2.x and 6.0.0 is already in beta.
Angular uses semantic versioning, releasing a major version in every 6 months.
I encourage everyone who has still not migrated their own application or is not familiar with the framework itself to start embracing the later versions of Angular. It really came a long way from its early state and keeps improving in every release.
A few Angular Tips:
Here’s a few suggestions you should look up if you are interested in the topic. Keep in mind, these are just guidelines because you have to cover a lot of ground to get into the bottom of each of them.
- Follow the official style guide to have a project structure which is easy to extend and maintain;
- Use the CLI to generate all the files;
- Write common components and pipes that can be shared across feature modules;
- Create services with a well-defined purpose and use them easily with dependency injection;
- Lazy load modules that are not critical for app bootstrapping;
- Guard routes to prevent unauthorized access;
- Enhance bootstrapping experience with app shell.
Also, the evolution of the framework has brought quite a few practical projects as well. One, that’s worth mentioning is Angular Material which brings ready-made directives and components into your app. There are buttons, lists, form elements and a bunch of other UI components following the Material Design.
Upcoming Angular features you should be aware of
I would like to emphasize two of the upcoming features regarding Angular.
One of them is a new backward-compatible renderer coming up in the next version of the framework called Ivy, which reduces the application bundle size by 90% which means it will be finally ready to pick up the race in bundle size against all the competitors on the market. A simple Hello World application is 3.2 kB gzipped! Give it a try in version 6 by adding the following flag in the tsconfig.json file, but do not forget it is still work in progress and not ready to be used in production environment.
"angularCompilerOptions": {
"enableIvy": true
}
The other change is in the CLI. So far, it was lacking an update command to upgrade the versions of the angular packages which finally got into version 1.7.x. After updating CLI to this version, you will be able to upgrade all the angular related packages with the ng update command preventing messed up dependency versions.
Upcoming Angular articles from me & other learning opportunities
I hope, I could show you something new today or get a little excitement in picking up Angular.
Stay tuned, because I am planning to publish more resources on the tricky parts of the framework and help getting through the difficult topics. Do not hesitate to leave a comment below if you have any questions or suggestions!
My next topic will be on unidirectional data flow and how it differs from two-way binding but if you can not wait, take a look at my training called Building Complex Apps with Angular, where I cover the following topics:
- AngularJS to Angular – a brief history
- Angular CLI commands in action
- Modules
- Directives & Components
- Data binding
- Services
- Pipes
- Routing
- Component composition
- Handling HTTP streams
- Forms
- Testing
Read the more about the training here!
Keep on coding and see you next time! 😉
