Who doesn’t own one? It’s stored in your pocket, sits on your desk, or is lodged in the hands of your kids watching Sam the Fireman or Cocomelon. A mobile device is the most personal item we have. We use it to take pictures of our cat, check email, learn how to cook pasta on TikTok from the GOAT (the pasta queen, IYKYK), but we tend to forget a key historical fact–the mobile phone was originally designed for people to call the office while they were on the road. How did we get from there to here?
- Stage 0 – Dumbphones
- Stage 1 – Sorta Smartphones
- Stage 2 – I’m a smartphone
- Stage 3 – write once, deploy everywhere
- Stage 4 – what’s next?
- Next Chapter
Stage 0 – dumbphones
The first mobile phone was the Motorola DynaTAC. There were other makes and models, of course, but this one was iconic. Sure, you couldn’t shove it in your pocket without obliterating your pants, but it got the job done. From this point forward, successive devices shrunk in size and increased in feature set, leading up to the StartTec, released in 1996. The Nokia 9000 was released the same year. It was the first foldable phone, I believe, and it provided the closest experience to a PC at the time with a full keyboard, fax, email, and other capabilities.
An inflection point would arrive around the 2000s, when Java could finally run on phones. This paved the way for applications like a calendar or contacts list, but most phones did not offer a way to install apps from third-party developers, leaving you stranded with the same apps until you switched to another phone.
From the early aughts to 2008, Nokia emerged as a frontrunner, boasting a wide range of options from simpler models like the 3310 to more complex offerings like the Nokia 6600 with Symbian OS. This OS opened the door to installing apps from third parties. Installing games felt amazing.
Stage 1 – sorta smartphones
Around 2006, we started to enjoy better internet experiences on phones and one browser in particular, Opera Mobile, felt like a desktop browser. I remember it being kind of clunky to zoom in with a joystick or some such, but this felt like a revolutionary jump at the time, where you could finally consume “normal” internet.
Skip forward to 2007, when the iPhone was introduced and–knowing what we know now–this was the equivalent of the Big Bang for tech. It may not amazed at the time, but in hindsight, with no 3G support, no front-facing camera, a special headphone jack (yes, even then), and missing support for Flash, the iPhone now seems ancient. The Flash I’m referring to here was less Justice League and more software used to create interactive sites easily. But because Flash was a resource hog, had a ton of security vulnerabilities, and was owned by Adobe (a good partner of Apple over the years), Steve Jobs hated it.
Stage 2 – I’m a smartphone
Upon its inaugural release, the iPhone didn’t feature an app store because Steve Jobs was sure HTML5 would take over. Facebook made an early bet on HTML5, too, if you recall. But Apple eventually rolled out its SDK and introduced the App Store, which shaped how we consume apps not just on our phones, but also our Macs, PCs, and PS5s.
As a web developer, this tiny phone gave us big headache in its early days. Why? Stunning websites just would did not fit on it. We had to get smarter and create a version of the site for mobile phones under a subdomain. Now, we would need to maintain two different projects–great.
Angular unlocked the power of JS for developers, and the tooling empowered us to create desktop apps easily, but sites were still unfit for mobile phones, until the arrival of a framework known as Bootstrap.
Bootstrap was created by Twitter. This CSS framework introduced features like unified design language, plug-ins, and, most importantly, a responsive grid. In web design, a grid is a way to split the screen into equal areas, typically columns, with a known width, helping to align elements. Sure, a 960 width (960 grid, anyone?) is fine for desktop resolutions at 1024X768, but if you don’t know what kind of screen your user favors–especially very tiny screens–then fixed grid sizes create headaches.
With responsive grids, you could now collapse elements to be above each other. Utils classes would hide items that did not fit certain screen sizes and more. Bootstrap lay the groundwork for other frameworks like Tailwind CSS and made 15-pixel padding considerations a thing of the past.
Stage 3 – write once, deploy everywhere
Even though sites now looked amazing on multiple screen sizes, customers and product managers, as always, demanded more. How could we take advantage of the sensors on our mobile phones–our cameras, gyroscopes, touch screens, multi-touch support, GPS–in our apps? Desktop sites (now known as desktop apps) were limited and couldn’t access these sensors, so developers started to dream. What if we could take Java’s strongest feature–write once, deploy anywhere–and apply it to JS?
This is what PhoneGap and Cordova accomplished. They took HTML, CSS, and JS, wrapped it in a web view, and bam! Native apps without the hassle. They would also expose higher SDKs to the JS side, like the camera or GPS. There were performance issues, sure, and developers would go on to enjoy better tooling from native languages and other newer, shinier trends. But this was the bedrock for writing your app with frameworks to work across a range of devices.
In 2015, Meta released React Native, which riffs on React and makes components from its ecosystem more accessible to web developers, broadening its appeal. Another popular player is Flutter. While JS still plays a role in React Native, Flutter uses Dart, a language first introduced to web developers through Flutter.
Stage 4 – what’s next?
It’s hard to say. Big companies are playing all their own hands. Google still supports Java, but also created Kotlin and invested in Flutter. Apple introduced Swift and we got SwiftUI, which is a pretty, component-based approach to development like React, fused with a design approach similar to Flexbox in CSS. Microsoft is working on Xamarin, a .NET library. On top of that, we have progressive web apps that resemble desktop apps, but can also be consumed by mobile users. In a way, it’s a call back to what Steve Jobs believed in–why bother with fancy SDKs. Just use HTML, CSS, and JS.
But prophecy is for fools, or so they say. In part two of this three-blog series, we’ll explore what happens–and how high the stakes can get–when you release your app to the world.
Stay tuned for Chapter 2 👀
