Welcome Appliness!

Appliness is a new digital magazine and the first of it’s kind to focus entirely on web application development!   Appliness was created entirely using Adobe Digital Publishing Suite, and the effort was lead by our own Michael Chaize.   Go download a copy today!  It’s also FREE!

 

Be sure to also check out how this magazine was created using Adobes Digital Publishing Suite, and check out the video preview above. Interested in contributing in Appliness or providing us with valuable feedback? If so, you’re in luck–let us know here: http://appliness.com/give-us-feedback/. We’d love to hear from you!

Who Uses PhoneGap/Apache Cordova?

I see questions and comments all the time with the general sentiment “it looks nice, but who really uses PhoneGap/Apache Cordova?”. There is no way to create a definitive list of everyone who uses it, but the general answer is “more people than you think”. Here are a few organizations that you might recognize who are using either PhoneGap or Apache Cordova in their cross-platform mobile solutions and/or tools. (PhoneGap is a distribution of Apache Cordova)

Wikipedia

The official Wikipedia mobile application is built using PhoneGap.   This is currently available for Android and BlackBerry, and it is my understanding that the PhoneGap codebase will be deployed for iOS soon.  This project is open source, and the full source code is available on GitHub at https://github.com/wikimedia/WikipediaMobile

You can read more about this application on the PhoneGap Showcase.

Facebook

Facebook uses a forked version of Apache Cordova in their mobile SDK.   You can learn more about Facebook’s mobile SDK at https://developers.facebook.com/docs/guides/mobile/, and check out some of the showcase apps that developers have built on top of the Facebook mobile experience at https://developers.facebook.com/showcase/mobile/.

Salesforce

Salesforce uses a fork of Apache Cordova for their mobile development SDK.  The forked version of their SDK is included within both their iOS and Android SDK repositories on GitHub (inside of the “external” sub directories).

IBM

IBM recently acquired Worklight, who provides a platform for developing mobile applications.  IBM/Worklight’s mobile application development platform is built on top of PhoneGap.   IBM is also heavily involved with core Apache Cordova development (see the list of committers).

Microsoft

Microsoft is involved with core Apache Cordova development (specifically for the Windows Phone platform).   Not only are staff from Microsoft committers for the core Apache Cordova project, Microsoft has also used PhoneGap on public mobile applications that target multiple platforms.   This includes the XBox-Live integrated gaming application Halo Waypoint, for both iOS and Android.  Check out Halo Waypoint in the video below, it looks awesome:

(The license under “about” inside Halo Waypoint clearly has a reference to PhoneGap).

Adobe

I think most people already know how deeply involved Adobe is with PhoneGap, but I’ll try to recap quickly…  In late 2011, Adobe acquired Nitobi, the creators of PhoneGap, and contributed PhoneGap to the Apache Software Foundation as the Apache Cordova project.   Adobe has resources dedicated to furthering PhoneGap and is dedicated to the success of the platform.   Not only are we helping develop and mature PhoneGap/Apache Cordova, we also build some of our own applications with it.   (Maybe I’ll be able to talk about those some day.)

RIM

Research in Motion (RIM), the company behind the BlackBerry platform not only developed the core PhoneGap/Cordova API for BlackBerry Playbook devices, but also is heavily involved in Cordova-JS development, and has integrated PhoneGap/Cordova support in the Ripple device emulator.  (Note: The BlackBerry smartphone implementation was pre-existing and was implemented by IBM and Nitobi.)

Zynga

Zynga, one of the largest gaming companies, uses PhoneGap and HTML5 to build awesome games.  For example, the popular Mafia Wars title is built using PhoneGap.

Logitech

Logitech used PhoneGap to develop the Logitech Squeezebox Controller application, which uses your home wifi connection to control a Squeezebox Internet radio device from your smart phone.   You can read more about this application on the PhoneGap application showcase, or download it now for iOS or Android.

Still not sure if anyone uses PhoneGap? What about these, among many others?

Alcatel-Lucent      Deutshce Telecom      Ars Technica      Sabre
Cisco Systems      Time Warner      The Onion

Additional sources: ReadWriteWeb, slideshare

Go check out the PhoneGap app showcase to see even more: http://phonegap.com/apps

PhoneGap Explained Visually

I’ve been “out and about” lately, attending tech conferences, meetup groups, and meeting with developers in their offices, and I am getting great feedback on mobile development and PhoneGap. There are some common questions that I am often asked, and I hope this post helps everyone understand PhoneGap better.

PhoneGap

Before I go too far, let me attempt to clearly state what PhoneGap is… PhoneGap is an application container technology that allows you to create natively-installed applications for mobile devices using HTML, CSS, and JavaScript.   The core engine for PhoneGap is also 100% open source, under the Apache Cordova project.  You can read more about PhoneGap under my “What is PhoneGap?” & Other Common Questions post.


PhoneGap User Interface

The user interface for PhoneGap applications is created using HTML, CSS, and JavaScript.  The UI layer of a PhoneGap application is a web browser view that takes up 100% of the device width and 100% of the device height.

Think of this as a “headless” web browser.  It renders HTML content, without the “chrome” or window decoration of a regular web browser.  You build your application to take advantage of this space, and you build navigational/interactive/content elements and application chrome into your HTML and CSS based user interface.

