VGTech is a blog where the developers and devops of Norways most visited website share code and tricks of the trade… Read more



Are you brilliant? We're hiring. Read more

VG+ 2.0: From Native to Hybrid App.

Android

VG+ is VG’s premium subscription based digital product and VG’s third editorial product, it consists of the best content from the printed VG newspaper with the best content from VG’s free news site www.vg.no. Context aware content tailor made for each platform ensures the ideal reading experience per device. The user can quickly and easily gain news insight on their mobile while enjoying a more immersive experience on the iPad.

 

The first version of VG+ was released in 2011 as an iPad app. It was a native application that won multiple awards including the ‘Best paid app’ at the World Association of Newspapers – WAN IFRA Cross Media Awards in 2011.

In 2013 we ditched our native apps and created a new set of VG+ Hybrid Apps (Android, iPhone and iPad). The goal was to combine the best of web technology with the best of native technology. We also created a new set of editorial tools that are tailor made to the needs of our editorial team and to creating interactive and instantly available content for mobile devices.

So why did we scrap the native apps and build hybrid apps?


Editorial control over article layouts
The biggest problem we had with the first version of VG+ was with the lack of editorial control over article design. The VG+ 1.0 iPad app contained a compiled set of article layouts within the app. The editorial desk used an editorial tool to choose from this predefined list of article layouts. The layouts they chose matched with the compiled layout within the iPad app. If the editorial desk wanted to create a new article layout the app developers needed to create a new app, send it to apple and wait for Apples approval.
This traditionally is not how an editorial desk works, in the printed world they can design any layout they desire giving them freedom to enhance different stories through use of text size, color and images.

With VG+ 2.0 we wanted to give the editorial desk full control over the design of article layouts (font size, font color, picture positions, text flow etc). Together with Aptoma (a company that creates publishing software) we created a new editorial tool (Dr Mobile) that made this possible. Our app development partners Agens helped us with integrating this content into the VG+ apps.

The output of which is HTML rendered articles that are designed by our editorial team. These articles are embedded in a webview within the hybrid app.

The advantages of using HTML to render article layouts are

  • HTML is a very effective technology at displaying text and image layouts.
  • It made it easier to preview content displayed in the app from within the online editorial tool. What you see is what you get (in the app).
  • It reduced the article and issue size. HTML allows us to reduce the average size of a daily edition. An app displaying PDFs or large images would have tripled the size of each edition.
  • It is easier to make layout changes on the fly and release rapid bug fixes.
  • It is easier to perform text searches than when using apps that display image content only.

The total control over the design process empowers the editorial desk with the ability to enhance the article content and the users reading experience. The tool also allowed the desk to instantly publish enhancements to article layouts without the need to send a new app to Apple for approval. This also reduces the need for users to constantly update the app because of simple improvements to article layouts.
Below is a video showing how this design tool works.

Multiplatform Support
When we released the first version of VG+ it was only available as an iPad app. We wanted to support multiple devices and multiple device sizes. By using HTML to render article layouts we have reduced the development time and cost needed to support new platforms. The HTML needs to be tweaked for each platform and sometimes for particular android devices but so far we have not experienced any major issues with supporting multiple platforms. The editorial tool allows us to create new HTML layouts per platform or for different screen sizes, so depending on the importance or popularity of a device we can customize content just for that device. We also have the option to easily create responsive HTML layouts that adapt to all screen sizes.

VG+ multiplatform

Features
We wanted to combine the best of native functionally with the best of web technology. We didn’t want to switch completely over to a web app like the Financial Times. It was still important for us to take advantage of certain native features such as; text push, newsstand, storekit, article navigation, pinch, zoom, bounce back etc. We also have the option to create a native layer on top of the article webview in the app, this gives us the flexibility to create native components if we believe certain features created in HTML are not good enough. For example a native image gallery.

Performance
It was important that the app didn’t feel webish or sluggish. Speed is a defining factor with mobile apps, the users tolerance to wait on a mobile device is far less than that on a computer. We wanted to maintain a native snappy experience. To optimize the performance of the app we decided to implement certain features natively. The table of contents view is native, by using snapshots of the first page of each of the HTML rendered articles using phantomJS.
Once a user taps on an article within the table of contents we dynamically switch to a webview and to the HTML rendered article. The navigation between articles is handled by the native layer in the app reducing the perceived lag time when navigating between articles.

