The source code for the examples I used are available in this repository on Github.

I also wrote this ECMAScript 6 tutorial that would be a great next step if you want to get started with ES6.

Finally, the slides for a similar ES6 presentation I delivered earlier this year are available here.

Mortgage Calculator and Amortization Table

The source code is available here. See it in action in this video:

Rating Component

The source code is available here. See it in action in this video:

Hotel Locator

The source code is available here. See it in action in this video:

For the purposes of this post, I focused on two main goals: 1) get my feet wet with ReactJS and 2) write a sample hybrid app using it. I haven’t seen many hybrid samples using ReactJS around and figured it may help to share my findings with others interested as well.

Mobile UI Framework Choices

When looking into using a mobile UI framework, you should consider the different categories available and choose based on your needs and preferences. Below are some general categories of UI frameworks available when building for mobile:

1. Lightweight – frameworks that provide the CSS layer for the UI but have no specific JavaScript dependencies. Ratchet and Topcoat are some examples.
2. Responsive – frameworks built in a responsive manner but not necessarily designed for mobile specifically (Bootstrap, Foundation by Zurb).
3. Mimic Native SDK’s – JavaScript frameworks built to mimic the native SDK’s for mobile. These frameworks typically handle things like application state, view stacks, navigation and rich interactions along with a full set of mobile-optimized UI widgets using JavaScript. Ionic, Onsen UI, Kendo UI, jQuery Mobile and Sencha Touch for instance.

I personally prefer the 3rd type of UI framework when building my own apps and have been a huge fan of the Ionic Framework since discovering it. Since I’m building specifically for ReactJS in this case however, I started searching for what options were available based around React. I ran across TouchstoneJS and decided to give it a whirl.

TouchstoneJS – Mobile UI Framework for React

TouchsoneJS is an early stage project built by Thinkmill and is described as a:

“React.js powered UI framework for developing beautiful hybrid mobile apps.“

TouchstoneJS Features

Below is a list of high-level features:

• Mobile UI Components (comprehensive set including headers, lists, tabs, popups, form controls, buttons etc)
• Application State Management
• Navigation
• View Transitions
• View Stacks
• Optimized Animations
• Customizable Components

Sample App – iTunes Media Finder

To get started my sample I first cloned the TouchstoneJS starter project and went to work trying to figure out how it was built using the Touchstone framework since there currently aren’t any docs available.

For my sample app content, I decided to use the iTunes Search API again since I’ve created a few others using it with other UI frameworks and it’s a good use case for trying out various UI components (lists, form controls, navigation). The previous samples I built against the iTunes Search API are listed below for reference:

1. Ionic iTunes Explorer
2. Onsen UI iTunes Explorer
3. Twitter Bootstrap Sample (web-based)

My new iTunes ReactJS/TouchstoneJS app is available in my github account with instructions on how to use it. But I’ve also included this web app version below so you can try it out quickly:

(A fullscreen version is also available here.)

iTunes Media Finder – Sample Highlights

Below are a list of features my sample app contains along with some code snippets to show a bit of detail on how it’s done:

• Navigation – shows the use of titles, left/right buttons and action handling for switching between views

getNavigation (props,app) {
    return {
        title: 'Search Criteria',
        leftArrow: false,
        rightAction: () => { app.transitionTo('tabs:about', { transition: 'fade-expand' }) },
        rightIcon: 'ion-information-circled'
    }
}

• View Transitions – uses different types of transitions and ways to trigger them

     this.context.app.transitionTo('tabs:media-list',
  	{transition: 'show-from-right',viewProps:{prevView: 'criteria', mediaType: this.state.mediaType, searchTerm: this.state.searchTerm,
  	numResults: this.state.numResults}})
  

• Tabs – implements a simple tabbed interface

<UI.Tabs.Navigator>
    <UI.Tabs.Tab onTap={this.selectTab.bind(this, 'criteria')} selected={selectedTabSpan === 'criteria'}>
          <span className="Tabs-Icon Tabs-Icon--form" />
      <UI.Tabs.Label>Search Media</UI.Tabs.Label>
    </UI.Tabs.Tab>

   <UI.Tabs.Tab onTap={this.selectTab.bind(this, 'settings')} selected={selectedTabSpan === 'settings'}>
         <span className="Tabs-Icon Tabs-Icon--settings" />
       <UI.Tabs.Label>Preferences</UI.Tabs.Label>
   </UI.Tabs.Tab>
</UI.Tabs.Navigator>

• UI Controls – uses most of the UI controls available in the framework
• Loading Popup – shows the use of a spinner when loading the list of results

<UI.Popup visible={this.state.popup.visible}>
	<UI.PopupIcon name={this.state.popup.iconName} type={this.state.popup.iconType} spinning={this.state.popup.loading} />
	<div><strong>{this.state.popup.header}</strong></div>
</UI.Popup>

• Results Filtering – filters the results list with a matching string
• Alert – built-in animation property you can set to slide down/up upon show and hide

   <UI.Alertbar type={alertbar.type || 'default'} visible={alertbar.visible} animated>{alertbar.text}</UI.Alertbar>

   <UI.SearchField type="dark" value={this.state.filterString} onSubmit={this.submitFilter} onChange={this.updateFilter}
   onCancel={this.clearFilter} onClear={this.clearFilter} placeholder="Filter..." />

• Preferences support – ability so save settings between tabs
• Pre-configured – icons, splash screens, plugins and settings for Android and iOS already set in config.xml for your own reference.

Summary

The TouchstoneJS framework is still in early stages, lacks documentation and some features you may be looking for specifically (side menus, OS specific support, themes). However it does provide view navigation, a comprehensive set of UI widgets and application state out of the box and is definitely worth checking out if you want a jump start to building hybrid apps with ReactJS.

Their starter app and touchstonejs-tasks project are also really helpful for getting started quickly. If you use my sample iTunes app project or the TouchstoneJS starter project, it’s already configured to use the touchstonejs-tasks for taking care of the build process. The Thinkmill developers also wrote and included some other useful libraries for things like tap event handling, flexible layout containers and optimized tweens so you don’t have to worry about it.

If you run into any issues with my sample, please post to the issue tracker for the project and I’ll take a look. Also if you notice anything I could be doing better in it please submit a PR or mention in an issue. I’m still learning ReactJS myself and open to feedback :).

Resources

• React Europe Showbag – an open source set of projects developed by the authors of TouchstoneJS to build the ReactEurope 2015 conference app.
• React Developer Tools for Chrome – I highly recommend adding this to your Chrome Developer tools for debugging React apps.

The back-end is built with Node.js and Socket.io.

Check out this video for a quick walkthrough:

Live Version

Click here to experience the application live on Heroku. You can go ahead and buy or sell stocks in the app: the feed and the orders are obviously simulated.

Source Code and Installation Instructions

The source code, installation and build instructions are available in this repository on Github.

Check out this video for a quick walkthrough:

The application is built with:

• React
• Lightning Design System
• ECMAScript 6 including modules
• Babel to transpile the ECMAScript 6 code
• Browserify to support modules in your current browser
• Node.js
• A Postgres database

The source code and installation instructions are available in this GitHub repo.

With the deprecation of the React tools, the availability of ECMAScript 6 features (natively or through transpilers), and the emergence of Babel as both the React tools replacement and the ECMAScript 6 transpiler of choice, I thought I’d share a simple reference application built with this new stack. In this article, I’ll share three versions of a Mortgage Calculator application written with React and built with Babel:

1. Version 1: React with ECMAScript 5
2. Version 2: React with ECMAScript 6
3. Version 3: React with ECMAScript 6 and Modules

Running the Hosted Version

Click here to run the hosted version of the application.

Setting Up Your Environment

To run the application on your own system, clone this repository or download and unzip this file.

Version 1: React with ECMAScript 5

To run this version:

1. In your code editor, open package.json in the react-mortgage-calc/version1 directory, and examine the project dependencies: babel is the only dependency. Open a command prompt, navigate to the react-mortgage-calc/version1 directory, and type the following command to install Babel:

   npm install
   

2. Back in package.json, look at the scripts section and notice that a script named build-app is defined to build the project with Babel. On the command line, make sure you are in the react-mortgage-calc/version1 directory, and type the following command to run the build script:

   npm run build-app
   

   The application is built using Babel as the JSX transformer.

3. In a browser, open index.html in react-mortgage-calc/version1 and test the application.

Code Walkthrough:

In your code editor, open app.js in the react-mortgage-calc/version1 directory. This is a basic implementation of a React app. Variables are declared in the global namespace: we’ll fix that in version 3.

Version 2: React with ECMAScript 6

To run this version:

1. Open a command prompt, navigate to the react-mortgage-calc/version2 directory, and type the following command to install Babel:

   npm install
   

2. On the command line, make sure you are in the react-mortgage-calc/version2 directory, and type the following command to build the application:

   npm run build-app
   

   The application is built using Babel as the JSX transformer and as the ES6 transpiler.

3. In a browser, open index.html in react-mortgage-calc/version2 and test the application.

Code Walkthrough:

In your code editor, open app.js in the react-mortgage-calc/version2 directory. The code has been modified to use ECMAScript 6 features. For example:

1. New let block-scoped variables:

   let monthlyRate = rate / 100 / 12;
   

   Instead of traditional var function-scoped variables:

   var monthlyRate = rate / 100 / 12;
   

2. Object literals

   return {monthlyPayment, amortization};
   

   as a shorthand for:

   return {monthlyPayment: monthlyPayment, amortization: amortization};
   

3. Object destructuring

   let {monthlyPayment, amortization} = 
       calculatePayment(principal, years, rate);
   

   as a shorthand for:

   var payment = calculatePayment(principal, years, rate);
   var monthlyPayment = payment.monthlyPayment;
   var amortization = payment.amortization;
   

4. Object Literals (functions):

   React.createClass({
       render() {
           return (<header>
               <h1>{this.props.title}</h1>
           </header>);
       }
   });
   

   as a shorthand for:

   React.createClass({
       render: function() {
           return (<header>
               <h1>{this.props.title}</h1>
           </header>);
       }
   });
   

5. Arrow functions

   var calculatePayment = (principal, years, rate) => {}
   

   instead of:

   var calculatePayment = function(principal, years, rate) {}
   

   In the AmortizationChart component, also look at the implementation of map() using the concise and elegant arrow function notation (without {} and return) that you can use when the function implementation consists of a single return statement:

   let items = this.props.data.map((year, index) => <tr></tr>);
   

Version 3: React with ECMAScript 6 Modules

To run this version:

1. In your code editor, open package.json in the react-mortgage-calc/version3 directory, and examine the project dependencies. Notice that browserify and babelify were added to the devDependencies. Browserify was added to support modules in the transpiled ES5 implementation (Webpack is another popular choice). Babelify adds Babel support to Browserify. Now that we are working with modules, we’ll also load React as a module, hence the new React dependency in package.json. Open a command prompt, navigate to the react-mortgage-calc/version3 directory, and type the following command to install the project dependencies (react, babel, browserify, babelify):

   npm install
   

2. Back in package.json, look at the scripts section and notice that a script named build-modular-app is defined to build the project with Browserify and Babel (through the Babelify transform). On the command line, make sure you are in the react-mortgage-calc/version3 directory, and type the following command to run the build script:

   npm run build-modular-app
   

3. In a browser, open index.html in react-mortgage-calc/version3 and test the application.

Code Walkthrough:

• The business logic for a mortgage is encapsulated in modules/mortgage.js
• The UI logic for the Header is now encapsulated in modules/Header.js
• The UI logic for the MortgageCalculator is now encapsulated in modules/MortgageCalculator.js
• The UI logic for the AmortizationChart is now encapsulated in modules/AmortizationChart.js
• Notice the export or export default syntax in the modules, and the import syntax to “require” a module.

Start the tutorial here

The app did OK, but it never gained the traction we had hoped for, so after a few months, we shut it down and moved on.

The epiphany

When I conceived Greg’s Toolkit, cloud computing was mostly a hobby for me – the back end of several apps and websites I created.  About a year ago, I joined the Google Cloud Platform team and my fun hobby suddenly became my new day job!  During the first few months at Google, I still thought of cloud computing as infrastructure in terms of physical entities such as “servers”, “machines”, “CPUs”, and “disks”.  When I started learning about Google App Engine, however, I began to see flaws in my thinking.  App Engine is a true platform-as-a-service (PaaS) that enables you to deploy your code without giving any thought to what type of hardware it’s implemented on.  Important needs, including auto-scaling, security, and authentication, are taken care of for you.  So it doesn’t really work in my screenshot above that mapped to a physical environment.  My mental model was quickly falling apart.

Soon after, I started learning about containers (including Docker and Kubernetes).  Containers are similar to VMs in some ways, but unlike VMs, you’re not virtualizing an entire server.  Containers are very lightweight compared to VMs because the OS is not part of the container itself.  You can even run multiple containers on the same host, each of which has its application isolation from a user point of view.  Obviously my mental model was now fully invalidated.  This epiphany has me looking at the future of cloud computing in a much broader way.

With my new expanded, non-physically-constrained view of cloud computing, I’ve been thinking about what the future might look like.  Today, major cloud vendors still use many physical terms in the titles and description of services.

Let’s take a look at storage.  When you need virtual disks with high IOPS, you select “SSD-based” storage.  The fact that SSDs are the actual devices used to provide the desired high disk performance is an implementation detail.  The fact that the type of physical hardware being used is exposed to the user actually contradicts the real value proposition of cloud computing, which is that you don’t have to be concerned with the implementation details.  I suspect that “SSD” is used because in today’s world, SSDs are universally known to be faster than standard disks, so it’s a bit of a marketing play.  Looking toward the future, it’s easy to imagine a world where you choose the performance requirements, durability requirements, and access models you need for your storage without the use of any physical (legacy?) terms.  Behind the scenes, the storage solution will be implemented by various means including SSDs, high speed memory, or some other technology based on our needs, but we will no longer be concerned about what actual hardware implemented the solution.  We’ve already seen some progress here from the major cloud vendors.  For example, Google Cloud Bigtable provides a familiar interface (HBase) with very high reliability and extreme Google-level scalability, and Google Cloud Bigtable does it without exposing the underlying details on how it’s implemented.  It’s crazy fast, it’s super reliable, and it uses an established interface, and that’s all we should care about.

A glimpse at some of the hardware that you don’t have to manage — one of the Google data centers — Pryor, Oklahoma

Now let’s talk about the compute side of things.  When looking at the various offerings of the major cloud vendors, you’ll quickly run into references to physical hardware and other implementation details.  There are references to the type of CPUs (e.g. Ivy Bridge, Haswell, etc.), number of cores, and CPU clock speeds.  Are these the details we need in the future of cloud computing, or do we need a new vocabulary that is more closely related to how we will use the computing power?  Most of us struggle as it is to relate actual performance to the concepts of clock speed, multi-core processing, and hyper-threading.  For example, which MacBook Pro is faster? — the model with “2.9GHz dual-core Intel Core i5 Turbo Boost up to 3.3GHz“, or the model with “2.2GHz quad-core Intel Core i7 Turbo Boost up to 3.4GHz“?  Is the quad core model faster than the dual core for all types of computing tasks?   Is the i5 GHz value directly comparable to the i7 GHz value?  You have to do a lot of studying to understand the differences, and it gets very technical very fast.  For most, these specs mean very little.  We simply care how fast the stuff we do will get done.  Most of us just take the wine approach and assume that the more expensive one must be better.

