CocoonJS Enables Android Wear HTML5 App Development

Google announced Android Wear this year, a new Android OS version suitable for wearable devices (Google Glass and smartwatches for now). Of course, Ludei right away started to wonder what kind of HTML5 execution capabilities will be available in such interesting devices. A couple of weeks ago, we purchased several Android Wear watches and begin to perform some tests over them. The first thing that we noticed was that at least this initial version of Android Wear does not come with a system WebView. It kind of makes sense as it is a very constrained environment and webviews are very resource demanding. Every attempt to execute a full fetched web environment on Android Wear Smartwatches has shown really low performance. Still, we wanted to see HTML5 running on a Smartwatch and how a good of a fit our highly optimized Canvas+ technology could be for Android wear. Our results were really encouraging as Canvas+ works amazingly well on these devices. Check out the following video that shows some HTML5 canvas apps and games running on Android Wear!

Of course, some minor modifications had to be done both to the technology and our cloud compiler, but we are more than happy to announce that we have enabled a new compilation target inside the CocoonJS Cloud Compilation System so any developer inside our community can test it. As far as we know, CocoonJS is the only technology that allows to deploy hybrid HTML5 applications for Android Wear even supporting WebGL! This is just an initial testing environment that allows you to build Android Wear applications but there are some initial limitations:

  • Do not add ad services. These services use the system webview to show ads and as we mentioned, Android Wear does not have a system webview.
  • Although you will be able to install the resulting APK on your smartwatch, we need to work on ways to better integrate the Android and Android Wear experiences. Please, use this initial builds for testing purposes.

If you want to test it, you need to make sure your app works on our Canvas+ environment. You can test it using the CocoonJS Launcher for iOS on iTunes, GooglePlay or Amazon. Then, just go to the CocoonJS cloud compiler, create or select an existing project, go to “Compile Project” and you should see the new target “Android Wear”.

Screen Shot 2014-10-23 at 12.44.03

Once you select the target, as it happens with any other CocoonJS compilation, a simple APK will be built in our cloud service, similar to the GooglePlay, OUYA or Amazon APKs, and it will be sent to your email account, but this one completely prepared to be executed on a Android Wear device. Connecting to Android Wear devices is similar to any other Android device as you will need to activate the developer options in the device and allow USB debugging. 

Enjoy testing your games and apps on an Android Smartwatch!

CocoonJS Latest Releases

New versions of some components of CocoonJS are ready. Please, share with us your comments about these releases. Your feedback is important to find bugs and determine next improvements. Enjoy!

Core v2.1

All platforms

  • Implemented custom Keyboard handling so users can enter text directly into the app, without popping up a dialog.
  • Cordova support is now always available for all platforms and environments in CocoonJS.

iOS

  • Added the new CocoonJS WebView+ for iOS 8 based on the new WKWebView (Only for 32-bit devices at the moment).
  • Fixed iOS 8 orientation and layout issues.
  • Drop iOS 5 support.
  • Updated the following third-party services
    • FacebookSDK.framework (3.19).
    • Google Play Services (3.0).
  • Fixed bug where reloading with an open websocket made the app crash.
  • Fixed bug where sending a score to GameCenter could cause a crash in poor-quality networks.
  • Fixed bug where after a reload, the system WV was being loaded instead of the WebView+.

Android

  • Added the option to compile Canvas+ projects for Android Wear.
  • Added support for the new ART Java virtual machine.
  • Fixed bug where making a webview call forwarding replaced the HTML body with the returned value in some Android versions.
  • Alert dialogs buttons behavior was not consistent across Android versions. Fixed.
  • Fixed rare case where the webview was being added twice.
  • Fixed negative values as notification ids.
  • Fixed case where webview would remain black after load.

Services

  • Updated the following third-party services
    • Google Play Services (5.0.89)
    • MoPub (3.1.0)
    • AdColony (2.2.4)
    • AdMob (6.12.0)
    • Chartboost (5.0.1)
    • Greystripe (4.3)
    • InMobi (4.5.1)
    • MillenialMedia (5.4.1)
    • Parse (Android: 1.6.0, iOS: 1.4.0)
    • iAd
  • Fixed rare crash when using local notifications.
  • Fixed type cast error showing in the console when sending a push notification.

