Angular: One framework
What is it that makes Angular, Angular? Is it the technical competence, the large ecosystem, or its raucous community? Today we’re going to do a deep dive into this fascinating framework as Wassim Chegham, Uri Shaked, and Christoffer Noring explain why it’s easy to be impressed by Angular.
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
- 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.
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.
SEE MORE: Angular 4: Top features you need to know
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.
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.
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.
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 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.
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. <ui-tabs title=”Administration”></ui-tabs> or <ui-pagination></ui-pagination>. 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.
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 & 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.
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.
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.