HTML5 web app to native mobile package tools

[psygnus]

Hi everybody, i would like any info regarding tools that can package HTML5 web apps to native (preferably) and hybrid mobile apps (Android and iOS are the two platforms i would like to target).
My main concern is to find which tools can render canvas (WebGL also would be great) contents on a native OpenGL stage, in order to get the best mobile performance.

Now, from my research i found that only
- Cocoon.io (formerly known as CocoonJS)
can build and package a HTML5 Canvas (and WebGL) app to a native mobile (Both Android and iOS).
If you want to target iOS only you can also use
- Ejecta

I also realize that,
- PhoneGap, 
- The Crosswalk Project and
- Apache Cordova(?)
use WebView, which means that they package your app with a browser window, so performance wise, they are pretty similar with how your app looks when run in a mobile browser.

Some other tools, for which i haven't figured out on how they handle canvas/webgl objects include :
- Game Closure
- The Electron framework
- Intel XDK
- Appcelerator

So i would like any extra info, on other tools, or experiences using the aforementioned tools. Since i have never used any of it, i might have misundestood some things, so feel free to correct me, and expand the list if you will. It would be a nice reference for everyone.

Thanks and have a good one!

p.s. Literally any insight on the process of porting a web app to mobile is useful, especially anything about canvas performance on mobile.

[b10b]

I have experience with Intel XDK and find it to be an effective tool.  Like PhoneGap it is built on Cordova, and has the option to use Crosswalk on Android (or WKWebview on iOS) or not.  Therefore the big guns (accelerated-Canvas, WebGL, WebAudio) are considered available if the dependency is included, and potentially available if it isn't.  But (imo) nothing beats pure native so be sure to fully leverage whatever strategy is leading the motivation to make a hybrid app.

[psygnus]

Thanks @b10b for your info, exactly what i was looking for!

My current games rely only on hardware accelerated canvas, and have decent performance in mobile browsers, so I hope that they can get a slight performance boost that will make them acceptable in most devices.

Can you please elaborate a little bit more about the Intel xdk tool? Can I use my html/JavaScript/CSS code as it is? Or do I have to make any changes/additions?

 

[b10b]

Just now, psygnus said:

Can you please elaborate a little bit more about the Intel xdk tool? Can I use my html/JavaScript/CSS code as it is? Or do I have to make any changes/additions?

As-is should work if you have all the normal browser compatibility issues covered - e.g. expand to screen, touch event for iOS sound initialise, multiple font formats (or bitmap fonts), multiple audio formats etc.

So fully test in browsers on various devices before heading into XDK / Cordova.  Then think of it being a simple wrapper: specify an entry point (index.html) and asset folder and build.  Adding native device functionality (e.g. Ads, IAP) via Cordova plugins is where the fun pain will begin ... but that's not an issue specific to XDK, but one of the major drawbacks of an open plugin approach (documentation, support, compatibility and reliability are sporadic at best).

[bruno_]

I use cordova with crosswalk for my android games.

Crosswalk adds 18mb to the apk and 50mb to the installed game, but in terms of perfomance and compatibility is great.

I use visual studio community 2015, which is free for personal and small enterprise use (less than 5 programmers) and the development, deploy and debug is very simple.

[OkijinGames]

In term of performance and standard compliance (canvas rendering) I found that Cocoon.io stands much above the pack. The integration is almost seamless and transparent and it usually takes me less than couple hours to get any of my games running on their technology. If you are looking for great performance while preserving your original codebase as much as possible then Cocoon.io is really great.

Intel XDK was close in term of performance but at the time I used it it required too much change in the original code and that was defying the purpose of writing games using HTML5/Javascript to me so I have never used it again. Maybe they improved it in their new releases but haven't tried...

[psygnus]

14 hours ago, b10b said:

As-is should work if you have all the normal browser compatibility issues covered - e.g. expand to screen, touch event for iOS sound initialise, multiple font formats (or bitmap fonts), multiple audio formats etc.

So fully test in browsers on various devices before heading into XDK / Cordova.  Then think of it being a simple wrapper: specify an entry point (index.html) and asset folder and build.  Adding native device functionality (e.g. Ads, IAP) via Cordova plugins is where the fun pain will begin ... but that's not an issue specific to XDK, but one of the major drawbacks of an open plugin approach (documentation, support, compatibility and reliability are sporadic at best).

Great info, thanks again!

 

13 hours ago, bruno_ said:

I use cordova with crosswalk for my android games.

Crosswalk adds 18mb to the apk and 50mb to the installed game, but in terms of perfomance and compatibility is great.

I use visual studio community 2015, which is free for personal and small enterprise use (less than 5 programmers) and the development, deploy and debug is very simple.

Didn't know there was a cordova plugin for visual studio, i have the express version, maybe i have to upgrade to community, but that's good news!
 

1 hour ago, OkijinGames said:

In term of performance and standard compliance (canvas rendering) I found that Cocoon.io stands much above the pack. The integration is almost seamless and transparent and it usually takes me less than couple hours to get any of my games running on their technology. If you are looking for great performance while preserving your original codebase as much as possible then Cocoon.io is really great.

Intel XDK was close in term of performance but at the time I used it it required too much change in the original code and that was defying the purpose of writing games using HTML5/Javascript to me so I have never used it again. Maybe they improved it in their new releases but haven't tried...

Ok that's great info! 
May i ask how do you test/debug the apps made with Cocoon.io? Do they have some sort of cloud based vm emulators for Android and iOS? Do you download .apk and .ipa files and test them on your own devices? 

 

[OkijinGames]

1 hour ago, psygnus said:

Great info, thanks again!

 

Didn't know there was a cordova plugin for visual studio, i have the express version, maybe i have to upgrade to community, but that's good news!
 

Ok that's great info! 
May i ask how do you test/debug the apps made with Cocoon.io? Do they have some sort of cloud based vm emulators for Android and iOS? Do you download .apk and .ipa files and test them on your own devices? 

 

You can use the Cocoon Dev App. The default one allows configuration of several runtime options. The custom one will match all your cloud settings and both have console output and can load your game files from device or url so no need to recompile the APK/IPA for changes made in your sources, very useful for testing and integration.

Once everything is fine in the Cocoon Dev App, you can compile and download the binaries from the cloud to test on devices (if you upload and configure your Ad hoc / App Store keys on the cloud, cocoon.io will directly generate the IPA otherwise it will generate the xcode project which you can compile yourself).

[psygnus]

That sounds like a smart way to test apps, thanks for the info @OkijinGames!