Mobile development frameworks

Development frameworks and the architecture play a key role for making the app successful. Where in the past the user would judge an App based on its functionality we now see that the experience delivered by the App could make or break its success.
Currently we see that the majority of users stills give preference to native apps. These provide a seamless experience by utilizing its tight integration with the native operating system. However the native apps come with a price on their own where we need to take into account the support for different platforms and might even need to incorporate major changes between versions of the same platform. This can overly complicate the development and with that increase total cost of ownership. This total cost of ownership is influenced by factors like resolving production issues, adding new small functionality, compatibility with its host platform and providing support towards business stakeholders and users. This is often an underestimated part when the App is developed and should be taken into account when considering the architecture of your App.

Mobile Development Frameworks

HTML5 Apps

The HTML5 technologies today offer developer with web skills easy access to develop beautiful responsive cross platform apps. However there are also downsides that need to be overcome. For example there is often not a dedicated development environment that supports the full lifecycle of the App. Another point of attention is that you will always end up with one or more of the popular HTML5 frameworks. These frameworks provide common UI and data building blocks. They should enable you to focus on the development of the App and avoid that your team will spend time on framework development. An overview of the most popular frameworks is summarized below:

Name Description Pro Cons
Bootstrap Feature packed framework providing many building blocks for responsive Apps and sites. Very well documented and has many tutorials. Open source license.Support for many browsers. More aimed for developers than designers.
jQuery Mobile Open source solution with good support from the community. Starting with this framework might cause an stack overflow due to the many components that are available. Relative good IDE support.Better cross platform support. Performance due to browser compatibility
Sencha Touch  Sencha Touch is a commercial framework targeted for web-kit mobile browsers. It involves no HTML and is purely Javascript. Documentation and tool support is extensive as you might expect with a commercial product. Highly optimized for mobile devices.Follows MVC pattern. Only runs on web-kit mobile browsers.Steep learning curve & hard to debug
Kendo UI  Partially commercial and open source product that provides an MVVM pattern. Kendo strives to deliver a native feel for the supported platforms Some IDE support. Separate packages for web and mobile. Good UI performance. Documentation (for commercial product) is not in such a shape as competitors.

 

HTML programming might feel constrained in a way that it does not provide a good support for complex programming structures. This is really not true when you do a deepdive into the capabilities of Javascript, however for people accustomed to languages like C# or Java this can be a big step. Using structured frameworks like Angular will help you structure your code to avoid this side effect. When the HTML code base gets large it might become harder to resolve issues when comparing this to native IDE’s that offer out of the box solutions for this. Having a very skilled team of HTML developers might solve this but maintenance of code and troubleshooting needs to be taken into consideration when applying this technology.

 

When cross platform development is a key requirement it unleashes the power of HTML. HTML will enable you by using responsive design to deploy your application to a variety of platforms (smart phones, tablets and TV’s). Although this is a very compelling reason to choose for HTML you should be aware that the more platforms and devices you want to support will be dictating the constraints on your App. Also the testing process needs to be carefully considered to make sure short iterative development and release can be achieved while maintaining quality.

 

When choosing the right framework it will not all be about the capabilities that are exposed. We also need to take into account the design we want to apply and how the framework will support it. Best practice is to use early wireframes into account as requirements before making a final selection.

Hybrid Apps

Hybrid Apps offer the best or worst from both worlds. They are essentially a HTML5 application but wrapped in a thin native container that enables the app to exploit many of the native features. Examples of products that provide such a container are PhoneGap and Titanium. Off course the evident downside is that you require developers both skilled in native platform development and as well have HTML experts lined up. Though this is still a model that offers advantages and you should take this seriously into consideration before making a definitive choice.

Local vs Server side HTML

In the simplest form a hybrid App will contain the HTML UI components and are downloaded directly when installing the App. One of the powerful features of using the hybrid approach is that it will allow you to update Apps on the fly. Meaning that we can define a UI that is loaded from the server when updated. By creating a bridge which does a server check if updated UI templates are available you will easily determine if the App needs to be updated. Taking it one step further and you will also stream content from a server to the App. The App will most likely use smart caching mechanisms to handle offline states. With or without the addition of server content this will introduce the need for some caching logic in the App and off course the dependency towards a backend server. Using such an approach can also speed up your development process as UI and or content is very dynamic. This will introduce a more steep startup curve but once in grip will have a higher velocity than the traditional native development approach.

 

Caveats

One of the major caveats is that you need to insert controls into your system to protect yourself against unauthorized calls from the HTML layer to the native OS. You most likely need to add this into your security layer to make sure that HTML code that is downloaded is safe and also verified. You also need to take care with regards to App Store policies where you are often not allowed to change the primary functions of the App without an official deployment through the relevant store. Especially Apple can be quite strict with enforcing their rules regarding such behavior. Although using a cross platform solution you will need to test all platforms as behavior on Android or iOS may differ. Bridging code between native and HTML (javascript) may have performance penalties and should also be thoroughly tested. Making sure that you have complete test coverage will mitigate this risk. Last but not least you need to take security more into account when using the hybrid approach. As web technologies might introduce vulnerabilities you need to ensure these are mitigated in a proper way. Ensuring that you embrace standard best practices for web security will be a first step.

 

Summary

I hope with this article that I have provided some insight on how HTML technologies can ease some of the development challenges in the mobile world. When applying these architectures we need to keep a close eye on security and performance. However it will allow you to overcome some of the challenges you will face when you are constrained to only native development.

Share: