Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cross-Platform Mobile Development

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

Nathan Smith

November 13, 2012
Tweet

More Decks by Nathan Smith

Other Decks in Design

Transcript

  1. Cross-Platform
    Mobile Development
    Nathan Smith
    Principal UI Architect, projekt202
    TUESDAY — NOVEMBER 13, 2012 — AUSTIN, TX

    View full-size slide

  2. Relax, don’t stress out
    taking notes. You can get
    the slides here…
    http://j.mp/cross-mobile

    View full-size slide

  3. I do mobile/web
    UX + JavaScript at
    http://projekt202.com
    (Me, on Twitter: @nathansmith)

    View full-size slide

  4. The Rise
    of Mobile

    View full-size slide

  5. http://flickr.com/photos/djwudi/382030798
    State of mobile in 2007 — The year the iPhone was introduced

    View full-size slide

  6. Handset design was quite
    diverse “way back when.”
    Industrial designers were
    still (awkwardly) searching
    for the best form factor…

    View full-size slide

  7. http://zackmorriscellphone.com

    View full-size slide

  8. 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

    View full-size slide

  9. The state of mobile, now… Touch screens reign supreme

    View full-size slide

  10. 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

    View full-size slide


  11. Nowadays, it’s more about
    the software on the device.

    View full-size slide

  12. http://lukew.com/ff/entry.asp?1506
    1,450,000
    mobile devices activated
    317,124
    newborns begin life
    Each day, on planet Earth…

    View full-size slide

  13. 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

    View full-size slide

  14. http://computerworld.com/s/article/9227412/Obama_orders_agencies_to_optimize_Web_content_for_mobile

    View full-size slide

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

    View full-size slide

  16. 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.

    View full-size slide

  17. Ethan also wrote a book…
    http://www.abookapart.com/products/responsive-web-design

    View full-size slide

  18. Essentially, “responsive” has
    broken into the mainstream.
    It ain’t just for designer blogs
    anymore. Some pretty big
    name sites are adapting…

    View full-size slide

  19. Microsoft.com — Home page is responsive

    View full-size slide

  20. Time.com — Entire site is responsive

    View full-size slide

  21. 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.

    View full-size slide

  22. Disney.com — Menu adapts, based on screen size

    View full-size slide

  23. 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.

    View full-size slide

  24. Like accessibility, “responsive” works best with planning…
    #FAIL

    View full-size slide

  25. // 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

    View full-size slide

  26. // For older IE...
    @import base
    @import 320-up
    @import 480-up
    @import 780-up
    @import 960-up




    View full-size slide

  27. @media queries
    aren’t just for width.
    Also works well for
    “retina” detection…

    View full-size slide

  28. @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and ( min-device-pixel-ratio: 2) {
    span.location {
    background-image: url([email protected]);
    background-size: 16px 14px;
    }
    span.success {
    background-image: url([email protected]);
    background-size: 13px 14px;
    }
    a.delete {
    background: url([email protected]) no-repeat 0 -100px;
    }
    .content a.fav-link {
    background-image: url([email protected]);
    background-size: 11px 13px;
    }
    }

    View full-size slide

  29. The biggest problem facing
    responsive design is
    and potential file size.
    But, there’s a neat solution
    for JPG images, at least…

    View full-size slide

  30. 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

    View full-size slide

  31. So, what should I build?
    [A] Desktop web app
    [B] Mobile web app
    [C] Mobile native app

    View full-size slide

  32. [D] All of the above
    Note: I’m not saying you have to
    build all-in-one. But it is possible.

    View full-size slide

  33. 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

    View full-size slide

  34. 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

    View full-size slide

  35. 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

    View full-size slide

  36. 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

    View full-size slide

  37. 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.

    View full-size slide

  38. Facebook was HTML5, but is going native
    http://bits.blogs.nytimes.com/2012/06/27/facebook-plans-to-speedup-its-iphone-app/

    View full-size slide

  39. 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”

    View full-size slide

  40. Titanium
    from Appcelerator
    http://appcelerator.com/platform

    View full-size slide

  41. 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)

    View full-size slide

  42. http://j.mp/bachmann-eyezed

    View full-size slide

  43. 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.

    View full-size slide

  44. http://phonegap.com
    PhoneGap
    from Adobe

    View full-size slide

  45. — 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

    View full-size slide

  46. 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

    View full-size slide

  47. http://youtu.be/nOEw9iiopwI

    View full-size slide

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

    View full-size slide

  49. http://handlebarsjs.com

    View full-size slide

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

    View full-size slide

  51. @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;
    }
    }

    View full-size slide

  52. http://dribbble.com/api

    View full-size slide

  53. Dribbble API: JSON

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. ...
    {{#if player.twitter_screen_name}}


    Twitter:



    @{{player.twitter_screen_name}}



    {{/if}}
    {{#if likes_count}}


    Likes:


    {{likes_count}} ♥


    {{/if}}
    {{#if short_url}}


    URL:


    {{short_url}}


    {{/if}}
    ...
    Handlebars template

    View full-size slide

  57. ...
    {{#if player.twitter_screen_name}}


    Twitter:



    @{{player.twitter_screen_name}}



    {{/if}}
    {{#if likes_count}}


    Likes:


    {{likes_count}} ♥


    {{/if}}
    {{#if short_url}}


    URL:


    {{short_url}}


    {{/if}}
    ...
    Handlebars template

    View full-size slide

  58. @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

    View full-size slide

  59. http://fontsquirrel.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. http://compass-style.org

    View full-size slide

  63. Compass makes vendor prefixes easy...

    View full-size slide

  64. Compass brings sanity to gradients...

    View full-size slide

  65. 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




    View full-size slide

  66. IE <= 9 gets jQuery, other browsers get Zepto




    View full-size slide

  67. // 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

    View full-size slide

  68. 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

    View full-size slide

  69. 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


    View full-size slide

  70. Building the app, on Android phone

    View full-size slide

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

    View full-size slide

  72. “Real artists ship” — Steve Jobs
    Hopefully, I have inspired you to create
    more rapidly shippable software today :)

    View full-size slide