Writing your own browser reload functionality

•

0 gefällt mir•232 views

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.

Software

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
ﬁles
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 ﬁle watcher (Gulp task runner in our example)

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

We’re always looking for new talent to join our growing team.
For more contact me at anze@ﬂycom.si
Thank you
twitter.com/anzeznidarsic

Weitere ähnliche Inhalte

Was ist angesagt?

Grunt JS - Getting Started With Grunt

Douglas Reynolds

CentOS, the Community Enterprise OS, uses Opennebula as virtualization plattform for its automated QA-process. The opennebula setup consists of 3 nodes, all running CentOS-6, who handle the following tasks: – sunstone as cloud controller – local mirror/DNS-Server/http-Server for the VMs to pull in packages – one VM to run a jenkins instance to launch the various tests (ci.de.centos.org) – nginx on the cloud controller to forward http traffic to the jenkins VM A public git repository (http://www.gitorious.org/testautomation) is used to allow whoever wants to contribute to pull the current test suite – t_functional, a series of bash scripts used to do funtional tests of various applications, binaries, configuration files and Trademark issues. As new tests are added to the repo via personal clones and merge requests, those tests first need to complete a test run via jenkins. Each test run currently consists of 4 VMs (one for each arch for C5 and C6 – C7 to come), which run the complete test suite. All VMs used for theses tests are instantiated and torn down on demand, whenever the call to testrun a personal clone is issued (via IRC). Once completed successfully, the request is merged into the main repo. The jenkins node monitors this repository and which automatically triggers another complete test run. Besides these triggered test runs, the test suite is automatically triggered daily to run. This is used to verify functionality of published updates – a handfull of failty updates have allready been discovered this way. Besides t_functional, the Linux Test Project Suite of tests is also run on a daily basis, also to verify functionality of the OS and all updates. The third setup is used to test the available and functional integrity of published docker images for CentOS. All these tests are later – during the QA-phase of a point release – used to verify functionality of new packages inside the CentOS QA-Setup.

OpenNebula Conf 2014: CentOS, QA an OpenNebula - Christoph Galuschka

NETWAYS

Introducing docker

Bill Wang

Docker e git lab

Gianluca Padovani

Introduction to Docker Compose

Prabhas Gupte

Workshop For pycon13

Steven Pousty

Grunt

Andrés Callejas González

Masterless puppet

Jesus Nunez

Scale Big With Docker — Moboom 2014

Jérôme Petazzoni

Wt vs phalcon

Amitoj Singh

Beyond Puppet

Kris Buytaert

Intro to Linux - Skillswap

Thomas Buckley-Houston

Using Nagios to monitor your WO systems

WO Community

Jimmy Tang - Deploying with Ansible

dri_ireland

Docker session I: Continuous integration, delivery and deployment

Degendra Sivakoti

Heketi Functionality into Glusterd2

Gluster.org

DevOps: Using Vagrant to Enhance Your Day to Day Development

Rob Reynolds

Anton Cherednikov "Modules and Artifacts in NPM"

LogeekNightUkraine

Gluster as Native Storage for Containers - past, present and future

Gluster.org

Hybrid functionality enables a private cloud administrator to outsource the cloud workload -read, the cloud VMs- to an external public cloud provider. OpenNebula approach to hybrid cloud is quite unique, in this talk we will explain how transparency for the user is achieved, and what tools OpenNebula gives to the administrator to build a fully functional hybrid cloud. Moreover, in this talk we will introduce the support for two new public cloud providers, available from OpenNebula 4.8. Before this release, integration with AWS was the default in OpenNebula, but now you can build clouds that expand to IBM SoftLayer and Microsoft Azure as well.

OpenNebula Conf 2014 | Building Hybrid Cloud Federated Environments with Open...

NETWAYS

Was ist angesagt? (20)

Grunt JS - Getting Started With Grunt

OpenNebula Conf 2014: CentOS, QA an OpenNebula - Christoph Galuschka

Introducing docker

Docker e git lab

Introduction to Docker Compose

Workshop For pycon13

Grunt

Masterless puppet

Scale Big With Docker — Moboom 2014

Wt vs phalcon

Beyond Puppet

Intro to Linux - Skillswap

Using Nagios to monitor your WO systems

Jimmy Tang - Deploying with Ansible

Docker session I: Continuous integration, delivery and deployment

Heketi Functionality into Glusterd2

DevOps: Using Vagrant to Enhance Your Day to Day Development

Anton Cherednikov "Modules and Artifacts in NPM"

Gluster as Native Storage for Containers - past, present and future

OpenNebula Conf 2014 | Building Hybrid Cloud Federated Environments with Open...

Ähnlich wie Writing your own browser reload functionality

Docker 0.11 at MaxCDN meetup in Los Angeles

Jérôme Petazzoni

Docker+java

DPC Consulting Ltd

Docker and-containers-for-development-and-deployment-scale12x

rkr10

Rapid and Reliable Developing with HTML5 & GWT

Manuel Carrasco Moñino

Google App Engine (GAE) is a popular PaaS offering. Where its scalable and reliable environment is hidden behind a custom API. This makes GAE apps hard to port over to other non-GAE environments. But what if one could implement such similar environment? And you could simply move your GAE application’s .war file to this new environment and it would just work? After all, at the end it’s all about the API, plus scalable and reliable services. JBoss CapeDwarf project aims at making this a reality. This presentation will provide a glimpse into what it takes to implement something as GAE, ranging from runtime integration with JBoss Application Server, actual services implementation to last but not least, automated heavy testing.

Implementing your own Google App Engine

Virtual JBoss User Group

Docker, the Open Source container Engine, lets you build, ship and run, any app, anywhere. This is the presentation which was shown in December 2014 for the last stop of the "Tour de France" in Bordeaux. It is slightly different from the presentation which was shown in the other cities (http://www.slideshare.net/jpetazzo/introduction-to-docker-december-2014-tour-de-france-edition), and includes a detailed history of dotCloud and Docker and a few other differences. Special thanks to https://twitter.com/LilliJane and https://twitter.com/zirkome, who gave me the necessary motivation to put together this slightly different presentation, since they had already seen the other presentation in Paris :-)

Introduction to Docker, December 2014 "Tour de France" Bordeaux Special Edition

Jérôme Petazzoni

Getting started with AMD GPUs

George Markomanolis

Gitlab ci-cd

Dan MAGIER

Introduction to node.js By Ahmed Assaf

Ahmed Assaf

Multi-stage Docker builds to make building easy!

Milindu Sanoj Kumarage

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

Michelantonio Trizio

LUG - Install Fest 2008

Alessandro Manfredi

Modern web technologies

Simeon Prusiyski

Docker Introduction, and what's new in 0.9 — Docker Palo Alto at RelateIQ

Jérôme Petazzoni

Docker Introduction + what is new in 0.9

Jérôme Petazzoni

OSDC.no 2015 introduction to node.js workshop

leffen

OpenStack - JobShop @Iași, 2016

Alexandru Coman

State of Big Data on ARM64 / AArch64 - Apache Bigtop

Ganesh Raju

A Gentle Introduction to Docker and Containers

Docker, Inc.

Ähnlich wie Writing your own browser reload functionality (20)

Docker 0.11 at MaxCDN meetup in Los Angeles

Docker+java

Docker and-containers-for-development-and-deployment-scale12x

Rapid and Reliable Developing with HTML5 & GWT

Implementing your own Google App Engine

Introduction to Docker, December 2014 "Tour de France" Bordeaux Special Edition

Getting started with AMD GPUs

Gitlab ci-cd

Introduction to node.js By Ahmed Assaf

Multi-stage Docker builds to make building easy!

I Just Want to Run My Code: Waypoint, Nomad, and Other Things

How to deploy a Java application on Google App engine Flexible environment

LUG - Install Fest 2008

Modern web technologies

Docker Introduction, and what's new in 0.9 — Docker Palo Alto at RelateIQ

Docker Introduction + what is new in 0.9

OSDC.no 2015 introduction to node.js workshop

OpenStack - JobShop @Iași, 2016

State of Big Data on ARM64 / AArch64 - Apache Bigtop

A Gentle Introduction to Docker and Containers

Kürzlich hochgeladen

Pharm-D Biostatistics and Research methodology

Anusha Are

Conference: Engage2024 in Antwerp Type: Workshop Speakers: Florian Vogler, Henning Kunz, Christoph Adler Title: Navigating the Future with The Hitchhiker's Guide to Notes and Domino 14 Abstract: Embark on an exhilarating journey with industry trailblazers Florian Vogler, Henning Kunz, and Christoph Adler in this not-to-be-missed workshop at the forefront of the tech universe. Get ready for a thrilling kick-off as we navigate the current state of the HCL universe, setting the stage for an exploration of the groundbreaking Notes and Domino 14. Discover the latest enhancements and revolutionary features that will redefine your experience. In this interactive session, unlock a treasure trove of tips and tricks to elevate your utilization of version 14, both with and without the game-changing panagenda MarvelClient. Brace yourself for also diving into Nomad, Nomad Web, and VoltMX, expanding your horizons in the expansive HCL landscape. Be a part of this exclusive opportunity to stay ahead in the ever-evolving world of HCL technologies. Your journey to mastering Notes and Domino 14 begins here. And remember, in the spirit of intergalactic exploration, don't forget to bring your towel!

W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...

panagenda

At TECUNIQUE, we're a stable and steadily growing Indian software services company with over 14 years of industry experience. Specializing in offshore software development and quality assurance services, we've built a reputation for delivering unique and effective solutions to start-ups, software development companies, enterprises, and digital agencies. We pride ourselves on our commitment to excellence and innovation. By blending insightful business domain knowledge with exceptional technical prowess, we craft tailor-made solutions that meet the unique needs of our clients. Our dedicated teams are adept in specific technologies, ensuring seamless integration of skills and delivering reliable, scalable, and high-quality software solutions aligned with our clients' preferences. Bespoke Dedicated Teams: Crafted to meet your specific needs and technology preferences, our dedicated teams are committed to delivering top-notch software solutions. Offshore Software Development: Accelerate your software development and scale up quickly with our 12+ years of expertise in offshore development. Quality Assurance Services: Ensure the quality of your software products with our dedicated teams of experienced QA professionals. IT Staff Augmentation: Overcome skill gaps with our client-centric software team, offering staff augmentation services. Expert Software Services: Unlock our capabilities in custom software development, product development, and quality assurance. Mission and Vision: Our mission at TECUNIQUE is to be the catalyst for our clients' success in the dynamic domain of software development. Rooted in our core values of respect, authenticity, and responsibility, we strive to ease the software outsourcing experience, reducing both time and cost to market for our clients. We envision ourselves as the leading Indian software services company, renowned for our unwavering commitment to excellence and innovation. www.tecunique.com

TECUNIQUE: Success Stories: IT Service provider

mohitmore19

InShot proinshot.com stands tall among its peers as the ultimate video editing app, offering simplicity, versatility, and power in one package. With its intuitive interface and comprehensive feature set, InShot caters to both beginners and seasoned editors alike. Whether you're creating content for social media, YouTube, or personal projects, InShot empowers you to unleash your creativity and transform your videos into captivating masterpieces. Join the millions of users who trust InShot https://www.proinshot.com/ for all their video editing needs and discover the difference for yourself!

Exploring the Best Video Editing App.pdf

proinshot.com

Technology has taken up space all over the world. From generating content with a single command on ChatGPT to getting your food served by Robots at your favorite restaurant, artificial advancements have ruled every space. Every industry is set to develop top-notch technology in every sector; finance, IT, healthcare, gaming, and banking, with competitive market standards. One of these rapidly growing industries is Mobile App Development. According to the Straits Research report, it is expected to reach USD 583.03 billion at a CAGR OF 12.8% between (2022 and 2030). It clearly shows how mobile app development has become an integral part of the digital landscape and revolutionized technology.

The Top App Development Trends Shaping the Industry in 2024-25 .pdf

ayushiqss

Many specialized tools cater to distinct stages within the software development lifecycle (SDLC). These tools target various aspects of development, delivery, and operations, each with its unique strengths. Uniting these diverse testing needs into a single continuous testing platform presents several challenges. Such a platform must seamlessly integrate with various development tools and environments, accommodate different testing methodologies, and remain flexible to adapt to organizational processes and quality standards.

The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...

kalichargn70th171

%in tembisa+277-882-255-28 abortion pills for sale in tembisa

masabamasaba

%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein

masabamasaba

VTU technical seminar 8Th Sem on Scikit-learn

AmarnathKambale

Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf

kalichargn70th171

%in kempton park+277-882-255-28 abortion pills for sale in kempton park

masabamasaba

At the recent Microsoft Ignite 2023 conference, Microsoft unveiled a groundbreaking strategy that will redefine enterprise work management. The plan involves integrating Microsoft’s key planning tools, Microsoft To Do, Microsoft Planner, and Microsoft Project for the web into a unified experience called “Microsoft Planner.” What does this new strategy from Microsoft mean for current users? Join us and learn how best to take advantage of this announcement while gaining a clear path on how to elevate the current state of Microsoft Planner from a basic task manager to a comprehensive tool for Enterprise Work Management using OnePlan. Learn how OnePlan’s integration with Microsoft Planner allows for strategic alignment with business goals through advanced features like strategic planning, portfolio management, resource management, financial management, and more!

Introducing Microsoft’s new Enterprise Work Management (EWM) Solution

OnePlan Solutions

Define the academic and professional writing..pdf

PearlKirahMaeRagusta1

Craft an AI & Machine Learning Pitch with our Editable Professional PowerPoint Template. Ignite your AI & Machine Learning pitch with our cutting-edge PowerPoint template tailored for the industry. Perfect for AI conferences, investor presentations, sales pitches to tech-focused companies, training sessions, and educational programs. - 20+ editable slides: Get a variety of options to choose from for your presentation. - Time-saving solution: Download, replace text/images with a few clicks. - User-friendly customization: Easy to use and personalize. - Modern and attractive design: Captivating visuals, sleek layout. - Tailored to your requirements: Fully alterable for customization. - Well-organized slides: Complete control over content. - Thematic specificity: Reflects healthcare industry with relevant graphics. - Showcase your business idea: Communicate value proposition effectively.

AI & Machine Learning Presentation Template

Presentation.STUDIO

%in ivory park+277-882-255-28 abortion pills for sale in ivory park

masabamasaba

In an era where security concerns are paramount, the integration of artificial intelligence (AI) into CCTV cameras has revolutionized surveillance capabilities. One of the most significant advancements is the ability to achieve real-time threat detection, enabling immediate responses to potential security breaches. This blog explores how AI is reshaping surveillance through real-time threat detection and the implications of this technology.

Optimizing AI for immediate response in Smart CCTV

shikhaohhpro

ManageIQ - Sprint 236 Review - Slide Deck

ManageIQ

Model Call Girl Services in Delhi reach out to us at 🔝 9953056974 🔝✔️✔️ Our agency presents a selection of young, charming call girls available for bookings at Oyo Hotels. Experience high-class escort services at pocket-friendly rates, with our female escorts exuding both beauty and a delightful personality, ready to meet your desires. Whether it's Housewives, College girls, Russian girls, Muslim girls, or any other preference, we offer a diverse range of options to cater to your tastes. We provide both in-call and out-call services for your convenience. Our in-call location in Delhi ensures cleanliness, hygiene, and 100% safety, while our out-call services offer doorstep delivery for added ease. We value your time and money, hence we kindly request pic collectors, time-passers, and bargain hunters to refrain from contacting us. Our services feature various packages at competitive rates: One shot: ₹2000/in-call, ₹5000/out-call Two shots with one girl: ₹3500/in-call, ₹6000/out-call Body to body massage with sex: ₹3000/in-call Full night for one person: ₹7000/in-call, ₹10000/out-call Full night for more than 1 person: Contact us at 🔝 9953056974 🔝. for details Operating 24/7, we serve various locations in Delhi, including Green Park, Lajpat Nagar, Saket, and Hauz Khas near metro stations. For premium call girl services in Delhi 🔝 9953056974 🔝. Thank you for considering us!

CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE

9953056974 Low Rate Call Girls In Saket, Delhi NCR

(Vivek)Call Us, 8448380779,Call girls in Delhi NCr – We Offer best in class call girls. escort Service At Affordable Price At low Rate with Space Night 8000 We Are One Of The Oldest Escort and Call girls Agencies in Delhi. You Will Find That Our Female Escorts Are Full Of Fun, Sexy And They Would Love Enjoy Your Company. We Have A Fantastic Selection Of Escort Ladies Available For In-Calls As Well As Out-Calls. Our Escorts Are Not Only Beautiful But All Have Great Personalities Making Them The Perfect Companion For Any Occasion. In-Call:- You Can Come At Our Place in Delhi Our place Which Is Very Clean Hygienic 100% safe Accommodation. Out-Call:- You have To Come Pick The Girl From My Place We Are Also Provide Door Step Services (Delhi Ncr, Noida, Gurgaon, Faridabad, Ghaziabad Note:- Pic Collectors Time Passers Bargainers Stay Away As We Respect The Value For Your Money Time And Expect The Same From You Hygienic:- Full Ac room And Clean Rooms Available In Hotel 24 * 7 Hourly In Delhi NCR More Details, With WhatsApp Number, +91-8448380779

Sector 18, Noida Call girls :8448380779 Model Escorts | 100% verified

Delhi Call girls

LEVEL 5 - SESSION 1 2023 (1).pptx - PDF 123456

KiaraTiradoMicha

Kürzlich hochgeladen (20)

Pharm-D Biostatistics and Research methodology

W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...

TECUNIQUE: Success Stories: IT Service provider

Exploring the Best Video Editing App.pdf

The Top App Development Trends Shaping the Industry in 2024-25 .pdf

The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...

%in tembisa+277-882-255-28 abortion pills for sale in tembisa

%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein

VTU technical seminar 8Th Sem on Scikit-learn

Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf

%in kempton park+277-882-255-28 abortion pills for sale in kempton park

Introducing Microsoft’s new Enterprise Work Management (EWM) Solution

Define the academic and professional writing..pdf

AI & Machine Learning Presentation Template

%in ivory park+277-882-255-28 abortion pills for sale in ivory park

Optimizing AI for immediate response in Smart CCTV

ManageIQ - Sprint 236 Review - Slide Deck

CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE

Sector 18, Noida Call girls :8448380779 Model Escorts | 100% verified

LEVEL 5 - SESSION 1 2023 (1).pptx - PDF 123456

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 ﬁles 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 ﬁle 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 ﬁrewalls

15. GULP

16. We’re always looking for new talent to join our growing team. For more contact me at anze@ﬂycom.si Thank you twitter.com/anzeznidarsic