Angular News : Javascript Fatigue, App Analytics, Progressive Web Apps, and GraphQL

Join Doguhan Uluca, Sumit Arora, Maxim Salnikov, and Uri Goldshtein as they discuss a number of exciting, new developments in Angular!

Watch the videos below to learn about best practices for approaching problems in Angular. Familiarize yourselves with Redux Beacon for easy Angular app analytics or dive into the hot trend of Progressive Web Applications (PWA).

JavaScript Best Practices

How to Avoid JavaScript Fatigue — Best Practices for Approaching Problems in JavaScript with Doguhan Uluca

Doguhan, a JavaScript & Cloud expert at Excella Consulting, has built many mobile and web solutions for the enterprise sector. He has excellent insight as to what today’s developers are facing when reviewing the overwhelming number of modern web libraries and tools required.

Working with a range of developers at multiple levels of experience, Doguhan finds the current JavaScript development unsustainable. Presently, when faced with a development problem, many individuals rush to find a JavaScript library that would help solve the issue. However, this not only increases the level of JavaScript fatigue, it also gives rise to external dependencies. Much of this can be attributed to the sheer number of packages and libraries available for use.

The best practice, should not be to install new libraries, but rather to solve technical problems within the existing library or technology used. Developers must read over the documentation to double check whether a solution is available first, then move on to searching for external libraries that could help address the specific issue.

Doguhan further elaborates on the best ways to evaluate tools and libraries in this interview.

Redux Beacon and Analytics

Easy Angular App Analytics with Redux Beacon — An Interview With Sumit Arora

Learn how to get easy app analytics with Sumit Arora using Redux Beacon in this interview.

Sumit and his team at Rangle.io have created a new open source Angular library called “Redux Beacon”, which provides developers with analytics such as user conversion rates. The tool sends data through special events from an Angular application to target analytics engines such as Google Analytics, Google Tag Manager, or custom in-house targets. The data sent is stored and converted to machine learning format. It also extracts valuable insight on user behavior such as how much specific features are used, or what specific user segments (i.e geo-grouped demographics) may be doing. Sumit hopes that with these insights, developers will be able to better predict future behavior of their users.

PWAs and Angular Mobile Toolkit

Progressive Web Applications With Angular Mobile Toolkit — Discussing This Hot Trend With Maxim Salnikov

Maxim is a Google Developer Expert in Angular, an organizer for NgViking Conference and also a leader of Angular meet-up group in Oslo, Norway.

Lately, his interest has been focused on Progressive Web Applications (PWA) using Angular. He explains why building Progressive Web Applications is one of the hottest trends in web development and how to leverage the Angular Mobile Toolkit for making an app ‘Web Progressive’.

As more and more users move away from desktop applications and onto mobile apps, there are certain things that need to be taken into consideration. Network reliability and speed is one of the most important characteristics to keep in mind. A PWA offers a solution to the problems by providing a framework that enables an offline user experience. As developers move more complex features to the client, the PWA provides greater performance improvements, among its list of benefits.

For a web application to be PWA ‘ready’, there are approxmiately 10 rules that need to be followed. However, as long as the app is built on a progressive layout that resizes on many screen sizes and is served over HTTPS, it can be converted to PWA. In addition, as most web apps already are, they should be linkable and searchable as well.

The goal of the Angular Mobile Toolkit is to create a PWA automatically. The toolkit serves to automatically generate the App Shell which creates the minimal HTML, CSS and JavaScript required to power the user interface. The Service Worker, a script which the browser runs on in the background, provides offline functionality by rendering the cached content. This ensures instant and reliably good performance to users on repeat visits.

Great examples of PWAs include the Twitter mobile web app, Financial Times and Forbes.

With any tool, one should be careful when implementing PWA with their caching. Take careful consideration inthe number of files and size to be cached, in order to avoid reaching the cache limit. Moreover, developers should ensure clean up of the old cached version before caching the new version.

GraphQL + Angular Components

Uri Goldshtein on why you should be using GraphQL with your application

Uri Goldshtein, an expert at Apollo & GraphQL team at angular-meteor.com, explains why big enterprises like banks (i.e. Capital One), or consumer facing companies like Facebook and AirBnb, adopted GraphQL to help with their data management. He also elaborates on its benefits from both ends — the enterprises and their clients.

GraphQL is a powerful application layer query language that creates a data contract between the client and server. The client developer can create a GraphQL query on the data within the data rule constraints (set by the server-side developers). There are efficiencies for the client developers to query the data they need and for the server-side developers describing the data for their clients to consume.

Setting up GraphQL server is easy and developers can do so using the language of their choice. This is possible due to its ability to work independently from client-side and server-side developers. It can be adopted by backend developers, product managers, or client developers, and everyone can enjoy performance benefits from using it.

When using GraphQL with Angular components, it is the layer that all components share centrally without having to worry about the structure of the data on other server. More efficiency is gained by this framework since there are less server requests by the client, which reduces network latency and a provides a more robust user experience.

We hope you enjoyed this article. For more information on Angular, be sure to check out http://angular.io.

This article was co-written by Sara Nopsittiporn and Tracy Lee.