Real-time web development against multiple devices

Preface

It’s already very obvious to many software developers that one of the most important aspects of development process is the time it takes to see target application reflecting source code modifications. Simply put, we want to see how we affect our program by modifying it’s source code as soon as possible. Feedback time matters.

Real-time feedback becomes even more important when developing against multiple target platforms. In today’s web development we create applications that adapt themselves to the client browser they are opened with. In order to verify that our application works properly on vast variety of devices we run it on as many different devices we can find and keep making changes to the source code if something doesn’t work as expected on any of devices. This process is very consuming if each device is controlled manually. Think of reloading your application every time you make a change or testing particular flow (i.e. filling and submitting registration form) on each device.

What if we could open our application on multiple devices and have them all reflect code changes automatically + have them all follow and repeat what happens in any single device you control physically? The good news is that it is possible with a tool called Browsersync and I'm going to show you how I use it in this post.

Prerequisites

In order to reproduce all examples provided in this post on your machine you would need to:

• use command line. Refer to your OS docs/tutorials on how to use CLI in your environment. It’s worth pointing out that all commands mentioned in this post were tested on OS X. Everything should work on other unix-like operating systems but this may require some extra research.


• have Node.js installed. Refer to https://nodejs.org/download for installation
  instructions.


• have Browsersync installed:

  npm install browser-sync -g

-g flag stands for global installation, meaning it will be available for all users on your machine. You may need to gain administrator privileges in order to use this flag. You can omit -g flag if you only want to install Browsersync in your current path.

Getting started

To get our first impression of what Browsersync is capable of with minimal setup, let’s see how we can test ANY existing website on multiple devices/browsers right away. I will test https://code4startup.com but you can test any reachable host in your network. Here is how it looks like in action:

Run Browsersync server:

browser-sync start --proxy="https://code4startup.com"

The output should be similar to following:

[BS] Proxying: https://code4startup.com
[BS] Access URLs:
 ——————————————————————————————————————
       Local: https://localhost:3000
    External: https://192.168.1.42:3000
 ——————————————————————————————————————
          UI: http://localhost:3001
 UI External: http://192.168.1.42:3001
 ——————————————————————————————————————

Where Local and UI addresses are to be used from your local machine while External and UI External are to be used by external devices connected to local network.

In addition it will try to launch your default browser and point it to Browsersync server.

Note that Browsersync uses target website’s protocol for the proxy server so if target website uses HTTPS protocol you will have to tell your browser to ignore the fact that https://localhost has no security certificate and let you access it.

You can leave terminal for now and access the UI dashboard, which is located at http://localhost:3001 in our example.

At this point you have Browsersync server running and ready to sync scroll, click, input fill events across multiple devices. All you need to do is connect your devices to local network (your home Wi-Fi network for example) and navigate them to the external hostname, which is https://192.168.1.42:3000 in our example.

Feel free to explore the dashboard, perform scrolling, clicking, filling forms on connected clients and get comfortable with what we just learned before getting into real-time development in the next section.

Real-time feedback

In this section I'm going to give you a starting point from where you will have all you need to utilize your creativity and make something very unique and beautiful - it's an alarm clock web app I came up with while writing this post. Here it is in action:

You can try it online right now.

The core idea is that there is current time displayed somewhere on the screen and alarm configuration panel hidden behind a button. It is a very simple app, consisting of pure HTML, CSS and Javascript. I encourage you cloning the project's repo or downloading ZIP archive with project files and playing with it on your own. I'm only going to give you the basics of how to start.

Assuming you’ve cloned/extracted the app project in ~/Desktop/browsersync-example, open your Terminal and execute following command:

cd ~/Desktop/browsersync-example

You’ve just changed your current working directory to our project directory. Now it's time to launch Browsersync:

browser-sync start --server --files="**/*"

This command basically tells Browsersync to start up a web server with it's document root pointing to current directory and auto-update a webpage whenever a file in the project is modified. **/* selector selects any file recursively starting from current directory. You could use more specific selector instead:

browser-sync start --server --files="**/*.html, css/*.css, js/*.js"

At this point you should have your browser pointing to http://localhost:3000/ with our app running. Congratulations! You could connect multiple devices by pointing them to the external URI specified in Terminal and enjoy flawless development process with instant source code modification feedback and synced interaction among connected clients.

Now when you have all set up I suggest that you go ahead and change/enhance the app! I'd love to see where you can take it from here, please share your results in the comments section. Here are just a few of my personal suggestions:

• Every time I'm trying out this web app, I find it cumbersome starting to search for the time I want to set alarm to in huge select dropdown that starts with 00:00. It would be helpful to be able to simply increase and/or decrease hours/minutes separately one by one.


• There is currently no sound produced when the alarm is activated. I would highly recommend fixing this situation. Let all your devices beep all at once in their full glory when synced with Browsersync and alarm is activated :)


• Currently alarm is activated when view is rendered at exactly same minute and second as alarm was set to. While this is OK it isn't perfect. What if browser will "freeze" for at least a second just when the alarm was supposed to be activated? It will miss it. Alarm clock should be more reliable than that, shouldn't it? See if you can find a better solution.

Here is a fast-paced video demonstration of me working on this web app. In this video, I'm fixing one Javascript-related issue, adding microseconds to the time display and fixing button CSS styles for iOS browsers. All without having to manually touch a browser/device:

I hope this inspires you enough to continue your own way with this project and make something very unique and creative. Let us see what you come up with. Please submit your online demos in the comments section. I recommend hosting your work on Github pages or on Codepen.

Conclusion

I really hope you learned something from this post and that it was helpful to you. I believe that teaching is a good way to bring knowledge to test and to learn new things on the way so I learned new stuff myself too while preparing this article. If anything was unclear or if you find any mistakes in my post please don't hesitate to let me know asap. Your feedback is welcome too. Thank you for your time.