CODEWITHSUNDEEP
dommobilehtml5-canvascordova
NickG77
NickG77

Reputation: 183

CocoonJs vs Phonegap for DOM apps...or just go Canvas and CocoonJs?

I'm getting ready to work on a children's book app. It will involve lots of illustrations and some animated menus, but nothing as crazy as a video game as far as animations. I'm trying to determine whether to use Phonegap and DOM or CocoonJs and Canvas.

I've been reading that Phonegap can slow down a DOM app that works fine in normal mobile browsers, while CocoonJs will speed up an app built in Canvas. But then I also read that CocoonJs now has something new that will somewhat support DOM elements.

My DOM test app works great in mobile browsers, but i can't test it in Phonegap on my iPad or iPhone bc of Apple's damn Developer fee.

Does anyone have experience with anything close to this kind of project? I'm considering doing it in Canvas just for the learning experience. But if anyone has any strong recommendations either way, can you please let me know your thoughts?

Thanks so much guys!

Upvotes: 3

Views: 7671

Answers (4)

lefnire
lefnire

Reputation: 2664

Also consider Famo.us, which is more popular and has a stronger showcase than CocoonJS. Here are my insights:

PhoneGap

Tried-and-true, FOSS. Lots of resources. Lots of plugins, albiet disparately and haphazardly maintained. Eg IAP and Ads - very likely plugins - aren't in core, are separately (and barely) maintained. No focus on performance, only x-platform compatibility.

  • Pro: Popular, tried
  • Pro: FOSS
  • Con: No performance focus
  • Con: Choppy quality in plugin user-land

CocoonJS

A Cordova wrapper (as PhoneGap is), which adds performance optimization via it's Webview+ or Canvas+ plugins. Canvas+ is for HTML5 canvas games, so it's not for you. Webview+ is basically a packaged Chromium-latest for better performance on Android versions that don't use it as their default browser (default browser is what's used for webview on Cordova). It doesn't work for Android <4, those will just use default webview. I've actually tried deploying a Cocoon app using Webview+, but I didn't notice a performance improvement. Either (a) there's some tweaking I need to do, (b) "performance improvement" (air-quotes). Additionally, it has standardized plugins that will work on both iOS and Android: Facebook, Ads, In-app Purchases (and more, but those 3 we need). In PhoneGap land, those 3 are 6 separate repos (1 per platform), maintained by 6 different devs - and not always well-maintained. On the flip-side, I keep reading that Cocoon premium (required to use their extensions) is $$$… like $50/m or so.

  • Pro: Theoretical better performance
  • Pro: Unified plugin experience (ads, facebook, IAP) - biggest pro IMO
  • Con: Price

Famo.us

The way I understand Famo.us: it's similar to Cocoon's Canvas+. Packages a performant webview for improved animation / canvas performance. It comes with its own JS-based DSL for building your app. I.e., unlike PhoneGap & CocoonJS where you just build a standard HTML/CSS/JS web app (allowing code-sharing with your other projects), Famo.us has its own JS framework for building the app. It has a very strong showcase: AirBnB, Yelp, etc. use Famo.us.

  • Pro: Performance
  • Pro: Free?
  • Pro: Strong showcase (Yelp, AirBnB)
  • Con: Not run-of-the-mill web dev (unlike CocoonJS, which lets you just drop in your PhoneGap app as-is)

I'd personally recommend (for your situation) to explore Cocoon's Webview+ setup.

Upvotes: 9

acheo
acheo

Reputation: 3126

if you are going the canvas route you may also wish to consider (open source) ejecta:

http://impactjs.com/ejecta

Upvotes: 2

Jarrod
Jarrod

Reputation: 9465

If you do it in canvas you can decide later if you wish to use PhoneGap or CocoonJS.

Personally I don't think your project warrents the use of CocoonJS although there is no harm in doing so.

Advantages of CocoonJS include near native performance. The downside is there are yet to release their pricing model - I believe it's currently free but you have a compulsary CocoonJS splash screen.

As for dom vs canvas: depends on your project. I personally prefer canvas as it's generally faster these days when moving lots of objects around. But in saying that, your project sound very static; which case you might want to consider dom (there are also a fair few dom page flipping tutorials out there).

Here is a canvas/PhoneGap project I did for my kids to use as a reference.

On a side note: You should be able to test your app with PhoneGap through Xcode's emulator.

Upvotes: 3

Karliky
Karliky

Reputation: 63

CocoonJS is great if you want to have a good performance in mobile, also you can use the WebView inside CocoonJS by calling an specific function like this:

<html>
<body>
    <script src="CocoonJSExtensions/CocoonJS.js"></script>
    <script src="CocoonJSExtensions/CocoonJS_App.js"></script>
    <script src="CocoonJSExtensions/CocoonJS_App_ForCocoonJS.js"></script>
    <script>
        CocoonJS.App.onLoadInTheWebViewSucceed.addEventListener(function(pageURL) {
            // Show the webview. By default, the webview is hidden.
            CocoonJS.App.showTheWebView();
        });

        CocoonJS.App.onLoadInTheWebViewFailed.addEventListener(function(pageURL) {
            console.error("Could not load the HTML file in the webview");
        });

        CocoonJS.App.loadInTheWebView("webview_index.html");
    </script>
</body>

Upvotes: 4

Related Questions