GeneralMobile Hybrid Development with WordPress


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

GeneralMobile Hybrid Development with WordPress

  1. 1. Mobile hybrid development with WordPress Saturday November 24th, 2012 Bologna, Italy
  2. 2. Reader• has introduced a blog reader feature that’s a cross between Google Reader and reader apps like Flipboard. Through it you can keep track of blogs from, but also other places.
  3. 3. Reader• The reader displays all the posts across all the blogs you follow in the order they were published, with the most recent content appearing at the top. You’ll see an excerpt of the introduction to each post, the first image in the post, and thumbnails of any other images that the post contains.
  4. 4. Reader
  5. 5. Reader• A user can add any blog to the Reader by tapping the “Follow” button in the top admin bar while viewing the blog.
  6. 6. Introducing the mobile Reader• Read posts from blogs you’re following on right in the mobile apps, with the addition of social actions, such as ‘like’, ‘reblog’, ‘in-line commenting’, and more.• We wanted to add this new feature on all of our mobile apps (Android, iOS, BlackBerry, Windows Phone), trying to reuse the same codebase as much as possible.
  7. 7. Requirements• The content should be available as soon as the user clicks on the button. No lags, no long loading time. (If your app takes too long loading data, the user will probably switch to another task).• Access device native features such as sounds, native pull-to-refresh, blog preferences stored in the app.• Native or Hybrid ? -> We tried the Hybrid way
  8. 8. Hybrid Mobile Apps• A hybrid app is a native, downloadable app, that runs all or some of its UI in an embedded browser component.• HTML / CSS / JavaScript.• Hybrid apps can access device features such as file- system, cameras and geolocation services.• Frameworks, such as the open source project ‘Apache Cordova’, make the development of hybrid apps portable across devices, and allow developer to access native device features from one common JS API.
  9. 9. Loading the Reader• Clients authenticate on startup and keep track of the WP auth cookie. ( An alternative way is to use the login form and the redirect_to parameter, but it’s slower ).• The target of the redirect ( The URL of the Reader ) is something like• We’ve added a filter on ‘page_template’, and the server outputs a simple HTML5 page.• The home page is a template that loads the required CSS and JS files.• Ajax calls to load the content of the reader. Those calls will start when the home page is fully loaded on the client.
  10. 10. [ Example of server response{ "fp_bg_image" : ",0.5,3", "avatar" : "", "author_name" : "Tim", "author_avatar" : ";", "title" : "I Donu2019t Enjoy the Ride", "content" : "<p><img class="alignright" title="Road Trip" alt="" src=">....", "excerpt" : "<div class="full">..../div>...", "post_id" : 185, "guid" : "", "permalink" : "", "blog_id" : "35445524", "blog" : "my narrative odyssey", "blogurl" : "", "ts" : 1353217713, "comment_count" : 0, "pluralized_comment" : "Comments", "ago" : "1d", ... "follow_url" : ";_wpnonce=not_in_the_house_XXdd5a200", "unfollow_url" : ";unsub=1&amp;_wpnonce=not_in_the_hous", "following" : 0},
  11. 11. How it looks on different devices The same experience onAndroid and iOS. A little bit different on BB.
  12. 12. How it looks on different devicesBlackBerry with Keyboard iPhone4
  13. 13. How it looks on different devices : Topics SelectorBlackBerry with Keyboard iPhone4
  14. 14. How it looks on different devices : Comment FormBlackBerry with Keyboard iPhone4
  15. 15. JS Libraries used• FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.• {{ mustache }} - Templating• Two internal libraries for UA detection and capabilities detection.
  16. 16. Communication between JS and Native code • We’ve written a “bridge” that simplies the communication between the JS layer and the native code (and vice versa). • The bridge also adds some security checks to prevent malicious pages from executing native methods.
  17. 17. Issues found• Excessive stuttering when scrolling the posts list with images on it (Old versions of Android).• On the iPhone4 there were issues scrolling the lists due to missing optimizations for the UIWebView, and the absence of the Nitro JS Engine.• We did a lot of optimizations, but the scrolling is fast on iPhone 4S, not on the iPhone4.• BlackBerry 7 browser is very slow at rendering complex pages.• Windows Phone 7 doesn’t support HTML5 so we skipped that platform for now.
  18. 18. Performance Improvements (1)CACHE:# JS/wp-includes/js/jquery/jquery.js..# CSS/wp-content/themes/nomoreplasticthree/mobile/v2/reader.css..# images from the CSS/wp-content/themes/nomoreplasticthree/i/mobile/v2/read.png/wp-content/themes/nomoreplasticthree/i/mobile/v2/read@2x.png...# All other content accessed over the NetworkNETWORK:/wp-admin/admin-ajax.php**http://*https://*
  19. 19. Performance Improvements (2)• Use of localStorage to store the JSON response(s), and make them available without accessing the net.• JS time-diff to update the content without reloading it from the network.• Images are replaced with a smaller version server- side. Full version will be downloaded later, on demand, with a simple JS code. (This is possible thanks to the .COM ImagePress API). %2FUomoVetriRottiMare.jpg&h=150
  20. 20. The Future: REST API + Native • REST API opens access to posts, comments, follow, like and more. • • Available on, and on Jetpack powered sites. • Should be available in WordPress Core in the future.
  21. 21. WordPress mobile appsWordPress Mobile specific development blogs with links to code testing info:• WordPress for Android• WordPress for BlackBerry• WordPress for iOS• WordPress for Windows Phone
  22. 22. Thanks ! Questions ?Danilo ErcoliMobile Wranglerhttp://daniloercoli.wordpress.com