WRITING BROWSER RELOAD FUNCTIONALITY FROM SCRATCH

Anze Znidarsic, Flycom d.o.o.

WHAT DO YOU GUYS DO?

more: bit.ly/gms3video

Geographic Information System

STACK• Ubuntu Linux

• Nginx

• PHP (Laravel) - App & API

• NodeJS - Real time communications

• Many small integrated GIS related components

DEV ENVIRONMENT• Macs

• Vagrant + VirtualBox (VmWare on production)

• Looking into microservices (Docker and friends)

• PhpStorm IDE

• Gulp task runner

YES, WE USE GULP..

• .. I know, Gulp is like sooooo 2014

• npm install --save-dev gulp-babel

BROWSER RELOAD SOLUTION GOALS

• A developer changes php/js/css code

• All opened browsers (on all connected devices) refresh

• Solution criteria: works on any browser, supports http2

• Possible upgrades (e.g., hot reload, HMR, action sync)

PROCESS

Code changeif .scss then process SCSS to CSSif .js then process ES201x to ES5

if .php then just go on Reload all opened

browsers

Local browsers (Chrome, Safari, Firefox..)

VM browsers (Internet Explorer, Edge)

Simulators (iOS, Android)

Devices (iPhone,

Android, iPad)

EXISTING SOLUTIONS• livereload.com

• browser extension

• paid solution

• browsersync.io

• proxy solution

• does not support http2

OUR SOLUTION

Page requested

NodeJS Server

Page displayed

Laravel app

Secure WebSocket connection established

Open website in all browsers (either manually

or through a script)

BRO

WSE

RSE

RVER

DEVE

LOPE

R

OUR SOLUTION

Page requested

NodeJS Server

Page displayed

Laravel app

Reload

Open website in all browsers (either manually

or through a script)

BRO

WSE

RSE

RVER

DEVE

LOPE

R

Code change in i.e. PhpStorm

Task runner (Gulp)Compile JS, CSS and other

filesCode change detected

Request reload

WHY THAT NODEJS SERVER?

• We already had it, it’s not required, server-side of web sockets can be included in the file watcher (Gulp task runner in our example)

NODEJS SERVER

BROWSER

HM… YOU DIDN’T USE PORT 5000!

• We proxy WS through nginx so it works behind corporate firewalls

GULP

We’re always looking for new talent to join our growing team.

For more contact me at anze@flycom.si

Thank you

twitter.com/anzeznidarsic