AngularJS is an open source project from Google originally started in 2009 as a web framework for improving developer productivity. Version 1.0 of AngularJS was released in June of 2012 and won early fans for its ability to reduce boilerplate, provide a robust application infrastructure and improve the code testability. AngularJS’ successor, Angular (formerly known as Angular 2) was released on September 14, 2016. Angular is a complete rewrite of AngularJS focused on improving the framework to be faster, smaller and easier to understand. It is an impressive piece of code, packed with features to support application across the web, mobile devices and desktop.

A framework for the Enterprise

It may not sound cool when you say that something is built for Enterprise but it makes a lot of CTOs sleep better at night knowing that someone is accountable if your chosen framework doesn’t deliver feature wise or runs into a bug. Selecting a JavaScript framework to power countless numbers of your current and future applications is a huge and risky undertaking. There are a lot of choices out there and the bar seems higher than ever for picking up professional JavaScript. You need to learn ES6, TypeScript, Babel, Webpack, Yarn, Mocha etc. It’s a sea of acronyms. Gone are the days of just one JavaScript file in your project. JavaScript, as well as its tooling system, has grown up. The rate of change is very, very fast. If anything, the JavaScript ecosystem is an adolescent. New things are discovered and redefined on an almost weekly basis. To cope with that, Architects, CTOs and other people in charge of choosing a framework need to ensure that their choice makes sense for years to come. We believe it comes down to a few key points:

• How technically competent it is
• The rate of change
• The tooling
• Community backing in the form of online help forums like Stack Overflow, meetup groups, blogs etc.

Technically impressive

It’s easy to be impressed by Angular just by comparing it to its predecessor AngularJS feature by feature. Change detection is better, it’s considerably faster, the bundle is smaller, etc. That all sounds good if you are building toy apps like a todo list or similar. But Angular aims way higher than that.

Let’s back it up a bit. When creating web pages in the beginning of the web some markup was created in HTML and then optionally some JavaScript code was added to make some parts of the page more responsive and fast just like a client app. Then came Single Page Applications (SPAs). Suddenly large chunks of your page were turned into a proper application. The reason was mainly to avoid the “flickering” when the user switched from one page on your site to another page. Then everything turned into a SPA and the backend started to respond with JSON instead of HTML. Your page/app was now lightning fast and really “client like” but it didn’t play well with search engine robots. All content was dynamic. Tools were of course built to enable your JavaScript to be run through tooling that would spit out HTML on the other end for crawlers to process.

Another problem with this approach was bundle size, suddenly you had created an app that represented your whole page structure and that didn’t come cheap in terms of size and it took a long time to load. That became a real issue as the web kept moving in the direction of mobile. More and more people started consuming the web with their smartphone and smartphones weren’t able to handle large application bundles on a 3G cellular connection, or too many multiple file loads or large images for that matter. A way to address the bundle size was of course to employ better compression algorithms, but that wasn’t enough. You started looking at the problem differently, what if you could serve the app in pieces and only preload it with a minimum of content initially and load other parts as the user decided to go to a certain part of your app.

Aimed with the knowledge of all these problems but also possible solutions the Angular team set out on a journey that a couple of years later turned into the Angular we now know, that is currently on the semantic version 4.0.0.

Dependency Injection

Back in 2009, AngularJS was the first JavaScript framework to introduce and democratize the traditional Dependency Injection (DI) design pattern, very popular in the backend ecosystems such as Java or C#. The implementation of the DI API was simple yet powerful. Angular has taken it one step further with a new implementation and more configurable DI API, taking advantages of the typing system provided by TypeScript. Angular is promoting the use of DI for a more reusable, testable and readable code. This has the benefit of helping the developer write maintainable enterprise applications.

Testing

AngularJS as a product has always had testing as a main priority. With AngularJS pretty much everything could be tested, routing, directives, services, filters. Even the backend could be mocked. This was one of the main selling points of AngularJS when it first came out. With the new Angular framework testing is yet again a big priority and everything you could do in AngularJS is also possible in Angular. You can test various aspects of your app, including:

• unit testing, e.g testing a code that parses some input
• behavior testing, e.g testing whether a certain construct is called with a predefined set of arguments
• e2e testing, you can perform End to End tests all the way from the UI down to actual or a mocked HTTP service calls using a library called Protractor.

You can find more specific examples in the official testing docs and in this article by Gerard Sans.

