Assignment to make a server side app with certain performance techniques and a service worker. I used the "https://www.themoviedb.org/" API to fetch the movies.
Search for any movie
Get your results
Get more information
I created a new API because I didn't like the fact that Funda will pull their API eventually. This way I can look back at my project in a few months and see what I could've done better and maybe try to improve it.
I tried to relearn Node.js in these 2 weeks so it took me a lot of time to get things up and running while learning about new tooling like Browserify and Common.js. I also implemented a service worker so my site shows a couple of files/pages without an internet connection.
To run the application:
git clone
The current .env
is hidden from GitHub. Make sure you add a .env
file with the API key. Example:
API_KEY=2WE8979wWPuweoiwuer
To use the app you need to run the following commands:
npm install
To install the Node dependencies.
npm start
To start the server on port 9000
npm run expose
To run ngrok to expose the application to the web (optional)
In order to use 'require' client side I used Browserify to make 1 bundle.js which combines all the Javascript files.
For example, in a random.js file I used:
const random = 'wow this is random';
module.exports = random;
And in the app.js file I required all exported files:
const random = require('./random');
const navigator = require('./navigator');
const fontface = require('./fontface');
console.log(random);
Here I can use the const I made in the random.js file.
To complete this I ran npm run build
which compiled the app.js (with all the required files) file into the bundle.js.
I implemented the following techniques to improve the performance of the application. These were all tested on a very slow connection (2G) so that I could measure the speed in a more precise way:
This is the speed without increasing the performance.
Here I implemented Gzip. Gzip makes sure that the files becomes 'zipped' like you would do on your computer, but instead of the computer these zip's go to the browser. As you can see it already went from around ~6000ms to ~3300ms. A huge improvement.
Now here it seems like I slowed down the application by using an svg. This is true. The image for the logo that I was using was a very low quality/ugly PNG file. I created a fallback for if the browser doesn't support SVG files:
<img src="../../images/logo.svg" onerror="this.onerror=null, this.src='../../images/logo.png'"/>
To compress the SVG further I used compression.io
Fontfaceobserver makes sure you see a fallback font until the custom font is loaded. This way we don't have to see empty font-less spots while loading the website. You can already see we cut it down to ~3300ms again.
Critical css loads the css that fills your viewport first so it can load the latter while you're still looking at the zero-state. This way the perceived performance is increased a lot even though the numbers don't necessarily tell you.
Since Browserify already bundles all the Javascript files I only minified CSS. The speed went a bit up from the previous improvement.
The rating didn't actually change from start to end because the application wasn't that slow to start with. However we did see it improve in speed and usability because I tested it on a 2G network.
The service worker I implemented will make sure that the css/fonts/images get cached into the browser. It also remembers the path the users has taken before so it can render this path even without an internet connection. If the user is offline and he tries to visit a page that he didn't visit before, offline.html gets rendered and the user gets to see this:
If you go to caniuse.com you can see that the service worker isn't widely supported yet. To make sure this isn't a problem I created a fallback that checks if the service worker is supported:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js', { scope: './' }).then((registration) => {
console.log('SW found');
}).catch((err) => {
console.log('SW not found', err);
});
}
When it isn't supported the app will just run without the service worker.
- Search suggestions
- Filtering on genre's
- Sorting on ratings
- Babelify it
- Get a 100/100 score on PageSpeed
https://www.themoviedb.org/
caniuse.com
https://fontfaceobserver.com/
http://browserify.org/
https://criticalcss.com/
https://www.npmjs.com/package/compression
"https://www.npmjs.com/package/dotenv"
https://developers.google.com/speed/pagespeed/insights/?hl=nl
MIT License
Copyright © 2017 Luuk Hafkamp