Increase performance of your Angular, React and Gatsby Apps with Guess.js

Increasing performance of Angular, React and Gatsby applications is always an important question, especially if you have significant complex app or website.

Guess.js it’s a new exciting optimization solution that use Data-driven bundling for Webpack and Data-driven loading for non-Webpack. It is still in alpha, but I hope once it will be stable, it will be an important part of huge complex apps and websites.

About Guess.js

Guess.js provides libraries & tools to simplify predictive data-analytics driven approaches to improving user-experiences on the web. This data can be driven from any number of sources, including analytics or machine learning models. Guess.js aims to lower the friction of consuming and applying this thinking to all modern sites and apps, including building libraries & tools for popular workflows.

Applying predictive data-analytics thinking to sites could be applied in some contexts:

• Predict the next page (or pages) a user is likely to visit and prefetch these pages, improving perceived page load performance and user happiness.
• Predict the next piece of content (article, product, video) a user is likely to want to view and adjust or filter the user experience to account for this.
• Predict the types of widgets an individual user is likely to interact with more (e.g. games) and use this data to tailor a more custom experience.

Main Idea

The main idea is the improving web performance through predictive prefetching of content.

By building a model of pages a user is likely to visit, given an arbitrary entry-page, a solution could calculate the likelihood a user will visit a given next page or set of pages and prefetch resources for them while the user is still viewing their current page. This has the possibility of improving page-load performance for subsequent page visits as there’s a strong chance a page will already be in the user’s cache.

How to use

• In your React or Angular application install Guess.js Webpack plugin:

• If you are using Gatsby you need to install gatsby-plugin-guess-js plugin:

• After installation is complete, we need to configure our project.

Angular: To configure Angular webpack config file in Angular CLI application, you need to eject your Angular App $ ng eject. Once files will be ejected navigate inside config directory and configure webpack.config.js

Note: If you’re using Angular CLI version 6 you may need to downgrade to version 1.7 because currently, Angular CLI does not allow ejection.

React: If you are using create-react-app you need to eject you React App $ npm run eject . Once files will be ejected navigate inside config directory and configure webpack.config.prod.js

• If you are using Gatsby you need to configure gatsby-config.js plugin:

Advanced config options that you can configure in GuessPlugin.

• Once we finished configuration, we need to build our application. While the build is running, you need to authorize Guess.js with your Google account and provide access to Google Analytics data. After granted access to Google Analytics, the GuessPlugin will get a report from Google Analytics, build a model used for predictive pre-fetching and add a small runtime to the main bundle of your application.

Build finished! On route change, the runtime will query the generated model for the pages that are likely to be visited next and pre-fetch the associated with them JavaScript bundles.

Example of app https://github.com/mgechev/guess-js-angular-demo

Demos

React demo - demo application using GuessPlugin and create-react-app

Gatsby demo - demo application using gatsby-plugin-guess-js in the project.

Angular demo - demo application using GuessPlugin and Angular CLI.

Big thanks for this demos provided by Minko Gechev and Kyle Mathews !

Conclusion

Thanks Guess.js Team for this excellent tool. Guess.js is a new revolutionary step in Web Development. I hope this article will help you to investigate Guess.js and start to use it in your projects.

For more detailed information, please look at the official repository.

References

guess-js/guess

Introducing Guess.js - a toolkit for enabling data-driven user-experiences on the Web

Machine Learning-Driven Bundling. The Future of JavaScript Tooling.