Our thirty-ninth issue of the Architects’ Newsletter again focuses on the topic of "The Modern JavaScript Stack within Enterprise Architectures". We believe this topic will span several phases of the diffusion of the innovation curve. For example, in our most recent JavaScript and Web Development InfoQ Trends Report (March 2020) we placed WebAssembly in the innovation phase of adoption and Node.js, React, and Angular in the late majority phase.

We believe that understanding all the emerging patterns, antipatterns, and technologies related to these topics is essential for a software architect.

News

Vest, a New Javascript Form Validation Framework

Vest is a new framework-agnostic form validation library that separates the validation logic from the feature logic. Guy Nesher explored the library in a recent InfoQ post, arguing that implementing simple form validation is trivial. However, as applications and forms become more complex, so does the validation process, often resulting in code that is hard to read and maintain.

To address these challenges, Vest adopted common practices from modern unit testing frameworks. Validation logic exists in separate files and uses a syntax that is similar to what developers use in Jasmine or Mocha. This makes it easier to understand, maintain, and refactor the validations when needed.

REPLicant, a Super Simple Svelte REPL—Peter Allen at Svelte Summit 2020

Peter Allen recently gave a talk at Svelte Summit 2020 in which he explained the benefits of REPL (Read-Print-Eval-Loop) playgrounds. Bruno Couriol summarized the talk on InfoQ and explained that while the Svelte REPL is complex due to the handling of many edge cases, the principles underlying code playground implementations are simple. Allen progressively led the viewer into the implementation of the simplest possible version of the Svelte REPL.

Introducing Webpack 5

Version 5.0 of Webpack, the most popular JavaScript module bundler, has finally been released and offers a slew of improvements, including faster build times, decreased bundle sizes, and many breaking changes. Among the long list of improvements, two key changes have caught the attention of the JavaScript community — Module Federation, and the change in default behavior for the Node.js API polyfills.

The addition of module federation to Webpack 5.0 enables applications to dynamically import code from another application at runtime. This capability is especially important to developers who use the micro front-end architecture that breaks large applications into separate modules, each using its own frameworks.

Cypress 5.x Adds Test Retries and Shadow DOM Support

In a recent InfoQ news post, Dylan Schiemann wrote that Cypress, a browser-based test runner and dashboard, recently introduced native support for test retries in the Cypress 5.0 release, helping developers avoid intermittent test failures. Other recent Cypress advances include networking stubbing and shadow DOM support.

Cypress' founders created it after frustration working with testing tools like Selenium. While Selenium runs commands outside the browser and remotely over the network, Cypress executes commands in the same loop as a web application. Cypress is then backed by a Node.js process that communicates, synchronizes, and performs tasks. Cypress supports end-to-end, integration, and unit tests, and provides time travel testing, capturing snapshots as tests execute.

Case Study

2nd-Generation JavaScript Frameworks and Libraries: Beyond Angular, React, and Vue!

In recent years, large enterprises have been open-sourcing their internal JavaScript technology stacks, with an emphasis on reliability, stability, and maintainability. In a recent InfoQ article, Bruno Couriol summarized a talk by Geertjan Wielenga at FOSDEM'20 that explained the drivers behind that move and how this benefits developers.

Wielenga, author of the book Developer, Advocate! and Oracle developer focusing on NetBeans and Oracle JET, recalled the evolution of JavaScript frameworks and libraries in the past decades. Dojo (1.x), MooTools, Extjs, jQuery, and YUI were among the first libraries to get traction and help developers build web applications.

Backbone, Knockout, Ember, AngularJS (not to be confused with Angular) then appeared, to solve common problems that developers were facing when building ever more interactive web applications. Grunt, Gulp, Brunch, and other build tools also came to life to manage the developing complexity of building, bundling, and packaging rich web applications.

Fast forward to today, three major front-end frameworks—Angular, Vue, and React—aggregate the lion’s share of discussions among developers. Each of these frameworks has gone through their own cycle of deprecation and dreaded breaking changes, as they add new features and increase in complexity.

This "second generation" of JavaScript frameworks and libraries addresses the requirements of the enterprise segment first and foremost. Among those requirements figure a stable and proven toolset, responsive design, accessibility and internationalization, data visualization capabilities (key for the logistics, healthcare, and finance industries), security, performance optimization, conformance to emerging standards (such as web components), empowering of business users, and documentation and support.

This may mean stacks that don’t include the latest, coolest cutting-edge technologies but are stable. These are stacks that: shy away from frameworks, instead of revolving around toolkits; emphasize flexibility, modularity, and the ease of changing the software; and adhere to standards that will foreseeably still be in place in the next decades.

Wielenga concluded by encouraging developers to move from the comparison between Angular, React, and Vue to investigating the solutions put in place by enterprises, pick up the one that fits best their requirements, and actively contribute to it.

This is an excerpt from a full talk summary that was published on InfoQ ""2nd Generation JavaScript Frameworks & Libraries: beyond Angular, React, and Vue!"".

To get notifications when InfoQ publishes content on these topics, follow "Architecture", "JavaScript" and "HTML 5" on InfoQ.

Missed a newsletter? You can find all of the previous issues on InfoQ.

This edition of The Software Architects' Newsletter is brought to you by:

What Is a Service Mesh?

Service meshes provide policy-based networking for microservices describing desired behavior of the network in the face of constantly changing conditions and network topology. At their core, service meshes provide a developer-driven, services-first network; a network that is primarily concerned with alleviating application developers from building network concerns (e.g., resiliency) into their application code; a network that empowers operators with the ability to declaratively define network behavior, node identity, and traffic flow through policy.

InfoQ strives to facilitate the spread of knowledge and innovation within this space, and in this newsletter we aim to curate and summarise key learnings from news items, articles and presentations created by industry peers, both on InfoQ and across the web. We aim to keep readers informed and educated about emerging trends, peer-validated early adoption of technologies, and architectural best practices, and are always keen to receive feedback from our readers. We hope you find it useful, but if not you can unsubscribe using the link below.

Forwarded email? Subscribe and get your own copy.