Our fortieth 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

Running React Applications at the Edge with Cloudflare Workers - Q&A with Josh Larson

Josh Larson recently released Flareact, an edge-rendered React framework built for Cloudflare Workers. Flareact is inspired by Next.js, a React framework that features hybrid static and server rendering. While Next.js optimizes React applications for production deployments, (e.g. pre-rendering, optimized pre-fetching, automatic code-splitting), Cloudflare Workers allows running code on the edge quickly, efficiently, and at scale.

Flareact seeks to replicate the advantages brought about by Next while adding the benefits of edge-side rendering and caching. Flareact currently supports file-based page routing, dynamic page paths, API routes, cache policy configuration, and edge-side data-fetching APIs.

Angular 11 Released with Improved Developer Experience and Cleanup of Issues

Google has released version 11 of Angular, its popular single page application (SPA) framework. The Angular 11 release focuses on improving the developer experience and finalizing the cleanup of the issue tracker.

Following the significant changes made in Angular 9 with the release of Ivy, the Angular development team chose to dedicate the following releases to address many of the bugs and concerns that were raised by the community.

Mock Service Worker Library Enables Resilient REST and GraphQL API Testing

The Mock Service Worker (MSW) API mocking library allows developers to test web applications without using an actual back-end, setting up a mocking server, or stubbing native http/https/fetch implementations. MSW mocks both Rest and GraphQL APIs. MSW received the JavaScript Open Source Awards this year.

Deno Introduction with Practical Examples

This article from Erisan Olasheni presents a series of tutorials and practical examples to help learn Deno and the surrounding ecosystem. Deno is a simple, modern, and secure runtime for JavaScript and TypeScript applications built with the Chromium V8 JavaScript engine and Rust, created to avoid several pain points and regrets with Node.js.

Deno was originally announced in 2018 and reached 1.0 in 2020, created by the original Node.js founder Ryan Dahl and other mindful contributors.

Snowpack 2.0 Launches O(1) Build System to Speed up Web Development

Early in the year, the pika team released the second major iteration of Snowpack. Snowpack 2.0 is described as a build system for the modern web and claims start-up times below 50ms even in large projects. Snowpack 2.0 achieves its speed by eschewing bundles during development. Bundles may still be generated for production. Snowpack 2.0 ships with a set of Create Snowpack App (CSA) starter templates targeting miscellaneous stacks.

Case Study

Accessible Adaptive Design Systems with Microsoft’s New FAST Framework

Rob Eisenberg, principal UX architecture and tools lead at Microsoft recently introduced the FAST Framework during the .NET Community Standup. FAST allows developers to create their own design system and web component libraries by customizing styles and properties. FAST uses an adaptive color system that meets accessibility contrast requirements, supports color themes, and provides a perceptually uniform UI across different background colors—with little input from developers. FAST comes with a premade Fluent UI component library.

Microsoft explained the motivation behind FAST with a series of questions that summarize the key alleged benefits of the FAST framework:

"Have you ever needed a reusable set of UI components that you could drop into your app and have an amazing experience? […]
Have you ever needed to create your own components, and share them across your company, including across groups that use different, incompatible front-end frameworks? […]
Have you ever needed to implement a branded experience or a design language like Microsoft's Fluent UI or Google's Material Design? […]
Have you ever wanted to improve your app's startup time, render speed, or memory consumption? […]
Have you ever wanted to […] build your […] app on a native web foundation that's immune to the shifting sands of the modern JavaScript front-end landscape?"

FAST comes as a collection of JavaScript packages, including fast-element, fast-foundation, fast-components, and fast-colors.

Developers and designers may define their own design system, understood in a FAST context as a collection of properties (CSS variables) and values that inform the visual design language of the components. A FAST design system is implemented by a DesignSystemProvider custom element that lists the custom properties to be consumed by component stylesheets.

FAST components' documentation is thorough and provides examples of integrations of the component library with Webpack and miscellaneous frameworks, including, but not limited to, Angular, Aurelia, React, Blazor, and ASP.NET.

Developers can review the FAST component library online with the provided component explorer.

This content is an excerpt from a recent InfoQ article: "Accessible Adaptive Design Systems with Microsoft’s New FAST Framework".

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.

Event

QCon Plus, the Virtual Conference for Architects and Senior Software Engineers returns on May 10-28, 2021

QCon Plus covers the trends, best practices, and solutions leveraged by the world's most innovative software organizations. The May 10-28 virtual event will be designed with short, focused technical sessions spread over 3 weeks. QCon Plus will include 18 tracks that cover the topics that matter right now in software development.

You’ll be able to personalize your experience and get the most out of QCon Plus:

• Plan your schedule around a couple of hours a day, two to three days a week for three weeks.
• Engage with attendees to share common challenges.
• Connect in real-time with speakers in the Q&As and hallway tracks.
• Problem-solve in Open Space sessions.
• Catch up on all the QCon Plus talks you miss (on-demand content will be available).

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.