Apple launched the Apple app store on July 10, 2008. Within 72 hours of opening 10 million apps were downloaded. Mobile apps would go on to rapidly transform and dominate the digital experience and change how people work, play, connect, communicate, and travel.
Mobile Conquers the Digital Universe
Mobile apps provided a much higher level of interactivity and performance than web browsers. Apps could also access smartphone hardware features like GPS, and the phone’s camera which opened up a whole new world of functionality and possibilities. As a result, mobile devices are now responsible for 71% of all digital traffic in the USA.
All of this improved digital experience came at a cost. While browsers run virtually everywhere, on any OS or connected device with a screen, mobile apps run on only one OS. In order to have apps on both iOS and Android phones, you needed to develop and maintain two code bases in 2 different programming languages. That’s, in addition to the code you are maintaining for web browser-based applications.
The First Hybrid Mobile Apps
Mobile apps raised the bar for what users expected in the digital experience and HTML 5, CSS 3 and Javascript frameworks were the response to the challenge. These technologies allowed for a more interactive and richer browsing experience.
Solutions that took advantage of HTML 5, CSS 3 and Javascript to cut down on the development costs and time to market for mobile apps began to appear from early on. Phone Gap was one of the first. PhoneGap allowed developers to code in HTML5, CSS and JavaScript and output apps for both iOS and Android. Phone Gap is now an Apache open-source project called Apache Cordova.
Cordova runs a single-page application inside a phone’s integrated mobile web browser. The single-page web app is wrapped in a native mobile application so it looks like a mobile app to the user. Inside the mobile app, Cordova is running on the mobile browser engine. This allows developers to use any technology stack they are comfortable with JavaScript, jQuery, Angular, or any other JS framework or library.
Sounds great, so what’s the catch?
Performance - PhoneGap/Cordova is slow-w-w-w-w compared to native apps. The difference is enough that users will notice it. On iOS, the performance of the Cordova web view running in its native app wrapper is not just worse than a native mobile app, it’s worse than a web browser-based app running in the mobile Apple Safari browser.
The Next Generation of Hybrid Platforms
In order to close the performance gap, new hybrid solutions have been developed. One of the most popular is React Native, originally introduced by Facebook and now open-source software. React Native does not rely on a WebView. React components link to native views and React Native provides access to native controls and interaction. This results in an experience much closer to a native mobile app.
Flutter another open source AppDev solution is Google's UI toolkit for building natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. Flutter is a comprehensive app Software Development Kit (SDK), complete with widgets and tools.
Ionic framework is a free open source library of mobile-optimized UI components, gestures, and tools for building mobile apps. Ionic can be used with Angular, React, Vue, or plain vanilla Javascript.
These hybrid frameworks deliver better performance then the old WebView dependent solutions. In some use cases the performance will be indistinguishable from Native to the user. However, if the degree of complexity and the performance demands are very high then developing in the native language is still the optimal solution.
Low Code and No Code Development Solutions
This is a rapidly growing segment in App development as it not only saves time and cost. It also allows non-programmers to create multiplatform apps.
Mendix provides a WYSIWYG, no-code IDE (Mendix Studio) for business users, and a low-code IDE (Studio Pro) for professional developers. Both the IDEs sync bidirectionally.
Outsystems offers a drag-and-drop UI, business processes, logic, and data models to create full-stack, cross-platform apps. One-click update and deploy. OutSystems automatically checks dependencies and handles all deployment processes.
Browser-based Web Apps
In addition to native mobile apps and hybrid mobile apps, HTML5, CSS3, and Javascript have made possible web browser-based apps. Platforms like Gmail, Zoho, Basecamp, and Dropbox have browser-based app versions that have millions of users. Some of the pros and cons of browser-based apps:
Pros:
- Nothing to download or install. The only requirements are a browser and an internet connection.
- Run anywhere with one codebase. Any connected device with a screen and a browser can run the app.
- Mobile app stores are private businesses. In order to upload your app to an app store, it must pass a review by the company that owns the platform and comply with its rules. Apps for Internet browsers live in an open standards universe and you are totally in control. You decide your update methods and you make your own rules as to your code.
- Seo Friendly - your app is an HTML page and can be crawled by Google.
- Web tool friendly - It is compatible with Google Analytics or any web tool.
Cons:
- No internet connection, no app. Browser apps are dependent on a connection. Some mobile apps can function without it. That would not include mobile apps like chat, wayfinders and apps that need to communicate with a server to perform their functions. But a lot of mobile apps can at least perform some functions without a connection.
- A slow connection can affect performance more then would likely be the case with a mobile app.
- Performance in many cases won’t be as high as a native mobile app. This will only be a problem if the difference is enough for a user to notice.
Responsive web design
As mobile became an important web device, designers began to experiment with liquid layouts that could accommodate both desktop and mobile screens. In 2010, Ethan Marcotte, in an article in A List Apart, coined the term “responsive” web design to describe this new dynamic design method. In 2011, Twitter released Bootstrap, an open-source CSS framework for responsive websites. As a result, Responsive browser-based apps can present layouts optimized for both mobile and desktop-sized screens.
An Early Browser-based App Example
In 2013 Intelifaz worked with Office Depot to reimagine the Office Depot online Print on Demand experience. Office Depot was in the top 10 sites in online retail sales in 2013, with millions of visitors to its website. It was critically important that the Print-on-Demand experience be seamlessly integrated into the existing site to take advantage of the site’s existing traffic. Integration of the app into the existing eCommerce website, shopping cart, user accounts, site search, metrics analytics systems, and SEO were all must-haves. It was something that had never before been done, at least not at Office Depot. The existing solution was Flash-based and required users to leave the site, had no SEO, data visibility, and required a separate login and account. This was common at the time. The new web technology that had just become available allowed for a much more advanced and integrated solution.
Google’s (new at the time) Angular framework, HTM5, and CSS3 were chosen for the build. The app was seamlessly integrated into Office Depot’s retail and b-to-b websites and legacy eCommerce system. In 8 months development went from concept to the initial soft launch. The results were a spectacular success. The browser-based web app delivered triple-digit increases in conversion and became the #1 product to be purchased online and picked up in-store.
Summary
For the ultimate in performance - program iOS apps with Swift, Android with Java, and web with HTML5, CSS3, and a Javascript framework. There is no better performing combination if you can justify the costs. But business solutions must be cost-justified and have a reasonable ROI. For many applications, the ultimate in performance option results in development and maintenance costs that are far too high to be viable.
Thankfully there are a lot of options that may be a perfect fit for your specific business case. In many cases, there will be no or very little difference in performance that could be noticed by a user. Native, Hybrid, Low-code/No-code, Browser-based, which option you choose depends on the use case. There is now a wealth of technologies that are making application development more accessible and making options available that can fit a wide range of budgets from enterprise to small business.
If you have questions or need some advice on apps and your business, contact us. We would be happy to offer you a free, no-obligation strategic analysis of your business processes or project.