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
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)
We’re always looking for new talent to join our growing team.
For more contact me at [email protected]
Thank you
twitter.com/anzeznidarsic