Premise

JavaScript is the most popular language for developing Internet-based applications. When used on the browser and server ends of distributed applications, JavaScript development frameworks such as React, Angular, and Node.js can speed development of richly functional, interactive, fast, and adaptive Web experiences. Today’s developers require multi-layered JavaScript development frameworks that enable them to build richer experiences, more native-platform (aka “progressive”) comparability, and client-side machine-learning (ML) intelligence into their Web applications. While some enrichment frameworks (most notably, React, Angular, Node.js) are widely adopted, some of the newer frameworks—especially those that support progressive and ML functionality—are immature, albeit promising.

The Augmented Browser: Enriched, Progressive, Intelligent, Universal

The browser remains the universal client for many if not most connected apps. Choosing the right framework for developing browser-facing Web applications should be a top priority for developers anywhere.

New Web user-interface technologies are leveraging and extending the core capabilities built into all mass-market browsers. The common-denominator features in Chrome, Firefox, Internet Explorer, Edge, Safari, Opera, and other browsers are that they all:

• Incorporate the core Web technologies of HTTP, HTML, XML, CSS, and JavaScript
• Provide libraries for building Web application user interfaces, content models, and programmatic functions;
• Facilitate construction of scripted Web applications at both the client and server sides;
• Include templates for blending static and dynamic Web content;
• Enable Web applications to combine human-to-machine and machine-to-machine interactions;
• Manage push- and pull-based data movement and synchronization among Web clients and servers; and
• Support the REST, AJAX, and Model-View-Controller patterns for designing interactive, multi-tier Web applications

JavaScript is the heart of rich application development for Web, mobile, and other application platforms. JavaScript development frameworks are crowded field of increasingly sophisticated offerings on both the front-end and back-end in Web, mobile, desktop, and other application development projects. The JavaScript ecosystem is enormously complex, fragmented, and dynamic. Every technology comes with complex dependencies of platforms, runtimes, libraries, languages, and data models. There are diverse frameworks, tools, technologies, and approaches, with few clear standards to facilitate fast, simple Web application development. In recent years, JavaScript Web development frameworks have emerged that augment browser functionality in three areas:

• Enriched: Widely adopted JavaScript frameworks such as React and Angular enable richer browser-based application experiences.
• Progressive: Features built into popular browsers, as well as add-in technologies, enable browser-based application experiences to attain functional and performance parity with platform-native applications.
• Intelligent: An emerging group of browser-side add-in machine learning (ML) frameworks support self-sufficient client-side intelligence without the need to rely on continual roundtripping back to Web or application servers.

Figure 1 presents an overview of the key attributes of the augmented browser and the enabling technologies and Web development frameworks associated with each. Figure 1: Attributes of the Augmented Browser and Enabling Technologies and Development Frameworks

When building next-generation browser-facing applications, developers should adhere to the following guidelines:

• Standardize on enriched JavaScript app frameworks:  Developers are converging around several widely adopted open-source JavaScript frameworks—most notably, React and Angular–for construction of rich client-side Web applications, and around Node.js for server-side content rendering and other back-end capabilities. The more popular Web app development frameworks eliminate the need for to develop native Web apps for multiple operating systems, browsers, and devices.
• Leverage progressive Web application frameworks for mobile, edge, and real-time experiences: Web application development is moving toward blurring the distinctions between Web, mobile, edge, and desktop applications. Increasingly, the leading client-side frameworks natively support development of what’s increasingly being referred to as the paradigm of “progressive Web apps.” These straddle the line between traditional web applications and native applications and between desktop and mobile apps. Within the browser, they appear to be just another type of web content. But they provide a mobile-like experience, in terms of ability to function in offline or intermittently connected modes. And they offer fast, real-time, dynamic, and highly interactive experience, just like a native application.
• Deepen the intelligence of all browser-facing apps with client-side artificial intelligence (AI): Developers are beginning to build client-side AI into their Web apps. Running AI in the browser can speed up some intelligent applications by executing them directly on the client. Those this is a very new, immature approach to building intelligent Web apps, the range of available frameworks, tools, and libraries are growing. Developers should evaluate available JavaScript libraries for browser-based AI, such as TensorFlow.js, Brain.js, and TensorFire.

