One of the challenges in the world of HTML/JavaScript/CSS app development is cobbling together your kitchen sink of frameworks, tools and other technologies. When you start looking around, it feels like there is an endless list of options, which is good and bad!  Recently, I’ve been gathering a list of what’s popular these days and thought it might be useful for others to share. If you see anything obvious missing, please let me know.  Thanks to the following for helping me put together this list: Ray Camden, Andy Trice, Philip Wilson, Christophe Coenraets, Piotr Walczyszyn, and James Brown.

In no particular order:

• Adobe Edge – HTML5/JS/CSS animation/interaction tool - http://labs.adobe.com/technologies/edge/
• Less Framework – CSS grid system/layout - http://lessframework.com/
• Less – alternative CSS syntax – supports OO-like syntax – referenced by Google at Google IO – used in many projects - http://lesscss.org/
• Saas – another alternative CSS syntax – similar to Less - http://sass-lang.com/
• Kendo UI Framework (mobile coming soon) - http://www.kendoui.com/
• Sencha - http://www.sencha.com/ - multiple products – including Sencha Touch, Charts, etc.
• JQuery UI - http://jqueryui.com/
• JQuery (core) - http://jquery.com/
• JQuery Mobile - http://jquerymobile.com/
• xui -minimalist JQuery-like framework - http://xuijs.com/
• zepto.js – minimalist JQuery-like framework - http://zeptojs.com/
• Backbone.js MVC framework for JavaScript - http://documentcloud.github.com/backbone/
• Underscore.js – Kitchen-sink utilities for JavaScript - http://documentcloud.github.com/underscore/
• Modernizr – JavaScript library to detect device features – very popular - http://modernizr.com/
• cubiq.org – home of iScroll, a very popular scroll/list lib - http://cubiq.org/
• appMobi – web-based dev with emulation, etc.  Also has an HTML5-framework - http://www.appmobi.com/
• LeviRoutes - lightweight routes framework for hooking in to HTML5 history - https://github.com/PaulKinlan/leviroutes
• Mustache – “logic-less templates” – mentioned by Google presenters at Google IO - http://mustache.github.com/
• Midori – JavaScript framework – JQuery-like with some unique features - http://www.midorijs.com/
• Knockout.js – JavaScript UI framework – implements MVVM pattern – recommended by Greg’s brother – popular - http://knockoutjs.com/
• AngularJS – MVC framework, two-way data binding, JQuery-compatible - http://angularjs.org/
• JSFiddle – online tool for doing lint/tidy/debugging - http://jsfiddle.net/
• HighCharts – fantastic looking charts - http://www.highcharts.com/
• ZingCharts – HTML5/SVG/VML and Flash charts - http://www.zingchart.com/#welcome
• AMCharts – JavaScript/HTML5-based charts.  They also offer Flash-based charts. - http://www.amcharts.com/javascript/
• HTML5 Boiler Plate – assist with cross-browser issues and other utils - http://html5boilerplate.com/
• Bootstrap, from Twitter - Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. http://twitter.github.com/bootstrap/
• Popcorn.js – HTML5/JS Media Framework - http://popcornjs.org/
• Three.js – JavaScript 3D engine - https://github.com/mrdoob/three.js and http://www.aerotwist.com/lab/getting-started-with-three-js/
• PhoneGap – http://phonegap.com
• PhoneGap Plugins - https://github.com/phonegap/phonegap-plugins
• Require.js – http://requirejs.org - RequireJS is a JavaScript file and module loader
• Brunch - http://brunch.io/ - A lightweight approach to building HTML5 applications with emphasis on elegance and simplicity.

Stuff needed:

• Small Phillips-head screwdriver
• T6 Torx screwdriver (I found one at the local CompUSA as part of a small computer toolkit that cost less than $15)
• New hard drive – in my case, it’s the Intel 320 Series 300GB SATA 3.0 GB-s 2.5″ Solid State drive
• SATA USB Docking station – allows you to access the new hard drive as a USB drive.  There are many alternatives.  I’ve had the Thermaltake BlacX for a couple of years.
• Software to clone hard drives.  There are a few options, but I use Carbon Copy Cloner.  This software is also good for creating bootable USB drive images of your main drive.  In a pinch, you could boot off your USB drive and keep going if your main drive crashes.
• Good directions on replacing the hard drive.  The iFixit site always has good directions.  For my early-2011 MacBook pro 15″, I used this page.

     

