Tuesday, March 19, 2024

Leverage Your HTML5 Savvy to Build Commercial, Cross-Platform Apps and Games

This article is sponsored by Intel, but was independently written by the author.

The software development industry has always provided hope for the independent developer and small development shop. Indie success stories abound from the early days of the PC and more from the early days of the Web. But today there’s more opportunity for independents than ever before. Why? Two reasons:

New platforms and audiences

  • Mass adoption of sophisticated phones and tablets have dramatically increased the audience for apps of all kinds – from casual games to specialized medical applications.
  • The unprecedentedly low price-point for apps has made new software purchases practically an every-day occurrence for many users.

A lower barrier-to-entry into the market than ever before

  • App stores handle all the burdensome details of purchase processing and distribution.
  • In-app advertising and up-sell features are easily implemented and handled automatically by third parties.
  • Pre-packaged advertising and app promotion opportunities exist for all budget levels, from free-but-effective guerilla tactics to complete launch bundles provided by professional advertising firms.
  • Numerous options for app development tools and libraries to fit the requirements of your project.

It’s that last item that’s closest to the developer’s heart. The development environment you choose has the potential to be the biggest source of pain or the greatest key to your success. And that’s what I want to zero in on in this article.

Know Your Options

The explosion of interest in phone/tablet apps has triggered a corresponding explosion in software development tools and environments. In the early days of the Apple iPhone, mobile app development meant learning Objective-C and programming on an Apple Mac. And native application development is still a viable option for some projects. On the other hand, Web application development offers a very different approach and comes with its own benefits and downsides. More recently a variety of hybrid-app development options have arisen to fill the gap between native and Web development.

Going Native

Creating a native application means writing code specifically for the target mobile platform, using the platform’s recommended language and APIs.

Apple has been particularly restrictive in this, making it very difficult to use anything but their required hardware and software setup to develop applications that are distributed through the App Store. Specifically, that means an Apple Mac running the XCode development environment to develop Objective-C applications.

Google Android native app requirements are not quite as strict. You can develop on Linux, Mac OS X or Windows. Apps are written in Java using the Android SDK, which includes a debugger, libraries and an emulator. Google supports the Eclipse IDE, but it’s also possible to use IntelliJ IDEA and NetBeans IDEs.

Microsoft Windows 8 Apps may be built with JavaScript and HTML. Or for a more traditional, statically-typed environment, you can use Visual Basic, C# or C++ together with Microsoft’s XAML user-interface language. Finally, for the ultimate in speed, power and control you can use C++ with the DirectX user interface library. Whatever language you choose, the development environment is the same: Microsoft Visual Studio 2012.

So why would you want to go the native-development route? There are a few important benefits:

  • Your application has full and direct access to all the native features of the hardware including the accelerometer, multi-touch input and the camera
  • You get complete control of implementation details
  • The final build will have the fastest possible performance for graphics, network access and all the other device components

Sounds ideal! But there are important cons to consider.

  • As you can see, each platform has its own – different! – language and API requirements. That means you either bet the farm on the future of a single platform or you go in prepared for application ports that require rewriting from scratch.
  • Depending on your background and the platform you want to target, you may have a steep learning curve. Many would-be iOS developers have been put-off by the prospect of Objective-C.
  • Development time for native app development projects can be long, due to the often-low-level programming language and arcane APIs. And in the mobile app world, time-to-market is always a critical factor.

Mobilizing the Next Web Revolution

But all current mobile platforms have Web browsers, don’t they? Why not just build Web applications that are customized to work well with a touch interface?

Of course it’s not as simple as that. Some hurdles:

  • Adjusting to limited and widely varying screen sizes
  • Making the Web application responsive to common gestures
  • Implementing the kind of UI elements that are common on mobile platforms
  • Making use of mobile hardware capabilities, like geo-location

Fortunately, the great demand for alternatives to native app development has spawned a wealth of JavaScript libraries to meet all these needs.

Given such rich JavaScript library support, the mobile Web app option has important benefits:

  • Provides a much faster cross-platform development which  makes it possible to write the application once and run it on a wide variety of mobile platforms
  • Leverages the language and toolset that many developers already know

That addresses every one of the issues with native development! Unfortunately we’ve also lost some of the benefits we had with native development. Mobile Web app downsides:

  • No generic HTML5 App Store presence
  • Purchasing access/upsell options must be handled by the application
  • Despite JavaScript library support, access to native features like multi-touch, accelerometer and camera will be more limited – capabilities will likely include a common subset of features provided by all platforms
  • Execution speed – HTML5’s canvas and other media features, while powerful, don’t meet the performance requirements for many media-intensive apps and games – especially when running in phone and tablet browsers