Performance

One of the many key features of Angular is performance. Angular is fast. Actually, it’s not just fast, but one of the fastest frameworks out there. The Angular team is taking performance, memory footprint, and execution speed very seriously. In order to understand why performance is number one priority of Angular, let’s first take a look at AngularJS.

Since the first release of AngularJS, Angular has promoted declarative programming (through HTML) and was meant to be used by developers as well as non-developers. This required AngularJS to ship an HTML Compiler, which was basically responsible for traversing the Document Object Model (DOM), looking for AngularJS directives. It had also allowed the developer to extend the HTML language by adding custom attributes and elements.

AngularJS was also the first JavaScript framework to introduce an implementation of the Model-View ViewModel (MVVM) pattern, even before the Knockout micro-framework. This pattern allowed 2-way data-binding, one of the killer features that popularized AngularJS. 2-way data-binding is essentially a way of keeping the UI state and model state in sync: every time the model changes, the UI gets updated; and when a value changes in the UI state, its model gets updated with this new value.

Developers really liked their framework, AngularJS, and wanted to build more and more sophisticated and ambitious apps. The framework, however, wasn’t built with gigantic apps in mind, despite working quite well for small and medium size applications. The new Angular fixes that: Angular introduced a new cutting edge HTML Compiler and a more efficient data model.

The Angular HTML Compiler relies on a custom HTML (and CSS) parser hand crafted by the Angular team, for high efficiency and better speed. The Compiler is continuously being improved in order to make it even faster.

In addition to the traditional Just-In-Time (JIT) compilation process – previously used by AngularJS, and used by most modern frameworks – the Angular team has introduced a new compilation process called Ahead-Of-Time (AOT) compilation. This AOT compilation technique is what C and C++ compilers have been using for years, to compile C and C++ source codes to machine-specific highly-optimized assembly code. AOT compilation allows the Angular HTML Compiler to parse and generate – ahead of time, that is during build time – TypeScript code, which, in turn, is translated into carefully tuned JavaScript instructions. The result code employs several optimization technique, such as Polymorphic Code, which can be highly optimized by the JavaScript engines of modern browsers.

In addition to that, the generated code is run through extra optimization steps to eliminate dead code, using advanced techniques such as Tree Shaking and Constant and Variable Folding, resulting in smaller bundle files, which in turn contribute to much faster load time.

As of April 2017, those techniques make Angular 10x faster than AngularJS during model updates and change detection cycles.

However, there is even more: Angular goes beyond the browser. With Angular, it is also possible to run and render your application on the server, thanks to the Universal Module. Server-side rendered applications help businesses implement robust Search Engines Optimization (SEO) strategies in order to make their applications crawlable by search engines for better visibility on the Web. Another advantage of server-side rendering is a major improvement in the initial loading time of the application – the user will get some meaningful content even before the JavaScript bundle has been downloaded, parsed and executed by the browser. This will give a good boost to both Time ‘To Interactive (TTI) and Time To First Paint KPIs.

Progressive Web Applications Ready

Progressive Web Applications (PWA) are an emerging set of web technologies that enable native-like capabilities for web pages. These include offline support, push notifications, background sync, and other related technologies such as Web Bluetooth. They can be installed to the user’s home screen, and provide a native-like full screen experience to the users on supported browsers. They are built around a new standard, called Service Workers, which manages caching, push notifications and other aspects related to the offline/low connectivity behavior of the app. Angular makes it easy to build such PWAs: You can use Ionic to create a mobile-first web application which includes a service worker and a manifest, the basic building blocks of a PWA. Alternatively, you start building your PWA using the Angular Mobile Toolkit, a quick-start toolkit developed by the Angular Mobile Team. In the future, the Angular CLI (mentioned below) will be able to quickly scaffold a PWA using the –mobile flag.

Built upon Web Standards

The Angular team introduced the concept of directives and custom elements, a couple of years before the Web Components specifications were drafted. AngularJS’ directives let the developer extend the HTML DSL by adding custom new HTML elements and attributes with meaningful semantics, ie. or . This made HTML templates a lot easier to read and maintain.

The Web has changed since then and Angular was rebuilt to leverage the latest Web standards. Even better, Angular has introduced new concepts and APIs, such as Zones, Decorators, and Observables, which are already under consideration to become the standards of tomorrow. After all, one of the missions of the Angular team wants is to help shape the future of the Web.