Canvas+ v2.1

  • Added 8 WebGL extensions:
    • WebGLVertexArrayObjectOES
    • WebGLCompressedTextureS3TC
    • WebGLCompressedTexturePVRTC
    • WebGLTextureFloat
    • WebGLTextureHalfFloat
    • WebGLTextureFloatLinear
    • WebGLTextureHalfFloatLinear
    • WebGLTextureFilterAnisotropic
  • Fixed ambiguity when getting the window.location.port value.
  • Added NPOT texture support for Canvas2D.
  • Added a mechanism to discard seldom-used textures when the app receives a memory warning, to keep Canvas+ working even if the app loads more images than fit in memory.
  • Added a lazy-loading mechanism so images can be loaded on first use instead of when the src attribute is set.
  • Fixed rarely-occurring deadlock when pausing audios.
  • Fixed issue with the audio system not being ended correctly if the audio thread was locked.

WebView+ for Android v2.2.0

  • Updated to Chromium 36.0.1985.143.
  • Fixed unnecessary creation of shell additional instance.
  • Fixed cache mode.

See on github.

Plugins v3.0.4

See on github.

Launcher v2.1

  • New UI for both Android and iOS versions.
  • Added filename/URL search mechanism.
  • Added Favorites panel.
  • The Android Launcher now allows navigation through the whole device file system and loads not only .zip files but entire folders too.
  • Improvements to the debug service usability. Also, new error/warning reporting icons.
  • Restructured settings dialog.
  • More stable architecture. The launcher will keep working even if CocoonJS has a runtime problem.
  • Fixed several problems on Android 2.3.
  • Android launcher now allows canceling the app load process.

CLI v1.0.0-0.5.0

  • CocoonJS serve now has livereload enabled by default.

Known issues:

  • Livereload feature not work in system webviews with no websockets support.

See on github.

The End Of The Wrappers? I Don’t Think So!

It’s official: HTML5 is hot once again. For the past year, many of the wishes that all HTML5 developers have been waiting for have finally come true. All major browsing technologies support the main HTML5 features that make this technology a great option to develop beautiful desktop sites and compelling mobile apps. The latest addition to the list of iOS 8 with its official support for WebGL and improved webview called WKWebView with Nitro JIT acceleration, has been widely applauded by the community. And there are plenty of other reasons to be happy if you are an HTML5 developer, as the runtime environment that will run your app or game is a major issue that has been holding back the widespreading of the web as a major development platform (specially on mobile) for the last years.

There are many articles out there around performance benchmarks of the current browsers. Chromium based solutions for Android, Internet Explorer supporting the main HTML5 specifications (and auto updating itself quite regularly), plenty of great app development frameworks, … the list of good news is long. And here at Ludei, we are glad that, finally, all the pieces are starting to come together. But (there is always a but ;)), we have been reading much about a concept we do not agree with, and is the apocaliptic calling to “the end of the wrapping technologies” for mobile web applications. Ludei has been providing great tools and technology for HTML5 developers for the last couple of years.

Ludei’s developer community has grown strong to 50,000 developers and more than 4,500 apps published on mobile markets. We are going to continue to provide a great development experience and the best tools and runtimes as long as they continue to come out to the market. But there is a reality we still know about: building compelling mobile web apps is not simple. And we are not just talking about developing the app itself. Some frameworks are getting mature, some are starting to show their potential, but there is a detail worth mentioning: the mobile space is not the same as desktop web app development.

  1. First of all, mobile users are used to and feel comfortable with app stores, so they want apps. Building an app is not a major issue, but still, lots of web developers do not want to face all the hassle of installing native SDKs, compile applications and moreover, update multiple tools to be able to create their final mobile apps.
  2. But not only this, successful apps need access to native SDKs and mobile features that may vary from one platform to the other, or even from one store to the other. We are talking about in-app payments, ad networks, push notifications, social network SDK integrations, etc.
  3. Additionally (and sadly), there is still not one runtime environment solution that fits all and not plenty of good tools to test and debug apps on mobile. At Ludei, we have developed our own HTML5 runtime environments (Canvas+ and WebView+) and we also provide access to use the system web browsing technologies. This way, developers can choose what works best for them depending on their app. Even our canvas only technology, Canvas+, has plenty of advantages that some other technologies do not have for some type of apps (mainly games): low footprint, advanced memory management, extensions, accelerated physics, full control over the runtime (crucial for some customers), etc.

