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

Use Web Skills To Build Mobile Apps

Use Web Skills To Build Mobile Apps

Slides from a talk I presented with coworker Matt Baxter, at the Big (D)esign Conference in Dallas, TX.

Nathan Smith

June 02, 2012
Tweet

More Decks by Nathan Smith

Other Decks in Design

Transcript

  1. Use Web Skills To
    Build Mobile Apps
    with Matt Baxter & Nathan Smith
    SATURDAY — JUNE 2, 2012 — DALLAS, TX
    http://bigdesignevents.com

    View Slide

  2. Put down that pen! (or not)
    You can get the slides here:
    http://j.mp/web-skills

    View Slide

  3. Who are we?

    View Slide

  4. We do mobile/web
    UX & JavaScript at
    http://projekt202.com
    @mbxtr & @nathansmith
    (In case you want to talk smack on Twitter)

    View Slide

  5. We’re hiring JavaScript
    savvy developers to join
    our team at projekt202.
    (You can talk to us after the presentation)
    An urgent (not desperate) announcement
    http://projekt202.com

    View Slide

  6. The Rise
    of Mobile

    View Slide

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

    View Slide

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

    View Slide

  9. http://zackmorriscellphone.com

    View Slide

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

  11. The state of mobile in 2012 — Touch screens reign supreme

    View Slide

  12. 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 Slide


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

    View Slide

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

    View Slide

  15. 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 Slide

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

    View Slide

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

    View Slide

  18. Mobile web trivia time…
    — PhoneGap on Windows Phone uses
    the IE9 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 Slide

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

    View Slide

  20. [D] All of the above
    Note: We’re not saying you have to
    build all-in-one… But it is possible.

    View Slide

  21. http://alistapart.com/articles/responsive-web-design
    Whither Responsive Web Design?
    Responsive web design using @media
    queries (with one codebase for all devices)
    typically works best for web “sites” (not
    apps). As a general rule of thumb, if your
    content can be read via RSS and still make
    sense, it is a good candidate for RWD.

    View Slide

  22. 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 Slide

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

  24. 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 Slide

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

  26. 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 Slide

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

    View Slide

  28. View Slide

  29. 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 Slide

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

    View Slide

  31. 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 Slide

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

    View Slide

  33. View Slide

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

    View Slide

  35. View Slide

  36. http://youtu.be/nOEw9iiopwI

    View Slide

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

  38. View Slide

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

    View Slide

  40. View Slide

  41. http://handlebarsjs.com

    View Slide

  42. http://dribbble.com/api

    View Slide

  43. Dribbble API: JSON

    View Slide

  44. 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 Slide

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

  46. ...
    {{#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 Slide

  47. ...
    {{#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 Slide

  48. Sweet, responsive Handlebbbars action
    http://host.sonspring.com/handlebbbars

    View Slide

  49. @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 Slide

  50. http://fontsquirrel.com

    View Slide

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

    View Slide

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

    View Slide

  53. http://compass-style.org

    View Slide

  54. Compass makes vendor prefixes easy...

    View Slide

  55. Compass brings sanity to gradients...

    View Slide

  56. 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
    ^
    We  recommend

    View Slide

  57. IE9 gets jQuery, other browsers get Zepto




    View Slide

  58. View Slide

  59. // 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 Slide

  60. 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 Slide

  61. Private “constant” variables…

    View Slide

  62. View Slide

  63. Application “skeleton” object…

    View Slide

  64. View Slide

  65. Nav shortcuts: J/K keys, swipe left/right…

    View Slide

  66. View Slide

  67. Handling “state” changes…

    View Slide

  68. Maintaining an app’s state can drive you crazy
    @MikeTownson dared us to use a “lolcat” — Challenge accepted!

    View Slide

  69. View Slide

  70. Pop out external links (for PhoneGap)…

    View Slide

  71. View Slide

  72. Rudimentary caching, for one hour…

    View Slide

  73. View Slide

  74. Ajax call (JSONP) to Dribbble’s API…

    View Slide

  75. View Slide

  76. View Slide

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

    View Slide

  78. View Slide

  79. 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 and  much  more!

    View Slide

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

    View Slide

  81. Want to reread something?
    You can get the slides here:
    http://j.mp/web-skills

    View Slide

  82. Questions?
    We (might) have answers.
    @mbxtr & @nathansmith
    If you think of something later,
    feel free to ask us on Twitter…

    View Slide