The need for better abstraction

During my college years, I briefly pursued a degree in Computer Engineering until I realized that I’m more of a software guy than a hardware guy (whew!).  The curriculum had several required electrical engineering courses where I learned that electricity is extremely complicated… more complicated that many of us care to understand!  However, most applications of electricity have been abstracted to relatively simple plumbing concepts where we think of the “flowing” of current measured in amps — a relatively simple metaphor that most of us can understand.  This simplified abstraction provides an adequate level of understanding for most common applications without requiring an understanding of how electricity actually works at the atomic level.

Cloud computing needs similar abstractions that let us focus on how computing power is applied rather than how it’s implemented.  This got me thinking about how we would need to define our computing needs when configuring our future cloud services.  When you boil it down to the ones and zeros, we have a series of instructions that need executing with various inputs and outputs.   How will we distinguish the need for extremely fast execution of a single stream of instructions and instructions that can be parallelized across multiple CPUs?  Will we need to specify that a specialized CPU is needed for certain types of instructions (e.g. GPU), or will that be a detail that is determined by the service automatically?  I’m now over my head, but hopefully you get my point.  We need to start thinking of cloud computing in different ways using a different vocabulary.

All of this has me pondering a few things:

• How will our vocabulary change as cloud evolves?
• Does this future vocabulary include terms like disks, drives, SSDs, and CPUs?
• How will we describe our storage and compute needs?
• As network speeds continue to improve, will the physical location of our data and computing matter as long as we get the performance and durability we need?  In other words, is location another implementation detail that we will no longer be concerned about?
• Will the need for hybrid cloud solutions diminish as cloud performance improves and prices continue to drop?  Does this become an unneeded implementation detail?

If you look at how things have changed in the past few years in cloud computing and extrapolate how things could look in the near future, it’s super exciting.

My slides are available here.

My slides are available here.

Below is a simple map between some of the major services in AWS and Google Cloud Platform.  This is not intended to be a complete mapping.  It would be unfair to both platforms to list every service because Google and Amazon are taking different approaches in many areas, making direct comparisons practically impossible.  I’m only listing the services where the comparison is helpful.

Updated September 23, 2015 as a result of Amazon launching S3 Standard – Infrequent Access (IA) and Google Cloud Dataproc

** AWS Elastic Beanstalk and Google App Engine are often described as similar offerings, but there are significant differences in their approaches.  Both offer auto-scaling, load balancing, monitoring, etc., but unlike App Engine, Elastic Beanstalk requires the typical system administration that raw VMs require (OS updates, etc.).  Google App Engine is a PaaS, meaning that it’s fully managed, so all of these administrative tasks are handled by Google.  The basic App Engine setup includes built-in services such as Task Queues, Memcache, Users API, and more.

If you require unmanaged VMs, Google also has auto-scaling, load balancing, and monitoring of unmanaged VMs as features of Google Compute Engine.  There is also an alternative hosting model now available as part of Google App Engine called Managed VMs.

My advice is to do your homework and understand these models thoroughly before diving in on either platform.  Each has unique advantages.

I’ll have more posts in the near future with more specifics on several of the offerings.  Stay tuned!

• Android 4.0.0 supports pluggable WebViews (hint: Crosswalk)

  Apache Cordova now supports pluggable WebViews for Android. This news feature allows you to easily use Crosswalk to replace the default WebView. To take advantage of Crosswalk you’ll just need to install the new Crosswalk plugin

  Crosswalk is a modern WebView that can be used instead of the default Android WebView. It provides better support for the latest HTML5 features and allows you to provide a consistent experience across the various versions of Android and different manufacturers.

  Read more in the cordova-android 4.0.0 release news here.

• Cordova Plugins in npm and Renamed

  Cordova plugins are now stored in npm (node package manager) and renamed with id’s of cordova-plugin-*, rather than the form of org.apache.cordova.*. The new id is a bit shorter and easier to remember, which should be helpful. The CLI (version 5.0.0+) will fetch the plugin from either npm or the original Cordova Plugin Registry based on the id you specify when you add your plugin. If you use cordova-plugin-device for instance, the CLI will fetch it from npm, otherwise from the Cordova Plugin Registry when the (org.apache.cordova.device) is used.

  Developers are strongly encouraged to use the new id’s and add any existing or new plugins they’ve created there as well and add the ecosystem:cordova tag to their package.json file. Specific instructions on adding your plugin and details about this change can be found here.

• Whitelist Handling Change

  The whitelist code was moved out of core Cordova and into a new Cordova whitelist plugin. This new whitelist is enhanced to be more secure and configurable, but the legacy whitelist behavior is still available via a separate legacy whitelist plugin but NOT recommended. Content-Security-Policy (CSP) is now supported and is the recommended approach. As a result of the new whitelist handling, you may require some additional configuration settings in the config.xml file as shown below:

      <plugin name="cordova-plugin-whitelist" spec="1" />
      <access origin="*" />
      <allow-intent href="http://*/*" />
      <allow-intent href="https://*/*" />
      <allow-intent href="tel:*" />
      <allow-intent href="sms:*" />
      <allow-intent href="mailto:*" />
      <allow-intent href="geo:*" />
      <platform name="android">
          <allow-intent href="market:*" />
      </platform>
      <platform name="ios">
          <allow-intent href="itms:*" />
          <allow-intent href="itms-apps:*" />
      </platform>
  

  NOTE: When you create a new project based on the default hello world project, your config.xml will already be preconfigured with these settings.
  IMPORTANT: Network requests are blocked by default without cordova-plugin-whitelist, so install this plugin even to allow all requests, and even if you are using CSP.
  

  More details can be found here.

• Saving Plugins and Platforms

  You can save the plugins and platforms used in your project easily now a few different ways using either a save command or --save flag. Using these will cause new tags to be added to your config.xml to save the specific version so it can be auto-configured on another machine. This is super useful when working with a team or moving to another machine since you should never be checking those folders into your source control system. With this change, they are automatically added when the CLI finds them in the config.xml file during the prepare step (automatically done with a build or run) so it saves extra setup time. Note that when you remove a plugin or platform you should also specify the --save to cause it to be removed from the config.xml.
  
  Some examples of the different ways to use the new command or flag are shown below:

  Saving Plugins

  Using --save flag
  
$ cordova plugin add cordova-plugin-device --save
$ cordova plugin remove cordova-plugin-device --save


  This results in the following line being written ore removed from the config.xml:

      <plugin name="cordova-plugin-device" spec="1" />
  

  Using save command
  
$ cordova plugin save


  The above line will save all plugins that have been added to your project at once.

  Note: The plural version also works (ie: $ cordova plugins save)

  Below are some examples and the resulting console output:
  
$ cordova plugin add cordova-plugin-device --save
Fetching plugin "cordova-plugin-device" via npm
npm http GET https://registry.npmjs.org/cordova-plugin-device
npm http 200 https://registry.npmjs.org/cordova-plugin-device
npm http GET https://registry.npmjs.org/cordova-plugin-device/-/cordova-plugin-device-1.0.0.tgz
npm http 200 https://registry.npmjs.org/cordova-plugin-device/-/cordova-plugin-device-1.0.0.tgz
Saved plugin info for "cordova-plugin-device" to config.xml


$ cordova plugin remove cordova-plugin-contacts --save
Uninstalling cordova-plugin-contacts from ios
Removing "cordova-plugin-contacts"
config.xml entry for cordova-plugin-contacts is removed


  Saving Platforms

  Using --save flag
  
$ cordova platform add ios --save
$ cordova platform remove ios --save
$ cordova platform update ios --save


  This results in the following line being added to your config.xml:

      <engine name="ios" spec="3.8.0" />
  

  Using save command
  
$ cordova platform save


  The above line will save all platforms that have been added to your project at once.

  Note: The plural version also works (i.e.:$ cordova platforms save).

  Below are some examples and the resulting console output:

  
$ cordova platform add firefoxos --save

  Adding firefoxos project...
