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:

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);
  }
});

Cocoon.Widget.WebDialog:

var dialog = new Cocoon.Widget.WebDialog();
dialog.show("http://www.ludei.com");
//This dialog will close after 15 seconds.
setTimeout(function(){
  dialog.close();
}, 15000);

Cocoon.App: On application suspended event.

Cocoon.App.on("suspended", function(){
  console.log("The application has been suspended");
});

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?

CocoonJS 2.0.2 is live!

The new version 2.0.2 of CocoonJS is live! You can read the full changelog here but take a look to the highlights.

75d29906-c26e-4e89-9077-847c99fb632f

Canvas+

  • Fixed the crash on Tegra-based Android devices like the Samsung Galaxy Tab 10.
  • Fixed texture corruption bug that affects Phaser based games using WebGL.
  • Other improvements in audio, DOM node management, camera speed, computeStyle, etc.
  • More

WebView+

  • Updated the WebView+ to the latest stable Chromium version. Fixes some crashes, improves WebGL support, etc.
  • Other stability bugs fixed.
  • More

CocoonJS Launcher

  • Fixed the support for Android 2.3.
  • Settings are more homogeneous both on iOS and Android and are correctly stored between sessions.
  • Improved URL handling. The final slash is no longer necessary for URLs to a folder (a more browser-like behaviour).
  • The URL history button on Android shows all your URLs.
  • More

Extensions

  • Added a new native share functionality. CocoonJS.App.share() inside CocoonJS_App.js.
  • The CocoonJS Extension repository now provides branches for previous CocoonJS versions.
  • Fixed several bugs and updated the SDKs in the ad extension for MoPub and AdMob.
  • Fixed bugs on social, notification and multiplayer extensions.
  • More

Download the launcher from App Store, Google Play and Amazon App Store. The version with 2.0.2 has been submited to Google Play and Amazon and are waiting for review. Enjoy!

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! ;)

 

CocoonJS In App Purchases are easier than ever in Kiwi JS

WE  apple-touch-icon-144-precomposed  KiwiJS

KiwiJS is a game development framework that uses JavaScript and HTML5. Ludei and the team behind it have been working to make it compatible with Canvas+ in CocoonJS. Their feedback has been invaluable and CocoonJS has improved much thanks to this collaboration, as we do with any other game engine out there.

 

Both platforms have been compatible for a while now but today we are pleased to announce that our friends over at Gamelab have just launched version 1.0 of their HTML5 game framework Kiwi.js and a much needed In-App purchasing Plugin for CocoonJS! What we found is that this new version of Kiwi is easy for developers to use, comes with a ton of documentation, runs fast and offers a lot of useful features. The In-App Purchasing Plugin (which comes with an example store fashioned off the Kingdom Rush store) allows users to sell their consumable game items to players and to create virtual currencies within their game. Also available for purchase is a Cartoon Particle Effects Pack that promises to make your HTML5 games pop! 

 

Kiwi.js founder, Dan Milward, says that while the ‘indies’ are a well catered for community, his company has identified a need for professional services that provide a higher level of customer support to the industry as a whole. “What we want to see is the HTML5 space taken more seriously and used to create serious games. Our pro add-ons, customer support model and IP partners will all go towards helping make this happen.”

 

For more information head over to the kiwi website.