Mobile-first web development – THE RIGHT WAY

When you talk about web development, the foremost thing that comes to mind is the ever-increasing requirement for mobile-first web apps. So much so, there has been a constant increase in web development frameworks and tools that help to convert a web-app into Android or iOS app.

These frameworks/tools are constantly being improved and hence narrowing the gap between mobile apps produced with native technologies like Kotlin (in case of Android apps) and Objective-C (in case of iOS apps).

Yes, the performance might be inferior to the ones developed in a native fashion, but if you want to cover all 3 platforms (web, android, and iOS) with a single code-base, then mobile-first web development is the way to go.

Emulators

For people starting their web development journey

• When you don’t have a particular device, or want to do a spot check on something, the best option is to emulate the device right inside your browser.
• Device emulators and simulators let you mimic your development site on a range of devices from your workstation.
• Cloud-based emulators let you automate unit tests for your site across different platforms.
• Explore more

All browsers are now equipped with the latest mobile emulation tools, which can help to check the responsiveness of a web-app across various devices. Chrome, Firefox, Safari, and even the new Edge (based on the Chromium browser) are ready with these emulation devices.

If you want to learn how to set up the emulators or start using them, you can refer here.

Avoid Emulators

Now, this might seem stupid/funny to you as this is the section following the previous one on using Emulators – but here me out…

I have more than 2 years of experience as a software engineer and a web developer. One thing that has been more evident than anything else is that emulators can NEVER substitute real devices. They surely are helpful with quick testing, but if you want to be sure of your web-app in a mobile environment, you need to test it on a real mobile device.

This can be accomplished in two ways:

1. Hosting your mobile-first web application on a server or hosting services like GoDaddy, AWS, Hostinger, or Netlify
2. Being smart about it – Testing locally on a mobile device (more on this later in the article)

The first one will provide you with the results but this is not development friendly. If you decide to go with Option 1, you’ll need to deploy your mobile-first web application every time you make a change (no matter how small) and then test it. This is utter bullshit. The amount of time it will take to get a production ready app will be impractical.

The second case is the ideal one (and the one I use) for development purposes. The second option will allow you to debug your mobile-first web application on a real device and develop it simultaneously.

Mobile-first web development

The following steps are specific to Android devices because I don’t have an iOS device. Sorry iOS people! Follow the steps below to set-up your mobile for mobile-first web development:

Enable “Developer Options” on your android device

By default the developer options on your Android device is hidden. To enable the developer options:

1. Go to Settings > System > About phone.
2. Tap Software info > Build number
3. Tap Build number seven times. After the first few taps, you should see the steps counting down until you unlock the developer options. You may also have to tap in your PIN for verification. Once developer options are activated, you will see a message that reads, You are now a developer!
4. Go back to the Settings pane, where you will now find Developer options as an entry.
5. Tap it and toggle the switch on if it is not already, and from there you can proceed to make adjustments to your phone.

If the above steps do not work for you or are unable to follow, then Google this shit. The closest link I can get you is this.

Next step…

Once you get the Developer Options enabled, go to that setting and enable the following two options:

1. USB debugging
2. USB debugging (Security Settings) – Only for the phones which have this setting
3. Install via USB – If you are installing apps (.APK) developed via Android Studio or Cordova

Google DevTools – Remote Devices

Connect your phone via the USB cord to your laptop/system and select “File Transfer” option when it pops up on your phone.

Run your mobile-first web app (say it is an Angular based web-app). It will be accessible on http://localhost:4200

Hit chrome://inspect/#devices in a new tab.

This will open the Remote devices panel.

Port Forwarding

Click on the Port forwarding option to allow localhost:4200 to open on the chrome browser on your Android Device. The port is “4200” here.

Next, add the port on which your app is running. In my case, the Angular app is running on http://localhost:4200. After making an entry in Port forwarding settings dialog box and Enabling port forwarding, click on Done.

As soon as you click on Done (or around these steps), keep a close eye on your mobile device as well. When you’ll get “Allow USB debugging?” option to add RSA key fingerprint – Allow it.

This will finally enable Port forwarding on your device.

Now, open Google Chrome on your Android device, and visit http://localhost:4200

Your mobile-first web application will load on your device and that’s it. You can now ensure that the web-app is truly mobile-first. The best part about it, you can debug and develop in this mode.

You can click on “inspect” on the port forwarding screen above and unleash the magic. Your phone will be mimicked on your PC/Mac Device.

The Conclusion

This is the best way to develop mobile-first web applications because there are numerous scenarios wherein the emulators fail to behave like a real device would.

If you are using JS libraries or any framework, they behave differently on desktop browsers and mobile devices. You’ll eventually find this out when the app fails to do certain thing on a real device but it worked “JUST FINE” on the emulator!

Share it with your friends, colleagues and fellow developers out there!

Let me know if you have any doubts, queries, questions, suggestions or advice regarding the blog or any future topics! You can reach out to me via:

1. Email: tyagi.aditya844747@gmail.com
2. Twitter: @secondbestcoder
3. Comments Section below
4. Contact Us

Do subscribe to the weekly newsletter so you get my next blog right in your mailbox!