Movie app

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

Intro

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.

Build

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)

Tooling

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.

Performance

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:

Normal

This is the speed without increasing the performance.

Gzip

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.

SVG + compression

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

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

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.

Minify

Since Browserify already bundles all the Javascript files I only minified CSS. The speed went a bit up from the previous improvement.

PageSpeed rating

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.

Service worker

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.

TODO

Sources

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

License

MIT License

lhafkamp / minor-ss-app Goto Github PK

minor-ss-app's Introduction