Converge on standard JavaScript Web development frameworks

JavaScript application-development tools include a mix of open-source and commercial frameworks and are optimized for a range of Web, mobile, and desktop applications.

Generally, developers should investigate both client-side and server-side JavaScript frameworks. These libraries–installed on the browser and the web server, respectively–complement each other and are essential for standing up robust applications that distribute content rendering, script execution, event management, data manipulation, and other key functions between front-end nodes and back-end websites.

Figure 2 arranges today’s most popular JavaScript frameworks by whether they support client- or server-side deployment, and also along the spectrum of open-source vs. proprietary.

Figure 2: Today’s JavaScript application frameworks

Here now are discussions the principal client-side and server-side open-source Web application frameworks.

Client-side frameworks

Client-side Web application frameworks—also known as “front-end” frameworks–support dynamic content rendering in Google Chrome, Apple Safari, Mozilla Firefox, Microsoft Edge, and other browsers.

These frameworks leverage browsers’ native AJAX  capabilities to create asynchronous experiences using JavaScript and XML. They handle page-oriented content that is delivered from a Web server and often capable of modification by a browser or other Web client. They enable construction of browser-focused applications based on JavaScript, though they usually also support other programming languages. They support the HTTP stateless web protocol, in addition to other protocols for back-end interoperability. And they generally support live content reloading, document manipulation, e-forms entry and validation, data synchronization, event handling, session management, URL mapping, and caching.

The most popular open-source client-side frameworks are React and Angular, which are at the heart of a growing range of “low-code”–aka “augmented programming” development tools that accelerated “write once run anywhere” programming to Web, mobile, and other clients. Other open-source client-side frameworks include ChakraCore, Dojo, Enyo, Ember, Google Web Toolkit,  JQuery,  Meteor,  MooTools,  OpenUI5,  qooxdoo, SproutCore, Vue, and ZK. Proprietary client-side frameworks include Aurelia,  DHTMLX, Ext JS,  JQWidgets,  Polymer, Presto, script aculo.us, Wakanda, Webix, and WebRocketX.

What follows are profiles the two most widely adopted client-side JavaScript Web application development frameworks: React and Angular.

React

Introduced in March of 2013 by Facebook, React is the most popular and fastest growing client-side JavaScript development framework.

React is a component-based framework, with the component logic written in JavaScript. Within the framework, developers can:

• Use the JSX syntax  to describe a UI, with JSX allowing JavaScript and HTML to be mixed in a single component;
• Embed HTML into JavaScript;
• Build machine-readable code;
• Combine components in one compile-time verified file;
• Optimize user interface “views” on dynamic high-traffic applications;
• Implement unidirectional data binding;
• Leverage fast streaming server-side renderer and native-like application performance;
• Create and reuse components among applications; and
• Manipulate a virtual document object model which facilitates efficient interactions with large databases.

React is not a full end-to-end solution for building a web application, but has spawned an ecosystem of plug-in libraries that solve the problems of the other parts of an application. It does not support models or controllers, but other related projects cover these functions.

Angular

Introduced in 2012 by Google, Angular is a full MVC framework that is currently in its fifth generation.

From the start, Angular has been an HTML-centric framework that is geared for building of web, mobile, and desktop applications. Its core features are:

• S­­upports two-way data binding, in which changes in the back-end are immediately reflected in the user interface;
• Provides a front-end framework that programmers primarily use to handle user interactions within the browser;
• Reads the HTML page to obtain the embedded tag attributes, thereby enabling the browser to update a web page incrementally by inserting new content based on requests for partial information;
• Has no dependency on a particular back end, in that it only deals with the API interface, so it works as long as the API handles its data requests properly.

In its second generation, release in September 2016, Angular was rewritten in the TypeScript superset of JavaScript to support object-based programming patterns and high-performance typing that were missing from the original Angular architecture. Also added at that time were a component-based architecture, client- and server-side rendering, bidirectional data binding, improved dependency injection, efficient logging service, inter-component communications, and an HTML template for composing components.