1. I cleaned up my existing hard drive.  Since I was downsizing (for the first time in my life!), I had to do some serious space making (long overdue).
2. I plugged my new SSD into the SATA USB Dock and connected it to my computer.
3. I formatted the drive using Disk Utility.  I used the same format as my main drive (Mac OS Extended (Journaled)).
4. I ran Carbon Copy Cloner and set it to copy everything.  This took about 4 hours on my machine.  During that 4 hours, I continued to work knowing that I would be slightly out of sync when the cloning process was complete.
5. After the clone was finished, I shut down Mail, Calendar, Eclipse, Evernote, etc., and ran the clone process again as an incremental update.  This took less than 30 minutes.
6. I then shut down the MacBook Pro, unplugged it and flipped it upside down to start the surgery.
7. I followed the instructions at http://www.ifixit.com/Guide/Installing-MacBook-Pro-15-Inch-Unibody-Early-2011-Hard-Drive-Replacement/5895/1 to swap the drives.  Depending on which model of MacBook you have, you may need to find alternative instructions.  For the early 2011 MacBook Pro 15″, it’s a piece of cake.  The only nervous moment was getting the bottom panel to snap off.  It takes some gentle prying.  Everything else was easy.  Since I was only replacing the hard drive, I skipped the step about disconnecting the battery.  (Do this at your own risk)
8. I put everything back together and booted it up.
9. After it was up and going, I turned off the hard drive sleep feature in SETTINGS, ENERGY SAVER (uncheck the “Put the hard disks(s) to sleep when possible” on both BATTERY and POWER ADAPTER).
10. All modern MacBooks have sudden motion sensors that halt the hard drive when motion is detected to save the drive heads.  Since this is a solid state drive with no moving parts, I turned off this feature using the following command in terminal: sudo pmset -a sms 0
11. I then went to disk utility and verified the disk, and ran the repair permissions function.  This is always a good idea after doing any drive swap.

• diskutil eject /dev/disk1  – ejects my 2nd hard drive which forces it to power down.  The drive is then unavailable until you remount it using the following command.
• diskutil mountDisk /dev/disk1  — mounts the drive again.

The OWC Data Doubler:

Simply modify the main Java Class of your PhoneGap Android project and set the loadInWebView property to true – then simply load your content using http:// instead of file://. If you try using http:// without setting the loadInWebView property, it will open the page in the device’s browser and your code won’t have access to the device APIs.

For example:

package com.gregwilson.gregpg1;

import com.phonegap.*;

public class GregPG1Activity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setBooleanProperty("loadInWebView", true);
        super.loadUrl("http://somewebsite/index.html");
        //ORIGINAL--> super.loadUrl("file:///android_asset/www/index.html");
    }
}

Since the web content is loaded and executed in the PhoneGap container, you can use any PhoneGap JavaScript APIs you desire just as if the code was loaded from the device. A few thoughts:

• This could actually speed up parts of the development workflow because now I can simply modify the HTML/CSS/JS and reload the page (once I add a reload button!). It avoids having to deploy the app over and over.
• This opens up a huge security hole. Imagine if someone could hack your web server and inject some new JavaScript. Since the JavaScript executes on the device, in the PhoneGap container, it could easily extract or delete your contacts, determine your location and many other devious things. Therefore, I would NOT recommend doing this for anything other than testing.
• There might be some interesting hybrid apps where some of the content is sourced from the server while other content is on the device, but I’m fairly sure this would not be a “best practice” without further code changes to avoid the security issues.
• Assuming this is possible on iOS, I’m fairly certain that your app could be rejected since you are loading external code (a no-no in iOS-land).

I’m not a PhoneGap expert (yet!), so feel free to correct me. I’m basically blogging as I learn!