Given that a tremendous number of apps require graphic/multimedia capabilities, the last one is a deal-breaker for many projects.

Reaching for the Best of Both Worlds: Intel XDK

The limitations of native apps and Web mobile apps have inspired some developers to figure out how to cut through the impasse and find a way to get fast development with a familiar language and good graphic performance.

Intel XDK is a set of tools and libraries that represent a new class of hybrid applications. It leverages HTML and JavaScript technologies, but then compiles the final app into an executable that’s indistinguishable from one that was native-built – and can be submitted to any platform’s app store.

The XDK provides quite a number of libraries and technologies. I want to highlight a handful of them that will really make a difference for your projects.

App Build and Deployment

Intel XDK applications don’t simply run in a browser. Although you use standard HTML5 technologies, the end result is compiled into a native executable for the platform(s) you choose. With a single source, you can generate apps that work on iOS, Android, Windows 8 App, Facebook App and Kindle. This assures that you get much faster time to deployment because your app is ready to be submitted to the various app stores.

App Dev Center

Leveraging Mobile Hardware Features with the JavaScript API

You won’t be a serious competitor in the app market unless your app integrates deeply with the features provided by mobile platforms. Intel XDK meets this challenge with their JavaScript API. It provides access to the accelerometer, camera, geo-location, audio/video player, notifications and more. Best of all, this single API reaches across many mobile platforms.

The App Game Interface Accelerated Canvas

Even with a compiled application, the standard HTML5 canvas doesn’t provide a serious gaming platform on mobile hardware. That’s where Intel’s App Game Interface canvas comes into play. It re-implements a subset of the HTML5 canvas from the ground up with dramatically increased speed approaching and often meeting the performance of applications written directly in Objective-C, Java or .NET.

Strong Support for Game Development

Game development is challenging but you can be a lot more productive with the right framework. Intel XDK provides three important components:

  • ImpactJS is a JavaScript library that provides a programming structure and a library of functions that ease common game development tasks. (However you do have to purchase a license to develop with ImpactJS for $100.)
  • playMobi provides a standard implementation of common game elements like achievements, leader boards, player and social objects.
  • Box2D is a popular 2D physics engine to support creating games like Angry Birds. For regular and irregular shapes, you can assign density, friction and other properties that determine how it interacts with other objects and the world.

Quick and Powerful On-Device Testing and Debugging

All mobile development environments provide an emulator for quickly running your code to test as you’re coding. And they all provide some way of copying the app to a real-world device to get the real look and feel. However, it’s not always easy to move an app to a device and get it working – especially on iOS. Fortunately the XDK has found ways around the common issues and makes on-device testing almost as quick and easy as using the emulator. This greatly aids your turn-around cycle, especially for cross-platform apps. And it assures you find device-specific issues earlier in the process.

Installing Intel XDK (using Windows 8)

The Intel XDK is free to download, install and use. But before you download it, be sure you have Java (version 6 or 7) installed. You’ll also need the Google Chrome browser. The Intel XDK development environment runs locally, but it uses Chrome to present its UI.

http://java.com/download

http://google.com/chrome

Because the development environment is Java/Chrome-based you can develop on Windows, Apple OS X and Linux. The XDK install process is much the same as described here, but specifics are provided on the Intel site.

With the requirements in place, head to http://intel.ly/HTML5XDK and click Go to the XDK Download Page. There you’ll download a file called XDK.jnlp. Run it. You may see an install permission window. If so, check the Always trust… checkbox and then Run.

As the install progresses, you’ll be prompted to select the projects folder for Intel XDK.

Select Projects

Don’t just click Save here (as I did the first time I installed it). If you do each new project you create will create a new folder under Documents. Instead, create a new folder (using the folder icon on the top right of the dialog, third from the left). Call it IntelXDK Projects (or whatever you like) and then select that folder and click Save.

Now you’ll be required to sign in with an Intel XDK account.

Log In or Sign Up

Don’t have one? Just enter your email address and click Submit. Then fill out the New Account Sign Up form and click next. An account is required to use the Intel XDK – it allows you to easily make use of all the cloud-based features.

New Account

Once your account is created you may see several windows appear with tips, updates or announcements. Read through them if you like or just click close for now.

Finally you’re presented with the Intel XDK IDE.

XDK

The install process has added an Intel XDK icon to your Start menu/Start screen. To access the IDE again later, click the Start button on your keyboard, type XDK and hit Enter.

In the next section I’ll provide a quick overview of the IDE features you see here. Then in the following section I’ll show you how to create your first (actually useful!) application.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured