SlideShare a Scribd company logo
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 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 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)
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)
BROWSERSERVERDEVELOPER
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
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)
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

More Related Content

What's hot

Grunt JS - Getting Started With Grunt
Grunt JS - Getting Started With GruntGrunt JS - Getting Started With Grunt
Grunt JS - Getting Started With Grunt
Douglas Reynolds
 
OpenNebula Conf 2014: CentOS, QA an OpenNebula - Christoph Galuschka
OpenNebula Conf 2014: CentOS, QA an OpenNebula - Christoph GaluschkaOpenNebula Conf 2014: CentOS, QA an OpenNebula - Christoph Galuschka
OpenNebula Conf 2014: CentOS, QA an OpenNebula - Christoph Galuschka
NETWAYS
 
Introducing docker
Introducing dockerIntroducing docker
Introducing docker
Bill Wang
 
Docker e git lab
Docker e git labDocker e git lab
Docker e git lab
Gianluca Padovani
 
Introduction to Docker Compose
Introduction to Docker ComposeIntroduction to Docker Compose
Introduction to Docker Compose
Prabhas Gupte
 
Workshop For pycon13
Workshop For pycon13Workshop For pycon13
Workshop For pycon13
Steven Pousty
 
Grunt
GruntGrunt
Masterless puppet
Masterless puppetMasterless puppet
Masterless puppet
Jesus Nunez
 
Scale Big With Docker — Moboom 2014
Scale Big With Docker — Moboom 2014Scale Big With Docker — Moboom 2014
Scale Big With Docker — Moboom 2014
Jérôme Petazzoni
 
Wt vs phalcon
Wt vs phalconWt vs phalcon
Wt vs phalcon
Amitoj Singh
 
Beyond Puppet
Beyond PuppetBeyond Puppet
Beyond Puppet
Kris Buytaert
 
Intro to Linux - Skillswap
Intro to Linux - Skillswap Intro to Linux - Skillswap
Intro to Linux - Skillswap
Thomas Buckley-Houston
 
Using Nagios to monitor your WO systems
Using Nagios to monitor your WO systemsUsing Nagios to monitor your WO systems
Using Nagios to monitor your WO systems
WO Community
 
Jimmy Tang - Deploying with Ansible
Jimmy Tang - Deploying with AnsibleJimmy Tang - Deploying with Ansible
Jimmy Tang - Deploying with Ansible
dri_ireland
 
Docker session I: Continuous integration, delivery and deployment
Docker session I: Continuous integration, delivery and deploymentDocker session I: Continuous integration, delivery and deployment
Docker session I: Continuous integration, delivery and deployment
Degendra Sivakoti
 
Heketi Functionality into Glusterd2
Heketi Functionality into Glusterd2Heketi Functionality into Glusterd2
Heketi Functionality into Glusterd2
Gluster.org
 
DevOps: Using Vagrant to Enhance Your Day to Day Development
DevOps: Using Vagrant to Enhance Your Day to Day DevelopmentDevOps: Using Vagrant to Enhance Your Day to Day Development
DevOps: Using Vagrant to Enhance Your Day to Day Development
Rob Reynolds
 
Anton Cherednikov "Modules and Artifacts in NPM"
Anton Cherednikov "Modules and Artifacts in NPM"Anton Cherednikov "Modules and Artifacts in NPM"
Anton Cherednikov "Modules and Artifacts in NPM"
LogeekNightUkraine
 
Gluster as Native Storage for Containers - past, present and future
Gluster as Native Storage for Containers - past, present and futureGluster as Native Storage for Containers - past, present and future
Gluster as Native Storage for Containers - past, present and future
Gluster.org
 
OpenNebula Conf 2014 | Building Hybrid Cloud Federated Environments with Open...
OpenNebula Conf 2014 | Building Hybrid Cloud Federated Environments with Open...OpenNebula Conf 2014 | Building Hybrid Cloud Federated Environments with Open...
OpenNebula Conf 2014 | Building Hybrid Cloud Federated Environments with Open...
NETWAYS
 

What's hot (20)

