• Stars
    star
    526
  • Rank 84,247 (Top 2 %)
  • Language
    JavaScript
  • Created over 6 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🔮 Demo application showing the integration of Guess.js with Next.js

🔮 Guess.js + Next.js

Guess.js is a collection of libraries & tools for enabling data-driven user-experience on the web.

In this particular example, we combine Guess.js with Next.js to introduce predictive prefetching of JavaScript bundles. Based on user navigation patterns collected from Google Analytics or other source, Guess.js builds a machine-learning model to predict and prefetch JavaScript that will be required in each subsequent page.

Based on early benchmarks, this can improve the perceived page load performance with 20%.

For more information on Guess.js, take a look at the following links:

Usage

Here's how you can try the demo:

git clone [email protected]:mgechev/guess-next
cd guess-next && npm i
npm run build && npm start

Demo

Integration

Guess.js (0.1.5 and above) works with Next.js with only two points of integration. All you need to do is add the GuessPlugin to next.config.js and introduce a snippet for prefetching the pages which are likely to be visited next.

The following sections describe both points in details.

Webpack Config

All you need is to extend the webpack config of your Next.js application is to add the GuessPlugin to next.config.js file, located in the root of your project. If the file does not exist, create it and add the following content:

const { GuessPlugin } = require('guess-webpack');

module.exports = {
  webpack: function(config, { isServer }) {
    if (isServer) return config;
    config.plugins.push(
      new GuessPlugin({
        GA: 'XXXXXX'
      })
    );
    return config;
  }
};

We set the value of the webpack property of the object literal we set as value to module.exports. We set it to a function which alters the GuessPlugin to the config.plugins array. Notice that we check if Next.js has invoked webpack on the server and we return.

As a value of the GA property, we set a Google Analytics View ID. At build time, Guess.js will open a browser and try to get read-only access to extract a report and use it for the predictive analytics.

Note that Google Analytics is not the only provider you can use to provide the user navigation report that Guess.js uses. In this example application we provide the report from a JSON file.

Prefetch Pages

The final piece of the integration is performing the actual prefetching. In your layout component (see components/layout.js) add:

import { guess } from 'guess-webpack/api';

// ...

  if (typeof window !== 'undefined') {
    Object.keys(guess()).forEach(p => router.prefetch(p));
  }

// ...

Keep in mind that we check if window is "undefined". This is required because we don't want to run Guess.js on the server. When we invoke guess(), we'll return a set of routes where each route will have an associated probability for the user to visit it.

The routes that guess() returns depend on the Google Analytics report that it has extracted, together with the user's effective connection type.

License

MIT

More Repositories

1

javascript-algorithms

💻 JavaScript implementations of computer science algorithms
JavaScript
7,836
star
2

angularjs-style-guide

📚 Community-driven set of best practices for AngularJS application development
4,984
star
3

revive

🔥 ~6x faster, stricter, configurable, extensible, and beautiful drop-in replacement for golint
Go
4,764
star
4

angular-seed

🌱 [Deprecated] Extensible, reliable, modular, PWA ready starter project for Angular (2 and beyond) with statically typed build and AoT compilation
TypeScript
4,572
star
5

angular-performance-checklist

⚡ Cheatsheet for developing lightning fast progressive Angular applications
4,027
star
6

google-interview-preparation-problems

leetcode problems I solved to prepare for my Google interview.
JavaScript
3,124
star
7

codelyzer

Static analysis for Angular projects.
TypeScript
2,446
star
8

angularjs-in-patterns

AngularJS in patterns - this repository provides different look into AngularJS. It contains information where different design patterns are used inside the framework or any Angular application.
JavaScript
1,956
star
9

ngrev

Tool for reverse engineering of Angular applications
TypeScript
1,553
star
10

mk.js

Canvas implementation of basic fighting game which allows multiplayer over the network.
JavaScript
1,504
star
11

angular2-style-guide

[Deprecated] Community-driven set of best practices and style guidelines for Angular 2 application development
1,203
star
12

injection-js

Dependency injection library for JavaScript and TypeScript in 5.1K. It is an extraction of the Angular's ReflectiveInjector which means that it's well designed, feature complete, fast, reliable and well tested.
TypeScript
1,149
star
13

