Top 10 Things I Learned Building a
Voice Recording App Using React, Redux, & Material-UI

March 30, 2017

I’m on a mission to discover if the Web can really compete with Native in terms of delivering apps. While I certainly notice the superior performance delivered by Native mobile applications, I can’t stomach mobile fragmentation. It’s extremely painful to develop for several different platforms.

I’m also getting frustrated by companies trying to force me to download their app when I just want a quick piece of information (think Yelp). The app install prompts are the new popups.

So I developed a Web-based Voice Recorder (version 1.0) to see what the result would be.

Voice Record Pro microphone view Voice Record Pro recording details view

Here’s what I learned while developing Voice Record Pro using React, Redux, React-Router, and Material-UI.

#1 - Single Page Apps Are Where It’s At

Single Page Apps are apps built for the browser, and they’re designed to be fast.

That’s because the entire code for the app is downloaded when a user first visits a URL (without an install mind you). All subsequent HTTP calls to the backend are just for data, and the backend doesn’t respond with the data wrapped in HTML. It responsds with nothing but pure data (usually in JSON format). Hence, no pogo-sticking effects.

This architecture makes the UI for Single Page Apps feel snappy. The only caveat is that you need to know how to architect Single Page Apps correctly.

Single Page Application architecture

#2 - Developing on Chrome for Android

Chrome is making the latest and most cutting-edge HTML5 APIs available to Web Developers. They want to extend the abilities of the browser as far as possible.

I contend there’s a new mobile platform in town that developers haven’t fully realized: Chrome for Android. Chrome on Android lets you use Service Works (provided you’re using HTTPS) which is letting us create offline Web Apps and giving us new performance enhancements we can utilize.

For Voice Record Pro I needed access to a user’s microphone. Since I was targeting Chrome for Android, all I needed to do was use the MediaRecorder API which lets you record audio and video from the browser!

So in the same way that developers are building specifically for IOS or Android, I say we target Chrome for Android. There’s a lot of stuff coming out soon (Web Bluetooth, Payment Request API, Web Share API, etc.) which will have us busy experimenting for a while.

#3 - Thinking and Developing In Components

I give credit to the React community for starting the “thinking and developing in components” meme. This has been a Godsend for Front-End Engineers since it’s allowing us to create reusable and composable sections of UI. It’s also making our apps significantly more maintainable.

As a Developer, you can publish your own components if you deem it worthy. For example, Voice Record Pro needs to get audio from a user’s microphone and display that audio in a wave form (optional) to indicate to the user that something is being recorded.

So I open-sourced React-Mic, and you can use it for your own projects. I’ve already had developers tell me how this little NPM module has saved them time. I’m grateful to be able to give back!

But even if you don’t want to publicly share a component, you can still host it on NPM privately and make it available to all of your other apps. There are some big wins here for you and your team.

React-Mic snapshot

#4 - Progressive Mobile Web Apps Is Just a Fancy Term for Enhanced Functionality

Google is pushing the idea of “Progressive Mobile Web Apps”, but it’s really just a marketing term to advertise new Web functionality available on Chrome and the need for speed.

I really like the new functionality, like caching the shell of your application with Service Workers, allowing a user to save an icon to their home screen for your app, and removing the brower’s URL bar when a user is using your app in full-screen mode. Everything is geared to make your Web app more app-like which I think is neat.

You can of course create a plain website and convert it into a Progressive Mobile Web App, but I recommend creating a Single Page Application if you’re trying to build real software for the browser.

At the end of the day, we’re just talking about enhanced functionality so don’t get too confused by the parlance.

#5 - Safari Sucks

So the biggest bugbear to developing Voice Record Pro was Safari. That’s because it has no plans of supporting the new MediaRecorder API. It’s not racing to support Service Workers either.

Funny thing is, you can install Chrome on your Iphone; however, Apple has forced Chrome on Iphone to use the same WebKit engine that Safari does. So in a way, it’s the same browser but with a different skin.

You can guess as to why Apple is doing this. Maybe it has something to do with the App Store. Think about it. If I were able to release an audio recording app on Iphone, why would people bother to download and pay for recording apps on the Iphone (Apple gets a 30% cut of all App Store purchases)?

We need to convince Apple to get on the bandwagon. The only thing I’m able to do now is give the following message to Iphone users if they come to my app.

Notification to Safari users that they cannot use the appe

Safari is going to be the new IE for the foreseable future IMHO. Lots of people have Iphones (especially in the US), and if you’re trying to test a Web app using cutting-edge APIs you’ll constantly have to ask your friends “do you have Iphone or Android?”

#6 - You Can Put On Your Designer Hat with Material-UI

I think good design is really hard, and I’m not qualified to do it. That being said, as a developer I need to have some design aesthetic.

Thankfully, we have Material-UI which is a collection of pre-skinned React components you can use to build your UIs.

The default color scheme of Material-UI looks really gaudy, but you can change that. You can override a lot of the Material-UI styling. But if you’re using separate CSS or SASS files sheets to style your app, be prepared to use !important a lot.

There’s a debate in the React community about how to deal with styling components. Should styles be defined in JavaScript or stylehsheets? I prefer sticking with SASS and CSS-Modules since it has way more expressive power.

#7 - When You Build for the Web It Runs Almost Everywhere

If you build for Iphone or Android, your code only runs on that platform. When you build for the Web, your app runs anywhere a browser is installed which is virtually everywhere. Of course, if you’re using advanced APIs you must be cognizant of which browsers support the APIs you wish to tap into. But for the most part your app will render everywhere.

Including desktops/laptops, which is an ability Native mobile apps don’t have. Sure, you need to develop your app in a responsive manner. But provided you do that (and it’s not too hard), your app can be accessible to billions of devices.

Here is the responsive desktop view of Voice Record Pro.

Voice Record Pro responsive desktop view

Linking into sections of Native apps is not that straighforward. Linking into sections of Web Apps isn’t even a second thought. It’s a feature we take for granted and get by default because the Web is inherently linkable.

To be fair, Native mobile apps do have the concept of deep linking, but it’s an additional feature you have to enable and it’s not standard across mobile platforms. Apple calls them Universal Links, while Facebook has App Links, while Android is sticking with the term Deep links. It’s all rather confusing and yet again displays fragmentation in the mobile space.

If you build for the Web, everything is just a plain and simple link, and you can use them effectively to directly link users to whole sections of your app.

#9 - I Really Wish React-Router Would Stop Changing

I developed Voice Record Pro using React Router 3 only to learn that it’s been upgraded (yet again) to version 4. React Router has a history of doing this.

It would be great if this key part of the React ecosystem would stabilize and not introduce new breaking changes.

#10 - Knowing How to Build Single Page Apps Can Be a Lucrative Skill to Have

When you build a Single Page Application, you’re developing everything that the user sees, touches, and feels. That’s a big chunk of the experience, and it requires critical skills to do correctly.

That’s why Front-End Engineers are in high demand and make good salaries. I know because I work in the industry.

Now Front-End Engineers are usually a bit of an odd lot, because in addition to having many hard technical skills, they tend to have an eye for UX. Combine an eye for aesthetics with knowledge of building apps for the browser and you’re potentially going to bring a company A LOT of value.

We Need To Keep Moving the Web Forward

I really love the Web and want to see it evolve into being THE platform for delivering the information and services people need. Developers should only have to focus on developing for ONE platform, not a minimum of three (Iphone, Android, Web).

The only way we can make this a reality is if we learn how to build modern apps for the Web.

Are you game?