The web view used by PhoneGap is the same web view used by the native operating system.   On iOS, this is the Objective-C UIWebView class; on Android, this is android.webkit.WebView.  Since there are differences in the web view rendering engines between operating systems, make sure that you account for this in your UI implementation.


PhoneGap API

PhoneGap provides an application programming interface (API) that enables you to access native operating system functionality using JavaScript. You build your application logic using JavaScript, and the PhoneGap API handles communication with the native operating system.

You can read about the PhoneGap API and all of the native functionality it exposes at docs.phonegap.com.

In addition to the “out of the box” functionality, you can also leverage PhoneGap’s JavaScript-to-native communication mechanism to write “native plugins”. PhoneGap native plugins enable you to write your own custom native classes and corresponding JavaScript interfaces for use within your PhoneGap applications.  You can read more about PhoneGap native plugins at: http://www.tricedesigns.com/2012/03/01/phonegap-native-plugins/ and http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins


PhoneGap Application Packaging and Distribution

PhoneGap applications are developed using HTML, CSS, and JavaScript, however the final product of a PhoneGap application is a binary application archive that can be distributed through standard application ecosystems.

For iOS applications the output is an IPA file (iOS Application Archive), for Android applications the output is an APK file (Android Package), for Window Phone the output is a XAP file (Application Package), etc…  These are the same application packaging formats used by “native” applications, and can be distributed through the appropriate ecosystems (iTunes Store, Android Market, Amazon Market, BlackBerry App World, Windows Phone Marketplace, etc…)


PhoneGap High-Level Application Architecture

Specific application architectures are going to differ on a case-by-case basis, however most data-driven applications employ the following basic architecture.   The PhoneGap application acts as a client for the user to interact with.   The PhoneGap client communicates with an application server to receive data.   The application server handles business logic and communicates with a back-end data repository.

The application server is normally a web server (Apache, IIS, etc…) and has a server side scripting language such as ColdFusion, Java, .NET, PHP, etc… PhoneGap is agnostic of back-end technologies and can work with any application server using standard web protocols.   The application server performs business logic and calculations, and generally retrieves or persists data from a separate data repository – this is normally a relational database, but could be any structure or mechanism for data persistence.

PhoneGap applications generally do not talk directly to a database; communication is routed through an application server.    The client to application server communication can be based upon standard HTTP requests for HTML content, REST-ful XML services, JSON services, or SOAP (or websockets if your OS supports it).  These are the exact same techniques that you would use in a desktop-browser based AJAX application.

The client-side architecture generally uses the single-page application model, where the application logic is inside a single HTML page.  This page is never unloaded from memory.  All data will be displayed by updating the HTML DOM, data is retrieved from the application server using AJAX techniques, and variables are kept in-memory within JavaScript.

Multi-page client-side application architectures are supported, but are not recommended because you lose in-memory variables when loading a separate page.

Changes with PhoneGap 1.5

Earlier this month, PhoneGap 1.5 was released.   There were a lot of enhancements in this release.  However, if you’ve tried to update an existing codebase from PhoneGap 1.4 to 1.5, you may have realized that things look a bit different.   Basically, the entire PhoneGap codebase has migrated from PhoneGap naming to Apache Cordova naming conventions.

Every reference to “PhoneGap” is now “Cordova”.  This includes, but is not necessarily limited to:

  • phonegap.js is now cordova.js
  • The “PhoneGap” object in JavaScript is now “Cordova” – this means every reference to “PhoneGap” should now reference “Cordova”
  • In native code, every PhoneGap class that was prefixed with “PG” is now prefixed with “CDV”; for example, “PGPlugin” is now “CDVPlugin”
  • Documentation that refers to the PhoneGap class may be out of date… just switch the name reference.
  • The “PhoneGap” project template in Xcode is now “Cordova”

This is just a naming convention change as the PhoneGap project is moving to its new identity as Apache Cordova.  However, it is just a name.  Be sure to read this article from the PhoneGap team to understand why the name changed and to understand the relationship between “PhoneGap” and “Cordova”.

As a PhoneGap developer, how you build applications has not changed, and the power of PhoneGap/Cordova has not changed.   You can still create awesome apps with it, and it is still 100% open source.

If you are looking at code that doesn’t work in PhoneGap 1.5, then chances are you need to update to use the new naming conventions.

If you are just getting started, be sure to check out my “Getting Started with PhoneGap” guides on Adobe Developer Connection for both Android and iOS – both of these articles use the new naming conventions.

Welcome, Adobe Shadow!

Ready for the new era in multi-screen development?

Available now on labs.adobe.com, Adobe Shadow is a new, free tool that enables synchronized browsing and remote inspection across desktop and mobile experiences, in real time.

Rather than having me try to describe it, check out this video from Adobe TV…

From Adobe Labs:

Adobe® Shadow is a new inspection and preview tool that allows front-end web developers and designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices.

Shadow will be updated regularly to stay ahead of web standards, web browser updates and support for new mobile devices entering the market, while incorporating user feedback to provide the best functionality and experience possible.

This version of Shadow focuses primarily on the following:

  • Device pairing
  • Synchronized browsing and refreshing in sync with your computer
  • Perform remote inspection and debugging so you can see HTML/CSS/JavaScript changes instantly on your device.

Be sure to keep up with the latest and greatest information on Adobe Shadow:

Of course, don’t forget to go download Adobe Shadow and get started today (it’s free)!