With the introduction of the HTC Dream in 2008 as the first android-based smartphone, mobile app developers were confronted with a tough choice. iOS or Android. Today there is even more variety in platform specific development platforms. From iOS and the different Google dev kits to Windows Phone Tools and everything in between. This fragmentation puts both business and developers in a difficult spot.
When choosing between SDKs, pick web
I’m writing this post as a member of this latest category of "device-end" developers. Passionate about the web and taking that experience to mobile.
Those who take the plunge and build their first mobile app in Cordova will quickly have the following realization: you won’t get there with just a responsive mobile first design. The peculiarities of each platform, the different implementation of web components and the complexity of touch interaction can and will provide you with a sometimes hellish experience. In most cases you’ll be looking for salvation in workarounds, hacks and more platform-specific band-aids.
Native. Just a front-end for the web?
When choosing a hybrid app strategy, experience with web development will give you a significant head-start. The project structure feels very familiar; you can use the same back-end API, and with Ionic's AngularJS foundation, you'll achieve the same front-end modular approach. For us, these were the deciding factors for choosing a web-based hybrid app:
- A successfully completed and well-received AngularJS project
- The overall company strategy to use web technologies in new and innovative services
- A good and successful cooperation with an external web designer (HTML and CSS)
- The availability of free open-source frameworks for a relatively small project scope
Going mobile, one major challenge was to enable offline use. There has been a lot of progress in standardizing offline storage of data in the browser. WebSQL and IndexedDB are at the basis of new browser storage options and frameworks like Lawnchair or PouchDB can help you with document storage on the client. The latter also supports syncing with an online CouchDB document repository.
A whole other challenge was the build automation process. To get an iterative test process up and running, you have to get the application packages available for the different target platforms – fast. We used TeamCity and its flexibility to build and package the source code both on Mac (required for building iOS packages) and Windows Server.
Although Ionic tries to facilitate and ease the transition from a web application to a (hybrid) mobile app, you’ll encounter some hurdles along the way. As web applications still struggle with browser compatibility, your mobile app might look and perform different between devices. Device and plug-in APIs, styling or performance issues might all contribute to the root cause. Testing on a variety of devices is key to find and resolve as many issues as early on as possible. The Ionic framework provides great tools to build and deploy the application to a connected device. Once deployed, you can enable LiveReload, and see your changes appear immediately on the device. You can also use Chrome or Safari developer tools to debug your scripts and styles. However, emulators are still painfully slow and assisting testers with dedicated build environments using multiple platforms is not an out-of-the-box feature.
Takeaways from a hybrid app developer
A successful mobile app project does not only rely on picking the right technology stack. It is of vital importance to have a good methodology and design approach. A modular front-end architecture can quite easily become a mess if you don’t follow best practices and industry guidelines. TypeScript and JSLint can help you a great deal in sticking to the guidelines. Good code makes good friends.
As a web developer you have a lot of libraries and code snippets at your disposal when building a web application. The community feedback really helps to make an informed decision but always stay vigilant and expose third-party code to the same requirements and tests as your own code.
The web continues to accommodate new innovative and creative projects. As a result, customer expectations in terms of design, UX, functionality and performance, were never this high. Don’t hesitate to call on the expertise of internal or external parties at each stage of the project from conception to design, from analysis to execution. Invest in customer experience, it pays for itself.