by Eric Lin | Photo credits: Internet Society Hong Kong | 2 June 2015
Slack is no doubt one of the hottest startups in Silicon Valley today. Founded less than two years ago, the workplace collaboration startup is valued at 2.8 billion dollars in its newest round of funding. Shortly after launching its successful web-based work-collaboration application, Slack released desktop and mobile applications for multiple platforms at such fast pace that it made everyone wonder how they did it. In fact, Slack has leveraged web technologies to develop these hybrid applications on different platforms.
Dropbox is another example of a fast-growing startup that has developed a hybrid app. Maxime Belanger, who joined their engineering team when there were only 20 employees, shared how he used web technology to build their hybrid desktop application at the World Internet Developer Summit 2015 two weeks ago.
“What do I do at Dropbox? I enjoy creating new ways for people to work together!” said Belanger. Using web technologies to build hybrid desktop applications makes the development process and product iteration a lot faster. His sharing covered the following three aspects:
- What is a hybrid app? How is it different from a traditional application?
- Why are hybrid apps so popular and powerful today?
- How do you choose the technology to build hybrid apps?
What a Hybrid App is
Before introducing the concept of hybrid apps, we first need to know what web apps and native apps are.
A native app is an application coded for a specific platform such as MacOS, Windows, iOS, and Android, and usually provides high performance and a high degree of reliability. It has access to features provided by the operating system. For instance, a native app on MacOS can use functionalities like pop-up animation and high-resolution image rendering provided by MacOS. In addition, some native apps can be used without internet connection. However, since a native app is tied to a specific platform, developing native apps for multiple platforms implies more effort is required to develop and maintain different codebases for all supported platforms.
A web app, as the name implies, is an application that runs in a web browser with internet. Web apps are written in browser-supported programming languages (such as HTML, CSS, Javascript) and then rendered by the browser, supporting cross-platform compatibility. Web apps require Internet connection to download the application on runtime, which makes it easy to iterate, distribute, update, and maintain the application.
So what is a hybrid app? “A hybrid app contains both native and web elements that co-exist to form a cohesive user interface. The experience is just seamless!” A hybrid app is developed based on the native platform but uses a “webview” to load some pages dynamically from the internet. In this way, the hybrid app not only has access to high performing features provided by the specific platform, but also enjoys the cross-platform compatibility and code reuse for those pages loaded in webview.
Dropbox, which has just one codebase written in Python, supports several desktop applications for Windows, Mac, and Linux. “Probably most people don’t realize that when you launch the Dropbox desktop application and see a login page, it’s actually loaded as a web page!” said Belanger. This way, Dropbox does not need to re-implement the login functionality for another platform.
Why hybrid apps are so popular and powerful today
Technology research firm Gartner predicts that by 2016, 50% of mobile apps will be hybrid. Data from Vision Mobile last summer showed that 42% of North American mobile developers were already using HTML, CSS, or JavaScript today in some fashion.
According to Belanger, hybrid apps help save time and money. since developers are able to write the core code once and run the application on multiple platform without much effort.
That said, developing hybrid apps is one of the cheapest ways to target the desktop market where there are billions of potential consumers.
The dynamically-loaded webview also avoids the troubles of releasing, updating, and maintaining client applications brought by traditional desktop applications. Hybrid app makes it faster to ship code and there’s no need to release new client applications.
While web apps are usually accessed via web bookmarks and displayed together with browser tools and menus irrelevant to the app, Belanger said a hybrid app is a “first-class” application which enjoys its own application icon, elevated privileges, and can run tasks in the background.
Yet hybrid apps also come with disadvantages. A page displayed in a hybrid app’s webview sometimes doesn’t rival that of a native app. For instance, the webview cannot use platform-specific pop-ups or tray icons provided by MacOS. Failure to customize the design leads to worse user experience.
Since the webview relies on the browser to render and run, the application usually is not as high-performing and reliable compared to a native app (especially on mobile platforms).
Choosing the technology to build a hybrid app
Hybrid apps are not a technical approach to all scenarios. The following three aspects shall be investigated before adopting the approach:
First, choose the right web engine that powers your webview. There exists many powerful web engines now – Chromium Embedded Framework, Qt, MacGap, Node-Webkit, and WKWebView. The best candidate shall be well-maintained by the developer community, standard-compliant, secure, and high-performing. Chromium Embedded Framework is one of the most popular candidates, while Dropbox uses Qt and WebKit.
Second, choose webviews wisely. Some applications encapsulate the entire application in a window-like webview (such as Slack and Spotify), while some display just part of the application in webview (such as Microsoft Office and Dropbox). The golden rule is that, a webview is great for user interface that changes frequently.
Third, enhance the web engine if necessary. For most of applications, existing web engines are good enough. But sometimes, the tech team shall add features to the web engine when more functionalities are needed (such as file system access).
Read on:
- Ionic: Framework for Hybrid Mobile App
- Appcelerator Titanium: Build native mobile apps from a single code base
Eric Haibin Lin
Latest posts by Eric Haibin Lin (see all)
- The Hidden Tech Recipe behind Slack and Dropbox - June 1, 2015
