Showing posts with label native apps. Show all posts
Showing posts with label native apps. Show all posts

Mobile Technologies Revealed: Web and Native App Development Strategies

Our resident Cognizant mobile and digital technology guru, Peter Rogers, shares his insights into web and native app development strategies in this guest post:  Enjoy!
********
Peter Rogers
I often meet customers who want to transition web developers into mobile application developers. Apple has clearly tried to address this market using Swift but that does not offer a cross platform solution. Developers who have come through this transition will traditionally wrap the latest and greatest web framework (like Angular 2 or React) using Adobe Cordova through initiatives like Ionic. However great the latest web frameworks are though they can never compete with pure native mobile user interfaces powered by dedicated hardware acceleration. It may be a simple solution but the net result is never going to be present the best possible user experience and there will always be problems with Apple App Store submission and changes to WebView technologies designed to gently nudge developers towards pure native Apps.

Appcelerator Titanium has long since offered an excellent solution in this space but the only downside is the lack of a combined desktop and mobile solution.

Recently three new exciting initiatives arrived to offer new Titanium-like solutions in this space:

1.       React Native (http://www.reactnative.com/)
2.       Angular 2 Native Apps (https://www.youtube.com/watch?v=4SbiiyRSIwo)
3.       NativeScript (https://www.nativescript.org/)

The benefit of the first two is that the technology can be shared across both mobile and desktop effectively. There is no learning a new framework. For the web developers who are trained in Angular 2 or React then this is a very attractive solution for transition to mobile development without having to go anywhere near Cordova. In fact in most cases all you have to do is to swap out the final Cordova Wrapping process for a dedicated Web Native Development phase, which means you don’t have to throw anything away.

How does this magic work? Well advanced web developers have already started to mix Angular and React: using the big framework quality of Angular and the high speed rendering of React. This architecture is made even simpler with Angular 2 in which there is platform-agnostic template parsing and platform-specific rendering. This makes it possible to plug in React Native or NativeScript as the underlying rendering engine. This offers a future in which Angular 2 can create cross-platform desktop or cross-platform mobile applications, allowing you to choose your programming language (ECMAScript 5.1, ECMAScript 2015, TypeScript, Dart or CoffeeScript) and choose your platform-specific rendering engine (React Native, NativeScript, Angular 1, Angular 2 or React). For those who wrote off Angular 2 due to radical design changes then suddenly that decision is looking incredible hasty, for it is nothing short of genius.

If you watch the Angular 2 Native App video then you will see the focus around NativeScript. The question is why not consider Titanium or React Native? Whilst that is perfectly possible using the plug and play nature of the new Angular 2 rendering engine there is a clear advantage offered by NativeScript. To understand this advantage we need to take a slight diversion into Hybrid App world. As you may recall there are three main models for Hybrid Apps: wrapped web; runtime interpreters; and cross-compilers. If we start with cross-compilers then we will find Xamarin ruling the roost but I would not call this a Rapid Application Development approach. You trade performance for a slightly longer development time and a more difficult programming language. The interesting thing with Xamarin is the 100% API coverage available within a few days. There are also a few HTML 5 canvas cross-compilers like those found in Intel XDK but these are specific to Canvas technology which works better for the specific use case of widgets and games. We all know the most popular wrapped web solution is Cordova, with another notable entry being IBM Worklight.

Runtime Interpreter solutions do not quite offer the performance of a cross-compiler but they do offer support for rapid application development through JavaScript. Appcelerator Titanium is the most popular Runtime Interpreter solution and has teased a cross-compiler solution called HyperLoop for a long time but it is offered in a restricted capacity. I am a huge fan of Titanium and have used it a lot for various customers. I was really looking forward to HyperLoop but looking at the software repository then it seems to have slowed down to a halt. The only downside of Titanium is the lack of 100% API coverage but this is a shared limitation with most other portable native solutions with Xamarin and NativeScript being the notable alternatives. Now in the case of Xamarin the API wiring has to be performed by hand however in NativeScript then it is automatic.

So what is the magic of the Runtime Interpreter solution powering Titanium, Kony, React Native and NativeScript? Well Telerik (who created NativeScript) provide the best explanation that I have quite possibly ever read before online (http://developer.telerik.com/featured/nativescript-works/). In a nutshell the two core JavaScript engines that power iOS (JavaScript Core) and Android (V8) both expose a very advanced set of APIs that power the JavaScript bridge (http://izs.me/v8-docs/namespacev8.html).

·         Inject new objects into the global namespace
·         JavaScript function callbacks
·         JNI to talk with the C layer on Android

NativeScript offers the following explanation of how it uses these APIs in order to build the JavaScript bridge:

1)      Metadata is injected into the global namespace at build-time
2)      The V8/JavaScript Core function callback runs.
3)      The NativeScript runtime uses its metadata to know that the JavaScript function calls means it needs to instantiate an Android/iOS native object
4)      The NativeScript runtime uses the JNI to instantiate an Android object and keeps a reference to it (iOS can talk directly to the C layer)
5)      The NativeScript runtime returns a JavaScript object that proxies the Android/iOS object.
6)      Control returns to JavaScript where the proxy object gets stored as a local variable.