All these features are what wrapping technologies like Ludei’s CocoonJS or Apache Cordova provide: A productive way of testing, creating and monetizing HTML5 mobile apps. The bottom line is, that we are far from a mobile browser only app and game market. App stores on mobile will continue to exist, and actually, that’s the beauty of HTML5, your product can exist in both environments (as a browser based discoverable app and a mobile app store app). Mobile web app development is here to stay and grow and wrapping technologies are far from being at their end, moreover, in our opinion, they are at their infancy.

iOS 8 support added to the CocoonJS Cloud Compiler

After the official iOS8 release on September 17, 2014, we are proud to announce that the iOS 8 support integration is now completed and ready to use in the CocoonJS Cloud compiler for both CocoonJS and Cordova compilations.

iOS8 support is available for all the supported CocoonJS versions at 2.0.1 and all the available Cordova versions. We are removing CocoonJS 2.0.0 support after this update.

Regarding the CocoonJS Launcher, an iOS 8 ready version is under review by Apple and will be available in the AppStore in the next weeks. In the meanwhile, remember that you can still use a Custom CocoonJS Launcher.

So you can start compiling and uploading your apps and games to the Apple AppStore with iOS8 support now!

New CocoonJS Plugins are here!

We have been working hard on improving the CocoonJS plugins. The new plugins for CocoonJS are finally ready and we have been focused on making them easier to handle. By the way, we have also revamped and improved the documentation with more examples and useful links.

 

plugins-docs

To begin with, the main namespace for all the plugins has changed from CocoonJS to just Cocoon. Secondly, there is a new namespace organization and some plugin functionalities that before were included inside the App namespace, are now distributed among them. This is a more detailed list of the new namespaces:

  • Cocoon.Camera: It represents the CocoonJS camera plugin API.
  • Cocoon.Device: All functions related to the device.
  • Cocoon.Dialog: Dialog functions (prompt / confirm).
  • Cocoon.Motion: All functions related to the Accelerometer and Gyroscope.
  • Cocoon.Proxify: It proxies different functions of the WebView environment, like Audio objects and XHR.
  • Cocoon.Touch: It holds some functions to handle the touch events in both surfaces (Cocoon & WebView).
  • Cocoon.Widget: It holds the WebDialog widget, which essentially shows a Webview on top of the CocoonJS layer.
  • Cocoon.Utils: It holds some different utilities.

Additionally, note that Construct 2 plugin will be updated in order to use these new plugins.

Another important change from the old extensions is the new event handling system, based on signal events.

Below there are several examples about how to use the new plugins:

