Pro Yearly is on sale from $80 to $50! »

Cross-Platform Mobile Development

3e101126b514c65ee531e47bd6281ba3?s=47 Nathan Smith
November 13, 2012

Cross-Platform Mobile Development

Slides from a talk at projekt202 Austin, where I covered some "best of" material from two previous talks…

— http://j.mp/pro-rwd
http://j.mp/web-skills

3e101126b514c65ee531e47bd6281ba3?s=128

Nathan Smith

November 13, 2012
Tweet

Transcript

  1. Cross-Platform Mobile Development Nathan Smith Principal UI Architect, projekt202 TUESDAY

    — NOVEMBER 13, 2012 — AUSTIN, TX
  2. Relax, don’t stress out taking notes. You can get the

    slides here… http://j.mp/cross-mobile
  3. Who am I?

  4. I do mobile/web UX + JavaScript at http://projekt202.com (Me, on

    Twitter: @nathansmith)
  5. The Rise of Mobile

  6. http://flickr.com/photos/djwudi/382030798 State of mobile in 2007 — The year the

    iPhone was introduced
  7. Handset design was quite diverse “way back when.” Industrial designers

    were still (awkwardly) searching for the best form factor…
  8. http://zackmorriscellphone.com

  9. Technology is cyclical. Good ideas are often “borrowed” and make

    their way to products from multiple vendors. http://engadget.com/photos/hp-envy-15-vs-the-macbook-pro
  10. The state of mobile, now… Touch screens reign supreme

  11. Not everyone can rock the giant cell phone forever… http://hulu.com/watch/76560/late-night-with-jimmy-fallon-saved-by-the-bell-reunion-update-3

  12. <old-man-voice> Nowadays, it’s more about the software on the device.

    </old-man-voice>
  13. http://lukew.com/ff/entry.asp?1506 1,450,000 mobile devices activated 317,124 newborns begin life Each

    day, on planet Earth…
  14. The one thing all these phones have in common (besides

    Angry Birds) is they all have decent web browsers. http://paulirish.com/2010/high-res-browser-icons
  15. http://computerworld.com/s/article/9227412/Obama_orders_agencies_to_optimize_Web_content_for_mobile

  16. “Obama orders agencies to optimize Web content for mobile…” http://flickr.com/photos/whitehouse/7161178504

  17. The term “Responsive Web Design” was coined by Ethan Marcotte,

    in an an article published by A List Apart. Loosely defined, it means adapting to various screen sizes, using a fluid grid and @media queries in CSS.
  18. None
  19. Ethan also wrote a book… http://www.abookapart.com/products/responsive-web-design

  20. Essentially, “responsive” has broken into the mainstream. It ain’t just

    for designer blogs anymore. Some pretty big name sites are adapting…
  21. Microsoft.com — Home page is responsive

  22. Time.com — Entire site is responsive

  23. Disney.com — Entire site is responsive There is one Flash

    ad, which disappears if the browser is at “mobile” width. Note: Most mobile devices have little/no support for Flash, Silverlight, etc.
  24. Disney.com — Menu adapts, based on screen size

  25. When should you use RWD™? Responsive web design using @media

    queries (with one codebase for all devices) typically works best for web “sites” (not apps). Apps work best when tailored to one particular interaction paradigm. For instance, mobile Gmail is a different experience than on the desktop. As a general rule of thumb, if your content can be read via RSS (such as Google Reader) and still make sense, it might be worth considering a responsive approach.
  26. None
  27. Like accessibility, “responsive” works best with planning… #FAIL

  28. None
  29. // For good browsers... @import base @media (min-width:320px) @import 320-up

    @media (min-width:480px) @import 480-up @media (min-width:780px) @import 780-up @media (min-width:960px) @import 960-up @media (min-width:1100px) @import 1100-up
  30. // For older IE... @import base @import 320-up @import 480-up

    @import 780-up @import 960-up <!--[if (gt IE 8) | (IEMobile)]><!--> <link rel="stylesheet" href="/css/style.css"> <!--<![endif]--> <!--[if (lt IE 9) & (!IEMobile)]> <link rel="stylesheet" href="/css/ie.css"> <![endif]-->
  31. @media queries aren’t just for width. Also works well for

    “retina” detection…
  32. None
  33. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (

    min-device-pixel-ratio: 2) { span.location { background-image: url(location@2x.png); background-size: 16px 14px; } span.success { background-image: url(success@2x.png); background-size: 13px 14px; } a.delete { background: url(delete@2x.png) no-repeat 0 -100px; } .content a.fav-link { background-image: url(favorite@2x.png); background-size: 11px 13px; } }
  34. The biggest problem facing responsive design is <img> and potential

    file size. But, there’s a neat solution for JPG images, at least…
  35. None
  36. Mobile web trivia time… — PhoneGap on Windows Phone uses

    the IE10 engine (it is pretty good) — WebKit is the dominant rendering engine across most mobile devices — iOS, Android, Blackberry, webOS — Blackberry has one of the best WebKit-based browsers available
  37. So, what should I build? [A] Desktop web app [B]

    Mobile web app [C] Mobile native app
  38. [D] All of the above Note: I’m not saying you

    have to build all-in-one. But it is possible.
  39. Benefits of native development — Default OS look & feel

    (UI conventions) — Performance (“closer to the metal”) — Access to device hardware (GPS, etc) — App store/marketplace distribution — Benefit from latest OS enhancements
  40. Drawbacks of native development — Tied to the particular OS

    you built for — Maintaining a multi OS team/skill-set — Dealing with app store approval process — Keeping app in sync with OS updates
  41. LinkedIn’s iPad app is 95% HTML5 We did users studies

    in-house, and I don’t think people noticed a big difference. Nobody said, “Oh that’s native,” or “Oh, that’s web.” As long as we can make the experience fast enough, nobody can tell the difference. It still feels right. — Kiran Prasad http://venturebeat.com/2012/05/02/linkedin-ipad-app-engineering
  42. Benefits of hybrid development — Common codebase for multiple OS’s

    — Access to device hardware (GPS, etc) — App store/marketplace distribution — Skills you already have (HTML, CSS, JS) — Potential code reuse in web site/app
  43. Drawbacks of hybrid development — Build for lowest common denominator

    — 3rd party SDK’s might lag behind OS — Want to use feature X? Wait for an implementation in abstraction layer. — An abstraction layer can have bugs of its own. Have to determine if a bug is in your code, the abstraction layer, or OS.
  44. Facebook was HTML5, but is going native http://bits.blogs.nytimes.com/2012/06/27/facebook-plans-to-speedup-its-iphone-app/

  45. Note: Essentially, Facebook was just “doing it wrong” when it

    came to HTML5 — Sending down HTML, CSS, JS to the app, rather than building the app with that embedded, and consuming lightweight JSON sent from the server. “A craftsman doesn’t blame his tools”
  46. None
  47. None
  48. None
  49. Titanium from Appcelerator http://appcelerator.com/platform

  50. None
  51. Areas where Titanium shines — Native UI — Great for

    iOS, crapshoot on Android — Build for iOS, Android, and Blackberry — Some code reuse across platforms — Entirely JavaScript based — Uses CommonJS’s AMD approach — Except for WebView (HTML/CSS too)
  52. http://j.mp/bachmann-eyezed

  53. Abstraction layers tend to be harder to debug than “native”

    languages — Objective-C, C#, or Java — whilst using an IDE such as Visual Studio, Xcode, or Eclipse. With “the web,” you have familiar browser-based desktop tools in Chrome, Firebug, or Opera Dragonfly.
  54. http://phonegap.com PhoneGap from Adobe

  55. None
  56. — It embeds a WebView in a native app —

    Native app gives access to OS API’s — All the UI is built via HTML/CSS — JavaScript handles everything else — The app wrapper compiles via… Xcode, Eclipse, Visual Studio, or “the cloud” → build.phonegap.com How PhoneGap works
  57. None
  58. Areas where PhoneGap shines — It is “the web you

    already know” — Debugging via desktop browser — Access to device API’s (GPS, etc) — Strives to implement W3C specs — Camera API, etc. — Supports Windows Phone, too
  59. http://youtu.be/nOEw9iiopwI

  60. None
  61. http://host.sonspring.com/handlebbbars Handlebbbars demo of Handlebars.js and the Dribbble API

  62. http://handlebarsjs.com

  63. None
  64. Site/App adapts, based on screen width… http://host.sonspring.com/handlebbbars

  65. @media (min-width: 880px) { /* line 198, ../sass/_site.sass */ body

    { width: 880px; margin: 0 auto; } /* line 202, ../sass/_site.sass */ #list li { float: left; width: 400px; height: 36em; } } @media (min-width: 1320px) { /* line 208, ../sass/_site.sass */ body { width: 1320px; } }
  66. http://dribbble.com/api

  67. Dribbble API: JSON

  68. Handlebars template <script type="text/x-handlebars" id="_template-list-item"> {{#each shots}} <li> <p> <b

    class="big"> {{title}} </b> <img alt="{{title}}" class="frame" style="background-image:url({{image_url}})" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAEklEQVQIHWP8//8/AzJgJCg AAB+ICPuLaDnAAAAAAElFTkSuQmCC" /> </p> <table> <tr> <th> Designer: </th> <td> <b>{{player.name}}</b> </td> </tr> {{#if player.twitter_screen_name}} ... {{/if}} {{#if likes_count}} ... {{/if}} {{#if short_url}} ... {{/if}} </table> </li> {{/each}} </script>
  69. <script type="text/x-handlebars" id="_template-list-item"> {{#each shots}} <li> <p> <b class="big"> {{title}}

    </b> <img alt="{{title}}" class="frame" style="background-image:url({{image_url}})" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAEklEQVQIHWP8//8/AzJgJCg AAB+ICPuLaDnAAAAAAElFTkSuQmCC" /> </p> <table> <tr> <th> Designer: </th> <td> <b>{{player.name}}</b> </td> </tr> {{#if player.twitter_screen_name}} ... {{/if}} {{#if likes_count}} ... {{/if}} {{#if short_url}} ... {{/if}} </table> </li> {{/each}} </script> Handlebars template
  70. ... {{#if player.twitter_screen_name}} <tr> <th> Twitter: </th> <td> <a href="http://twitter.com/{{player.twitter_screen_name}}">

    @{{player.twitter_screen_name}} </a> </td> </tr> {{/if}} {{#if likes_count}} <tr> <th> Likes: </th> <td> {{likes_count}} <span class="mute">&hearts;</span> </td> </tr> {{/if}} {{#if short_url}} <tr> <th> URL: </th> <td> <a href="{{short_url}}">{{short_url}}</a> </td> </tr> {{/if}} ... Handlebars template
  71. ... {{#if player.twitter_screen_name}} <tr> <th> Twitter: </th> <td> <a href="http://twitter.com/{{player.twitter_screen_name}}">

    @{{player.twitter_screen_name}} </a> </td> </tr> {{/if}} {{#if likes_count}} <tr> <th> Likes: </th> <td> {{likes_count}} <span class="mute">&hearts;</span> </td> </tr> {{/if}} {{#if short_url}} <tr> <th> URL: </th> <td> <a href="{{short_url}}">{{short_url}}</a> </td> </tr> {{/if}} ... Handlebars template
  72. @font-face { font-family: 'Open Sans'; // For all good browsers,

    including IE9. src: url('../fonts/OpenSans-Regular-webfont.woff') format('woff'), // For older IE, and Android default browser. url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'); } @font-face { font-family: 'Open Sans'; font-weight: bold; // For all good browsers, including IE9. src: url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), // For older IE, and Android default browser. url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'); } All modern browsers support *.woff or *.ttf
  73. http://fontsquirrel.com

  74. http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli CSS served to browser Neatly organized *.sass

  75. CSS Sass Compass http://sonspring.com/journal/sass-for-designers

  76. http://compass-style.org

  77. Compass makes vendor prefixes easy...

  78. Compass brings sanity to gradients...

  79. Text editors and IDE’s that support Sass/SCSS syntax Aptana http://aptana.org

    BBEdit http://barebones.com/bbedit Chocolat http://chocolatapp.com Coda http://panic.com/coda E Text Editor http://e-texteditor.com Eclipse http://eclipse.org Emacs http://gnu.org/software/emacs Espresso http://macrabbit.com/espresso GEdit http://projects.gnome.org/gedit Komodo http://activestate.com/komodo-ide Netbeans http://netbeans.org PhpStorm http://jetbrains.com/phpstorm PyCharm http://jetbrains.com/pycharm RubyMine http://jetbrains.com/ruby SubEthaEdit http://codingmonkeys.de/subethaedit Sublime Text http://sublimetext.com/dev TextMate http://macromates.com Vim http://vim.org Visual Studio http://microsoft.com/visualstudio http://sass-lang.com/editors.html     
  80. IE <= 9 gets jQuery, other browsers get Zepto <!--[if

    gt IE 9]><!--> <script src="zepto.js"></script> <!--<![endif]--> <!--[if lte IE 9]> <script src="jquery.js"></script> <![endif]-->
  81. None
  82. // Redefine: $, window, document, undefined. var APP = (function($,

    window, document, undefined) { // Expose contents of APP. return { // APP.go go: function() { // ... }, // APP.init init: { // ... }, // APP.util util: { // ... } } // Parameters: Zepto/jQuery, window, document. })(typeof Zepto === 'function' ? Zepto : jQuery, this, this.document); http://host.sonspring.com/handlebbbars/assets/js/application.js Overview of Handlebbbars’ application.js file
  83. markup = $('#_template-list-item') .html() .replace(/\s\s+/g, ''); template = Handlebars.compile(markup); Where

    the magic of Handlebars happens Yes, this looks underwhelming. That’s the point. It’s code you don’t have to write yourself! :) http://host.sonspring.com/handlebbbars/assets/js/application.js
  84. None
  85. Underscore.js is a power tool for working with collections of

    objects and arrays… — Collections — sortBy — pluck — uniq — extend — flatten — each — filter — find — Utility functions — throttle — chain — times     
  86. Building the app, on Android phone

  87. PhoneGap tip: Declare “safe” domains on iOS http://anujgakhar.com/2011/11/22/phonegap-gotcha-error-whitelist-rejection

  88. “Real artists ship” — Steve Jobs Hopefully, I have inspired

    you to create more rapidly shippable software today :)