The next and previous web views of an article are preloaded so that the content is instantly displayed once the user begins to swipe between pages of an article.

VGPluss-Preload-Webviews-small

SkillSet
HTML is the most used programming language among developers and is built on open standards. By using HTML5 to render articles within the app we increased the pool of potential qualified resources to work on this project. It also allows us to reuse a lot of knowledge and web components created for other VG web projects within the VG+ project. Device and OS fragmentation is also proving to be more and more of a challenge when developing pure native apps, by reducing the amount of native code developed we have reduced the number of problems related to OS fragmentation.

Appstore distribution and monetization
It was still important for us to be present on Apples Appstore and Googles play store. Building a hybrid app gave us the flexibility to offer both Appstore subscriptions and our own subscription service (SPID subscriptions). One click payment and stored credit cards have proven to be an effective way to sell content, the only disadvantage is Apples 30% cut of the earnings.

Budget
Developing pure native code for each platform is expensive (objectiveC on iOS platforms, java on Android, HTML on the web). We reduced the cost of developing new apps or new functionality within the app by developing a large portion of the codebase in HTML and reusing the code when developing for new platforms. Native app developers are currently more difficult to recruit and tend to be more expensive than web developers. A lot of app development is outsouced further increasing the cost of developing apps for each platform.

General challenges when choosing a HTML or the hybrid app approach

  • You need to weigh up the costs of tweaking the HTML for each browser, the advantages of using a cross platform language may soon be eroded if you need to customize your code for each browser version or operating system.
  • Page rendering of web content is not as seamless when turning the iPad from landscape to portrait. With VG+ we have chosen to only support landscape view on the iPad and portrait view on smartphones
  • Applications reliant on hardware access are better off choosing native e.g games (camera, location etc). We have a limited need for creating native components in VG+, by choosing a hybrid approach we could implement the best of both native and web.
  • A native feeling differentiates premium products from web products. If a premium app feels ‘webish’ or there is a lag in loading content. Customers associate this experience with the web. This is a bad association to establish when trying to convince the user to pay for a premium digital product as opposed to free content on a webpage.
  • HTML apps tend not to feel as polished as native apps; also, they generally don’t look like native apps.
  • The webview used in apps is slower than safari. Nitro JavaScript Engine is not available in UIWebView http://iao.fi/myposts/uiwebview, http://daringfireball.net/2011/03/nitro_ios_43
  • Apps/mobile content need to be fast. Natively rendered content have a tendency to render quicker than html content.
  • The traditional problems with web development are associated with supporting old browser versions. The same problem has begun to develop on mobile platforms as new versions of browsers and different versions of webkit are released per operating system

Conclusion
My personal opinion when it comes to technology choice and the debate between HTML V Native apps is that you have to ‘use the right tool for the job’. In our case a hybrid solution was the right solution for this product. The hybrid approach has allowed us to selectively choose the right technology (HTML or native) for different features and to achieve the performance and user experience we and our users demand from a subscription product.

Our users are also happy with the new app, since the release of VG+ 2.0 in March 2013 VG+ has had phenomenal growth and at this point in time is the 8th biggest newspaper in Norway (this includes printed newspapers). We have also had a rapid increase in page views per user and time spent within the apps.

Growth in usage8 Biggest in Norway

Mobile Development Manager VG twitter @padraicwoods


3 comments

  • Jøran Vagnby Lillesand

    Very interesting post. Not a lot of people making the shift from native to hybrid these days, but as web technology matures I wouldn't be surprised to see more apps follow suit.


  • Hans-Christian Fjeldberg

    Great read. Are you at the liberty of sharing some more technical details about how the interaction between the webview and native code is done on the different platforms, with respect to navigation and such?


    • Padraic Woods

      Padraic Woods

      Hei Hans-Christian
      We had a techshock talk before christmas explaining some of the technical solutions used in the VG+ project. We will try to post some detailed blog posts outlining some of these solutions in the future.

Leave your comment