Grunt JS - Getting Started With Grunt
Grunt JS - Getting Started With GruntGrunt JS - Getting Started With Grunt
Grunt JS - Getting Started With Grunt
 
OpenNebula Conf 2014: CentOS, QA an OpenNebula - Christoph Galuschka
OpenNebula Conf 2014: CentOS, QA an OpenNebula - Christoph GaluschkaOpenNebula Conf 2014: CentOS, QA an OpenNebula - Christoph Galuschka
OpenNebula Conf 2014: CentOS, QA an OpenNebula - Christoph Galuschka
 
Introducing docker
Introducing dockerIntroducing docker
Introducing docker
 
Docker e git lab
Docker e git labDocker e git lab
Docker e git lab
 
Introduction to Docker Compose
Introduction to Docker ComposeIntroduction to Docker Compose
Introduction to Docker Compose
 
Workshop For pycon13
Workshop For pycon13Workshop For pycon13
Workshop For pycon13
 
Grunt
GruntGrunt
Grunt
 
Masterless puppet
Masterless puppetMasterless puppet
Masterless puppet
 
Scale Big With Docker — Moboom 2014
Scale Big With Docker — Moboom 2014Scale Big With Docker — Moboom 2014
Scale Big With Docker — Moboom 2014
 
Wt vs phalcon
Wt vs phalconWt vs phalcon
Wt vs phalcon
 
Beyond Puppet
Beyond PuppetBeyond Puppet
Beyond Puppet
 
Intro to Linux - Skillswap
Intro to Linux - Skillswap Intro to Linux - Skillswap
Intro to Linux - Skillswap
 
Using Nagios to monitor your WO systems
Using Nagios to monitor your WO systemsUsing Nagios to monitor your WO systems
Using Nagios to monitor your WO systems
 
Jimmy Tang - Deploying with Ansible
Jimmy Tang - Deploying with AnsibleJimmy Tang - Deploying with Ansible
Jimmy Tang - Deploying with Ansible
 
Docker session I: Continuous integration, delivery and deployment
Docker session I: Continuous integration, delivery and deploymentDocker session I: Continuous integration, delivery and deployment
Docker session I: Continuous integration, delivery and deployment
 
Heketi Functionality into Glusterd2
Heketi Functionality into Glusterd2Heketi Functionality into Glusterd2
Heketi Functionality into Glusterd2
 
DevOps: Using Vagrant to Enhance Your Day to Day Development
DevOps: Using Vagrant to Enhance Your Day to Day DevelopmentDevOps: Using Vagrant to Enhance Your Day to Day Development
DevOps: Using Vagrant to Enhance Your Day to Day Development
 
Anton Cherednikov "Modules and Artifacts in NPM"
Anton Cherednikov "Modules and Artifacts in NPM"Anton Cherednikov "Modules and Artifacts in NPM"
Anton Cherednikov "Modules and Artifacts in NPM"
 
Gluster as Native Storage for Containers - past, present and future
Gluster as Native Storage for Containers - past, present and futureGluster as Native Storage for Containers - past, present and future
Gluster as Native Storage for Containers - past, present and future
 
OpenNebula Conf 2014 | Building Hybrid Cloud Federated Environments with Open...
OpenNebula Conf 2014 | Building Hybrid Cloud Federated Environments with Open...OpenNebula Conf 2014 | Building Hybrid Cloud Federated Environments with Open...
OpenNebula Conf 2014 | Building Hybrid Cloud Federated Environments with Open...
 

Similar to Writing your own browser reload functionality

Docker 0.11 at MaxCDN meetup in Los Angeles
Docker 0.11 at MaxCDN meetup in Los AngelesDocker 0.11 at MaxCDN meetup in Los Angeles
Docker 0.11 at MaxCDN meetup in Los Angeles
Jérôme Petazzoni
 
Docker+java
Docker+javaDocker+java
Docker+java
DPC Consulting Ltd
 
Docker and-containers-for-development-and-deployment-scale12x
Docker and-containers-for-development-and-deployment-scale12xDocker and-containers-for-development-and-deployment-scale12x
Docker and-containers-for-development-and-deployment-scale12x
rkr10
 