This is probably quite similar for most of the other vendors but the additional step that NativeScript adds is the ability to dynamically build the API set at build time using Reflection (introspection). Because generating this data is non-trivial from a performance perspective, NativeScript does it ahead of time, and embeds the pre-generated metadata during the Android/iOS build step. This is why NativeScript can offer 100% API coverage immediately because it does not involve the manual step required in Xamarin. To be accurate it is unlikely that NativeScript can offer 100% API but instead it will offer all of the APIs that can be discovered through reflection – there is a subtle difference here as those who have use reflection programmatically will pick up on.

NativeScript offers two different modes of operation:

1)      Use the low level iOS and Android objects directly
2)      Use high level abstraction APIs

The high level abstraction APIs are provided as RequireJS modules and allow you to work at a higher level of abstraction. If you were wiring this into Angular 2 then you would probably have an Angular component which either calls a Browser Object or an NS Module, which itself talks to either an iOS proxy object or an Android proxy object through NativeScript. Of course there is nothing to stop you having an Angular component that calls out to React Native and that option is being explored as well.

This is not to say that NativeScript is better than React Native, Titanium or Xamarin. In fact I can see the main use case of NativeScript as being used inside of Angular 2 as its platform specific rendering solution. I can actually see more people using React Native as a standalone solution even though it is in a much earlier state. I can also see Titanium carrying on as one of the most popular mobile solutions on the market today. I can however see native mobile web applications becoming a hot new topic and a great place to transition web developers towards.

Download the latest mobile strategies research paper, "Cutting Through Chaos in the Age of Mobile Me," here http://www.cognizant.com/InsightsWhitepapers/Cutting-Through-Chaos-in-the-Age-of-Mobile-Me-codex1579.pdf
************************************************************************
Kevin Benedict
Writer, Speaker, Analyst and World Traveler
View my profile on LinkedIn
Follow me on Twitter @krbenedict
Subscribe to Kevin'sYouTube Channel
Join the Linkedin Group Strategic Enterprise Mobility
Join the Google+ Community Mobile Enterprise Strategies

***Full Disclosure: These are my personal opinions. No company is silly enough to claim them. I am a mobility and digital transformation analyst, consultant and writer. I work with and have worked with many of the companies mentioned in my articles.

HTML5 and the Future of PhoneGap and WebView+

By Peter Rogers, Principal Architect, Mobility, Cognizant

HTML5 is still one of the most discussed topics amongst us technical types.  The key challenge, however, has remained unanswered for a long time. How do you effectively wrap HTML5 for use in native mobile applications? Unfortunately I do not have a universal answer, but I do have a solution for Android.