Cocoon.Camera:
[code lang=”javascript”]
Cocoon.Camera.start({
success : function(stream){
ctx.fillRect(0, 0, w, h);
ctx.drawImage(stream, 0, 0, w, h);
},
error : function(){
console.log(“Error”, arguments);
}
});
[/code]
Cocoon.Widget.WebDialog:
[code lang=”javascript”]
var dialog = new Cocoon.Widget.WebDialog();
dialog.show(“http://www.ludei.com”);
//This dialog will close after 15 seconds.
setTimeout(function(){
dialog.close();
}, 15000);
[/code]
Cocoon.App: On application suspended event.
[code lang=”javascript”]
Cocoon.App.on(“suspended”, function(){
console.log(“The application has been suspended”);
});
[/code]

The new CocoonJS Plugins can be found at Github and, in order to improve them faster and to receive important feedback from our users, everyone can contribute to a better documentation by doing a pull request.

The new CocoonJS Plugins are published in beta and the old ones are in a deprecated state. Consequently, we will stop developing them.

We really hope you will benefit from this new structure of the plugins and the improved documentation.

CocoonJS Updates For Construct 2 Developers

Ludei has been for several years now serving as a game native hybrid HTML5 app building system for many Construct 2 (and other frameworks) users. A big number from our more than 42,000 developer community have used CocoonJS successfully to release final products to the stores, hundreds of them made with Construct 2. We have provided a good platform for many, but we also understand CocoonJS might not have worked as expected in some situations. We would like to clarify this and help the Construct 2 and other game and app development platform communities to grow and be successful.

First of all, CocoonJS has evolved in the last months. We started focusing just on HTML5 games, where we saw the biggest needs, about 3 years ago. The HTML5 Canvas component was available in mobile browsers and native hybrid technologies (WebViews), but it was slow, fragmented and lacking many advanced features (and still does). We developed Canvas+, a cross-platform technology for iOS and Android that solved many of these problems. But this technology has been built from the ground up by Ludei (yeah, we built a subset of a browser from scratch!) and it wanted to fulfill only one purpose: render HTML5 Canvas 2D and WebGL applications on mobile. It did and does not render any DOM elements apart from Canvas. It lacks many features. We have added some over time (basic HTML parsing, XHR, WebSockets, gamepad, …) but still, it is not a complete HTML5 execution environment. We understand that it can be a hard environment to work with (specially at the beginning) as it limits the HTML5 APIs that can be used. But despite these limitations, it has been used by all our games and by thousands of projects from our developer community that have been successfully published to the Apple AppStore, GooglePlay, Amazon, Tizen, OUYA, etc. Big companies like Disney, Nickelodeon and others have used it too to accelerate and publish their games.

About a year ago we realized that a new trend of HTML5 execution environments were about to be launched. The iOS WebView was getting better in every aspect, even on the Canvas execution (still lacking WebGL until iOS 8, released last week). Google released the source code for the Chromium Project for Android and was announcing a possible inclusion of the runtime inside every new Android. The Cordova community also grew and it has become the de facto standard for native hybrid app compilation. We went back to the roots and tried to include these technologies and as a result, WebView+, the System WebView execution environments and the CocoonJS Cordova Command Line Interface were added to CocoonJS.

Now CocoonJS is not just Canvas+, a HTML5 Canvas 2D and WebGL execution environment, it is a complete set of technologies that developers can test and use in order to select the one that best fits their needs. We have also contributed the WebView+ (Chrome based) to the Cordova community with the CocoonJS Cordova Command Line Interface so anyone can build their Android and iOS (WebView based) projects on their own. Our Cloud Compilation System also provides the option to compile the Cordova project for you, so you do not need to install nor update any SDKs locally.

Additionally, we made all of our CocoonJS Extensions available in any of these new environments (WebView+, WebView) too and of course, if you choose to use Cordova compilations, you can use any Cordova plugins.

Regarding the Construct 2 community specifically, as Scirra has hidden the CocoonJS export option from the latest release, and as we know there is a big part of the Construct 2 community that might still want to use our service, we are providing different solutions:

  1. The latest versions of Construct 2 hides anything related to CocoonJS by default. If you want to still get access to these features, you can do so by specifying to “show deprecated exports/plugins” by right clicking in both the Construct 2 export options and the Construct 2 plugins respectively.

image_02

image_00

  1. A couple of months ago we announced that CocoonJS Canvas+ was compatible with the regular Construct 2 HTML5 Web export option. This means that if you export to the HTML5 Web and still be able to test and deploy Canvas+ based projects. There might no be fullscreen mode when WebGL is enabled in this type of export but if you disable WebGL in Canvas+ and use it’s fast Canvas 2D acceleration, your game should be correctly adapt to the whole screen. Although we recommend option 1, we are also mentioning this possibility for all those developers that do not have the export to CocoonJS option.

image_03

image_01

  1. Remember that CocoonJS is a platform that provides different runtime environments. If you want a phonegap like experience, but still use an improved WebView on Android, you can use our WebView and WebView+ options and compile your Construct 2 HTML5 Web export using both the CocoonJS Cordova Command Line or the CocoonJS Cordova Cloud compiler.

All these runtime environments are available to be tested using the CocoonJS Launcher application for iOS, GooglePlay and Amazon, a great testing tool for your projects.

And we are still working on improving our platform and these are some of the features that will soon be available.

  • We are working hard to be even more Cordova compliant and provide a seamless integration of all our runtime environments in a simple to use cloud compilation service.
  • The cloud compiler will be exposed through a REST API so third party development frameworks can easily access it and provide a unified experience for their developers.
  • A new version of the Construct 2 plugin will be available soon with a new plugin id.
  • A new iOS runtime environment option will be available: WebView+, based on the new WKWebView iOS 8 component. We are experimenting with it right now.

We fully respect Scirra’s decision to hide the CocoonJS related options. Still, we think we need to remember and correctly communicate that CocoonJS is no longer just a Canvas+ execution environment and that still can provide a great final product native hybrid app compilation for many developers (even using Canvas+, used by many!) from Construct 2 or any other HTML5 development framework. We hope to see more and more WebView and WebView+ projects being compiled using CocoonJS!

The future of the CocoonJS Cordova Command Line Interface (CLI)

A couple of months ago we published our CocoonJS Command Line Interface (CLI) that let’s you compile Cordova based projects, which benefit from the Webview+ runtime. Today we want to share with you an approximation of what’s coming to the CocoonJS CLI in the following months.

One of the main tasks we are currently developing is the integration of the command line with our cloud. This will allow you to download projects locally and upload them back to Ludei’s cloud compiler, so the compilations you make with the CLI use all the project data you already have stored in the cloud compiler (e.g., your Facebook tokens, MoPub ad units…).

Another exciting change coming to the command line is the possibility of using Crosswalk as an alternative runtime environment. Crosswalk will join the current Webview+ and Canvas+ as another execution environment for applications made with Cordova/CocoonJS. The main benefit of using Crosswalk is that it has Android binaries for x86, so Android devices running Android 4.x x86 enjoy all the features of a modern browser specifically suited for the underlying CPU.

We will also update the HelloWorldApp/DeviceReady demo that is created when you make a project using “$ CocoonJS create”, so that this new sample app will use different features of the Webview+/Crosswalk to demonstrate the potential of these runtimes.

But remember that you can already benefit from the following features with the current version of CocoonJS CLI.

Already available features of the CocoonJS Cordova CLI

  • The CocoonJS-CLI is agnostic to a specific cordova 3.x version.
  • The Webview+ provides a chromium-based environment for your HTML5 hybrid apps. It will deliver all the power of Chrome and the same look and feel across every Android device on the market. As we promised, Android fragmentation is over!
  • Remote debugging

At this point, these are the tasks that are already in development and you’ll be able to use in the following months.

Roadmap for the upcoming months

  1. Integration with the Ludei’s file system API. (which let’s the user upload it’s local project and compile it in the cloud). No more hassle of setting up and updating the Cordova environment locally.
  2. Different execution environments support (either Canvas+, WebView+, Crosswalk or whatever environment may come in the future) thanks to the compilation in the cloud.
  3. Cloud project management from the command line.
  4. Live reload. This is a great feature that will allow that by just saving a source code file on the server, let the CocoonJS client be aware of the change and update itself “automagically”,  saving tons of time during development.

It seems that the CocoonJS Cordova Command Line Interface will bring many brand new features to our platform, what do you think?

Introducing the CocoonJS Command Line interface and webview+ plugin for cordova

The main improvement of CocoonJS 2 was providing cordova compatibility to Ludei’s cloud compiler. With the cordova compiler, we also released the webview+, a chromium-based webview for android 4 and higher. You can use it directly from our cloud compiler.

The webview+ provides a chromium-based environment for your HTML5 hybrid apps. It will deliver same look’n feel across every android device on the market. As we promised, Android fragmentation is over!

The great news is that we want to share this development with the HTML5 and cordova community, so we are doing a public release of the main tools of our cloud compiler: the webview+ plugin for cordova and CocoonJS Command Line Interface.

The webview+ plugin for cordova enables your cordova-based apps to include a webview+ to run as the execution environment for your app. This plugin can be included in your current cordova android projects. What does this plugin provide?

  • Implements the cordova plugin API, so it interacts seamlessly with any cordova app
  • Webview+ provides remote debug for any cordova project. JS instrumentalization and live code changes, dynamic breakpoints, and all the power of the chrome developer tools
  • WebGL support for any android device running android 4 and higher.

Interested? You can get more info here. The project is hosted in our github here.

Other contribution we want to share with the community is the CocoonJS Command Line Interface. Standing on the shoulder of giants (cordova-cli), we’ve developed a Command Line Tool that eases the process of dealing with webview+ in Cordova projects. But, why another fork from cordova? Why another open source command line interface?

  1. Currently, installing webview+ manually is a bit tricky and the cocoonjs-cli eases the process, apart from reporting more meaningful error logs
  2. Cocoonjs-cli is cordova compliant, so the only difference you’ll notice is the command name, moving from cordova to cocoonjs
  3. The cocoonjs-cli also will be one of the remote interfaces for the cloud compiler. The cloud compiler enpoints are currently under development. We want to empower our users with tools that eases the process of managing their cloud projects
  4. Because we use extensively open source software and it’s time to give this love back to the community

Get more info abut the Cocoonjs-cli here. The source code is hosted in our github.

We encourage every HTML5 developer to download it, install, use, test and find bugs. We really would like to create a big community around these new projects.

Hail to open source!

 

Web starter kit running on webview+

Last week Google released their last creation to improve the web development: the web starter kit. This project is a set of tools, good practices and tutorials to create good web experiences. You can get more info about the web starter kit here.

At Ludei we love every project that helps the community of developers to create awesome HTML5 apps. We’ve tested internally, and we’re passionate on this set of tools. Unfortunately, they’re not supporting older version of Android’s webview.

Ludei’s mission is to help HTML5 community to create awesome apps and games. Fortunately, some time ago, we released the webview+, a custom webview based on the chromium project. Webview+ is available from our cloud compiler for any android  device running version 4 and higher.

We have already tested it in our devices using CocoonJS launcher with the webview+. The result can’t be better.

web

As you see, the web starter kit is fully supported on webview+. Yay! ^_^

We encourage every web app lover to use it, and adopt it for their HTML5 apps, since we fully support this new toolset.

JavaScript Emulators

Here at Ludei we are always trying to be aware of all cool technologies, frameworks and products out there. Recently, we have bumped into a couple of curiosities: JavaScript bases emulators. An emulator is a piece of software that emulates a piece of hardware. In this case, and as CocoonJS has a strong emphasis on games, we have been playing around with game console emulators. We have found these interesting projects (among others, check out the end of this post):

  • Miracle: A Sega Master System emulator in JavaScript and HTML5
  • JSNES: A Nintendo Entertainment System emulator in JavaScript and HTML5.
  • JSSMS: A Sega Master System emulator/compiler in JavaScript and HTML5.

Since the eruption of HTML5, javascript based game emulators started to make more sense. You need to think that any emulator will have to work on a pixel level and the HTML5 Canvas element, finally provides this functionality for a web browser based app. We were curious to see if some of these JavaScript based game emulators would work inside Canvas+. As Canvas+ is not a full browser, just a couple of simple modifications on some DOM related code made them both to work. We have also added a virtual joystick to be able to play on a touch base mobile device (thanks Austin to the GameController project from Clay.io). As we mentioned, this has been just a curiosity as the JavaScript performance is not good enough on a mobile device to make these projects playable (it is nothing related to graphics but to the JavaScript based emulation). Only JSSMS, as it is taking a different approach by compiling emulated code into JavaScript, has improved performance, but still, overall performance depends on the underlying JSVM and hardware among other factors.

Here is a video (as said, performance is not great due to JS emulation, not graphics):

We have found other interesting projects we haven’t have time to play around with still.

  • A great list of JavaScript Emulators by Frederic Cambus.
  • JSMESS: Still a beta work in progress Emscripten port of the MESS emulator to JavaScript. This ambitious project aims to have hundreds of device emulators on the web.
  • XNES: A Super Nintendo emulator in JavaScript and HTML5.
  • JSLinux: A Linux Machine boot and command line emulation in JavaScript.

Enjoy this retro-experience! 😉