Project Path platforms/firefoxos
Package Name io.cordova.hellocordova
Project Name HelloCordova
Installing "cordova-plugin-whitelist" for firefoxos
Installing "org.apache.cordova.console" for firefoxos
Installing "org.apache.cordova.contacts" for firefoxos
Installing "org.apache.cordova.device" for firefoxos
--save flag or autosave detected
Saving firefoxos@^3.6.3 into config.xml file ...`


  Note how it also added any plugins added or found in the config.xml file to the added platform automatically as well.

  
$ cordova platform remove firefoxos --save

  Removing firefoxos from config.xml file ...


  Read the official blog post for details and to find out the rest of the changes in the latest release.

• Config.xml <feature> tag now <plugin>

  If you use the <feature> tag to specify custom configuration for a platform or version, you should now use the <plugin> tag. The <feature> tag will still be backwards compatible, but you should be using the <plugin> tag going forward. If you’re unsure of the details of the original <feature> tag, check out an example and more details here.

https://www.google.com/flights/#search;f=SFO,OAK,SJC;t=TPA,MCO;d=2015-07-12;r=2015-07-16;s=1;ti=t0600-2100l1600-2300,t0800-1400l1300-2300;md=540

Here’s what this search finds (you can find all of this in the above URL):

• Departing from San Francisco, Oakland, or San Jose airport (f=SFO,OAK,SJC;)
• Flying to Tampa or Orlando airport (t=TPA,MCO;)
• Departing on July 12, 2015, Returning on July 16, 2015 (d=2015-07-12;r=2015-07-16;)
• No more than 1 stop (s=1;) (s=0; would return only direct flights)
• Outbound flight departing between 6am and 9pm; Arriving between 4pm and 11pm; (ti=…)
• Return flight departing between 8am and 2pm; Arriving between 1pm and 11pm; (ti=…)
• Total flight time under 9 hours (md=540; [minutes])

The results (as of this writing) are as below (screenshot).  Depending on when you are reading this article, you might need to tweak the dates to get some results.  Once you select your flights, you are taken directly to the airline’s website to book the flight, so this isn’t adding any unnecessary travel booking agencies.

Hopefully this gives you an idea of how powerful Google Flights really is.  I can also add filters based on price range, airlines/alliances, cabin class, etc..  It also has fantastic support for multi-city flights.

Finding the cheapest dates to fly

If your dates are flexible, Google Flights has another great feature to find the lowest fair.  By clicking the little bar-graph icon on the view above, I get the following:

I’ve been using Google Flights for several months, and on several complex itineraries for both work and personal flights.  It’s been absolutely perfect and has simplified my travel booking significantly.

More info about Google Flights can be found at https://support.google.com/flights.

Full disclosure: I work for Google as part of the Google Cloud Platform Developer Relations team.  However, I do not work with the Google Flights team, so this post is written purely to share the awesomeness of Google Flights.  The fact that it’s built by another team at Google is simply a happy coincidence.

I this article, I share a Lightning Map Component built with the popular Leaflet open-source library.

This component also provides an example of loading external Javascript libraries and CSS stylesheets using the ltng:require tag.

Read the full article here

#Create a new bucket:
gsutil mb -c nearline gs://nearline-bucket

#rsync the current directory to our new nearline bucket:
gsutil -m rsync -r . gs://nearline-bucket

# Copy a specific file from the nearline bucket to a local directory:
gsutil cp gs://nearline-bucket/installers/build142.dmg ~/restore

# Copy the contents of another bucket to our new nearline bucket:
gsutil cp -r gs://mybucket/* gs://nearline-bucket

Important links about Nearline storage:

• Nearline home page
• Nearline whitepaper
• Nearline documentation

• It’s storage at $0.01/GB/Month! — so 1TB would be $10/month.
• Data retrieval is $0.01/GB (plus normal egres charges)
• Here’s the important part — Retrieval response time is only ~3 seconds (compared to 3 to 5 hours for AWS Glacier).  After first byte, it’s 4 MB/s of throughput per TB of data stored.
• It uses the same command-line tools and APIs as the other Google Cloud Storage – it’s simply a new storage class.
• It’s available today (in beta) (it’s time to move my 120,000+ images to this new storage class!)
• Did you see the part about it being $0.01/GB/Month?!

Important links about Nearline storage:

• Nearline home page
• Nearline whitepaper
• Nearline documentation

A common use-case for GCS is backups.  For example, I backup my blog content nightly to GCS, so after a year, I’d have 365  gregsramblings.tgz files.  I could write a script to list the files in my bucket and automatically delete backups based on various conditions, but GCS’s Lifecycle Management features makes this super simple.

You can read about multiple types of conditional deletes in the excellent GCS Lifecycle Management docs.   In my particular case, I wanted to always have the last 30 day’s backups available, so I created a file named lifecycle_config.json as follows:

{
    "rule":
    [
      {
        "action": {"type": "Delete"},
        "numNewerVersions": 30
      }
    ]
}

To apply the rule to my bucket, I used:

gsutil versioning set on gs://gregsramblings-backup
gsutil lifecycle set lifecycle_config.json gs://gregsramblings-backups

Now when the 31st file is added, it deletes the older versions leaving me with the last 30 backups every day.

Other condition types allow you to delete based on age, etc.  The docs cover this.

In the next post, I’ll cover how to create public links for your bucket objects with extremely efficient edge caching and index.html/404.html behavior (static website).

• Google Cloud Storage is not Google Drive. Google Drive is a consumer-oriented file storage and synchronization service that allows users to store documents, share files, and edit documents with collaborators, and it has APIs that allow developers to extend it. Google Cloud Storage is file storage solution intended for developers and system admins and has APIs allowing apps to store and retrieve objects. It features global edge-caching, versioning, OAuth and granular access controls, configurable security, etc..
• Google Cloud Storage is built on Google’s massive planet-wide infrastructure.  Think about all of the files that Google serves, including YouTube videos, etc.  The size and scale are beyond most people’s comprehension.  I’ve recently seen the inside of one of the many Google data centers (a very rare treat, even for Googlers!), and it gave me a tiny glimpse of the enormous scale that is Google, and it radically changed my definition of “scalable” and “fast”.
• Google Cloud Storage has a web interface for the basic functionality, but it’s the command line tool, gsutil, that I prefer to use.  Also, the command-line tool exposes many more features.  There are also APIs (XML and JSON) that we’ll cover in a later post.

Initial Setup:

• If you don’t already have a Google Cloud Platform account, you’ll want to create one at http://cloud.google.com.  If you’ve never signed up before, you can get a free trial that is $300 for 60 days (as of this writing).
• Install the Google Cloud Platform SDK from http://cloud.google.com/sdk.
• Create a project, and activate Google Cloud Storage for that project  (A project is a logical grouping of Google Cloud resources – storage, services, users, instances, etc.).  Creating a project requires a web browser, but once you get it created, you can do most everything else using the command-line tools.  Make a note of your project ID.  I’ll use “gwprojectid” for the remainder of this article.
• We need to set up our new project as the default for the Google Cloud command-line tools, otherwise we’ll have to use “-p gwprojectid” for each command.  To set the default project, type: gcloud config set project gwprojectid

Working with the gsutil tool

Below is a simple example of storing and retrieving files. First we need to create a bucket – the basic container used to store files.  Since all bucket names share the global name space, it needs to be unique across all of Google Cloud.  You’ll see why this is the case in a later post when we start sharing files publicly via http.   For this example, I’ll use a bucket named “gwbucket”.  When referencing a bucket you need to specify the URL — e.g. gs://[bucketname].

#Create a bucket:
gsutil mb gs://gwbucket

#Copy some files to the bucket:
gsutil cp *.jpg gs://gwbucket

#List the files in the bucket:
gsutil ls -l gs://gwbucket

#Copy a specific file from our bucket back to the local /tmp directory
gsutil cp gs://gwbucket/sunset.jpg /tmp

#Delete the files:
gsutil rm gs://gwbucket/*

#Remove the bucket:
gsutil rb gs://gwbucket

Nothing too exciting yet, but you quickly see that the commands are familiar.  You can add “-r” to most commands to make it recursive, as expected.  Detailed help is available for all commands at https://cloud.google.com/storage/docs/gsutil or from the command line – gsutil help cp Here’s another example using rsync and versioning:

#Create a new bucket:
gsutil mb gs://gwbucket

#Turn on versioning for the bucket
gsutil versioning set on gs://gwbucket

#rsync the current directory to our new bucket
#Adding -m to run multiple parallel processes (speed boost)
gsutil -m rsync -r -d . gs://gwbucket

#List all of the files in the bucket:
gsutil ls -lr gs://gwbucket

Learn more about object versioning
Learn more about the -m option

Note: The above examples use the default bucket class of “standard” and the default bucket location of “US”.  To learn about other options, see these docs. I used the last example above (except for the versioning line) to backup my 120,000+ image library to Google Cloud Storage. Anytime I add/modify/delete images, I simply repeat the gsutil rsync.

In my next blog post, I’ll show how to set up bucket object lifecycle management to configure automatic object deletion when it reaches a certain age, or to simply keep the last n versions of a specific object.  This becomes a key feature when doing regular backups such as archiving log files each night, etc.  Then I’ll show you how to share objects publicly via HTTP and how to utilize Google’s worldwide edge caching to provide very fast downloading of your files.  I now have all images on my blog being served this way. I’ll also cover how I configured WordPress to use GCS as the file host.

One of the challenges we face as hybrid app developers is determining which configuration settings to use for any given app due to variances in operating systems and browser rendering engines across platforms. The config.xml file located in the root of your PhoneGap/Cordova projects when you create an app can have a variety of content that can be confusing to developers. The documentation is often less than crystal clear as well.

As a result, I’ve created a new interactive guide to document it and help people understand what each element means as well as the defaults, valid values, required fields and supported platforms for each. You can hover over the elements on the left side in the config.xml file and the details for it will display on the right. You can click the buttons to display the different preferences by platform. I’ll be continuing to update it further as I find more details.

Platform Details

While on the subject of configuration, I also think it’s useful to explain a couple of things going on behind the scenes in terms of configuration content and your apps for at least iOS and Android in case there are some that want to dig in deeper. I will add Windows and other platforms as I learn about them myself.

iOS

If you look at the yourApp/platforms/ios/CordovaLib/ClassesCleaver folder in your project you’ll find classes where your config.xml file is used. It is parsed specifically in the CDVConfigParser.m class and those properties are then set as needed in the CDVViewController.m class. You should also be aware of the <projectName>.plist file that is used by your iOS apps. It’s located in the ../platforms/ios/MyProject/MyProject.plist path (if you open the .xcode project in Xcode then you will find it under the Resources folder) and has settings that affect orientation, icons, splash screens and other properties you may want to modify at some point. Here’s a sample of what it looks like:

Android

You will also find a CordovaLib folder in the Android platform of your project and the class used for parsing the config.xml file for Android is ConfigXmlParser.java. Once parsed, the class that processes the settings is CordovaActivity.java. You should also be aware of the <AndroidManifest.xml file used by your Android apps. It’s located in the ../platforms/android/AndroidManifest.xml path and the Activity element has settings that will affect a number of things. Here’s an example of the defaults:

<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="HelloWorld" android:theme="@android:style/Theme.Black.NoTitleBar" android:windowSoftInputMode="adjustResize">
       <intent-filter android:label="@string/launcher_name">
           <action android:name="android.intent.action.MAIN" />
           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
</activity>

Please feel free to provide any feedback on your own use with these preferences and settings if you have more information to contribute from your own experience. I’ve included the guide below for a preview, but you should open the app here in a new full window for a better experience.

<br />

One of my subscribers recently asked if I knew how to get PouchDB working with an Apache Cordova mobile application using Ionic Framework in particular.  I didn’t immediately know what PouchDB was, but after some reading I found it was inspired by Apache CouchDB.

In this guide, we’re going to see how to install CouchDB and use PouchDB in an Ionic Framework mobile application for cross platform synchronization.

Since PouchDB is built upon Apache CouchDB, this guide will have two parts:

1. Setting up a CouchDB server using Debian Linux
2. Using PouchDB in a mobile application

When everything has been completed, you’ll have a simple application that can sync between devices and platforms.

Setting up a CouchDB server using Debian Linux

Per the PouchDB and CouchDB documentation, most of what we need is already available on Debian and Ubuntu based Linux distributions.  For this example, I am using a fresh Digital Ocean VPS with Debian 7 installed.  While using SSH with root access to your server, run the following to install CouchDB:

apt-get install couchdb

You’re going to have some Cross Origin Resource Sharing (CORS) errors out of the box so we need to install a special package.  However, this package requires NPM to have already been installed.  If it is not already installed you can run the following:

curl -sL https://deb.nodesource.com/setup | bash -
apt-get install -y nodejs

With NodeJS installed, run the following to install and run our CORS package:

npm install -g add-cors-to-couchdb
add-cors-to-couchdb

We’re not completely finished yet.  Currently only connections via localhost can be made to CouchDB.  For this example we’re going to open CouchDB to anyone.  You’re probably going to want to tweak this in the future.  As a root user, edit /etc/couchdb/local.ini and uncomment the bind_address line.  Also change 127.0.0.1 to 0.0.0.0.  Now everyone can access the database.

Again, it is important to use a setup that meets your needs in a production environment.

You can confirm everything was set up correctly by entering http://serverip:5984/_utils into your web browser, exchanging serverip with the correct remote IP address.

Using PouchDB in a mobile application

The first thing we want to do is create a fresh Ionic Android and iOS project to work with:

ionic start PouchApp blank
cd PouchApp
ionic platform add android
ionic platform add ios

Note, if you’re not using a Mac, you cannot add and build for the iOS platform.

The next thing we want to do is download the PouchDB JavaScript library and place it in the www/js directory of our Ionic project.  Once the file is in place, we can continue to adding it into our www/index.html file:

<script src="js/pouchdb-3.2.0.min.js"></script>

Now I did some Google searches and found that there is an AngularJS library for PouchDB, but I found the documentation to be very poor.  Because of this I’ve decided to use the official JavaScript library and make my own wrappers.

For simplicity, this application is going to be a to-do-list type application.  It will have one screen with a list, and users can choose to add to the list.  Open your www/index.html file and add the following between the <body> tags.

<ion-pane ng-controller="ExampleController">
    <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
        <button class="right button button-icon icon ion-plus" ng-click="create()"></button>
    </ion-header-bar>
    <ion-content>
        <ion-list>
            <ion-item ng-repeat="todo in todos">
                {{todo.title}}
            </ion-item>
        </ion-list>
    </ion-content>
</ion-pane>

Based on this UI, you can conclude that we will have one controller called ExampleController, an add button that calls create() when clicked, and a list of todo items.

Open www/js/app.js and make sure your angular.module is set to a variable name like the following:

var example = angular.module('starter', ['ionic']);

Right below this line, we need to declare our local and remote databases.  Later in our code we will be synchronizing them, but it doesn’t remove the need to declare them.  This can be done like so:

var localDB = new PouchDB("todos");
var remoteDB = new PouchDB("http://serverip:5984/todos");

Remember to swap out serverip with the IP of your server.

Inside the $ionicPlatform.ready of your run() method we need to start synchronizing.  This can be done by adding the following:

localDB.sync(remoteDB, {live: true});

The above line means that we’re constantly going to be listening for changes between databases and synchronizing them as they occur.

So how are we going to watch for data changes in our databases and refresh our UI list?  If you’re familiar with AngularJS, you can’t just watch a global JavaScript variable.  Some extra magic has to happen.  We will be making use of $rootScope.$broadcast to signal every time we’ve received some kind of data change.  Create the following factory in your code:

example.factory('PouchDBListener', ['$rootScope', function($rootScope) {

    localDB.changes({
        continuous: true,
        onChange: function(change) {
            if (!change.deleted) {
                $rootScope.$apply(function() {
                    localDB.get(change.id, function(err, doc) {
                        $rootScope.$apply(function() {
                            if (err) console.log(err);
                            $rootScope.$broadcast('add', doc);
                        })
                    });
                })
            } else {
                $rootScope.$apply(function() {
                    $rootScope.$broadcast('delete', change.id);
                });
            }
        }
    });

    return true;
    
}]);

The above code says the local database will look for changes.  If the change is not a delete, it is an add, so fire the add broadcast with the change data.  If the change is a delete, then fire the delete broadcast with the ID of the record.

Time to create our ExampleController which will look for changes and add new changes via an $ionicPopup prompt.  Add the following code to your www/js/app.js file:

example.controller("ExampleController", function($scope, $ionicPopup, PouchDBListener) {

    $scope.todos = [];

    $scope.create = function() {
        $ionicPopup.prompt({
            title: 'Enter a new TODO item',
            inputType: 'text'
        })
        .then(function(result) {
            if(result !== "") {
                if($scope.hasOwnProperty("todos") !== true) {
                    $scope.todos = [];
                }
                localDB.post({title: result});
            } else {
                console.log("Action not completed");
            }
        });
    }

    $scope.$on('add', function(event, todo) {
        $scope.todos.push(todo);
    });

    $scope.$on('delete', function(event, id) {
        for(var i = 0; i < $scope.todos.length; i++) {
            if($scope.todos[i]._id === id) {
                $scope.todos.splice(i, 1);
            }
        }
    });

});

If a delete is found, remove it from the list.  If an addition was found, add it to the list.  Creating a new item via the application will trigger the addition.

The full www/js/app.js code can be seen below:

var example = angular.module('starter', ['ionic']);
var localDB = new PouchDB("todos");
var remoteDB = new PouchDB("http://serverip:5984/todos");

example.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
        localDB.sync(remoteDB, {live: true});
    });
});

example.controller("ExampleController", function($scope, $ionicPopup, PouchDBListener) {

    $scope.todos = [];

    $scope.create = function() {
        $ionicPopup.prompt({
            title: 'Enter a new TODO item',
            inputType: 'text'
        })
        .then(function(result) {
            if(result !== "") {
                if($scope.hasOwnProperty("todos") !== true) {
                    $scope.todos = [];
                }
                localDB.post({title: result});
            } else {
                console.log("Action not completed");
            }
        });
    }

    $scope.$on('add', function(event, todo) {
        $scope.todos.push(todo);
    });

    $scope.$on('delete', function(event, id) {
        for(var i = 0; i < $scope.todos.length; i++) {
            if($scope.todos[i]._id === id) {
                $scope.todos.splice(i, 1);
            }
        }
    });

});

example.factory('PouchDBListener', ['$rootScope', function($rootScope) {

    localDB.changes({
        continuous: true,
        onChange: function(change) {
            if (!change.deleted) {
                $rootScope.$apply(function() {
                    localDB.get(change.id, function(err, doc) {
                        $rootScope.$apply(function() {
                            if (err) console.log(err);
                            $rootScope.$broadcast('add', doc);
                        })
                    });
                })
            } else {
                $rootScope.$apply(function() {
                    $rootScope.$broadcast('delete', change.id);
                });
            }
        }
    });

    return true;

}]);

A video version of this article can be seen below.

The app is nothing fancy, it simply registers your device when it runs and displays the device token returned from either APNs (Apple Push Notification Service for iOS) or GCM (Google Cloud Messaging for Android). Then when a notification is received, the app will display it in a list. The code handling is the more useful piece since it varies between platform and state (running in foreground, background, coldstart etc).

What you can learn

In general this sample can be useful to see how to:

• Add push notification support to your Ionic/Cordova app and take advantage of ngCordova to keep your angular code clean and maintainable.
• Handle push notifications for different platforms and situations (iOS vs Android and if the app is running in the foreground, background or closed etc).
• Create your own server-side solution for storing tokens and sending notifications using some nodeJS libraries available.

What to be aware of

The details for the app can be found in the readme on the GitHub project page and I provided comments in the code to help explain things in more detail, however there are a few other details I’d like to point out:

• Register Handling – The registration id is returned in a different manner for iOS and Android when using the PushPlugin and it may be confusing at first. Just be aware that the iOS registration id (aka device token) is returned as a response to the PushPlugin register() call, whereas the Android registration id is received in the pushNotificationReceived() handler. See the controller.js code for details.
• Unregister Handling – Currently the PushPlugin unregister() is not called in the code (commented out), for various reasons. Instead it’s calling to remove the device token from the 3rd party database. This may not be ultimate in production, but you should stop to read these links I’ve included for details on what is recommended:
  • Apple Unregister Details
  • Android Unregister Details

Message Payload Details

A payload is the message (notification) that is sent thru the respective Cloud Service (APN/GCM) to the device where the app is registered. It contains custom data and settings and varies between OS. My sample app handles many different scenarios depending on what data and flags are found within the message payload that you should take a look at.

For instance, a typical sample message that might be received in your app is shown below in JSON format:

iOS Message Example

[{"badge":"0","sound":"soundName","alert":"Jennifer L liked your photo","foreground":"0"}]

Android Message Example

[{"message":"Tori432 commented on your photo: Awesome!","payload":{"message":"Tori432 commented on your photo: Awesome!"},"collapse_key":"optional","from":"824841663931","foreground":false,"event":"message","coldstart":false}]


Max Message Sizes

The sizes of message payloads is different between platforms and recently changed in iOS 8:

• iOS Max Payload Size – iOS8 payload size is 2 kilobytes, < iOS8 is 256 bytes
• Android max payload is 4 kilobytes .

Newbies

If you’re new to push notifications you should go back and visit all of my previous posts which go into great detail about different aspects of supporting the on different platforms. Some of the links to those posts and other useful ones are also included in the GitHub Readme.

Below are some highlights developers may be particularly interested in knowing about in this latest version. Please read the official release details on the PhoneGap blog for everything you need to know.

Highlights

• All cordova commands and options are now supported directly via the phonegap command (including --copy-from, --link-to options etc).
  I personally like to use --copy-from with the create command to quickly create a starter project from a base template I’ve created and --link-to when I want to easily create a symbolic link to another project without having to think about the syntax of how to do it each time.
• The phonegap create command allows you to use shortcut flags -n and -i to quickly specify the app name and id/package and can be used in any order.
• The config.xml file now resides in the root project folder rather than the www folder.
• The remote command still allows you to build with PhoneGap Build but the local command is no longer necessary (deprecated) and assumed.
• Better help text, easier ways to get to the help text and more explanatory output/error handling.
• Platforms (ios, android etc) are automatically added if they don’t exist upon build and run so you don’t have to explicitly type phonegap platform add [platform].
• And more!…

These changes are available now, so take a moment to grab the latest via one of the commands below:

$ sudo npm install -g phonegap
$ sudo npm update -g phonegap

Once again, be sure to read the detailed write-up just posted on the PhoneGap Blog as I think even the most seasoned users will find something they were not previously aware of!

WKWebView Plugin

In the meantime there’s a new option (self-proclaimed hack) available to try. Eddy Verbruggen (author of the Social Sharing Plugin and many other useful Cordova plugins) created a WKWebView plugin that uses the WKWebView rather than the UIWebView and includes code to fix the local file loading issue. A screenshot from his demo app running a performance test in the standard Hello World app using the new plugin versus without it is shown below. Notice the difference in FPS (frames per second) and CPU by using this plugin:

How does it work?

To summarize how this works, the plugin includes an AppDelegate+WKWebViewPolyfill class that checks to see if the app is running on iOS8 and if so will use a different ViewController with the WKWebView instead of the UIWebView as it’s WebView UI delegate. This is done via method swizzling (changing implementation at runtime) as shown in the code snippet below:

@implementation AppDelegate (WKWebViewPolyfill)

+ (void)load {
  // swap in our own viewcontroller which loads the wkwebview, but only in case we're running iOS 8+
  if (IsAtLeastiOSVersion(@"8.0")) {
    swizzleMethod([AppDelegate class],
                  @selector(application:didFinishLaunchingWithOptions:),
                  @selector(my_application:didFinishLaunchingWithOptions:));
  }
}

To learn all about the WKWebView, check out this in-depth informative post by Mattt Thomspon. Some interesting and inspirational quotes from the article are included below.

It’s a dirty secret that some stock apps like Messages use WebKit to render tricky content. The fact that you probably haven’t noticed should be an indicator that web views actually have a place in app development best practices.

If your app is little more than a thin container around web content, WKWebView is a game-changer. All of that performance and compatibility that you’ve longed for is finally available. It’s everything you might have hoped for.

Useful Links

• General JIRA tracking issue for Cordova iOS 8 support
• 9 to 5 Mac – iOS 8 WebKit changes finally allow all apps to have the same performance as Safari
• Informative post with all the details on the new WKWebView and more by Mattt Thomspon.
• TJ Van Toll from Telerik on why WKWebView is a big deal

The different versions of all things Cordova and PhoneGap can be pretty confusing to keep track of at times. Everyone may not be aware that there have been some recent decisions and changes made to how things will be handled with the Cordova project going forward.

In summary, the platform versions (ios, android etc) are now independent of CLI version (will no longer match) and the CLI version will likely be rising more rapidly. Read the whole thread if you’re curious about why this changed. This post is an attempt to explain the different versions and how you can find them for your projects.

Cordova Versions

We’ll start with Cordova since it’s the underlying version to so many different things including other vendors’ offerings so you should always be aware of how to find these versions first and foremost.

• Overall Version – find yours by typing:
  
  $ cordova -v

  When you install cordova from npm or click the download button from Cordova.io, these versions are the same (currently 4.0.0) and represent a blanket identifier that includes:

  1. The CLI (command line interface) Tooling Version – The version of the tooling and commands you’re using to create, build and deploy your apps. For instance, if a new option is added to the $ cordova create command to allow you to specify a template URL.

     Use the same command as before to find the CLI version:
     
     $ cordova -v

     **Note: this number will always match the overall version.**

  2. Set of Platform Versions – This is basically the version of cordova.js file copied in at build time for each supported platform (amazon-fireos, android, blackberry10, browser, firefoxos, ios, windows etc), since each has its own specific code.
     
     For instance, the current 4.0.0 version will install iOS 3.6.3, android 3.6.4, browser 3.6.0, firefox os 3.6.3 etc.

     You can find the platform versions with the $ cordova platform list command such as:
     
     $ cordova platform list
Installed platforms: android 3.6.4, browser 3.5.2, firefoxos 3.6.3, ios 3.6.3
Available platforms: amazon-fireos, blackberry10


     To install a specific version, first remove the current one if a version was previously added via:
     
     $ cordova platform remove ios

     Then add the one you want by using the @ syntax:
     
     $ cordova platform add ios@3.7.0

     Tip: Always use the $ cordova platform remove command versus manually deleting a platform folder from the file system or you will likely cause yourself in some sort of pain down the road. :)
     
     NOTE: If there ever seems to be a mismatch with what’s returned from the platform list command, you can always just open the cordova.js file copied into the platforms www folder (for example ../platforms/ios/www/cordova.js) to see what’s specified in the following variable:

     var PLATFORM_VERSION_BUILD_LABEL = '3.7.0';
• Plugin Version: Each plugin (file, device, media, contacts etc) also has a version. To see the versions of plugins for a given project, use the $ cordova plugin list command such as:
  
  $ cordova plugin list
org.apache.cordova.camera 0.3.3 "Camera"
org.apache.cordova.contacts 0.2.14 "Contacts"
org.apache.cordova.device 0.2.12 "Device"

  To install a specific version, use the @ syntax:

  $ cordova plugin add org.apache.cordova.camera@0.2.9

  or to ensure the latest plugin version, use the latest alias:

  $ cordova plugin add org.apache.cordova.camera@latest

  Tip: To quickly search the plugin registry and get the id for a plugin, use the $ cordova plugin search command with any search term:

  $ cordova plugin search contacts
com.blackberry.pim.contacts - BlackBerry 10 Contacts APIs
com.kolwit.pickcontact - Native contact-picker overlay, accessing the address book
org.apache.cordova.contacts - Cordova Contacts Plugin
  

  Another Tip: To get all the data including versions available for a specific plugin, use the $ plugman info command with the id of the plugin in question (assuming you have plugman installed, and you should if you don’t):
  
  $ plugman info org.apache.cordova.camera
  
  You’ll get a ton of info back and will need to scroll up a bit to find the versions array, such as:

  versions:
  [ ‘0.2.1’,
  ‘0.2.3’,
  ‘0.2.4’,
  ‘0.2.5’,
  ‘0.2.6’,
  ‘0.2.7’,
  ‘0.2.8’,
  ‘0.2.9’,
  ‘0.3.0’,
  ‘0.3.1’,
  ‘0.3.2’,
  ‘0.3.3’ ]

  The Plugins Registry also lists all the versions for any given plugin in a drop-down list on the top right corner.

  

All of the above commands work with the phonegap CLI as well since it is just a wrapper around the Cordova tooling to provide some additional features. If you’re an Ionic Framework user, the same applies for their CLI. So you could do $ phonegap platform list and $ ionic platform list etc.

PhoneGap Versions

The main thing to know about the PhoneGap (Adobe-specific CLI) side of things is that the above applies except the overall PhoneGap version and CLI version (which are the same) are generally a bit behind compared to the overall Cordova version due to the fact that the PhoneGap team needing to update it after the cordova version is available and testing needed to ensure compatibility with different things. Similar to cordova, to find the overall/CLI version of phonegap installed, type:

$ phonegap -v
3.6.0-0.21.19


When using the PhoneGap CLI versus the Cordova CLI, again the set of platforms can be different and will be based specifically on the version number above since it encompasses both the CLI and the certain set of platform versions as I explained previously, such as:

$ phonegap platform list
Installed platforms: android 3.6.3, firefoxos 3.6.3, ios 3.6.3
Available platforms: amazon-fireos, blackberry10, browser


In this case some of the platform versions happen to match what I got from 4.0.0 in the top of the post since no independent platform releases were done between 3.6.0 and 4.0.0 apparently. The point is that you should never assume they will be the same between overall versions.

** NOTE: You can still add a specific platform version using the phonegap CLI with the @ syntax as described above:

$ phonegap platform add ios@3.7.0

PhoneGap Build Versions

PhoneGap Build supports an overall version of PhoneGap to do its compiling which is also typically behind the latest Cordova version a bit to ensure plugins are tested and compatible etc. For instance, right now it’s v3.6.3 which happens to match the PhoneGap Overall/CLI version, but this is not always the case. You can find the version used for your PhoneGap Build project in the UI for a given project such as shown with the arrow below:

You may also notice a warning on the project to update if it’s an older project and a new version is available or recommended due to an important fix as shown in yellow above.

To build with a specific version of PhoneGap, specify it in the config.xml preferences tag:

<preference name="phonegap-version" value="3.5.0" />

PhoneGap Build – Plugin Versions

You should also be aware of the version of plugin being used when building with PhoneGap Build. See this link for the latest default versions of plugins used by PhoneGap Build. It’s recommended to specify the plugin version you want to use in your config.xml as well in the tag explained here.

Stay Informed!

I HIGHLY recommend you follow these accounts on twitter to stay on top of all new updates:

Twitter

• @apachecordova
• @PhoneGap
• @PhoneGapBuild

Blogs / News / Mailing Lists

• Apache Cordova News
• PhoneGap Blog
• PhoneGap Build Blog
• Cordova Mailing List
• Sign up for the PhoneGap Newsletter

Related Links

Please also see these related links to resources from my colleague Ray Camden in relation to all of the above:

• Keeping up with Cordova and PhoneGap
• Ray’s recent versions post

The tags look like the following but you would include a list of them for all the sizes you want to support under each platform:

<platform name="ios">
     <icon src="icons/myIcon.png" width="80" height="80" />    	     
</platform>
<platform name="ios">
     <splash src="iphone/splash-default.png" width="2048" height="1536"/>
</platform>

Check out the docs for details on how to configure the icons splash screens for the different platforms and sizes. I tested this out on iOS and Android myself and it worked great.

Some things to be aware of…

• The image paths you specify are relative to the root project folder, NOT the www folder
• The names of the images will change to what the CLI defaults them to in their final destination so don’t be confused if you don’t see the same file names. They are renamed to defaults based on the sizes or densities specified. For instance, if I have the following specified for a splash screen size for iOS pointing to my image in the rootProj/iphone folder named mySplash.png:

  <platform name="ios">
      <splash src="iphone/mySplash.png" width="320" height="480"/>
  </platform>
  

  It will be placed in the ios platform splash location (ie: rootProj/platforms/ios/HelloCordova/Resources/splash) as Default~iphone.png since that’s the size that it matched.

• If you specify just one icon for a platform, that same icon will be used for all resolutions across the board.

  <platform name="android">
      <icon src="myIcon.png"/>
  </platform>
  
  <platform name="ios">
      <icon src="myIcon.png"/>
  </platform>
  

  ***Update: If you visited previously and saw a mention about support for Imagemagick to resize a single icon to all resolutions, this feature was not actually contained in the 3.6 version of the Cordova CLI as I explained it originally and I really apologize for any confusion. It was actually a forked version that was not included in the Cordova release.

  HOWEVER, this is still possible to achieve using this cordova-icon package in a cordova hook upon build with a single image file (1024×1024 recommended). Your image file will be resized to all of the different icon sizes and copied down to the different platforms. The cordova-icon npm page has a couple of instructions to follow to set this up but is very straightforward. You should also check out Alex’s blog post about this topic for more details.

  Remember the above is only needed if you want to use one image to be resized for your project. If you specify an icon element in your config.xml per density, the CLI will copy those in for you. If you want to use a UI tool to generate icon sizes for you originally to then manually add to the config.xml after, check out MakeAppIcon.
• If you’re wondering about iOS8 support for iPhone 6 and iPhone 6 Plus icons and splash screens, it’s in progress and you can find out the latest status here (see subtasks 48-53). This issue tracks all things being worked on for iOS8 support so you may want to bookmark it for general reference.
• You can include both splash and icon elements in the same parent platform element in your config.xml file, such as:

  <platform name="ios">
      <icon src="icons/myIcon.png" width="80" height="80" />    	
      <splash src="iphone/mySplash.png" width="320" height="480"/>
  </platform>
  

  They don’t have to be separate unless you want to do so for readability.

• If you develop with the Ionic framework this change is available to you since the Ionic CLI wraps the Cordova CLI.
• This change has not landed in the PhoneGap CLI yet but should be coming in the next version soon.
• Don’t confuse this with the PhoneGap Build elements that are used for icons and splash screens, though they offer similar support, they are separate and you should follow the documentation for the CLI.

I posted about icons and splash screens help awhile back here in case it’s useful as a related reference.

If you’re using the Ionic framework for your mobile development, you may not be aware that you can still use the PhoneGap Developer app to test your apps built with Ionic on different devices as well with a couple quick tips. You will need to use the PhoneGap CLI to serve your application rather than the Ionic CLI for this case and create an empty .cordova folder in the root of your Ionic project. The PhoneGap CLI currently looks for the existence of a .cordova folder, so it will only properly connect if it’s there until this dependency is removed. It should be removed in the near future but for now I wanted to give this tip on how to make it work.

For further details on the PhoneGap Developer App and how to use it, please see the detailed announcement post or my previous post on this topic.

This is a track from his 2013 CD called Breakthrough. What you are seeing is the actual recording that made it on the CD and is one of my favorites.

I’ve seen him live twice, and both times, it was phenomenal.  If you get a chance to see him on tour, do it.

By the way, he always has an album where he plays exclusively classical music, “BACH/BRAHMS/PROKOFIEV”.

Eldar on Spotify:

Eldar on Facebook

Eldar on Google Play

I’ve been an Amazon Web Services user for many years and spent most of my time in Amazon EC2, so I decided to start with Google’s equivalent, Compute Engine.  As expected, there are multiple instance types of varying memory size, CPU power, and price.  Getting up and going was painless.  I quickly discovered that I can do anything I need using either the command-line interface or the web UI.  One feature that I especially like is that I can configure my instance in the Web UI and then see the equivalent command-line syntax.  (Last week, I learned more about the command-line interface for Google Cloud Platform from one of the Google IO videos, Command Your Cloud with gCloud.)

The concepts of Compute Engine were familiar and I had no problems spinning up a small instance for this blog (did you notice how fast it loads?).  I also noticed that pricing is simpler than Amazon’s.  The one thing that really stood out to me was the “sustained use discounts“.  Basically, we apply a discount to your bill at the end of the billing period based on the sustained usage of your instances.  If you are running a 24/7 app server, blog, etc., then you are at 100% sustained use and you’ll receive a 40% discount on the base price.  This is much easier to budget for and eliminates the up-front payment that Amazon’s reserved instances require (I wrote about reserved instance prior to joining Google).

Resources I used to learn more:

Another member of the developer advocacy team, Brian Dorsey (G+/Twitter), put together a great 4 minute video overview:

I read the various resources listed on the Compute Engine webpage.

I found a great video from ChefConf 2014 where Google Technical Program Manager Eric Johnson (G+) did a very in-depth overview of Computer Engine:

Then I dove into the getting started guide and finally the docs.

I’ll soon be diving into BigQuery, App Engine, Cloud Storage, Cloud SQL, and Cloud Datastore.  It’s an interesting time to dig into all of this because new stuff is coming out rapidly.  Hopefully I can catch up!

Stay tuned for more…

Piano: Mahesh Balasooyria
Sax: Zane Musa
Bass: John Belzaguy
Drums: Johnny Friday

Stay tuned!

PS: My blog has been moved to a Google Compute Instance (so fast!).  I’ll be moving it to a managed VM soon and will share the details/benefits/etc.

All of the following email addresses are exactly the same from Google’s point of view.  All of them will end up in my gmail inbox:

• greg.wilson@gmail.com (what I commonly share)
• gregwilson@gmail.com (what some other Greg Wilson commonly shares so I get his email!)
• g.r.e.g.w.i.l.s.o.n@gmail.com
• g.regwilson@gmail.com
• greg.wilson+whatever@gmail.com
• greg.wilson+somethingelse@gmail.com
• greg.wilson+anotherthing@gmail.com

As you probably figured out, Google Mail ignores dots “.” and it ignores anything after the “+”.

It’s a good way to determine if a site is sharing your email address.  I once registered as greg.wilson+abccompany-newsletter@gmail.com.  A few weeks later, I started getting spam addressed to greg.wilson+abccompany-newsletter@gmail.com so I know for a fact that abccompany shared or sold my email address.

• Move the object to Glacier (super-cheap offline storage)
• Delete the object permanently from the bucket

I decided to use this to simplify backups of some of the servers I maintain.  Here’s my script (without error checking and other non-relevant code):

#!/bin/bash
tar -czf backup_$(date +%Y%m%d).tgz myStuffToBackupFolder/
s3cmd --reduced-redundancy put backup_$(date +%Y%m%d).tgz s3://mys3backupbucket
rm backup_$(date +%Y%m%d).tgz

Basically, my script creates a .tgz file that contains all of the files that I want to backup.  The script names the tgz file using the current date (e.g. backup_20130607.tgz). It then copies the tgz file to my Amazon S3 bucket using s3cmd and removes the tgz file from my local filesystem.

If you haven’t used the s3cmd before, you should check it out. It gives you a very simple command-line interface to Amazon S3 buckets. You can read more at http://s3tools.org/s3cmd.  You’ll find versions for Linux and Mac OS.

Typically, I would add some code to the backup script that keeps x backups and deletes anything older than y days.  Amazon’s new lifecycle feature really makes this super simple.  If I go to the properties of my S3 bucket on the Amazon Web Services console, I can create the following lifecycle rule:

My rule specifies that each backup file is available from the S3 bucket for the first 10 days.  Then, after 10 days, the file is moved to Amazon Glacier (to reduce cost dramatically – about 80% cheaper than leaving the file in an S3 bucket).  Then, after a year, the file is automatically deleted.

If you are not familiar with Amazon Glacier, here are a few facts you need to know:

• It’s crazy cheap storage – currently it’s $0.01/GB/month (compared to $0.09/GB/month for S3 storage), so a terabyte would only cost $10/month in Glacier.
• Files in Glacier are not immediately accessible.  It takes 3-5 hours for a restore request to be completed.  Just think of it as a tape backup (I have no idea what type of media Amazon is actually using for Glacier storage).
• There is a minimum three month storage policy on Glacier and there is a restore fee for anything beyond 5% of your stored data.  A lot of people miss this fine print.  Amazon words it like this: “Glacier is designed with the expectation that restores are infrequent and unusual, and data will be stored for extended periods of time. You can restore up to 5% of your average monthly Glacier storage (pro-rated daily) for free each month. If you choose to restore more than this amount of data in a month, you are charged a restore fee starting at $0.01 per gigabyte.”.  We’re not talking a lot of money so it’s not really a factor for my use case unless I suddenly need to restore some very large files (which typically means something bad has happened).
• Files moved to Glacier still show up in your S3 bucket, but with a storage type of  “Glacier”.  I like this because I get a complete picture of how all of my files are stored.  Even tools I use like Transmit FTP, CyberDuck and other FTP-like tools that support Amazon S3 buckets still show the files.  However, if you try to download Glacier-stored files using these tools, you’ll get a permission error until you do a restore via the Amazon Web Services console.
• You’ll see other pricing parameters on the S3 pricing page — charges for PUT, POST, LIST, GET, etc., but when you’re only archiving a handful of files, it’s a rounding error.  For example, if I ran my backup daily, it would be 365 PUTs which doesn’t even add up to one cent!  So basically, you can ignore these unless you are backing up 100k+ files.  If you are really nervous about what your real cost is going to be at the end of the month, simply check the Amazon Web Services account activity page after a backup or two and extrapolate your monthly cost.
• You can learn more about S3 and Glacier at http://aws.amazon.com/s3/.

One other note — you’ll see that my script uses the s3cmd parameter “–reduced-redundancy”.  Amazon has two classes of storage (other than Glacier) — normal and reduced redundancy.  Reduced redundancy is a bit cheaper, but offers less reliability.  Their site claims 99.99% durability vs the 99.999999999% durability of normal S3 storage.  For my particular needs, 99.99% is fine, especially since I’m quickly moving the files to Glacier.

My personal situation is basically line 2 of the chart below (the small instance).  I’ve been paying $0.06/hour for more than a year, so about $43/month.  If I had taken the time to look into the reserved pricing advantage, I could have saved about $233 over the year.  I would have needed to pay $169 up front, but then I would have received reserved pricing at $0.014/hour instead of $0.06/hour.

based on June 4, 2013 pricing from AWS – Linux – US East – Heavy Utilization – 1 year term

Amazon offers three flavors of Reserved instance pricing – Light Utilization, Medium Utilization, and Heavy Utilization (used in the chart above).  Basically, it’s three different combinations of upfront pricing vs lower hourly rates.  Since I’m running basic web servers, the instance is up 24 hours per day (about 730 hours per month or 8765 hours per year), so the best pricing for me (and most people) is the heavy utilization option.

Amazon is effectively rewarding you for being consistent with your EC2 demands.

When is reserved not a good option?

The upfront cost is non-refundable, so if you only plan to use the instance for three months, you’ll lose money compared to the normal on-demand instance pricing.  For example, you might choose a micro instance for the development phase of a project and then upgrade three months later to a medium.  If you do a reserved instance on the micro instance, and then you upgrade the instance to a medium, you do not get reserved pricing on the medium instance because you locked into the micro pricing.  Only do reserved when you know that you are good to go for enough months to justify the upfront cost.

How do I convert an existing instance to reserved pricing?

One common misconception about reserved instances is that they are a different type of instance.  The instance itself is exactly the same so no change is needed.  Using reserved instances is all about billing.  When Amazon calculates your bill, they check to see if you have reserved any instances of the  same criteria (type, zone, etc.), and if you do, they apply the reserved pricing.  In order to get the discounted hourly rate of reserved instances, you simply need to buy a reserved instance that matches your existing instance.  In my case, I had a m1.small instance running in the us-east-1d availability zone.  I simply went to the Reserved Instance page in the EC2 console, clicked “Purchase Reserved Instances” and filled in the following dialog to match my existing image criteria:

After going through the checkout process and paying the upfront cost, I was all set.  Any future hours are now billed at the discounted rate.

Other options

I could have gone with a 3-year term, but that felt a little long for my situation and the additional savings wasn’t substantial. Also, when you go with a reserved instance, you are locking into the current price, so if the price of EC2 reserved instances goes down, you won’t be able to take advantage of it mid-term. So, a one year term seems best in my opinion.

To see detailed pricing in all zones, all instance types and other terms, go to the Amazon EC2 pricing page.

IMPORTANT: If you are new to Amazon EC2, be sure to check out the Free Tier.  Free is always better than discounted pricing!  The free tier gives you a year of micro instance usage, 30GB of space, 15GB of bandwidth and more.   See the Amazon EC2 pricing page for more details.

Of course, you’ll find amazing work in graphic design, architecture, photography, illustration, etc., but what you may not know is that Behance is a great place to find really good UI/UX designers too.

Check out some of the portfolios in the UI/UX category — http://www.behance.net/search?field=132 —

The community of Behance users is huge and growing.  Check out these stats — http://www.behance.net/facts

Here are the key features that sold me on the NEX-6:

• It supports RAW and RAW+JPG (and allows me to switch back and forth with one button).  If I’m doing snapshots, I’ll shoot JPG.  However, if I need maximum dynamic range and quality, I’ll shoot RAW and use Adobe Lightroom and Adobe Camera Raw to perfect the images.  Every camera I’ve owned in the last 10 years has had this capability.
• Like most modern compact cameras, the NEX-6 has sophisticated auto features but it also has aperture priority, shutter priority, and full manual.
• Instant response when pressing the shutter button.
• The interface doesn’t require me to go into the menus to make common setting changes (a show stopper for me with many cameras).  It has a simple mode-dial, and two dials I can turn with my thumb to change shutter speed and aperture.  Changing ISO is also very convenient.  There are also programmable buttons that allow me to put other setting changes a button press away.
• Fantastic low-light performance.  ISO 3200 on this camera is better than ISO 800 on my D300!  This is like a free lens upgrade in many ways!  The max ISO is 25,600 and it’s actually somewhat usable!
• Really good 16MP resolution using a APS-C (23.5 x 15.6 mm) sensor.  That’s about the same size sensor as my D300 and a lot bigger than the Panasonic DMC-LX3/5/7 and most other smaller cameras.
• Wi-Fi support – I can transfer images from the camera to my iPhone or iPad (or Android device) with no Wi-Fi network nearby.  The camera basically becomes a Wi-Fi hotspot that your mobile device can connect to, and with the help of a mobile app, download the images from the camera.  The camera also has the ability to push images to a computer if there is an available Wi-Fi network.  DPReview covers this in great detail here.  I honestly wasn’t looking for this feature, but I have to admit, it’s very useful.  NOTE: The NEX-7 doesn’t have this feature.
• 1080/60p HD movies – and they look fantastic.  Surprisingly, you can change the camera settings during the recording of the video.  I’ll post some samples later.  There are several good ones on YouTube already.

The camera also has a ton of  bells and whistles that didn’t really play into my decision, but I do enjoy them — Auto HDR, Sweep Panorama (both horizontal and vertical sweeps), apps, and hand-held anti motion blur.

There were four unexpected features in the NEX-6 that surprised me:

1. Focus Peaking – The NEX-6 offers focus peaking which highlights the in-focus details of the image in yellow (or red or white – it’s customizable).  Sam Mallery has a great article that demonstrates this here.
2. AEL Toggle – There is a AEL button on the back of the camera that works as you would expect – when you hold down the button, it locks the exposure until you let it go.  However, I discovered in the menus that you can turn this button into a toggle.  When set to toggle, you point the camera and press the AEL button and it will lock the exposure until you press it again.
3. Customizable Settings – the NEX-6 allows you to customize several buttons on the camera.  I think Mike Hendron covers this really well here (along with details on his own customizations)
4. Apps – I honesty snickered at the idea of “camera apps” when I first noticed this feature, but then I discovered that there are indeed some really cool apps for this camera.  An app basically adds new functionality to the camera.  You can see the entire list of available apps at https://www.playmemoriescameraapps.com.  Be sure to check out the Time-lapse app!  Note: The NEX-7 doesn’t support apps.

Why not the NEX-7?  I looked at the NEX-7 because it offers even higher resolution (24MP), but it’s lacking Wi-Fi capabilities and app support.  The NEX-6 also has higher ISO available.  There is a good comparison SnapSort.

Another pleasant surprise is that Adobe Lightroom already has a lens profile for the 16-50mm lens that came with the camera:

Lightrooom 4 Lens Correction Dialog

Disappointments:

I love this camera, but there are a few disappointments:

• Auto-focus sometimes gets confused in low light and takes a second or two to lock-in.  Maybe I’m spoiled by the near-instant focusing of my D300, but I wish the NEX-6 was a little better.  It’s still better than most compact cameras, but not up to high-end SLR-levels just yet.
• The battery life is a little disappointing.  It’s not terrible, but it’s not as good as my D300 or my DMC-LX5.
• My D300 and DMC-LX5 each have a feature that allows me to specify the lowest acceptable shutter speed when the camera is set to full auto exposure.  I’m actually decent at shooting hand-held at 1/15th of a second with the 16-50mm lens, but the camera assumes that I need some ISO boost when the shutter goes below 1/60th of a second.  It’s not a big deal since I can quickly switch to manual mode but I’m hoping that a future firmware update will add this level of customization like many of my other cameras.
• I find it almost impossible to stop a video recording without shaking the camera forcing me to cut out the final second of the video post-shoot.  It’s not a big deal, but I think the button should be a little easier to press.

Despite these disappointments, I am very happy with the camera.  I’ll definitely take it on my next Aerial Photography assignment, but my D300 will be nearby just in case!  There’s a huge difference between taking a few photos around the house and shooting from 1500 feet while moving at 120MPH!  I suspect the NEX-6 will work out.

Other Reviews and Info

• DPReview.com’s review of the NEX-6
• Sony NEX-6 Brochure (PDF)
• List of all Sony brand e-mount lenses (all work NEX-6)
• DPReview.com’s Sony NEX forum
• Camera Labs Review
• Sony’s home page for the NEX-6
• Great article on customizing the NEX-6
• Comparison of the NEX-6 with the Nikon 1 V2 (if you are a Nikon fan like me, this might hurt a bit)
• NEX-6 Tips and Tricks page on Facebook (my own creation so go LIKE it!)
• Amazon.com’s page for the NEX-6
• Other recent mirrorless camera options

Comparing it to other Sony NEX models (snapsort.com)

• NEX-6 vs NEX-5N
• NEX-6 vs NEX-5R
• NEX-6 vs NEX-7
• NEX-6 vs NEX-7N
• NEX-6 vs NEX-3
• NEX-6 vs C3

Using my Nikon Lenses (lens adapter)

I have several Nikon/Nikkor lenses, including a 50mm f1.4, Tamron 18-270mm and various others.  After some research, I found that there are several choices of adpaters that allow you to use your Nikon lenses on the NEX-6.  I purchased this one and so far, it seems to work really well.  I’ll do a separate blog post on the specifics soon.  There is a catch to this type of adapter however — you have to manually focus and manually control the aperture, but that’s no big deal, especially with the NEX-6’s focus peaking feature.

Summary

This camera could easily become my walk-around camera and also my pro camera for many types of assignments.  It’s awesome to have a camera with this many features fit into my computer bag.  I’m still in the honeymoon phase, so I’ll let you know how I feel about it in a few weeks.

Sample Photos

I have only had the camera for 4 days, so I haven’t had a lot of time to experiment but I do have a handful of shots to give you an idea.  If you click on any of the following photos, you will go to a larger version where you can view the original image and see the camera EXIF data.  I’ll do a followup blog post after the honeymoon period and will include many more pictures and some videos.  In the meantime, the reviews above have tons of sample images.  You can find good NEX-6 video samples on YouTube.

55-200mm lens, manual exposure, ISO 400, 1/125th at f7.1

55-200mm lens, manual exposure, ISO 400, 1/160th at f7.1

Full auto – untouched

Manual focus, Nikon mount Tamron 18-270mm lens with adapter

ISO 3200! Click to see a larger version and original image.

This blog is an aggregation of all of our blogs in chronological order.  When you click an individual article, you will go to the original source article  on the author’s blog.

You’ll also notice a combined Twitter feed that is from this Twitter list (member list)

Website and links

Appliness is now alive and has its own dedicated website: http://www.appliness.com

If you have an iPad, you can download the magazine on the app store. It will appear in the Newsstand application: http://itunes.apple.com/au/app/appliness/id510636049

If you have an Android tablet, Appliness is available as a standalone application on Google Play. https://play.google.com/store/apps/details?id=com.appliness.applinessAndroid

I’m currently working with Amazon to put it on the Amazon Appstore.

Digital Publishing Suite

To create this magazine, I used Adobe Digital Publishing Suite (DPS). First, I had to install and learn how to use InDesign CS5.5. I was happily surprised by the number of video tutorials available on the web. DPS adds some components and features to InDesign to create digital magazines. The extensions are free and you can create and test a magazine for free on your tablet. Basically, you create static articles and then you add interactive parts. At any time you can save and upload your work on acrobat.com. The free application “Adobe Content Viewer” available on the app store and on the android market lets you test your work on your tablet.

Add interactive content with DPS

The first panel with DPS installed is called “Overlay creator”. It’s a list of interactive components: slideshow, image sequence, Video, Panorama, Pan & Zoom and Web content. The last one was the most interesting for Appliness. It lets you load HTML content in a page. That’s why in some technical tutorials, you’ll find the source code of a sample and its execution right next to it. It’s an instant preview of HTML and JS code! You can even make it interactive so that the reader plays with your HTML samples. It’s a great way to share tutorials and learn new development tricks. DPS stores your HTML samples in a HTMLresources folder. You can update its content uploading a HTMLresources.zip file. The files will be embedded in your magazine and rendered even if the user if offline. Otherwise you can chose to execute remote HTML files hosted on your own server.

Organize your folio

The other panel that comes with DPS in InDesign is the “Folio Builder”. A folio is an issue of your magazine. It consists in a list of articles (InDesign files). Every time you modify the ordering of your articles and their metadata, the changes are synced on acrobat.com. By the way, a hosted version of the folio builder exists and it’s a fantastic Flex app. Once you sign-in on digitalpublishing.acrobat.com, you can access this app and order your articles, enter the descriptions, etc…

Create a native viewer

A viewer is a native application that you can customize (splash screen, icons…) and that will consume your folios published on acrobat.com. The Viewer Builder application is a desktop AIR app that lets you create a viewer for iPad or Android tablets. Basically, it’s a wizard to upload the icons of your application, the splash screen, the certificates… At the end of the process, this AIR application sends information to acrobat.com that will return an .ipa or an .apk file. You have the choice between several kinds of viewer applications: the single edition (one viewer per folio), the multi-folio, the multi-folio with subscriptions… You have a lot of options too: enable push notifications, in-app purchase, presence in the Apple Newsstand application.

Contribute

I’ve also launched a dedicated website: http://www.appliness.com. This magazine for developers and is edited by passionate developers and bloggers. That’s why it would be great to get your feedback. If you want to contribute, publish a tutorial or showcase your application, use the feedback form on appliness.com.

But today, the Flex community is by far the strongest one on the RIA market and it’s not only due to Adobe. Flex is still the first-choice to build RIA because it’s consistent and because… it works. You should all read this fantastic article by Joao (RIA expert in Portugal). It’s also due to the fact that a lot of Flex developers were coming from various technical backgrounds: Java (mainly), PHP, AS3, .NET… And they tried to bring and translate their knowledge investing in areas not covered by Adobe’s engineers: data-visualization, backend integration, continuous integration, micro-architectures… As a tribute, I just wanted to summarize on one graph (inspired by Michell Zappa) some compelling projects developed by the community around Flex. All these projects are used by large organizations in strategic Enterprise applications. All these talents can now become official Flex contributors thanks to the Apache foundation. Flex is successful thanks to this constellation of talents, not thanks to Adobe.

Some projects are of course missing, I’m sorry for that, it’s not an exhaustive list; but this graph expresses all the efforts made by the community to make Flex a successful framework in a professional Enterprise environment. Just a few projects, such as BlazeDS, were initiated by Adobe on this map. Flex has been successful in the past thanks to the involvement of its vibrant community of talented developers… why would it change?  If you want to follow the Apache Flex project and get involved, check this page: http://incubator.apache.org/flex/

Thanks to all the folks who helped me build this list on Google Docs.

Radio X-Track

UI considerations

Radio X-Track is a great project led by true music lovers. DJs, painters, actresses and sound designers work together to publish creative playlists of music, covering various styles and  stimulating your eyes with massive paintings. The web radio is also a place for networking with music lovers. Once logged-in with your Facebook account, you can start chatting directly on the website. This arty space is directed by X-Track, a famous sound design studio in France. You can visit the web radio here: http://radio.x-track.net/EN/

The development of the mobile application was challenging as the web radio is a Flash application connected to FMS. Thanks to the recent updates of Adobe AIR, I’ve been able to use Flex to stream the playlists on smartphones and tablets. First, I’ve decided to use my adaptive layout technique to code one UI and target both mobile and tablet screens. Here is a video that explains the trick. I’m playing with two view navigators that dynamically adapt their dimensions and their coordinates at runtime, depending on the screen resolution and the screen orientation.

That’s why on Android, you have a very simple user experience. The first view is the list of DJs, the second view displays a scrollable picture, streams the playlist and displays the title of the song.

Here is the link to the Android application:

https://market.android.com/details?id=air.com.riagora.Xtrack

With Flex, you code one project and then can publish it on both Android and iOS. So I submitted this application to Apple.

The App Store reviewers rejected the initial application for UI reasons. They told me that displaying a list and then a view could be done in the browser, and that it doesn’t justify the development of an application. They wanted me to develop the application using HTML5… well… live audio… html5… I had to consider a new strategy and worked on a totally different UI. I started studying the UI patterns of approved radio application and ended up with a new user experience. I’ve also added some features such as a twitter feed and the biographies of the artists. The application has been directly approved by Apple and is now available for iPhone and iPad users.

Here is the link to the iOS application:

http://itunes.apple.com/fr/app/radio-x-track/id467964868?mt=8

Some technical tips to manage audio content

As the music is streamed by FMS, you can use the classic NetConnection and NetStream object of the Flash API. When the user wants to hear another playlist, I kill the current NetStream object and create a new one (I keep in memory the NetConnection instance). FMS fires a RTMP message every time a new song is streamed. The client catches the message and displays the title of the song on the screen. The main challenge was to mimic the behavior of the iPod. If you shutdown the screen of your iPhone, or if you switch to another application, the radio is still supposed to stream audio. AIR 3 introduced a new feature to enable this behavior. At the end of the application descriptor of your Flex mobile application, you have a dedicated section for iPhone settings. You can set iOS keys such as UIApplicationExistsOnSuspend. All the iOS settings for Adobe AIR are listed on this page. In this case, I’m setting the UIBackgroundModes key to audio.

Code block

<iPhone>
        <InfoAdditions><![CDATA[
			<key>UIDeviceFamily</key>
			<array>
				<string>1</string>
 
			</array>
			<key>UIBackgroundModes</key>
			<array>
				<string>audio</string>
			</array>
		]]></InfoAdditions>
        <requestedDisplayResolution>high</requestedDisplayResolution>
</iPhone>

Unfortunately, it won’t display the “play” icon in the status bar of iOS. I guess it would require the development of a native extension. Radio X-Track is a free application. Enjoy !

Mioozic

Mioozic is also a Flex mobile application available on both Android and iOS. You start by choosing a theme or a category, and it will start streaming music on your device. This Flex application has been developed by Samir Moussouni (www.tezqa.com). It’s a great example of a high-performance Flex application running on smartphones.

Mioozic on Android : https://market.android.com/details?id=air.netrix.air.mioozic

Mioozix on the app store: http://itunes.apple.com/fr/app/mioozic/id479503574?mt=8

What’s that track

This game developed by Orange Labs and Deezer is also a very cool Flex mobile application. It’s a quiz game. You can play alone or with friends. The goal is very basic: hear a song, tap the screen if you think that you know the artist, and select the correct artist in a list of four. It’s a very cool game with a nice 70s UI. It’s already a popular app on Android (only). Have fun.

What’s that track on Android: https://market.android.com/details?id=air.com.orange.labs.whatsthattrack&hl=fr

We are looking for committers!!! If you want to participate in the success of Apache Flex, check this blog post. Yennick is one of these talented Flex developers who could become Apache Flex committers. He’s the project leader of GradleFx. I met him in Belgium during the Devoxx conference and he has been kind enough to accept an interview.

“Hi Yennick, can you introduce yourself, your background and your relationship with Flex:”

Hi, my name is Yennick Trevels and together with Steven Dick I started the GradleFx plugin. I work as a RIA Consultant at iDA MediaFoundry in Belgium where I do most of my projects in Java and Flex (desktop, web, mobile, …).

I started out as a Java developer for 3 years, but soon found out that I wanted to focus on frontend development and that’s how I got started with Flex. Flex has been somewhat of a passion for me now because it allows me to create good looking applications with lots of custom components and there are still a lot of oppertunities to create libraries which make our lives easier.

“GradleFx is a Gradle plugin. Can you explain us what Gradle is and who is using it today?”

Gradle is a new build tool which combines the best features of Ant and Maven and leaves the bad things behind. It has dependency management, convention-over-configuration, multi-project support and lot’s of other cool features. Build scripts are written in Groovy where you have access to the Gradle API, which gives your build scripts a lot of flexibility.

Lots of plugins are already available for Gradle, like the Java plugin, Maven plugin, Eclipse & Intellij plugins, Sonar plugin etc. These plugins make your build scripts a lot easier because most of the time the only thing you have to do is configure some variables. So build script in Gradle are shorter/easier and more flexible than Maven or Ant build scripts.

GradleFx uses these same principles because it’s a plugin for Gradle.

“Then I guess that GradleFx is just an extension for building Flex applications. How does it work and what do I need to make it run?”

GradleFx is indeed a plugin to build Flex applications.

First you’ll need to install the Gradle and Flex SDK, add the Gradle bin directory to your PATH environment variable and create a FLEX_HOME environment variable which points to your Flex SDK. Once you have these setup you can start to write your build script (in a build.gradle file). You don’t have to manually download GradleFx because it’s available on the Maven Central repository, so just specify it as a dependency for your build script and apply the plugin, that’s it.

“What are the features that the GradleFx plugin adds to Gradle.”

Right now the plugin has tasks to compile SWC, SWF and AIR projects, clean the build directory, copy your resources to the build directory, create an html wrapper and run FlexUnit tests.

“Automated builds are more and more strategic in our industry and most of the Flex projects are industrialized. In your opinion, what are the key differentiators of GradleFx compared to Ant or Maven for instance?”

Because GradleFx uses convention-over-configuration and builds scripts are written in Groovy your average build script will be a lot shorter and easier to read.

Another big advantage is the flexibility that Groovy offers, if you need to perform some custom functionality that isn’t available yet in any plugin then it’s much easier to write this yourself compared to Ant or Maven. Simple tasks like copying some files can be added in just a few lines of code.

GradleFx can use Ivy or Maven repositories to get its dependencies so you don’t need a separate repository for your existing Maven or Ant based build scripts.

“Can you share with us a sample to manage several project and comment the code?”

Ok, I’ll show you an example of a multi-project build which uses all the conventions provided by GradleFx.

This is the build script of the parent project and these settings are used by all sub-projects. This project doesn’t compile to a SWC or SWF.

Code block

//specify the GradleFx plugin as a dependency for this build script. Maven Central will be used to get it.
buildscript {
	repositories {
		mavenCentral()
	}
	dependencies {
		classpath group: 'org.gradlefx', name: 'gradlefx', version: '0.3.2'
	}
}
 
//specify settings common to all subprojects
subprojects {
 
	//apply the GradleFx plugin to this project
	apply plugin: 'gradlefx'
 
	version = '1.0-SNAPSHOT'
 
	//define the repositories from which the project dependencies
	//should be downloaded
    	repositories {
        		mavenCentral()
        		mavenRepo name: 'yoolab-releases',      url: "http://projects.yoolab.org/maven/content/repositories/releases"
        		mavenRepo name: 'yoolab-snapshots',     url: "http://projects.yoolab.org/maven/content/repositories/snapshots"
    	}
 
	// specify the project dependencies. Notice the 'external' marker,
	// which means that the library will not be compiled in the
	// swc of the subprojects
   	dependencies {
        		external group: 'org.as3commons', name: 'as3commons-collections',
			version: '1.1', ext: 'swc'
        		external group: 'org.as3commons', name: 'as3commons-lang',
			version: '0.3.2', ext: 'swc'
    	}
}

Then we have the build script of a library subproject which will compile to a SWC.

Code block

//specify the type of flex project
type = 'swc'
 
dependencies {
	// specifies a dependency to another subproject. This will compile
	// the other project before compiling this one and use its
	// compiled SWC in this project.
	external project(':util')
}

And finally we have the build script of the application project which compiles to a SWF.

Code block

//specify the type of flex project
type = 'swf'
 
dependencies {
	// specify two dependencies to library projects. These will be compiled
	// into the SWF file since they belong to the "merged" configuration.
	merged project(':util')
	merged project(':domain')
 
	//override the dependencies specified in the parent project so they
	//use the "merged" configuration
	merged group: 'org.as3commons', name: 'as3commons-collections',
		version: as3commons_collections_version, ext: 'swc'
	merged group: 'org.as3commons', name: 'as3commons-lang',
		version: as3commons_lang_version, ext: 'swc'
}
 
// add another source directory for the locale files. The srcDirs property is a
// GradleFx property which by default has the value ['src/main/actionscript']. This
// is the directory where you need to put your actionscript and mxml files.
srcDirs.add('src/main/locales/{locale}')
 
additionalCompilerOptions = [
		'-locale=en_US'
]

That’s it for this example. You can find more examples in our GradleFx examples repository: https://github.com/GradleFx/GradleFx-Examples

“What are you working on and what will be the next features of GradleFx?”

I just released version 0.4 which contains support for AIR projects.

Upcoming features are mobile projects support, project file generation for Eclipse and Intellij IDEA, automatic downloading of the Flex SDK and AS3Doc generation.

“GradleFx is open-source. How can we contribute?”

You can contribute in a number of ways.

One is by trying out the project and giving feedback on our support forum and/or log issues in our issue tracker on Github.  Or if you feel some documentation is missing, feel free to add it to our wiki on Github (or just tell us so we can add it). It’s the feedback that we get that also makes this project better and we always try to do something with it.

Another way is by forking the project on GitHub, add a feature or improve the code and apply a “pull request”. Then we can integrate those changes and put them in an official release.

“How do we know when a new version of GradleFx is released?”

You can follow me or Steven on twitter, this is where we announce all things related to GradleFx.
Yennick: @SlevinBE
Steven: @stevendick

Some useful links to get started:

• Site: http://gradlefx.github.com/
• Documentation: https://github.com/GradleFx/GradleFx/wiki
• Examples: https://github.com/GradleFx/GradleFx-Examples
• Help & Support: http://gradlefx.tenderapp.com/home
• Bug Tracking: https://github.com/GradleFx/GradleFx/issues
• Changelog: https://github.com/GradleFx/GradleFx/blob/master/CHANGELOG.textile

“Game of Flex” is not just a game, it’s also a great way for us to showcase the great performance of Flex on tablet devices, and for you to discover the new components and features of our latest release of Flex! Indeed, Game of Flex is also a learning tool. At anytime, you can click on the “Snippet” button and read the source code of the current sample. You can also click on “Tutorial” to read an online tutorial about the current sample.

Download the game and the source code

The direct links to the application are:

Android tablets: https://market.android.com/details?id=air.com.riagora.flexgame
iPad: http://itunes.apple.com/us/app/game-of-flex/id483389384
BlackBerry Playbook: soon

You can also download the source code of the application. Install Flash Builder 4.6 and import this Flash Builder Project (FXP file): FLEXGAME.FXP

Some tips inside the code

If you want to check the source code of the app, you’ll learn…:

• How to use the new SplitViewNavigator architecture (portrait and landscape layouts on tablet devices)
• How to display HTML content inside a Flex app
• How to access the camera to take pictures
• How to use the BusyIndicator, ToggleSwitch and List components
• How to enable multi-touch
• How to manage your views
• How to use the accelerometer
• How to create custom AS3 item renderers for your lists
• How to access the local SQLite database
• How to use native extensions
• How to set up the new DateSpinner component
• How to display callout popups
• How to set up the software keyboard to match your needs
• How to declare spinner lists

New set of mobile components

Tablet devices are incredibly successful. The Apple iPad introduced new ways to structure applications and new user interactions. The new set of components available in Flex 4.6 is inspired by classic tablet applications. As you’re targeting a larger screen than a smartphone, you need to review your UI navigation. I’ve already shared some thoughts on this in my post named “Adaptive UI”. Thanks to the new SplitViewNavigator, you can manage the layout of multiple views. The ‘Adaptive UI’ is managed by the component and is based on the device orientation.

How to use SpitViewNavigator:

Code block

<s:SplitViewNavigator width="100%" height="100%" id="splitViewNavigator" autoHideFirstViewNavigator="true">
		<s:ViewNavigator id="vnList" firstView="views.ListQuestions" width="300" height="100%"/>
		<s:ViewNavigator id="vnFull" firstView="views.FullView" width="100%" height="100%">
 
			<s:actionContent.portrait>
				<s:Button id="navigatorButton"   label="Show questions" click="splitViewNavigator.showFirstViewNavigatorInPopUp(navigatorButton)" />	
			</s:actionContent.portrait>
		</s:ViewNavigator>
	</s:SplitViewNavigator>

More components are also available and directly inspired from iOS applications: the CallOutButton (popup related to a component), the SpinnerList, the ToggleSwitch and the famous DateSpinner.

Soft keyboard parameters

You can easily enhance the behavior of your soft keyboard. If you’re building a form, with a text input field that is waiting for a phone number, then you can modify the look of your mobile/tablet soft keyboard to display numbers only. You can also customize the label of the “return” key on the soft keyboard (and display “Join”, “Go” or “Search” for example). It’s a very nice feature detailed by Holly in this post.

You can set different values for the softKeyboardType property: number, email, punctuation, url, contact or default. For instance, to display numbers on the keyboard, just add a parameter to your TextInput component:

 <s:TextInput softKeyboardType="number" width="180"/>

AIR 3, native extensions and captive runtime

Air 3.1 is attached to Flex 4.6 developments. It means that you can easily embed ActionScript Native Extensions within your Flex mobile project. ANE are a bridge between your Flex mobile app and a native library that can extend the capabilities of the Flex SDK. A list of native extensions are available on adobe.com such as the Gyroscope API, Vibration, Notification, Kinnect… To import an ActionScript Native Extension within your project, just open the new tab in Flash Builder 4.6 dedicated to ANE.

Remember that you can also use the new captive runtime option while packaging a mobile application OR a desktop application. It will create a standalone application that is embedding the AIR runtime. On the desktop, it means that you can actually copy your application on a USB stick and launch it without administration rights! It’s a fantastic new way for deploying AIR apps. On mobile devices, we were already using this technic on iOS. Now you can use the same technic on Android and generate an .apk file that will embed a specific version of the AIR runtime.

Test Flex 4.6 apps on your device

There are already some Flex 4.6 apps available on the Android Market and on the App Store. If you have an iPhone, you can download the free music application called “Radio X-track”. It’s a Flex 4.6 app I’ve been working on, I’ll share more information about this app soon on this blog. Narcissus is also compiled with Flex 4.6 by the way and offers great performance on iPad tablets. Christophe and Holly shared an open-source tablet application to manage your expenses.I’ve also been working on a Flex 4.6 application for tablet users and Flex developers… This application is already secretly available on the Android Market but the app is still “in review” on the app store. As soon as it’s available for both iPad and Android tablets, I’ll showcase this application. More to come…

The evolution of Flex

This is a fairly long post, if you don’t have time to read it all right now, you may want to skip directly to What’s next for Flex. I’m French, I talk too much, and I’m not Victor Hugo… Whatever So feel free to skip this paragraph to focus on our future. But the history of Flex might help you understanding the difference between our past strategy and the new one.

Flex 1 was released in 2004. To develop and deploy a Flex app, you had to use a 15000$ server. I remember that I started looking at Flex 1.5 in 2005 at my previous company. Because of this economic model, I didn’t even try to develop a prototype. Then, after the acquisition of Macromedia, Flex 2 was launched with a free business model and an IDE based on Eclipse. It was 2006, when I started coding Flex projects and when I joined Adobe to promote this technology. In 2007, Flex 3 was open-sourced under the MPL license. Flex 4 introduced the Spark architecture that lets you skin visual components very easily and with a lot of freedom. Thanks to Flex 4.5.1 (and soon Flex 4.6) you can build “native-like” mobile apps and deploy them on Android, iOS and QNX. So what’s next?

I’m very close to the Java and the PHP community (I’m currently writing this post from the fantastic DEVOXX conference with 3200 Java developers around me). When we used to present Flex as an open-source technology, it was more a “you can view my source” one. That was a huge step, and it helped our community to understand how the framework works. After a few months, it also generated some frustration. Flex developers and strategic customers who are Flex masters wanted to contribute actively, optimize the code, etc… Some of them even started their own branches. The Spoon project is the expression of this will and the expression of our lack of efficiency in accepting contributions, which I think was because Flex was perceived and promoted as a product. What I want to express is that we were defining the new Flex features on our side, to (somewhat) surprise our community and generate excitement. It was of course based on customer and user feedback, but then the new features were only shared during main conferences (360Flex or MAX for instance), and this was related sometimes to our product strategy. And this system works very well to spur adoption and generate a lot of excitement: Flex is very successful in the Enterprise today thanks to this strategy.

What’s next for Flex ?

At the same time, HTML5 is moving very very fast — faster than most anyone would have predicted two years ago. This is mainly due to the success of the iPad. That’s why Adobe believes that within 3 to 5 years, depending on the complexity of your RIA, HTML5 should be able to enable decent Enterprise Application user experiences for desktop users, associated with a professional coding experience. What I would add, as an Enterprise consultant, is that we can easily add 2 or 3 years to this period of time. A significant part of the Enterprise customers I’m interacting with are still running on Windows XP. This is a reflection of the tempo of the Enterprise world that cannot be synced with the outside world for security, maintenance, training, and auditing reasons. So even if HTML5 integrates some key RIA concepts within 5 years, it means that browsers still have to implement them and that companies need to update to a recent browser… well, you know the story.

Flex is and will remain the leading framework for first-class Enterprise applications for many years. And by the way, don’t be scared. We’re not blind and we must accept the fact that HTML5 is making fantastic progress. That’s GREAT! And our community has A LOT of time to anticipate this shift and make the most of this transition. Adobe won’t let you down. We’ll contribute to open standards, and at the same time, Adobe, starting with my team, will make sure that you’ll make it through — and even thrive during — any shift in our industry. Don’t worry, if HTML5 becomes the standard for RIA apps, then the best HTML5 RIA developers of tomorrow will be today’s Flex developers. Why? Because RIA development is not just a matter of language. RIA developers have a lot of specific skills (design awareness, client-side architectures, service exposure architecture, user-experience, mobile applications conception and optimization to name a few). You have a unique knowledge of the market that goes beyond knowing a technology inside and out. Adobe is already a key player in the HTML industry, and we’ll deliver more and more advanced tools and technologies (you can already look at PhoneGap, Edge…).

That’s why we need to define the best strategy for the Flex framework and establish it as an Enterprise standard today! There are two options. The first option is to invest in more new features and hire more engineers on the Flex SDK team. For the long term, I don’t believe in this strategy. It’s the traditional way to proceed for software products but not for application development frameworks. The more committed and talented developers you have in the community, the more you need to let them interact with the source code of your technology. The more you have mission critical Flex apps deployed in large organizations, the more strategic customers need to trust the future of your technology. Open source can fulfill these needs. We all know that Flex is deeply linked to the Flash Player which boosted the innovation on the web, and then, consequently, in Rich Internet Applications. I believe that the Flex framework is very mature in terms of features and can answer pretty much all the current Enterprise needs. It can also answer  future needs as we can now rapidly build native apps for iOS, Android and QNX since Flex 4.5.

The second option is to consolidate the current SDK and transition to the next level of openness. That’s why we decided to propose incubating the Flex SDK to the Apache Software Foundation. I’m very happy and excited about this move for several reasons:

• Apache is a very respected foundation by developers and by large organizations. A lot of mission-critical Enterprise applications are already relying on Apache software: Axis, Ant, Maven, JackRabbit, Tomcat, Geronimo, ActiveMQ, Felix…
• We are not only proposing the Flex SDK, we’re also pushing BlazeDS (Java server libraries for data serialization and real-time messaging). In 2012, we’ll propose Falcon, a new generation compiler. We’ll also unveil and propose FalconJS, an experimental and advanced Flex to JavaScript compiler. More projects may also be proposed to Apache to build a first-class open Enterprise RIA stack.
• For the first time, Adobe won’t be the sole influencer on the Flex roadmap. We’ll still have engineers working on it but the effort will also be advanced directly by work of top Flex developers in the community (join the Spoon project if you’re one of them).

So Flex or HTML5 ?

I’ve been working on Rich Enterprise applications for more than 6 years and I can tell you that it requires a lot of different skills and specialized knowledge. RIA developers, and especially Flex developers, know how complex it is to combine an efficient user experience with a maintainable client architecture. Flex is really the only cross-platform solutions on the desktop for rich applications. Today, 90% of Flex applications are internal apps (statistics from what I see on the field) available on the intranet and on the extranet to share the screens with external partners or customers. Flex apps won’t run in mobile browsers as Apple and MSFT don’t host plugins on their tablets (we’re still waiting for the MSFT one by the way) and as Adobe announced its intent to discontinue Flash in mobile browsers. Thanks to this decision, Adobe engineers are now focusing on Adobe AIR, the runtime that can execute and package your Flex applications as native iOS, Android and QNX (BlackBerry) apps. With the arrival of Flex 4.6 at the end of November, Flex apps will perform even better to deliver “native-like” experiences on smartphones and tablet devices. So what’s the market for Flex? Well it’s huge because we are focusing on Enterprise apps and not on Customer apps, we’re focusing on Enterprise data-driven apps, on rebranding and re-architecting existing Enterprise apps developed with Web 1.0 technologies or even client-server ones. That’s a growing market in all industries. Tablets will accelerate this need of user-oriented architectures, because if you deliver a bad user experience on tablets, you’ll immediately fail. The potential of RIA for desktop and tablet users is higher than ever because it unlocks ROI (increase the productivity of your company, improve the decision making processes, reduce the learning curve and then the training costs for employees…). I know that today you’ll hear a lot of people talking about the growing role of tablet devices in our daily life, that tablets will replace PCs, etc… Who cannot agree? I’d like just to add that the Enterprise world is evolving at a different tempo. Believe me, you won’t see large organizations replacing all PCs by tablets next year. If it happens and if it makes sense, it will take years, maybe decades. Desktop users will still represent the main population of Enterprise apps end users for a very long time. With Flex, you can already target 100% of your desktop users without migrating to a new operating system or a new browser, and you can target 99% of tablet devices as you can now generate iOS and Android native apps.

This is regarding the market for Flex, but there’s also the “developer experience”. Flex has been designed for Enterprise developers who are used to working with object-oriented languages like Java, first-class debugging experiences (on the desktop and on mobile devices), continuous integration, agile development, modular applications managed by several development teams, productive tools based on Enterprise standard IDEs like Eclipse, etc… It’s by far the best and the most efficient coding experience on the market and that’s not trivial. Before developing a mission-critical application, you have to measure/estimate the development time. Flex is usually way faster than other solutions, for a better result at the end. That’s why it’s considered the leading RIA framework on the market. So, don’t be scared, Flex is not dead. I was not surprised to see some posts on the web promoting this idea. It’s a classic trend in our industry. Just to illustrate that point, I googled some queries. Here is my TOP 5 list of the dead technologies:

1. “.NET is dead” is the big winner with 576000 search results on Google. Congratulations.
2. “JAVA is dead” is following with 138.000 results. I can hardly feel this trend from Devoxx and the 3200 Java developers around me
3. “PHP is dead” is a little child with only 35.600 results.
4. “Ruby is dead” is in the same range with 30.700 results.
5. “AJAX is dead” generates 6500 results.

So we are newbies in this competition as “Flex is dead” only displays 5000 results I’m kidding of course, it’s a stupid analysis but it highlights that you shouldn’t always trust online articles about technologies lives. Try it with Flash, you’ll be amazed. Flash is a damned zombie :). Ok… no more stupid games, let me go back to the future of Flex.

How can I contribute ?

After the announcement of our proposal to the Apache foundation, I received several emails from Flex developers and customers who want to contribute, to play a role in the roadmap, to fix bugs, etc… We’re still defining the process, so I cannot share any information on that today. But as soon as everything is defined, I’ll be the first writing tutorials to explain how to contribute. It’s such a big opportunity for the Flex community. It’s also a huge change of strategy and I’m aware of that, and some of you may be a little bit nervous. But Flex won’t be the only project in collaboration with Apache. We acquired Day software, and the engineers at Day are Apache masters, true open-source contributors. I like that. PhoneGap will also become an Apache project. Adobe is one of the top contributing companies to the Apache Foundation, and I fully embrace this strategy. I want Flex to become as popular as Tomcat in Enterprise architecture!

Let’s embrace this strategy together. Adobe is proud of Flex and super proud of what you achieve everyday with this framework. Based on the emotional reactions perceived on social networks this week, I can tell that we are all true and passionate Flex lovers. So let’s continue to build on that passion and work together on the future of Flex.

I’ve been working on a Flex mobile application called Narcissus, and I finally found the time to finalize and publish it on the App Store. Narcissus is a free application, available on the App Store for iPad users, and on your desktop thanks to the Adobe AIR runtime. Narcissus can analyze and segments the followers of a Twitter account. Inspired by Google + circles, Narcissus categorizes your followers in circles based on their activity on twitter (the number of tweets they sent) and their influence (the number of followers they get). It helps to understand who’s following you, how active your followers are on Twitter  and how influential they are. If you want your content to be re-tweeted and seen by a maximum of Twitter users, you’ll discover that you just need to focus on few people of your network. I’ve recorded a video that showcases the basic features of Narcissus.

This application has been developed with the Flex 4.5.1 framework and Flash Builder. It performs very well on all platforms (iPad, Android and the PlayBook), that’s why I want to share some tricks I’ve learnt building this app.

Design Driven Development

I’m clearly not a designer, but as I was the only person involved in this project, I forced myself to use the Design Driven Development methodology. It implies designing the full user-experience before writing one single line of code. As this project is a “data-visualization” application, the design process was obvious. The goal of a dashboard is to transform data into information. I know the data I can get from Twitter and I know what’s the user problem which is in this case: “how can I know better who’s following me on Twitter to be more efficient on my social network ?”. The UI of the application must bring solutions to that question. As it’s a dashboard application, I decided to use the “drill-down” strategy: start with a global view (using circles) and give the ability to drill-down (analyze the list of followers per category and get the details about a follower). I think I spent at least 4 hours in Photoshop to design the main screen, place the elements, design the circles, the callout popups, the icons… Then the second step is “what’s the best UI architecture to serve this design?”. I rapidly decided to use the new ViewNavigator class of Flex 4.5 and the IconItemRenderer to get the best performance on tablet devices. So I’m using a classic <s:Application> root tag that contains eight <s:ViewNavigator> components, one per circle. I spent two days on coding the application. Then I tested it on an iPAD, optimized the code (mainly my database code) and fixed some bugs.

Optimizing SQLite calls

When you test your application on your PC, SQLite always acts very well. When Narcissus retrieves the list of followers for one account, it needs to save all the ids in one table. So, if you analyze an account that has 2000 followers, it means that you need to fire 2000 INSERT SQL queries. On the desktop, it’s okay, it takes less than one second to Adobe AIR to save these 2000 lines. On the iPAD 1, it’s another story. It takes more or less 10 seconds, and it can freeze the UI. Very bad user-experience. That’s why I decided to use SQLite transactions. If you need to execute a batch of INSERT, DELETE or UPDATE queries, always use transactions. In other words, if you need to execute SQL queries that don’t return a result, you can use transactions. It reduced the SQLite processing time by 90% in my case. Here is a link to the doc that explains how it works, and the code I’m using in the application.

Code block

var sqlS:SQLStatement = new SQLStatement();
			sqlS.sqlConnection = sqlc;
			sqlS.text = "INSERT INTO "+ tableName+"(idUser,screenName,name,url,description,circle,nbFollowers,statusCount,picture) VALUES (@IDUSER,@SCREENNAME,@NAME,@URL,@DESCRIPTION,@CIRCLE,@NBFOLLOWERS,@STATUSCOUNT,@PICTURE)";
 
			sqlc.begin();
 
			for (var i:int = 0; i < arrayFollowers.length; i++)
			{
				objUser = arrayFollowers.getItemAt(i);
 
				sqlS.parameters['@IDUSER'] = objUser.idUser;
				sqlS.parameters['@SCREENNAME'] = objUser.screenName;
				sqlS.parameters['@NAME'] = objUser.name;
				sqlS.parameters['@URL'] = objUser.url;
				sqlS.parameters['@DESCRIPTION'] = myDescription;
				sqlS.parameters['@CIRCLE'] = objUser.circle;
				sqlS.parameters['@NBFOLLOWERS'] = objUser.nbFollowers;
				sqlS.parameters['@STATUSCOUNT'] = objUser.statusCount;
				sqlS.parameters['@PICTURE'] = objUser.picture;
				sqlS.execute();
			}
			sqlc.commit();

I’m also using incremental savings (auto-save) for performance and user-experience reasons.

How to persist simple parameters

I wanted to persist the settings (activity and influence thresholds) in a cleaner way than using a SQLite database. I started using the classic File API. The only directory that works on tablet devices is the Documents one. Here is some code that works both on desktop and tablet apps:

Code block

var file:File = File.documentsDirectory.resolvePath('settingsNarcissus.inf');
	if (file.exists) file.deleteFile();
 
	var fileStream:FileStream = new FileStream(); //create a file stream
	fileStream.open(file, FileMode.WRITE); // and open the file for write
	fileStream.writeObject(object); //write the object to the file
	fileStream.close();

But I’m not a big fan of the Files approach. That’s why I decided to use the Persitence Manager API. This class is so easy to use and so efficient!!! Here is how you can easily save and load settings from anywhere in your mobile project:

Code block

//SAVE
 
var object:SettingsObj = new SettingsObj(thresholdTweets,thresholdFollowers);
 
var persistenceMan:PersistenceManager = new PersistenceManager();
	persistenceMan.setProperty("settings",object);
	persistenceMan.save();
 
//LOAD
 
var persistenceMan:PersistenceManager = new PersistenceManager();
 
	try{
		var object:Object = persistenceMan.getProperty("settings");
 
		thresholdFollowers = object.savedThresholdFollowers;
		thresholdTweets = object.savedThresholdTweets;
	}catch(e:Error){
		//error management if empty
	}

Animations

Some developers asked me how I managed the animations and the transitions with the circles. For the animations, I’m simply declaring basic MXML sequences. When I get the profile image picture of a Twitter account, I’m assigning it to a circle, and then I change the xTo and yTo coordinates of the ‘moveProfile’ object. Here is how I declared the sequence.

Code block

<s:Sequence id="seqAnimationProfile" target="{profileImageComp}" effectEnd="seqAnimationProfile_effectEndHandler(event)">
			<s:Fade  alphaFrom="0" alphaTo="100" duration="500"/>
			<s:Move id='moveProfile'  xFrom="480" yFrom="380" duration="800">
				<s:easer>
 
					<s:Sine/>
 
				</s:easer>
			</s:Move>
			<s:Fade alphaFrom="100" alphaTo="0" duration="500"/>
			<s:Move  xTo="480" yTo="380" duration="50"/>
		</s:Sequence>

Regarding the circles, I’m using the default transitions of the ViewNavigator object. To enjoy the background image, I’m placing eight ViewNavigator with a transparent background which load views with transparent background. Just set the backgroundAlpha property to 0 in the ViewNavigator tags AND in the View tags. The circles are also animated. To do so, I’m playing with MXML graphic properties. The static parts are PNG files (the background and the reflection effet at the top of the circle), the animated part is a Spark Graphic component. Here is the MXML code for a circle:

Code block

<s:Image horizontalCenter="0" source="assets/images/circleBack.png"   verticalCenter="-20"/>
	<s:Graphic id="theCircle"  version="2" horizontalCenter="0" verticalCenter="-20">
		<s:Ellipse height="{radiusCircle}" width="{radiusCircle}">
			<s:fill>
				<s:SolidColor color="{data.colorCircle}"/>
			</s:fill>
		</s:Ellipse>
	</s:Graphic>
	<s:Image horizontalCenter="0" source="assets/images/circleReflect.png" verticalCenter="-87"/>

To animate the circles with some easing, I declared a Resize effect.

Code block

<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<s:Resize id="fxResize"  duration="500"  target="{theCircle}">
			<s:easer>
 
				<s:Sine/>
 
			</s:easer>
		</s:Resize>
 
	</fx:Declarations>

Leveraging the MXML tags of the Flex framework, you can very quickly build a professional iPAD application. Narcissus has been immediately approved by Apple on the App Store.

Links

If you want to use Narcissus on your desktop (MAC & Windows), install this AIR application:

http://www.riagora.com/narcissus/Narcissus.air

If you have an iPAD, then you can find it on the App Store:

http://itunes.apple.com/us/app/narcissus/id472974421?mt=8

Feel free to add a nice review on the App Store. If you don’t like the app, don’t say anything

Narcissus is just a small app that showcases how creative you can be with basic Flex components on tablet devices. I’m working on the Android version (I just need to fix some relative coordinates stuff to accept all screen resolutions).

I hope you’ll like it. Enjoy  !

Google Analytics is also trying to ease the addition of tracking events inside Flex applications. Unfortunately, the current version of the Google Analytics Tracker library doesn’t support Flex mobile projects. As I really needed this feature for a mobile app (that I will unveil next week), I modified the source code of the GATracker library and now it works like a charm. You can track everything, I mean everything:

– If you have HTTPService requests, you can track how many successful results your users get and  compared this number with the number HTTP fault events.

– If you have 5 tabs in your mobile apps, measure what is the most used tab, check if they are all used. You can also imagine to track the most common path for your app and track scenarios such as “the user hits tab 1, then tab 3 and then tab 2, is the main use case”.

Your mission is to defined what makes sense in your application, and which information will help optimizing it. Here are the steps I used to add Google Analytics tracking information in my mobile application:

1. Download the source (not the SWC) of the Google Analytics for Flash library:  http://code.google.com/p/gaforflash/

2. Open your Flex mobile project and add the code inside your project. It will create a com.google.analytics package with a lot of AS3 classes.

In your Google Analytics console, you need to measure an existing website (in my case riagora.com) and add the classic Google Analytics JavaScript library. Then your website will be validated and you’ll be given an ID for your website by Google. We’ll surcharge the tracking information of your website with mobile tracking information. The ID of your website should look like this chain of characters: UA-2999999-2.

3. On the application level (your root MXML file), create an AnalyticsTracker variable and instantiate a GATracker. The tracking variable is public. Add this code for instance:

Code block

public var tracker:AnalyticsTracker;
protected function viewnavigatorapplication1_creationCompleteHandler(event:FlexEvent):void
{
	// TODO Auto-generated method stub
	tracker = new GATracker(this,"YOUR_GOOGLE_ANALYTICS_WEBSITE_ID","AS3",false);
}

4. If you want to track something, just call the trackPageview method. It’s waiting for the name of the HTML page as a parameter. Create custom names such as “/mobileApp-Success”, or “/mobileApp-tab1″.

Code block

protected function button1_clickHandler(event:MouseEvent):void
{
	// TODO Auto-generated method stub
					FlexGlobals.topLevelApplication.tracker.trackPageview('/mobileApp-tab1');
}

5. Now if you compile your project, you’ll get error messages such as the famous TypeError #1009, also known as “the error that doesn’t help”. Let’s start modifying the Google Analytics code.

6. Open the class components/FlexTracker.as

7. Search and replace this code:

Code block

var appclass:Object = getDefinitionByName( "mx.core::Application" );
 _app = appclass.application;

by code that doesn’t refer to MX Application. In Flex 4.5, we don’t use MX applications anymore, but we can use the FlexGlobals class

Code block

appclass = getDefinitionByName( "mx.core::FlexGlobals" );
 
_app = appclass.topLevelApplication;

8. Then we need to add the root URL of our virtual website (in my case riagora.com). By default, the library tries to get the URL from browser information… well this cannot work with a mobile app running in AIR, so we’ll hard-code the URL Open the GATracker.as class. Comment the _env.url line and add your own root URL.

Code block

//_env.url = _display.stage.loaderInfo.url;
_env.url = "http://www.riagora.com/";

9. We still have to deal with small ‘stage’ issues. Open the core/IdleTimer.as class and comment two lines of code that deal with the Stage:

Code block

_debug      = debug;
         //   _stage      = display.stage;
            _buffer     = buffer;
            _lastMove   = getTimer();
            _inactivity = inactivity * 1000; //milliseconds
 
            _loop.addEventListener( TimerEvent.TIMER, checkForIdle );
            _session.addEventListener( TimerEvent.TIMER_COMPLETE, endSession );
          //  _stage.addEventListener( MouseEvent.MOUSE_MOVE, onMouseMove );

10. And that’s it!!! Within the Google Analytics console, you can now create custom dashboards, filtering the visited pages that starts with “/mobileApp”.

11. You can download this sample Flex 4.5.1 project that contains my updated Google Analytics library. Here is the link to this Flash Builder project: http://riagora.com/pvt_content/android/GoogleAnalytics.fxp

WARNING: Google Analytics doesn’t display the results in real-time ! You have to wait for 24 hours before seeing some tracking results.

When you look at how humans have interacted with enterprise knowledge over the years and even today, paper is still very present. You often interact directly with the knowledge on a horizontal plan using a pen, but this can hardly be centralized. Collaboration on a whiteboard is also an interesting case. You share and review the knowledge on a vertical plane. Often this knowledge is lost as collaboration is thought of as a temporary step in an enterprise workflow or a decision making process. These two interactions (paper and whiteboard) are still very common in large organizations, and that’s how we learn things at school. Personal computers introduced a different approach due to the rise of mice and keyboards. You move your mouse on an horizontal plane, it acts on a vertical plane that hosts the knowledge. For the first time the knowledge could be easily centralized and shared beyond the firewall (the extended company) with partners and external customers. Inspired by typewriters, PCs are not mobile at all, even less mobile than paper. The laptop was the first attempt of mobility. It automatically extended our work area and let us interact with the enterprise knowledge from home and on the road. But it also introduced some of the worst interactions ever (trackpad, balls, etc…). Smartphones are the real truly mobile device, the first that can answer the “anywhere and at any time” requirement. But the typing experience is bad and the small screens don’t let you review documents for instance. For all these reasons, you can see why tablets are a natural evolution. Although there’s still progress to be made, tablets are fully mobile, the typing experience is good, the large screen lets you review documents, and for the first time, and you can combine pleasure and work on the same device.

The rise of tablet devices in large organizations introduces new challenges for IT services. They have to define new processes to secure the configuration and deployment of apps, they have to ensure that mobile apps are auditable and compliant, and, most of all, they have to run existing applications. On the other side, end users are already tablet ninjas. That’s why there will be a gap between what IT services can deliver and users’ expectations. I also believe that native applications deliver the experience that people expect. If you deliver a classic web app on a tablet, employees won’t feel the benefits and they will wait until they are in front of a PC to interact with your app. By the way, I don’t think that tablet devices will replace laptops or PC. Sometimes, it will be complementary, and sometimes yes, there will be some cannibalization. If you look at the enterprise apps developed on tablets in 2011, they were mainly targeting three populations: the top managers, the sales force and the inspectors. Top managers need a real-time access to strategic information. They want dashboards to accelerate and improve their decision making time. The sales force uses tablets for two reasons. It’s a fantastic device to showcase the products  you’re selling, and it’s also a nice way to interact with the CRM. Inspectors, or employees that need to audit external environments, are naturally using tablets to access technical information, capture data in the field and collaborate. Tomorrow, anyone is a potential tablet candidate. Even I as a developer, I can imagine having a tablet with a companion app, helping me browsing the AS3 doc for instance (I think that someone had this idea before me… more to come…).

Flex developers can answer these new needs very easily. We are in pole position. If we embrace a Design-Driven Development methodology, we’ll be very successful. DDD consists of defining the technical infrastructure of your solution based on the user experience. The UI is here to solve end users’ problems, and the system serves the UI. If you build a system-centric application on a tablet, with a UI that reflects the system, then you’ll fail. I hope that tablets will boost the Design-Driven methodology in large organizations. It would also increase the number of Rich Internet Applications. Today, RIA frameworks (and especially Flex) are much more mature than enterprise IT services.  Even with the best technology, if IT services stick to their traditional way of developing products, they will fail again and again. Flex developers need to become DDD sponsors.

Here is the recording of my presentation. You’ll also find my slides (hosted by SlideShare) at the end of this article.