This content is part of the Essential Guide: Top JavaScript frameworks accelerate software development

JavaScript framework AngularJS continues to simplify UI development

The easiest way to simplify UI development? Use a powerful JavaScript framework like AngularJS.

Google’s Angular JavaScript programming framework has emerged as one of the dominant tools in Web application development over the last couple of years. It has faced some stiff competition from Facebook’s React framework. In order to narrow the gap, Google is now working on a variety of significant improvements to improve performance and streamline application development.

Brad Green, engineering director at Google tasked with managing AngularJS highlighted has plenty to say about some of the great new features version 2 of AngularJS has brought to the table, with the implementation of Google’s Material Design Specification a big feather in the cap. These components are already being used on Google Trends, Google Shopping Express, and Google Search history.

Angular’s growing popularity

Developers have shown a growing interest in the AngularJS framework. Google estimates the Angular development community grew from 1.1 million users last October to 1.3 million users in March 2016. In addition, nearly 316,000 developers are working with Angular 2. Angular started primarily as a tool for desktop apps. Now though developers are starting to do more work with building apps for the mobile Web. Angular plays a key role in helping to deliver on Google vision of progressive web apps that behave like native mobile apps. Green expects that Angular 2 could play a key role in delivering apps that work across all platforms.

Generating faster performance

A number of components of progressive web apps are hard to integrate such as alternate rendering engines, push notifications, HTTP/2. One of the problems is how to have two integrated ecosystems.The Angular 2 team has built a modern stack with lots of headroom for the future to address this problem.

The core is based on dependency injection, which allows for lazy loading. On top of that are other features for template compilation, hang detection, and a rendering service. There is also work to make it easier to pre-render components for different target platforms. All these updates are combined promise up to a 5 times performance boost compared with Angular 1.

A key part of this performance boost comes from an aggressive approach to generating code. Developers will still be able to drop into a dynamic editing mode, and then generate optimized JavaScript code during deployment. This will result in deploying a much smaller framework in deployed applications, since the apps will only need to include the components they leverage.

One developer at the conference expressed concern that Angular’s dramatic upgrade path could adversely affect older Angular developers. But Green assured developers that the next generation upgrade path will allow developers to seamlessly mix and match components into existing Angular apps.

New features simplify service separation

Angular universal runs on the server, and when it makes a request, the server can generate HTML and CSS at the same time to send down the applications. Events are queued up and sent down to the client applications as required. This works today in Node.js. There are other efforts to make similar features available for PHP and .Net.

Another improvement are hooks to make it easier to auto install apps and generate launch icons on the home screen. Under the covers, these applications use service workers to cache application and synchronize data in the background. This means that it will be easier to code applications that run well offline, and which sync up when the user is connected to the Internet. Service workers will improve will enable better code execution on the client.

Building a better UI

Web workers are focused on the UI. Traditional Web workers don’t have access to the DOM and other bits of the Window. The new Web Worker features provide direct access to all of these components. This will mean that Angular 2 applications will always be responsive despite networking state, native processing load, and garbage collection that may be occurring in the background. Applications built using an eventing model can be upgraded to support these new features to by bootstrapping the code with Web Workers.

There are also efforts to improve the integration of JavaScript applications with native desktop services like menu notifications and popups. A variety of libraries are being upgraded to enable Angular 2 applications to behave more like native mobile including Ionic Framework, NativeScript, and React Native. The Electron library will provide similar features on Windows, Mac, and Linux desktops The Windows Universal starter kit is working on providing similar API access for Windows 32 applications.

Get started building Angular 2 apps today with Google’s guide.

Next Steps

Is bandwidth the bottleneck in JavaScript app deployment?

Which protocols are the right protocols for JavaScript based applications?

Five ways cloud computing simplifies JavaScript development

Dig Deeper on Front-end, back-end and middle-tier frameworks

App Architecture
Software Quality
Cloud Computing