FT Group Product Head – Emerging Technologies, Steve Pinches, talks through the technical aspects of developing a HTML5 web app.
Why did the FT decide to create an HTML5 web app?
Creating an HTML5 app is innovative and breaks new ground – the FT is the first major news publisher to launch an app of this type. There are clear benefits. Firstly, the HTML5 FT Web App means users can see new changes and features immediately. There is no extended release process through an app store and users are always on the latest version.
Secondly, developing multiple ‘native’ apps for various products is logistically and financially unmanageable. By having one core codebase, we can roll the FT app onto multiple platforms at once.
We believe that in many cases, native apps are simply a bridging solution while web technologies catch up and are able to provide the rich user experience demanded on new platforms. As these improve we expect to see more HTML5 apps and fewer native apps, but there is always likely to be a market for native apps for specific brands or when deeper integration with the hardware or super fast performance are required (games are the most obvious example).
What is the difference between HTML5 and native apps?
HTML5 is a catch-all term used to describe the latest generation of web standards, which comprise HTML, CSS, and JavaScript along with several dozen other technologies. These technologies are evolutions of earlier versions and inherit a lot of good practice from twenty years of the web like accessibility, security and compatibility. As they are not owned by any one corporation, they are universally well supported.
Native apps are built using the preferred technology of one specific platform and operating device, so Apple, Android and Blackberry devices all have different technologies to work with. We can compare it to building a train for a particular gauge of track, then having to build another train when you want to run your service on a different network that uses a different gauge.
Native apps and HTML5 apps differ not just in how they are made but how they are accessed. An HTML5 app is simply a website – you visit it in your browser, and you’re done. A native app must be downloaded and installed on the device, generally through an app store like the Apple App Store or Google’s Android Market. These app stores are controlled by their owner and may apply charges, rules and policies which are never a constraint with HTML5, distributed purely via the web.
How is the process of developing an HTML5 app different from creating a native app?
HTML5 development is an extension of web development for desktop websites. It uses the same tools and techniques but has a far larger variety of devices to test on. This means the FT was able to iterate, test and redeploy much more quickly than the development cycles for a native application. Development was much faster and more efficient and we were able to quickly gain feedback on functionality.
Native app development is generally easier as it is designed for one platform and libraries of frameworks, components and templates are available from the platform (Apple, Google, RIM or Microsoft). The tools used in native app development are generally those that belong to the same family as the platform itself, so Android development typically involves the Java development environment Eclipse. Apple iOS development would favour Apple’s own development tools such as XCode, and Windows Phone development would require Microsoft Visual Studio. Web development is completely different because there is no vendor-specific platform, so there are a huge variety of tools and technologies that developers can use, and it’s simply a case of using whichever ones you prefer.
What were some of the challenges faced during the process?
The main challenge is the fact that we are very much breaking new ground. The breadth of tools and documentation available for native apps and even desktop HTML5 development is just not there for mobile-based web app development. In addition the usual testing tools for both functional and performance testing do not exist, so we had to invent our own systems and processes to make sure the app worked effectively.
A second challenge was ensuring graphics and video are displayed well. The webkit browser uses the device’s graphics hardware to improve the smoothness with which animations can be shown, greatly enhancing the user experience. However this also causes other issues such as portions of the screen flickering, or the application scrolling as users type on the keyboard. Solving these problems highlights how we are pushing the boundaries of newly developed web technology and how differences between devices and differing versions of the webkit browser can pose a challenge.
Solving the challenges above has been slightly harder than in a native app development process because of the approach, for example ensuring the images associated with articles are available offline. As users will probably be using a web app for the first time, we have also added functionality to show people how to add the app to their iPhone or iPad home screen.