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

  • Be the first to comment

  • 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

×