The next two generations—released in March and November 2017, respectively—added improvements in performance, efficiency, ease of use, rendering, internationalization, and incremental compilation.

The latest generation–Angular 6–was released in May 2018. It focuses on making it easier for the user to create rich Web applications. It enables development of smaller and faster program code, generating smaller modules, allowing services to be left out of an application if not used, and reducing bundle sizes for common use cases through the integration of the RxJS 6 library for JavaScript. It also supports easier development via Google’s Material Design, which enables developers to start with an application template rather than with a blank application.

Server-side frameworks

Server-side Web application frameworks—also known as “back-end frameworks”–provide RESTful API services for programmatic access to Web app’s non-UI functions, including database modification, image storage and access authentication. They also handle server-side content rendering either in lieu of rendering at the browser or in cooperation with it.

Traditionally, Many Web applications incorporate programming in PHP, Perl, PHP, Python, and Ruby, with such open-source server-side runtimes as ASP.NET, Chrome V8, JavaServer Pages, Rhino, SpiderMonkey, WakandaDB, and WebKit JavaScriptCore, or closed-source runtimes such as ColdFusion.

More server-side Web application development is being done in Node.js, which has become the predominant back-end for many browser-facing applications. Initially released in 2009, Node.js is an open-source, cross-platform environment for running server-side JavaScript code.  Node.js supports creation of dynamic web page content before the page is sent to the user’s web browser. It brings event-driven programming to web servers, enabling development of fast web servers in JavaScript. Developers can create highly scalable servers without using threading, by using a simplified model of event-driven programming that uses callbacks to signal the completion of a task  Node.js connects the ease of a JavaScript with the power of Unix network programming. It processes incoming requests in a loop, called the event loop.

Currently in version 10, Node.js is built on Chrome’s V8 JavaScript engine and uses an event-driven, non-blocking, lightweight, and efficient I/O model. It integrates with the widely used npm, which is the biggest collection of open source libraries anywhere. There are thousands of open-source libraries for Node.js, most of them hosted on the npm website.

Node.js supports creation of Web servers and networking tools using JavaScript and a collection of “modules” that handle various core functionality. Modules are provided for file system I/O, networking (DNS, HTTP, TCP, TLS/SSL, or UDP), binary data (buffers), cryptography functions, data streams, and other core functions. Its modules use an API designed to reduce the complexity of writing server applications, supporting many programming languages.

Node.js applications can run on Linux, macOS, Microsoft Windows, NonStop, and Unix servers. Alternatively, they can be written with CoffeeScript (a JavaScript alternative), Dart or TypeScript (strongly typed forms of JavaScript), or any other language that can compile to JavaScript. Node.js operates on a single thread, using non-blocking I/O calls, allowing it to support tens of thousands of concurrent connections without incurring the cost of thread context switching.

Node.js can be combined with a browser, a database supporting JSON data (such as Postgres, MongoDB, or CouchDB) and JSON for a unified JavaScript development stack. Node.js allows reuse of the same model and service interface between client-side and server-side.

Node.js v10 focuses on stability, extended support, and providing a reliable platform for applications of any scale. Principal new features in this release include:

• Support for OpenSSL version 1.1.0, leveraging its support for extended cryptographic security, code quality, cleanup, and modernization.
• Support for Google V8 v6.6 JavaScript engine, which features performance enhancements, error handling improvements, and improved diagnostics around trace events and post mortem debugging.
• Support for Node.js API (N-API), which allows modules to run against newer versions of Node.js without needing to be recompiled, thereby reducing the maintenance cost for native modules and accelerating upgrade of Node.js versions in production deployments.

Build progressive functionality into all Web apps

Progressive web applications—a term that was coined by web developers at Google–straddle the line between traditional web applications and native applications and between desktop and mobile apps. Within the browser, they appear to be just another type of web content. But they provide a mobile-like experience, in terms of ability to function in offline or intermittently connected modes. And they offer fast, real-time, dynamic, and highly interactive experience, just like a native application.

