Briebug Blog

Sharing our thoughts with the community

AngularJS vs. Angular

AngularJS vs. Angular


In September of 2016, the javascript world was changed with the release of Angular 2.0. It was a complete rewrite of the AngularJS framework from the ground up. With the removal of "JS" from the name, the Angular team signaled a major shift in their framework. Developers who knew AngularJS would have to relearn Angular and it was written in Typescript; a language that most developers hadn’t used before.


But despite these big changes, Angular became a more stable, performant framework with a vastly improved developer experience. Starting with version 2, Angular entered into a rapid-release cadence with a major version release every 6 months and simple migration from each previous version. All the releases of the past 4 years have brought great improvements to Angular but what changed in 2016?



In the beginning, there was JS

When AngularJS debuted in 2009, it gained major traction because it used a model-view controller (MVC) architecture that automatically kept the UI in sync with code. Developers could break down their apps into components that could be re-used. It embraced the single-page app (SPA) design which allowed different pages to be displayed with hash-routing but it could still be nicely integrated with page templates served from a backend architecture like ASP.NET.


However, when the power of 2-way data binding was leveraged heavily in AngularJS components, change detection could become unruly. The more data on a page, the more memory required for watchers, which could overload browsers. Angular was at version 1.X, and it was a problem that no minor release could fix.


With every major version release comes breaking changes, but 2.0 wasn’t just a rewrite. It was a paradigm shift for Angular. There was no prescribed update path. The build system had changed. Even the language had changed. This left some developers frustrated.



Upgrading AngularJS to Angular

The significance of these changes meant that many web applications would remain on 1.X indefinitely, and some would be re-written with 2.0. However, there’s a third option, to upgrade. It’s no small feat but it's possible. Taking Sam Julien's upgrade course would help a lot or you could consult a team of experts (wink wink) to help you upgrade.



Typescript, RxJs, and the CLI

Developers that moved on to the new Angular faced a steep learning curve but were rewarded with 3 game-changers in front-end development. Typescript, RxJs and the Angular CLI are 3 things that I now cannot live without.


Typescript is an extension of javascript and compiles to javascript, but provides all the benefits of an established coding language like Java or C#. Typescript makes javascript a strongly-typed language, which prevents bugs because you are warned about issues during development. IDEs like VSCode can provide warnings about issues and intellisense, as you type, to display method signatures and more.


Plus, typescript allows you to use the latest ES features because it polyfills for browsers that don’t support them. These things create an amazing development experience.


Angular uses RxJs observables for everything from network requests to form inputs. Though they can seem daunting at first, observables simplify code by allowing you to manipulate streams of events. It’s a reactive programming style that can make something like building a type-ahead a breeze because you can combine event streams in one fluid approach.


The Angular command-line interface is a piece of tooling that sets Angular apart. Other frameworks are only recently catching up with CLIs of their own. It provides a build system out of the box which takes care of bundling, minifying, and code-splitting production code.


It also includes a live-reloading local server for development and it generates boilerplate code for new components and more. It also helps reinforce a familiar architecture and file hierarchy that any Angular dev will recognize when coming on to a project.

Of course, all these things can mean more code gets shipped to the browser. The new Angular introduced a new consideration: bundle size. Today Angular offers tools to manage bundle size and the framework itself has shrunk considerably with the advent of the Ivy compiler. But one particular aspect of Angular apps affects bundle size and that’s routing.


A routing revolution

One of the major changes to come in 2.0 was page routing. It uses HTML5 routing and lazy loading which allows for a super snappy page navigation experience. On initial load the bare minimum of content is downloaded and, as the user navigates, additional code is loaded. The significance of this is that routing is controlled by the frontend in Angular. This has a major impact because it means Angular needs more control.


Before, the server would serve requested pages but in Angular apps, because of the larger bundle and routing, the server generally only serves one file: index.html.


Server-side rendering provides certain benefits that don’t come out of the box with Angular like SEO and fast load time on devices with a low-bandwidth connection. However, there are solutions that address this, like Angular Universal which renders pages server-side.


There’s also a project called Scully that allows you to generate a static site with Angular every time your content changes. It’s an important thing to consider, when choosing Angular, whichever solution you choose.



What the future holds

Though it’s had its challenges, Angular has a dedicated following. Developers love that Angular is a strongly-opinionated framework and prescribes best practices that aren’t left up to choice for the developer. It has, arguably, the best tooling in the industry and it continues to evolve around progressive programming techniques. With its rapid release schedule it’s moving towards the future aggressively.


On December 31, 2021 support will end for AngularJS. The team at Google has done a great job of keeping it patched and now it can focus more of its efforts on Angular. The new Angular Roadmap includes many planned improvements and charts a course to a promising future.

Partner with Briebug

We guarantee the success of your migration


Briebug’s proven Angular developers have the expertise required to help organizations efficiently transition their application(s) from AngularJS to Angular.

View Details
- +
Sold Out