Tooling has never been better – Angular CLI

For any team or individual to be really successful, coding an App or larger system, it’s important to get off to a good start early on in the project. Some things need to be decided early on and may be very hard or impossible to change later. A way to solve the above is to turn to a scaffolder tool that is able to easily flesh out a code skeleton that follows a known best practice and lets itself be easily extended, tested, served up and more. For Angular that tool is called Angular CLI. Angular CLI has been in development since 2015. It is the de facto standard for scaffolding new Angular projects. It is a powerful way to get started quickly, and then grow your app, while saving time on all the mundane tasks of creating new files and writing boilerplate code whenever you want to add a new component. The CLI is also unit-test driven – a unit-test file is automatically created whenever you use it to create a new component, service, etc.

Community

For any framework to truly be popular it needs to be adopted by businesses globally but more importantly, developers need to use it on a daily basis, ask easy, as well as hard, questions on forums such as Stack Overflow or Quora, and participate by filing issues and sending pull requests on GitHub or a similar site. Angular has enjoyed a strong community since the earliest releases. In addition to a strong community, a strong ecosystem is also important to a framework’s success, people need to build plugins, components and libraries that extend the core platform and address additional use cases.

Conferences and Events

Angular has a global network of meetups from Iceland to Japan where organizers talk and share their experiences. Many user groups/meetups also use tools such as Slack to communicate directly with their members. The Angular community is also active with conferences; the largest Angular conferences are ng-conf in Salt Lake City, AngularConnect in Europe and AngularMix, an enterprise conference occurring in October of 2017. These conferences plus fun new additions such as ngCruise, where you cruise around in the Caribbean, and ngVikings which has a Viking theme allows developers from all over the world to come together and learn about Angular. Angular’s user group supporters are a creative bunch. For more information on Angular events near you check out the official page on Events at Angular.io.

The future of Angular

So what does the future hold for Angular? Currently, the future looks bright. Angular exist on the desktop using Electron, as a native app using either Ionic or Nativescript and can even be used on IoT (Internet of Things) devices. The current platform will continue to be improved and have new features added to it.

Semantic versioning

AngularJS did not use semantic versioning and never dealt with it in that way. You referred to different versions of the framework as 1.x something. In the eyes of people, it was still version 1. Angular is a different story though as semantic version treats the leftmost number as something that can be incremented when you change an interface. This means that when you change something fundamentally you can go from version 4 to version 5 without necessarily changing all the other concepts that we know such as components, directives, pipes etc. So regardless of whether we call it version 2 or version 7 it’s still the same platform although some interfaces have been changed along the way. This makes it pointless to refer to its version and this is the reason it should be referred to as just “Angular”. ReactJS follows this rule as well and is currently on version 15, but everyone just calls it “React”.

Predictable release schedule

When developers choose a framework for their project, they look for stability. They don’t want to rewrite the majority of their code from scratch because of a new release, or that the tools or third party they use suddenly become obsolete. On the other end, we all want Angular to keep evolving. Angular achieves both goals by implementing semantic versioning and a predictable development process that introduces new features and changes according to a well-defined process. This means that everyone who depends on Angular always knows when new features are added and can be well-prepared when deprecated features are removed or changed. A major version of Angular is released every 6 months, and a minor update every 1-2 months. In addition, small patches and fixes are released weekly; this ensures that small bugs don’t get queued behind big futures inside a big release. You can read more about the process in this article by Angular.

Summary

We set out to talk about Angular’s technical competence, its rate of change, its large ecosystem, the tooling and finally covered probably the most important aspect of all – its community. You can be the most impressive technical feat there is but without users, you will slowly slip into oblivion, right Betamax?

It stands clear that Angular is technically impressive, and is also learning from past mistakes. Serious Enterprise development is now possible, and Angular is also a good choice for pages that needs to render fast, thanks to the Universal Server Side Rendering module. It also works well for building productivity tools where loading speed is less essential. Angular is furthermore a good candidate for mobile app development, as the bundle size can be really minimized thanks to tree shaking and AOT. Along with that are also two really impressive frameworks in Ionic and Nativescript which makes native apps development a breeze. Angular has always loved the developer, and will continue to do so, and comes fully charged with a battery of IDE plugins as well as a great scaffolding tool in the form of the Angular CLI. Lastly, the community is more alive than ever and there are plenty of conferences to attend and blog posts to read and learn from.