Progressive web apps have become a strong alternative design pattern in recent years. This is due to improvements in browser technology; more dynamic Web markup, stylesheet, and scripting standards; and more powerful client-side processors. On top of the AJAX capabilities that are embedded in most modern browsers, progressive web applications leverage recent innovations such as HTML5, CSS3, and Web Assembly to deliver richer, more interactive, and more mobile-like experience. Other browser features that leveraged by progressive Web applications include features supported by modern browsers, including browser-side caching, progressively enhanced in-session content rendering, long-running background scripts, web application manifests, push notifications, continual updating, and automatic re-engagement.

The ubiquity of these features in modern browsers—including Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge–eliminates or greatly reduces the need for client-side plug-ins to run progressive web apps. These browser-side enhancements have given Web applications better performance and functionality to neutralize many of the traditional advantages of apps that are developed to the native interfaces of a specific client operating system and hardware platform.

The key design features of progressive Web apps are that they:

• Look and behave as if they were native apps
• Support real-time interactive in-memory browsing experiences;
• Download fresh content throughout the browsing session;
• Cache content at the browser so that it can load fast, even on intermittent network connections;
• Work offline or in intermittently connected scenarios;
• Enable dynamic content to populate a view rapidly upon regaining connectivity;
• Use background scripts in the browser to pull in content updates dynamically;
• Use standards-based technologies;
• Run in secure Web-accessible containers;
• Can send web push notifications;
• Take advantage of APIs and browser plugins;
• Use URIs to indicate current state;
• Retain or reload its state when the user bookmarks or shares the app’s URL; and
• Respond transparently to network requests.

Leading JavaScript client-side frameworks now natively support progressive Web apps. The key framework extensions in this regard are:

• Angular’s most recent generations: The most recent updates to Angular have focused on making it easier to build highly-interactive browser-cached Web apps. Angular 5 added support for highly-interactive browser-cached progressive web apps. Angular 6 enables offline web pages, through addition of NativeScript to an existing project.
• React Native: React Native, which enables development of cross-platform mobile applications—in Android, iOS, and Universal Windows Platform , was announced at Facebook’s React.js Conf in February 2015 and open-sourced in March 2015. Unlike core React, it doesn’t rely on HTML5 or manipulate documents in the browser’s virtual DOM. Instead, it runs in a background process in the browser that interprets JavaScript  directly on the end device and communicates with the native platform via an interface that is serializable, asynchronous and batched. Instead of recompiling, it lets developers reload their apps instantly. It also makes it easy to build part of an app in React Native, and part using native code directly.
• Microsoft Blazor:  Blazor is Microsoft’s experimental project for building fast next-generation .NET Web applications using WebAssembly and C# in lieu of JavaScript. Using WebAssembly JavaScript APIs, developers can call browser APIs, call JavaScript libraries, or load WebAssembly modules into a JavaScript app and share functionality between the two. This allows them to take advantage of WebAssembly’s performance and power and JavaScript’s expressiveness and flexibility in the same apps. Still in alpha, Blazor is an extension to Microsoft Visual Studio. Blazor-based .NET technology runs in all browsers, including Safari, Chrome, Edge, IE 11, Firefox and mobile browsers. Blazor supports full-stack, client-side .NET Web apps, running on .NET Core and integrating with the server-side rendering functionality of ASP.NET Core. In addition to programming in C#, it also supports Razor, an established ASP.NET programming syntax used to create dynamic Web pages with Visual Basic .NET. Blazor requires no browser plug-ins or other extras. Instead, it supports progressive Web applications through WebAssembly, an Internet standard that all the browsers support, to convert higher-level language to assembly-like code for native-speed, not interpreted, execution  inside Web browsers. WebAssembly—which also works with such programming languages as C, C++ and Rust—is a low-level assembly-like language with a compact binary format. It is designed to run alongside and complement JavaScript, allowing both to work together on the client-side. In addition, developers can include new Web project templates in Blazor using Bootstrap4, which is an open-source toolkit for creating HTML, CSS and JavaScript projects that lets developers quickly prototype ideas or build entire apps.

Integrate AI into the browser front end

