Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WRITING BROWSER RELOAD
FUNCTIONALITY FROM SCRATCH
Anze Znidarsic, Flycom d.o.o.
WHAT DOYOU 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 r...
DEV ENVIRONMENT
• Macs
• Vagrant +VirtualBox (VmWare on production)
• Looking into microservices (Docker and friends)
• Ph...
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) refre...
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...
EXISTING SOLUTIONS
• livereload.com
• browser extension
• paid solution
• browsersync.io
• proxy solution
• does not suppo...
OUR SOLUTION
Page requested
NodeJS Server
Page displayed
Laravel app
Secure WebSocket connection established
Open website ...
OUR SOLUTION
Page requested
NodeJS Server
Page displayed
Laravel app
Reload
Open website in all
browsers (either manually
...
WHYTHAT NODEJS SERVER?
• We already had it, it’s not required, server-side of web sockets can be
included in the file watch...
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/a...
Upcoming SlideShare
Loading in …5
×

Writing your own browser reload functionality

There are browser reload (while developing) packages out there, but this is so simple to create and can be very flexible, so we decided to make our own. You can too.

  • Login to see the comments

  • Be the first to like this

Writing your own browser reload functionality

  1. 1. WRITING BROWSER RELOAD FUNCTIONALITY FROM SCRATCH Anze Znidarsic, Flycom d.o.o.
  2. 2. WHAT DOYOU GUYS DO? more: bit.ly/gms3video Geographic Information System
  3. 3. STACK • Ubuntu Linux • Nginx • PHP (Laravel) - App & API • NodeJS - Real time communications • Many small integrated GIS related components
  4. 4. DEV ENVIRONMENT • Macs • Vagrant +VirtualBox (VmWare on production) • Looking into microservices (Docker and friends) • PhpStorm IDE • Gulp task runner
  5. 5. YES,WE USE GULP.. • .. I know, Gulp is like sooooo 2014 • npm install --save-dev gulp-babel
  6. 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. 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. 8. EXISTING SOLUTIONS • livereload.com • browser extension • paid solution • browsersync.io • proxy solution • does not support http2
  9. 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. 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. 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. 12. NODEJS SERVER
  13. 13. BROWSER
  14. 14. HM…YOU DIDN’T USE PORT 5000! • We proxy WS through nginx so it works behind corporate firewalls
  15. 15. GULP
  16. 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

×