1) The document discusses building browser reload functionality from scratch for a geographic information systems company. It outlines using Gulp to detect code changes, process files, and reload browsers. 2) A Node.js server is used to establish secure web socket connections between browsers and the Laravel application to trigger reloads on code changes. 3) While existing solutions like Livereload and Browsersync were considered, they did not meet the goals of supporting any browser and HTTP/2. The presented solution proxies web sockets through Nginx to work behind firewalls.

1. WRITING BROWSER RELOAD
FUNCTIONALITY FROM SCRATCH
Anze Znidarsic, Flycom d.o.o.

2. WHAT DOYOU GUYS DO?
more: bit.ly/gms3video
Geographic Information System

3. STACK
• Ubuntu Linux
• Nginx
• PHP (Laravel) - App & API
• NodeJS - Real time communications
• Many small integrated GIS related components

4. DEV ENVIRONMENT
• Macs
• Vagrant +VirtualBox (VmWare on production)
• Looking into microservices (Docker and friends)
• PhpStorm IDE
• Gulp task runner

5. YES,WE USE GULP..
• .. I know, Gulp is like sooooo 2014
• npm install --save-dev gulp-babel

6. 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)

7. PROCESS
Code change
if .scss then process SCSS to CSS
if .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)

8. EXISTING SOLUTIONS
• livereload.com
• browser extension
• paid solution
• browsersync.io
• proxy solution
• does not support http2

9. 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)
BROWSERSERVERDEVELOPER

10. OUR SOLUTION
Page requested
NodeJS Server
Page displayed
Laravel app
Reload
Open website in all
browsers (either manually
or through a script)
BROWSERSERVERDEVELOPER
Code change in
i.e. PhpStorm
Task runner (Gulp)
Compile JS, CSS and other
files
Code change detected
Request reload

11. WHYTHAT 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)

12. NODEJS SERVER

13. BROWSER

14. HM…YOU DIDN’T USE PORT 5000!
• We proxy WS through nginx so it works behind corporate firewalls

15. GULP

16. 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