Web developers are beginning to build client-side intelligence into their apps. More of them are experimenting with new frameworks that use JavaScript to compose machine learning (ML), deep learning (DL), and other artificial intelligence (AI) functions that execute inside the browser.

Running AI in the browser can speed up some intelligent applications— such as sentiment analysis, hand gesture detection and style transfer — by executing them directly on the client. It can eliminate the need for background application programming interface requests to cloud-based resources, thereby simplifying and accelerating AI apps’ end-to-end flow. It can also provide the AI app with direct access to rich data from client-side sensors, such as webcams, microphones, GPS and gyroscopes. It addresses privacy concerns by retaining browser-based AI data in the client. And not least, it brings AI within reach of the vast pool of Web developers who work in JavaScript and other client-side languages, frameworks and tools.

Browser-focused frameworks for developing AI apps are beginning to proliferate. Available JavaScript libraries for browser-based AI include TensorFlow.js, TensorFire, Brain.js, Synaptic, Neataptic, Conventjs, Webdnn, Deeplearnjs, Tensorflow Deep Playground, Compromise, Neuro.js, mljs, Mind, and Natural.  Most of these:

• Support AI programming in various browser-side languages and scripts;
• Enable interactive modeling, training, execution and visualization of ML, DL, and other AI models in the browser;
• Tap into locally installed graphics processing units and other AI-optimized hardware to speed model execution;
• Provide built-in and pretrained neural-net models to speed development of regression, classification, image recognition and other AI-powered tasks in the browser.
• Support interactive visualization of AI models in the browser;
• Include built-in neural-net such as multilayer perceptrons, multilayer long-short term memory networks, liquid state machines, and gated recurrent units, as well as prebuilt models for classification, regression, and image recognition;
• Compress model data and accelerate execution through JavaScript APIs such as WebAssembly and WebGPU; and
• Leverage local GPUs through WebGL and other interfaces.

Among leading AI vendors, Google has the most comprehensive framework and tooling for helping developers build ML and DL apps not just for the browser but in a growing range of client apps and devices. It announced TensorFlow.js at its developer conference in late March. TensorFlow.js an evolution of deeplearn.js, a JavaScript library that Google released last year.

TensorFlow.js supports interactive JavaScript development of client-side AI applications in which models are built and trained entirely or mostly in the browser, with their data remaining there as well. It also allows pretrained AI models to be imported — or tweaked through transfer learning — only for browser-based inferencing. The framework allows developers to import models previously trained offline in Python with Keras or TensorFlow SavedModels and then use them for inferencing or transfer learning in the browser, leveraging WebGL acceleration for client-side GPU acceleration. The TensorFlow.js team is planning to update it to support the back-end Node.js JavaScript development framework.

Google’s development of its TensorFlow.js developer ecosystem is starting to pick up steam. Check out this online “playground,” which invites developers to “tinker with a neural network right here in your browser.” It builds on Google’s TensorFlow Playground, an interactive visualization of neural networks written in TypeScript.

Here’s a third-party data-science developer site that steps you through the process of developing JavaScript-based TensorFlow.js apps. And here’s a third-party post that provides converters and utilities for TensorFlow.js developers.

Also, Microsoft has announced plans to run ML inside .NET for Web, mobile, and other client-side apps. It recently announced plans to build AI types into .NET through a new technology called Tensor<T>. This provides support for exchange of multi-dimensional array data types in .NET, so that all .NET AI libraries will be able to share the same types. The technology makes it easier for ML framework developers to port their libraries over to .NET with minimal dependencies in place.  It runs in .NET Framework, .NET Core, Mono, Xamarin & UWP.

Action Item

In order to reuse their Web application patterns on the widest range of clients, developers should standardize on one of the leading front-end, open-source JavaScript frameworks: React or Angular. At the same time, there is no good reason not to adopt Node.js for server-side rendering and RESTful access to Web apps’ non-UI functions. Doing so will enable developers to build richly interactive Web app experiences for the widest range of desktop, mobile, edge, and other client environments. By making open JavaScript frameworks the foundation of your Web application development, developers will be able to experiment with the growing range of browser-based AI frameworks that plug into these environments.