The PhoneGap announcement at MAX 2011 really got a lot of people excited (including me!), and it raised a few questions about how it changes our jobs as evangelists.  PhoneGap gives us the means to build cross-platform apps with HTML5 with hooks into the device’s native APIs (see my previous post).  Having new things to show off to developers and customers is always a good thing, especially when this new thing lets us stretch our new HTML5 muscles on mobile devices.  I’m already playing around with using Adobe Edge to animate some interactions in a mobile app (stay tuned!).

As a technical evangelist talking to developers, having PhoneGap in my arsenal removes the  ”HTML vs Flash/Flex” religion  from the discussion and allows us to have a real conversation about which technology is the best solution for the requirements at hand.

Here’s an analogy:  If I worked for a company that sells tile flooring, it would be tough for me to convince someone that tile is the best choice for a particular room because they will expect me to say that tile is best for everything.  Conversely, if I worked for a company that sells wood flooring, they expect me to say wood is best.  However, if I work for a company that sells both types of flooring, I can have a real discussion about which is best on a room by room basis because I will have credibility in both types of flooring.

Now the conversation starts at a higher level and allows me to be more effective at demonstrating the value that Adobe offers to anyone building mobile apps.

There are clearly use-cases where PhoneGap will indeed be the better choice because of the lightweight nature, broader device support and the availability of the required skillset to build these types of apps.  However, there will continue to be use-cases that go beyond the capabilities of HTML5 and will demand the more capable Flash/Flex platform.  Features such as collaboration, complex UIs, handling of large data sets, real-time data processing, and rich data visualization are just a few examples where HTML5 simply won’t cut it today.  However, as the capabilities of the platforms evolve, Adobe is in a good position to provide solutions across the spectrum.

Our team is in rapid learning mode now, but that’s why we do this job.  New products, new technologies and new ways of approaching problems is what fuels us.  We’re basically professional learners.  During the next few months, you’ll see more content related to PhoneGap as well as the new features coming in Flex 4.6, and much more.  Fun, fun!

Since I’m more familiar with Android than iOS, I’ll explain how it works for Android.

First, you create a new Android project in Eclipse (requires the Android SDK), add the phonegap.jar file to the lib folder, and make a few tweaks to the manifest and other files (details here). The main java file is modified as follows:

package com.gregwilson.gregpg1;

import com.phonegap.*;
import android.os.Bundle;

public class GregPG1Activity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

Notice the highlighted line (line 11) —  We’ve created a native Android app, and this native app loads android_assets/www/index.html in WebView when launched.  WebView is a class in the Android SDK that allows you to display web pages as a part of your layout.  It’s like having a web browser inside of your app and uses the device’s existing implementation of WebKit.  In iOS, it’s UIWebView.  Other mobile OSes use similar techniques.

Below is my project in both Eclipse (Android) and Xcode (iOS).  The web application is in the www folder indicated by the red arrows.

Now you simply compile, build, deploy like any other Android project.

Basically, PhoneGap apps are HTML/JS/CSS apps that run within the WebView (or equiv) component. If you are like me, at this point you are thinking, “Uh – that’s lame – is that it? I can do that today without any additional software”.

But there’s more… PhoneGap extends the WebView class to give it hooks back to the device itself and exposed them as JavaScript.  Remember the jar file that is in the project?  The project also includes a phonegap.js file, which exposes many new functions that make this much more than simply displaying a web page in a WebView component.

