Dojo 4.0 released with support for Progressive Web Apps, a redesigned Virtual DOM, and more!

Last week, the Dojo community announced the release of Dojo 4.0. This version aims for better application optimization and analysis. It comes with better support for code splitting and Progressive Web Apps (PWAs), a redesigned Virtual DOM, and more. Also, TypeScript forwards-compatibility is updated from 2.7 to 3.0.

Improved Dojo CLI tooling

Separating an application into bundles, better know as code splitting has been possible since the previous versions of Dojo. To do this developers had to add some configuration to specify how the application should be bundled.

Dojo 4.0 helps you to automatically split your application based on its top-level routes. cli-build-app, the CLI command for building optimized Dojo applications, provides this functionality out of the box. Additionally, a bundle analyzer is automatically generated when running a build in production. It will provide you even more insight into the bundles.

CLI is further improved with support for externals, allowing non-modular libraries or standalone applications that cannot be bundled normally to be included in a Dojo application. Support for automatic parsing, hashing, and bundling of resources from index.html, and the inclusion of assets from the catch-all assets directory is also added.

Support for old browsers by explicit opt-in

Earlier, all browsers were supported by default. This behavior is now reversed and support for older browsers back to IE11 is available by explicit opt-in. This results in smaller and faster applications for newer browsers as they add support for features natively.

Support for Progressive Web Apps

The framework is now optimized for the PRPL pattern in order to support Progressive Web Apps (PWAs). PRPL is a pattern for structuring and serving PWAs, keeping the performance of app delivery and launch in mind.

Here is what it stands for:

Push critical resources for the initial URL route.

Render initial route.

Pre-cache remaining routes.

Lazy-load and create remaining routes on demand.

To get a better understanding of the PRPL pattern, you can check out the explanation on Google Developers.

Updates in the Dojo Framework

The @dojo/framework has also seen various updates and addition of new features:

The Virtual DOM engine has been redesigned and rewritten from the ground up. This overhauled Virtual DOM comes with improved rendering performance and reduced overall size of the framework.

A few improvements have been added when using the w() and v() pragmas. These include a better composition of nodes, rendering a dynamic import directly using w(), and enabling the use of meta for nodes that are passed as children to a widget.

In this release, the routing system within the framework has received an improved route-matching algorithm.

dojo/stores come with middleware support for Local storage in this release, and a new StoreProvider eases the injection of application state. The StoreProvider will be used as any widget to inject the store into the vdom tree using a render property.

The existing Link component is refactored and an ActiveLink component is added that applies classes when the link's outlet is "active".

Breaking changes

The routing events are emitted after the routing navigation is completed.

runAfterRenders is now private.

Symbol usage in widget-core is now not allowed because symbol usage causes issues as they are unique for a specific version.

In order to consolidate existing dojo/core modules, many modules have been removed. Instead, using alternatives such as a fetch polyfill is advised for consumers that need to support IE11.

The Outlet is changed from a higher order component (HOC) to a standard component with a render property. Having an outlet as a HOC implies that it would be shared across the application, which generally they are not.

Read the official announcement at Dojo’s official website and also check their release notes.

npm at Node+JS Interactive 2018: npm 6, the rise and fall of JavaScript frameworks, and more

Mozilla optimizes calls between JavaScript and WebAssembly in Firefox, making it almost as fast as JS to JS calls

Vue.js 3.0 is ditching JavaScript for TypeScript. What else is new?