Rapid and Reliable Developing with HTML5 & GWT
Rapid and Reliable Developing with HTML5 & GWTRapid and Reliable Developing with HTML5 & GWT
Rapid and Reliable Developing with HTML5 & GWT
Manuel Carrasco Moñino
 
Implementing your own Google App Engine
Implementing your own Google App Engine Implementing your own Google App Engine
Implementing your own Google App Engine
Virtual JBoss User Group
 
Introduction to Docker, December 2014 "Tour de France" Bordeaux Special Edition
Introduction to Docker, December 2014 "Tour de France" Bordeaux Special EditionIntroduction to Docker, December 2014 "Tour de France" Bordeaux Special Edition
Introduction to Docker, December 2014 "Tour de France" Bordeaux Special Edition
Jérôme Petazzoni
 
Getting started with AMD GPUs
Getting started with AMD GPUsGetting started with AMD GPUs
Getting started with AMD GPUs
George Markomanolis
 
Gitlab ci-cd
Gitlab ci-cdGitlab ci-cd
Gitlab ci-cd
Dan MAGIER
 
Introduction to node.js By Ahmed Assaf
Introduction to node.js  By Ahmed AssafIntroduction to node.js  By Ahmed Assaf
Introduction to node.js By Ahmed Assaf
Ahmed Assaf
 
Multi-stage Docker builds to make building easy!
Multi-stage Docker builds to make building easy!Multi-stage Docker builds to make building easy!
Multi-stage Docker builds to make building easy!
Milindu Sanoj Kumarage
 
I Just Want to Run My Code: Waypoint, Nomad, and Other Things
I Just Want to Run My Code: Waypoint, Nomad, and Other ThingsI Just Want to Run My Code: Waypoint, Nomad, and Other Things
I Just Want to Run My Code: Waypoint, Nomad, and Other Things
Michael Lange
 
How to deploy a Java application on Google App engine Flexible environment
How to deploy a Java application on Google App engine Flexible environmentHow to deploy a Java application on Google App engine Flexible environment
How to deploy a Java application on Google App engine Flexible environment
Michelantonio Trizio
 
LUG - Install Fest 2008
LUG - Install Fest 2008LUG - Install Fest 2008
LUG - Install Fest 2008
Alessandro Manfredi
 
Modern web technologies
Modern web technologiesModern web technologies
Modern web technologies
Simeon Prusiyski
 
Docker Introduction + what is new in 0.9
Docker Introduction + what is new in 0.9 Docker Introduction + what is new in 0.9
Docker Introduction + what is new in 0.9
Jérôme Petazzoni
 
Docker Introduction, and what's new in 0.9 — Docker Palo Alto at RelateIQ
Docker Introduction, and what's new in 0.9 — Docker Palo Alto at RelateIQDocker Introduction, and what's new in 0.9 — Docker Palo Alto at RelateIQ
Docker Introduction, and what's new in 0.9 — Docker Palo Alto at RelateIQ
Jérôme Petazzoni
 
OSDC.no 2015 introduction to node.js workshop
OSDC.no 2015 introduction to node.js workshopOSDC.no 2015 introduction to node.js workshop
OSDC.no 2015 introduction to node.js workshop
leffen
 
OpenStack - JobShop @Iași, 2016
OpenStack - JobShop @Iași, 2016OpenStack - JobShop @Iași, 2016
OpenStack - JobShop @Iași, 2016
Alexandru Coman
 
State of Big Data on ARM64 / AArch64 - Apache Bigtop
State of Big Data on ARM64 / AArch64 - Apache BigtopState of Big Data on ARM64 / AArch64 - Apache Bigtop
State of Big Data on ARM64 / AArch64 - Apache Bigtop
Ganesh Raju
 
A Gentle Introduction to Docker and Containers
A Gentle Introduction to Docker and ContainersA Gentle Introduction to Docker and Containers
A Gentle Introduction to Docker and Containers
Docker, Inc.
 

Similar to Writing your own browser reload functionality (20)

Docker 0.11 at MaxCDN meetup in Los Angeles
Docker 0.11 at MaxCDN meetup in Los AngelesDocker 0.11 at MaxCDN meetup in Los Angeles
Docker 0.11 at MaxCDN meetup in Los Angeles
 
Docker+java
Docker+javaDocker+java
Docker+java
 
Docker and-containers-for-development-and-deployment-scale12x
Docker and-containers-for-development-and-deployment-scale12xDocker and-containers-for-development-and-deployment-scale12x
Docker and-containers-for-development-and-deployment-scale12x
 
Rapid and Reliable Developing with HTML5 & GWT
Rapid and Reliable Developing with HTML5 & GWTRapid and Reliable Developing with HTML5 & GWT
Rapid and Reliable Developing with HTML5 & GWT
 
Implementing your own Google App Engine
Implementing your own Google App Engine Implementing your own Google App Engine
Implementing your own Google App Engine
 
Introduction to Docker, December 2014 "Tour de France" Bordeaux Special Edition
Introduction to Docker, December 2014 "Tour de France" Bordeaux Special EditionIntroduction to Docker, December 2014 "Tour de France" Bordeaux Special Edition
Introduction to Docker, December 2014 "Tour de France" Bordeaux Special Edition
 
Getting started with AMD GPUs
Getting started with AMD GPUsGetting started with AMD GPUs
Getting started with AMD GPUs
 
Gitlab ci-cd
Gitlab ci-cdGitlab ci-cd
Gitlab ci-cd
 
Introduction to node.js By Ahmed Assaf
Introduction to node.js  By Ahmed AssafIntroduction to node.js  By Ahmed Assaf
Introduction to node.js By Ahmed Assaf
 
Multi-stage Docker builds to make building easy!
Multi-stage Docker builds to make building easy!Multi-stage Docker builds to make building easy!
Multi-stage Docker builds to make building easy!
 
I Just Want to Run My Code: Waypoint, Nomad, and Other Things
I Just Want to Run My Code: Waypoint, Nomad, and Other ThingsI Just Want to Run My Code: Waypoint, Nomad, and Other Things
I Just Want to Run My Code: Waypoint, Nomad, and Other Things
 
How to deploy a Java application on Google App engine Flexible environment
How to deploy a Java application on Google App engine Flexible environmentHow to deploy a Java application on Google App engine Flexible environment
How to deploy a Java application on Google App engine Flexible environment
 
LUG - Install Fest 2008
LUG - Install Fest 2008LUG - Install Fest 2008
LUG - Install Fest 2008
 
Modern web technologies
Modern web technologiesModern web technologies
Modern web technologies
 
Docker Introduction + what is new in 0.9
Docker Introduction + what is new in 0.9 Docker Introduction + what is new in 0.9
Docker Introduction + what is new in 0.9
 
Docker Introduction, and what's new in 0.9 — Docker Palo Alto at RelateIQ
Docker Introduction, and what's new in 0.9 — Docker Palo Alto at RelateIQDocker Introduction, and what's new in 0.9 — Docker Palo Alto at RelateIQ
Docker Introduction, and what's new in 0.9 — Docker Palo Alto at RelateIQ
 
OSDC.no 2015 introduction to node.js workshop
OSDC.no 2015 introduction to node.js workshopOSDC.no 2015 introduction to node.js workshop
OSDC.no 2015 introduction to node.js workshop
 
OpenStack - JobShop @Iași, 2016
OpenStack - JobShop @Iași, 2016OpenStack - JobShop @Iași, 2016
OpenStack - JobShop @Iași, 2016
 
State of Big Data on ARM64 / AArch64 - Apache Bigtop
State of Big Data on ARM64 / AArch64 - Apache BigtopState of Big Data on ARM64 / AArch64 - Apache Bigtop
State of Big Data on ARM64 / AArch64 - Apache Bigtop
 
A Gentle Introduction to Docker and Containers
A Gentle Introduction to Docker and ContainersA Gentle Introduction to Docker and Containers
A Gentle Introduction to Docker and Containers
 

Recently uploaded

Top Benefits of Using Salesforce Healthcare CRM for Patient Management.pdf
Top Benefits of Using Salesforce Healthcare CRM for Patient Management.pdfTop Benefits of Using Salesforce Healthcare CRM for Patient Management.pdf
Top Benefits of Using Salesforce Healthcare CRM for Patient Management.pdf
VALiNTRY360
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
Reetu63
 
Quarter 3 SLRP grade 9.. gshajsbhhaheabh
Quarter 3 SLRP grade 9.. gshajsbhhaheabhQuarter 3 SLRP grade 9.. gshajsbhhaheabh
Quarter 3 SLRP grade 9.. gshajsbhhaheabh
aisafed42
 
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
safelyiotech
 
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
Bert Jan Schrijver
 
UI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design SystemUI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design System
Peter Muessig
 
Oracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptxOracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptx
Remote DBA Services
 
Unveiling the Advantages of Agile Software Development.pdf
Unveiling the Advantages of Agile Software Development.pdfUnveiling the Advantages of Agile Software Development.pdf
Unveiling the Advantages of Agile Software Development.pdf
brainerhub1
 
UI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
UI5con 2024 - Keynote: Latest News about UI5 and it’s EcosystemUI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
UI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
Peter Muessig
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
dakas1
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
ShulagnaSarkar2
 
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, FactsALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
Green Software Development
 
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid
 
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian CompaniesE-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
Quickdice ERP
 
Project Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdfProject Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdf
Karya Keeper
 
Kubernetes at Scale: Going Multi-Cluster with Istio
Kubernetes at Scale:  Going Multi-Cluster  with IstioKubernetes at Scale:  Going Multi-Cluster  with Istio
Kubernetes at Scale: Going Multi-Cluster with Istio
Severalnines
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
Grant Fritchey
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
kalichargn70th171
 
Everything You Need to Know About X-Sign: The eSign Functionality of XfilesPr...
Everything You Need to Know About X-Sign: The eSign Functionality of XfilesPr...Everything You Need to Know About X-Sign: The eSign Functionality of XfilesPr...
Everything You Need to Know About X-Sign: The eSign Functionality of XfilesPr...
XfilesPro
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
Maitrey Patel
 

Recently uploaded (20)

Top Benefits of Using Salesforce Healthcare CRM for Patient Management.pdf
Top Benefits of Using Salesforce Healthcare CRM for Patient Management.pdfTop Benefits of Using Salesforce Healthcare CRM for Patient Management.pdf
Top Benefits of Using Salesforce Healthcare CRM for Patient Management.pdf
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
 
Quarter 3 SLRP grade 9.. gshajsbhhaheabh
Quarter 3 SLRP grade 9.. gshajsbhhaheabhQuarter 3 SLRP grade 9.. gshajsbhhaheabh
Quarter 3 SLRP grade 9.. gshajsbhhaheabh
 
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
 
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
 
UI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design SystemUI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design System
 
Oracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptxOracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptx
 
Unveiling the Advantages of Agile Software Development.pdf
Unveiling the Advantages of Agile Software Development.pdfUnveiling the Advantages of Agile Software Development.pdf
Unveiling the Advantages of Agile Software Development.pdf
 
UI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
UI5con 2024 - Keynote: Latest News about UI5 and it’s EcosystemUI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
UI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
 
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, FactsALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
 
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
 
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian CompaniesE-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
 
Project Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdfProject Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdf
 
Kubernetes at Scale: Going Multi-Cluster with Istio
Kubernetes at Scale:  Going Multi-Cluster  with IstioKubernetes at Scale:  Going Multi-Cluster  with Istio
Kubernetes at Scale: Going Multi-Cluster with Istio
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
 
Everything You Need to Know About X-Sign: The eSign Functionality of XfilesPr...
Everything You Need to Know About X-Sign: The eSign Functionality of XfilesPr...Everything You Need to Know About X-Sign: The eSign Functionality of XfilesPr...
Everything You Need to Know About X-Sign: The eSign Functionality of XfilesPr...
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
 

Writing your own browser reload functionality

  • 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)
  • 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