Check out the code below for accessing the device GPS (copied from one of the many great examples from http://docs.phonegap.com).  If you create an PhoneGap project and copy the code below to your index.html file, you can see it run.

<!DOCTYPE html>
<html>
  <head>
    <title>Device Properties Example</title>

    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for PhoneGap to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // PhoneGap is ready
    //
    function onDeviceReady() {
        navigator.geolocation.getCurrentPosition(onSuccess, onError);
    }

    // onSuccess Geolocation
    //
    function onSuccess(position) {
        var element = document.getElementById('geolocation');
        element.innerHTML = 'Latitude: '           + position.coords.latitude              + '<br />' +
                            'Longitude: '          + position.coords.longitude             + '<br />' +
                            'Altitude: '           + position.coords.altitude              + '<br />' +
                            'Accuracy: '           + position.coords.accuracy              + '<br />' +
                            'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' +
                            'Heading: '            + position.coords.heading               + '<br />' +
                            'Speed: '              + position.coords.speed                 + '<br />' +
                            'Timestamp: '          + new Date(position.timestamp)          + '<br />';
    }

    // onError Callback receives a PositionError object
    //
    function onError(error) {
        alert('code: '    + error.code    + '\n' +
              'message: ' + error.message + '\n');
    }

    </script>
  </head>
  <body>
    <p id="geolocation">Finding geolocation...</p>
  </body>
</html>

Now your “web app” has access to Accelerometer, Camera, Compass, Contacts, and many other device capabilities.

Some observations:

• Since the app itself is super small, it loads crazy fast – less than one second on my HTC Inspire and iPad 2.  You probably won’t even need a splash screen.
• The framework is simple and lightweight, so the resulting app has a very small memory footprint. This allows apps to work on older and slower hardware like the original iPhone and older BlackBerry phones.
• The PhoneGap docs and examples are fantastic – clear and concise.  I was able to copy/paste every sample and see the results. (one note — the phonegap-1.1.0.js for Android is different than the phonegap-1.1.0.js for iOS – I initially made the mistake of assuming they were identical and killed a few hours trying to figure out why certain samples wouldn’t run)
• The platform support is broad. As of this article, PhoneGap supports iOS (iPhone, iPhone 3G/3Gs/4/4S, iPad 1/2, Android (all versions), BlackBerry OS 4.6 and newer, WebOS, Symbian, Bada and they have recently started to support Windows Mobile. See http://www.phonegap.com/about/features for a list of what’s supported on each.
• Your HTML/JS/CSS run in the native WebView so you are free to use any frameworks you desire such as JQuery Mobile, Sencha, whatever. PhoneGap gives you a WebView/UIWebView with hooks to the device. The rest is up to you.
• PhoneGap is free, open-source and will become an Apache project very soon (translation – it will remain free).
• PhoneGap is extendable via a plugin model giving you a bridge between native code capabilities and JavaScript.
• There is already a great collection of community-created plugins at https://github.com/phonegap/phonegap-plugins.
• I haven’t figured out a good way to debug these types of apps yet.  I suspect that this will be a bit of a challenge.  There is a console.log() function that will send messages back to your Eclipse console.  When the camera sample wasn’t working, I really had no clues as to why.  It’s likely that I’m missing something, so it’s too early to judge.

PhoneGap Build

As you start building mobile apps in any technology, you soon discover that each platform has it’s own deployment steps and tooling requirments (some of which are amazingly tedious and error-prone).  For example, to build a native iOS app, you use Xcode, which only runs on Mac OS X.  To build for BlackBerry phones, you have to use their tooling that only runs on Windows.  To build for both platforms, you’ll need two machines (or use virtualization).  This is why http://build.phonegap.com was created.  The service allows you to upload your www project folder (or give it a GitHub URL) and it will package your app for the supported platforms.  The specific steps are documented at https://build.phonegap.com/docs/start.  NOTE: Adobe has stated that this service will continue as part of the recently announced “Adobe Creative Cloud” but no details have been provided nor has any pricing been announced.

What’s next

If you’re intrigued, I encourage you to go to http://phonegap.com, where you’ll find everything you need to build an app. I was able to get a Hello World app running on both Android and iOS in under 30 minutes (not counting the downloading of Xcode).  The “Getting Started” section is excellent.

…but then when you turn it landscape, you get the white borders (or whatever your app background color is):

…so you change the splashScreenScaleMode property to “stretch” and you get this (destroys the image):

…so then you start looking into how to include multiple splash screens, which requires a custom preloader and additional image work.

Below is the same splash screen, but as you can see, I used a single square image that works with both orientations.

What about handling multiple device sizes? The same technique works, as long as you keep the content within the center square that has a width/height equal to the short side of the smallest device you intend to install on.

Below are two images; one for tablets, and one for phones. I’ve drawn the portrait and landscape edges of several popular devices.

Tablets:
The largest tablet I’ve seen is the Motorola Zoom and Samsung Galaxy Tab 10.1, both of which are 1280×800, so my diagram below assumes that it is the largest possible resolution by making the splash screen image 1280×1280:

Click for full-size

Phones:
Phones come in many resolutions. The image below assumes that the largest resolution is 960×640 (iPhone 4), so the image is 960×960:

Click for full-size

Depending on your splash screen design, you could get away with only two images, one for tablets and one for phones. I typically do three images, one for the low-resolution iPhone 3Gs, one for other phones, and one for tablets.

If you are building an app that targets multiple device resolutions, I suggest you use the code below as your preloader. It assumes three images – tablet, high-res phones, low-res phones. It selects the image based on the length of the longest edge of the screen.

// Based on original DPI-based code by Jason San Jose at http://www.adobe.com/devnet/flex/articles/mobile-skinning-part2.html#articlecontentAdobe_numberedheader_5
// Improved by Christophe Coenraets to select image based on length of longest edge of device - http://coenraets.org
// Simplied by Greg Wilson to use only 3 images for all devices
package
{
	import flash.desktop.NativeApplication;
	import flash.display.NativeWindow;
	import flash.display.Stage;
	import flash.display.StageAspectRatio;
	import flash.display.StageOrientation;
	import flash.system.Capabilities;

	import mx.core.DPIClassification;
	import mx.core.mx_internal;

	import spark.preloaders.SplashScreen;

	use namespace mx_internal;

	public class MultiDPISplashScreen extends SplashScreen
	{
		[Embed(source="assets/splash-tablet.png")]
		private var SplashImageTablet:Class;

		[Embed(source="assets/splash-high-phone.png")]
		private var SplashImageHighPhone:Class;

		[Embed(source="assets/splash-low-phone.png")]
		private var SplashImageLowPhone:Class;

		public function MultiDPISplashScreen()
		{
			super();
		}

		override mx_internal function getImageClass(dpi:Number, aspectRatio:String):Class
		{
			var min:int = Math.min(Capabilities.screenResolutionX, Capabilities.screenResolutionY);

			if (min > 960)
				return SplashImageTablet;
			else if (min > 320)
				return SplashImageHighPhone;
			else
				return SplashImageLowPhone;
		}
	}
}

Problem: After updating to OS X Lion, I noticed that the fans were spinning constantly and my battery was being quickly drained.  A quick look at the activity monitor showed a process called VShieldUpdate.

VShieldUpdate is a virus scanning app that is part of VMWare Fusion.  For some reason, the updater for this app gets hung after updating to Lion.

Solution:  Uninstall it with the following commands (from Terminal):

After a couple of seconds, life returns to normal. My VMWare images might be missing some virus protection, but for me, that’s not a problem.

I had WiFi on this flight... Cloud Computing?

During the past year, I’ve learned a lot about various cloud computing offerings including Amazon EC2 / S3 / CloudFront / Beanstalk / RDS / etc., Rackspace Cloud, Salesforce.com, Cloud Foundry, Heroku, and of course, the growing number of Adobe cloud-related offerings.  I’ve also learned that “cloud” is probably the most overused word I’ve come across in 20+ years in technology!  I’ve put together a crash course MAX session to introduce people to what cloud computing is really all about.  My goal is to use only a few slides and spend most of the session doing some real demos that really show off what’s cool in cloud computing.   It’ll be action packed, so come check it out!  The information is below:

When: Wednesday, October 5, 11:00 a.m. – 12:00 p.m, I’m doing the following session at Adobe MAX 2011

Migration to the Cloud: How Do I Get There?

Cut through the hype and see what cloud computing is really all about. Take a tour of cloud infrastructure-as-a-service (IaaS) and platform-as-a-service (PaaS) solutions. Watch a live deployment of a server infrastructure that supports a new mobile app built with Adobe Flex. Learn how to create a new virtual server, configure it, and bring it online—all in a few minutes. Then see how the infrastructure is horizontally scaled to support 1,000,000+ users. During the demonstration, you’ll learn about reliability, redundancy, disaster recovery, geographic distribution, and other important considerations for migrating to the cloud.