Firstly, I recommend looking into the use of Vellamo in order to benchmark the performance of HTML5 on Android (http://www.quicinc.com/vellamo/).  Vellamo is designed to be an accurate, easy to use suite of system-level benchmarks for devices based on Android 2.3 forward. Vellamo began as a mobile web benchmarking tool that today has expanded to include two primary chapters: the HTML5 chapter evaluates mobile web browser performance; and the Metal Chapter measures the CPU subsystem performance of mobile processors.

I have my own custom architecture that extends RESS (Responsive Design + Server Side Components) called P-RESS (Performance RESS). The idea is to include performance based information inside the device family configurations. This means that an HTML5 based mobile client can query the RESS server to ask about the performance characteristics of its device family. This can be used to downgrade the graphical experience, for example removing a parallax scrolling background.

The big problem up until recently was that wrapping HTML5 into a WebView on Android meant that you had to use the default web browser, which unfortunately was not Chrome. Instead you ended up with the Android Stock Browser, which was a long way from Chrome. With Android 4.4 (KitKat) we now have the ability to use the Chrome browser through the WebView by default and this is very much welcome (https://developers.google.com/chrome/mobile/docs/webview/overview#what_version_of_chrome_is_it_based_on).

There are two downsides to this effort though:
  1. It only works on Android 4.4
  2. The WebView shipped does not have full feature parity with Chrome for Android (it is based on Chrome 30 as opposed to Chrome 33)
This means that the following features are not available:
  • WebGL (3D canvas)
  • WebRTC
  • WebAudio
  • Fullscreen API
  • Form validation
There have been a number of open source efforts to deliver a Chrome WebView that works across Android 4 and now it appears two companies have started to offer their own versions: Famo.us (http://www.infoworld.com/t/mobile-development/famous-were-building-better-phonegap-236267); and Ludei (http://support.ludei.com/hc/en-us/articles/201952993).

There is a subtle difference in marketing though: Famo.us claim to be building a better PhoneGap; whereas Ludei claim to be building something that is PhoneGap compatible. Both systems bundle the latest edition of the Blink engine (Chrome 33) with the App using a Cloud based build system. The two companies also have cool demos of WebGL running through a WebView on various Android 4 devices. This also means that when Chrome 34 arrives then it is presumed that could be bundled instead – depending on backward compatibility with earlier versions of Android 4.

Famo.us actually answer one of the key questions. Does each app have its own separately bundled edition of Chrome? Each time a Famo.us app needs a particular version of Chrome, that version is installed in such a way that other apps that need it can also use it – think shared libraries. At the moment the footprint for Chrome 33 is around 15-20MB but they predict the size will come down to 10MB. They can also have it not be part of the initial download of the app, but rather as an app upgrade.

It is unclear if Ludei will offer a similar shared library system at this time. One thing Ludei do mention is the increased portability and performance that WebView+ (as they call it) brings to the web environment. Ludei used to only offer support for games but just recently they added application support as well and this is when I really took notice of CocoonJS.

With one consistent HTML5 environment then it means the developers know the feature set to code towards. It becomes a sort of HTML5 Reference Implementation for Android. The minor downside is this only covers Android 4 and above. The major downside is this only covers Android. There is no way of bundling the latest version of Safari with an App on iOS and Windows 8 is even more problematic.

The other thing that Ludei and indeed Intel XDK offer is technology that cross-compiles HTML5 Canvas into OpenGL(ES) for Android or iOS. That means that if you are wrapping an HTML5 Canvas into a Native App then it makes far more sense to cross-compile it into Android or iOS native code. Ludei claims to have the fastest accelerated HTML5 Canvas, but Intel acquired similar technology from AppMobi.  When Web Components become more widely supported then it would appear to be the next candidate technology to be cross-compiled into native code.

Oracle offers ADF Mobile which combines a Java VM with an HTML5 presentation tier, the benefit being totally portable plug-in extensions. Unfortunately when I looked into the solution there was no backward compatibility with existing PhoneGap plug-ins. Ludei has been clever here and made sure that PhoneGap plug-ins are explicitly supported and I am sure Famo.us will follow.

I had a chat with the W3C recently and asked if there was likely to be any standardisation in the following spaces:
  1. Control over hardware acceleration
  2. Mixing native code and HTML5
  3. Pure HTML5 deployable Apps
The answer was that only the latter is being standardised and they are not seeing much uptake outside of Firefox OS. The manifest specification is being thoroughly updated through and this will see improvements to both HTML5 Cache Manifest and its future replacement called ServiceWorkers – all to be discussed in my next Blog (‘The future of HTML5’).  They also told me that the Windows 8 App Store allows you to host pure HTML5 applications.

This means that outside of standardisation, we are going to need to be looking at a new gold standard for HTML5 based Hybrid Apps as follows:
  • A Chrome 33/34 WebView for advanced performance, feature set and portability
  • An HTML5 Canvas to OpenGL(ES) conversion for Native Apps
  • PhoneGap backwardly compatible for existing plug-ins
These are Peter Roger's personal observations and opinions and don't necessarily represent his employers.  You can contact Peter Rogers directly at Peter-2.Rogers-2@cognizant.com.

*************************************************************
Kevin Benedict
Senior Analyst, Digital Transformation Cognizant
View my profile on LinkedIn
Learn about mobile strategies at MobileEnterpriseStrategies.com
Follow me on Twitter @krbenedict
Join the Linkedin Group Strategic Enterprise Mobility
Join the Google+ Community Mobile Enterprise Strategies

***Full Disclosure: These are my personal opinions. No company is silly enough to claim them. I am a mobility and digital transformation analyst, consultant and writer. I work with and have worked with many of the companies mentioned in my articles.

Kevin Benedict's What's New in HTML5 - Week of August 26, 2012


Last week I downloaded the new native application version of Facebook mobile for my iPhone.  I must admit that I like the native application far better than the HTML5 version.  The HTML5 version was jerky, slow to load, and scrolling up and down the news feeds was rough.  The native version is much smoother and faster.  The winner of the Facebook mobile challenge is definitely the native application version. 

Now for the news...

According to the article “HTML5 vs. Flash for Gaming and Internet” from Gamer Syndrome, HTML5 is quicker and simpler than Flash and its benefits greatly outweigh the limitations.  Read Original Content

Research from InformationWeek Reports reveals that 74 percent of organizations have or will build custom mobile apps, and 52 percent of those building native apps say that until HTML5 matures, they can’t get the functionality they need in a browser app.  Read Original Content

The Dolphin Browser beta has passed the second of three hurdles in the Ringmark test designed by Facebook.  The test checks support for a wide range of HTML5 features. [Kevin Comment] this may no longer be relevant.  Read Original Content

SkyMotion has launched an HTML5-based web app that uses geolocation, radar observation, motion tracking and other technology bring the user precise up-to-the-minute knowledge of precipitation at their exact location. [Kevin Comment]  I like this! Read Original Content

Is HTML5 replacing the App Store?   While falling short on delivery of heavily animated or specialized experiences the user may expect, HTML5 brings a cost savings in both development and distribution.  Read Original Content

At the New York Times’ recent TimesOpen HTML5, Apps and JavaScript event, Terry Ryan from Adobe presented an update on what Adobe is doing around HTML5.  A slideshow of his presentation, “Adobe & Modern Web Development”, is available here - http://www.slideshare.net/tpryan/adobe-and-modern-web-development  Read Original Content

Fort Payne Alabama’s Times-Journal has unveiled a new HTML5-based mobile website, stating they used HTML5 “to produce a website that is optimized for mobile devices without the limitations that have prevented users from being able to look at certain sites on smartphones or tablets”.  Read Original Content

Web video consultant Lisa Larson-Kelley presents a high-level view of Flash, HTML5, and native app solutions, along with a clear strategy for playback across the widest variety of devices and platforms in this video, also downloadable as a PDF file.  Read Original Content

Adobe’s Muse HTML5 tool has been upgraded with added capabilities for planning, designing and publishing original HTML pages with built-in support for contact forms.  The upgrade also adds support for HTML5 animations created with Adobe edge.  Read Original Content

Transportation company Quality Distribution Inc., is utilizing HTML5 to enable employees and affiliates to access business applications via their mobile devices.  Read Original Content

Gartner’s recent Hype Cycle report (http://www.gartner.com/it/page.jsp?id=2124315) shows HTML5 currently climbing the “peak of inflated expectations”, then it’s forecast to drop into the “trough of disillusionment” before climbing the "slope of enlightenment" in five to 10 years.  IDC, however, reported in March of 2012 that 79 percent of developers plan to integrate HTML5 in one form or another into their mobile apps in 2012.  Read Original Content

Robert Reinhardt of VideoRx provides a tutorial on “How to Optimize Video for HTML5 and Flash” in this video that can also be downloaded as a PDF file.  Read Original Content

Centigon has introduced the new version of its GMaps Mobile HTML5-based business productivity app for Apple’s iPad.  Read Original Content

w3schools.com provides free online tutorials on HTML5 features, elements, forms and more.  ReadOriginal Content


*************************************************************
Kevin Benedict, Mobile Industry Analyst and Mobile Strategy Consultant
Follow me on Twitter @krbenedict
Join the SAP Enterprise Mobility Linkedin Group
Full Disclosure: I am a mobility analyst, consultant and blogger. I work with and have worked with many of the companies mentioned in my articles.

Interviews with Kevin Benedict