SenchaCon Day2: Serving Mobile Apps from CMS

James Pearce from Sencha gives this talk.

How is Mobile is changing the Web?  The overriding question for this talk.

A perfect storm for HTML5, CSS3, and JS++ on new platforms like iOS, Android, and webkit.  New innovation is coming from mobile browser experience itself together with very capable computing devices that are in our pockets.

Mobile should be used as an adjective instead of a noun to represent how we should treat the browser on mobile devices.

Simplest thing to do is to have a separate theme to present on mobile versus desktop.

Per the mobile evolution, things like UI and biz logic can now be run on the mobile device and syncing data sets between the device and the server. Sencha Touch does a great job at doing this, even when the user is offline.

Walkthrough of connecting WordPress with SenchaTouch to a mobile device to categorize and comment on posts:

  1. Create a simple switching plugin
  2. Use MVC to create app
  3. CMS categories and posts will be modeled
  4. Stores populated and synced with JSON

For item 1, he uses UA sniffing to see if the device iPhone and redirect to a new location that contains the Sencha Touch app. He creates a simple PHP plugin and enable in into WordPress.

For item 2, he uses a generator from cmd line to create a skeleton Sencha Touch app.  He shows how it stubs out the MVC elements and tests it in a iPhone emulator to show it works.

For item 3, he shows how to create categories on the left side and the posts on the right. He does this again with the CLI to create these elements.

For item 4, he shows how we can switch the store to “ajax” and extend the PHP plugin to iterate through the data and serve that up in a JSON response.

Things to consider:

  • Thematic consistency
  • Brand consistency
  • Smart sync for large data sets
  • Account management for security in the case of a lost phone
  • http://tinysrc.net will help with scale/resize graphics for mobile screens

Mobile devices are different…geolocation, telephony, camera, messaging, etc.  How can you incorporate this easily with your CMS?

Most importantly, Mobile users are different.  Don’t just throw up a desktop designed web app on the mobile device.

Advertisements

2 comments on “SenchaCon Day2: Serving Mobile Apps from CMS

  1. I really enjoyed your post. I have a project that I want to use a WordPress/Sencha Touch combo for a reasonably complex inspector companion app, but I’m not familiar enough with mvc to accomplish the solution you write about. Would you be available to develop a word press plugin to make a Sencha ui work inline with WP google maps, forms, and invoicing? or may you be able to point me in the direction of resources to roll my own? Thanks for a great read.

    • Thanks! What you’re asking seems to be reasonable, but I don’t think you’d develop a wordpress plugin. Just create a Sencha Touch app that incorporates the features you’d like. Maps, forms and invoicing (through a REST service) are all possible. I recommend the Sencha Touch forum for help on specific issues.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s