jscapture

Screen recording and capturing with pure client-side JavaScript.
JavaScript
797
star
14

tiny-compiler

A tiny evaluator and compiler of arithmetic expressions.
JavaScript
768
star
15

ngx-quicklink

Quicklink prefetching strategy for the Angular router
TypeScript
749
star
16

aspect.js

JavaScript library for aspect-oriented programming using modern syntax.
TypeScript
474
star
17

angular-webrtc

Demo for my blog post at http://goo.gl/LCOSsI
ApacheConf
307
star
18

switching-to-angular2

TypeScript
285
star
19

memo-decorator

Decorator which applies memoization to a method of a class.
TypeScript
256
star
20

js-vnc-demo-project

Demo project for the class Advanced JavaScript at the department mathematics and informatics in Sofia University.
JavaScript
186
star
21

is-esm

🌳 CLI tool which checks if a package is distributed in ECMAScript module format. Helps you reason if the package is tree-shakable.
JavaScript
184
star
22

angular-immutable

Simple directive, which allows binding to Immutable.js collections.
JavaScript
166
star
23

ngast

Parser for Angular projects.
TypeScript
164
star
24

angular-aop

Library for aspect-oriented programming with AngularJS.
JavaScript
161
star
25

tslint-angular

Recommended tslint configuration for Angular applications.
161
star
26

ngx-hover-preload

🖱 Preload Angular lazy-loaded routes on mouse over
TypeScript
160
star
27

mk-tfjs

Play MK.js with TensorFlow.js
JavaScript
156
star
28

ReactChat

WebRTC chat with ReactJS
JavaScript
153
star
29

ngworld

Generate a Minecraft/Christmas-like world out of an Angular application.
TypeScript
142
star
30

scalable-architecture-demo

TypeScript
134
star
31

github-contributors-list

Node.js script, which outputs all the contributors for given open GitHub project
JavaScript
133
star
32

ngresizable

Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular (2 and beyond).
TypeScript
117
star
33

angular2-hot-loader

[NOT MAINTAINED] Angular 2 hot loader
TypeScript
115
star
34

light-angularjs

Light AngularJS implementation for my slides "Lightweight AngularJS"
JavaScript
110
star
35

movement.js

Gesture recognition with JavaScript and HTML5.
JavaScript
106
star
36

angular-vnc

VNC client implemented with AngularJS and Yeoman
JavaScript
99
star
37

ngx-tfjs

🤖 TensorFlow.js bindings for Angular
TypeScript
95
star
38

real-world-bazel

The real world Angular example app moved to Bazel
TypeScript
90
star
39

angular-transitions

Pre-defined set of CSS3 transformation which can be used with ng-view, ui-view, ng-repeat, ng-show, ng-hide. Both the 1.1.5 and 1.2.0 APIs are supported.
CSS
90
star
40

angular-tfjs-demo

A demo application with TensorFlow.js bindings for Angular.
TypeScript
85
star
41

angular2-ngc-rollup-build

Simple build for "Hello world!" Angular 2 application with ngc and rollup.
HTML
81
star
42

angular2-github-app-bootstrap

Exercise for building simple Angular 2 apps
JavaScript
79
star
43

blog.mgechev.com

My personal blog.
JavaScript
70
star
44

dotfiles

My dot files.
Shell
67
star
45

react-reorderable

Simple react sortable component (for more advanced cases use react-dnd).
JavaScript
63
star
46

devtools-vnc

VNC client for Chrome Devtools
JavaScript
61
star
47

cli-builders-demo

Demo showing how to develop a builder using the Angular CLI Architect API.
TypeScript
59
star
48

ngx-flamegraph

Flame graph for stack trace visualization written in Angular
TypeScript
57
star
49

electron-typescript-boilerplate

Electron TypeScript starter (intended mostly for personal projects). Fork of https://github.com/szwacz/electron-boilerplate.
JavaScript
54
star
50

angular-ivy-demo

Demo repository showing how ivy allows significant API simplification.
TypeScript
53
star
51

mlx

Data-driven bundling
TypeScript
48
star
52

optimizing-an-angular-application

Code for my ngconf talk "Optimizing an Angular Application".
TypeScript
48
star
53

ngx-gh

Automatic deployments to GitHub pages directly from the Angular CLI 🚀
TypeScript
45
star
54

data-adapter

Data adapter useful in data serialization when talking with external services.
TypeScript
45
star
55

react-pstate

Persistence of the state of ReactJS component
JavaScript
43
star
56

hybrid-rendering

TypeScript
42
star
57

playground

Initial experience with different programming languages
JavaScript
40
star
58

bazel-demo

Simple demo for building a TypeScript project with Bazel.
TypeScript
40
star
59

angular-hybrid-rendering

TypeScript
39
star
60

plainvm

plainvm allows you to control multiple virtual machines which are distributed among many hosts through your browser.
JavaScript
38
star
61

gemini-angular-drawing-demo

TypeScript
38
star
62

angular2-simple-build

Simple build for "Hello world!" Angular 2 application.
TypeScript
37
star
63

versionable-collections

Collection optimized for AngularJS 1.x one-way bindings
JavaScript
33
star
64

typed-calc

Interpreter for simply typed lambda calculus implemented in JavaScript λ
JavaScript
33
star
65

ngx-circular-player

Circular player for Angular
TypeScript
32
star
66

swagger-typescript-fetch-api

Swagger codegen for TypeScript Fetch API.
HTML
32
star
67

angular2-stripe-demo

TypeScript
30
star
68

blobreader

Simple interface for reading blobs sequentially
JavaScript
28
star
69

ts-rpc

RPC protocol with services defined via TypeScript interfaces.
TypeScript
27
star
70

performance-patterns

TypeScript
27
star
71

podcast

Website of the Programming Podcast
TypeScript
26
star
72

dots

Implements the wildcard file matching in Go used by golint, go test etc.
Go
25
star
73

ng-tutorial

Platform for AngularJS interactive tutorials
JavaScript
25
star
74

purely-fast

TypeScript
25
star
75

ELang

Simple programming language created for educational purpose
Java
24
star
76

gently-js

Module which returns the offensive words in a string. A soft reminder to be nicer to each other ❤️.
JavaScript
23
star
77

angular-realworld-example-app-qucklink

TypeScript
22
star
78

optimizing-apps-angular-demo

Demo application for my talk on optimizing Angular apps
TypeScript
21
star
79

ngmigrate

Automated migration of <template> to <ng-template> for Angular 4+
JavaScript
20
star
80

dynamic-route-creator

[DEPRECATED] Demo for dynamically defining routes in Angular 2
TypeScript
19
star
81

guess-js-angular-demo

TypeScript
18
star
82

lazy-loading-routes-angular2

WARNING: Uses deprecated APIs.
JavaScript
18
star
83

angular2-hot-loader-demo

Demo of the Angular 2 hot loader prototype
TypeScript
18
star
84

guess-js-react-demo

JavaScript
17
star
85

angular2-rollup-build

Simple build for "Hello world!" Angular 2 application with rollup.
HTML
17
star
86

getting-started-with-angular

Code for the second edition of the book "Switching to Angular 2", with title "Getting started with Angular".
TypeScript
17
star
87

svg-design-patterns

This repository contains UML class diagrams of some design and architectural patterns.
17
star
88

kitty-cinema

HTML
16
star
89

programming-podcast-samples

TypeScript
16
star
90

react-di-demo

Demo for my blog post "Implementing Angular's Dependency Injection in React. Understanding Element Injectors."
JavaScript
16
star
91

code-splitting-web-dev

TypeScript
15
star
92

react-drag

JavaScript
15
star
93

ivy-library-distribution-demo

TypeScript
14
star
94

angular-bazel-hello-world

Simple Angular app with Bazel configuration
HTML
13
star
95

viewchildren-contentchildren-demo

TypeScript
12
star
96

photos.mgechev.com

Website for my personal photography.
TypeScript
12
star
97

top-packages

TypeScript
12
star
98

v8-sorting-test

Testing the sorting performance of Google's V8 JavaScript engine.
Perl
12
star
99

immutable-differ

Work in progress.
TypeScript
11
star
100

guess-angular

TypeScript
11
star