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.

3e101126b514c65ee531e47bd6281ba3?s=128

Nathan Smith

June 02, 2012
Tweet

Transcript

  1. Use Web Skills To Build Mobile Apps with Matt Baxter

    & Nathan Smith SATURDAY — JUNE 2, 2012 — DALLAS, TX http://bigdesignevents.com
  2. Put down that pen! (or not) You can get the

    slides here: http://j.mp/web-skills
  3. Who are we?

  4. We do mobile/web UX & JavaScript at http://projekt202.com @mbxtr &

    @nathansmith (In case you want to talk smack on Twitter)
  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
  6. The Rise of Mobile

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

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

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

  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
  11. The state of mobile in 2012 — Touch screens reign

    supreme
  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

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

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

    day, on planet Earth…
  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
  16. “Obama orders agencies to optimize Web content for mobile…” http://flickr.com/photos/whitehouse/7161178504

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

  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
  19. So, what should I build? [A] Desktop web app [B]

    Mobile web app [C] Mobile native app
  20. [D] All of the above Note: We’re not saying you

    have to build all-in-one… But it is possible.
  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.
  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
  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
  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
  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
  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.
  27. Titanium from Appcelerator http://appcelerator.com/platform

  28. None
  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)
  30. http://j.mp/bachmann-eyezed

  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.
  32. http://phonegap.com PhoneGap from Adobe

  33. None
  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
  35. None
  36. http://youtu.be/nOEw9iiopwI

  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
  38. None
  39. http://host.sonspring.com/handlebbbars Handlebbbars demo of Handlebars.js and the Dribbble API

  40. None
  41. http://handlebarsjs.com

  42. http://dribbble.com/api

  43. Dribbble API: JSON

  44. 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>
  45. <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
  46. ... {{#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
  47. ... {{#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
  48. Sweet, responsive Handlebbbars action http://host.sonspring.com/handlebbbars

  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
  50. http://fontsquirrel.com

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

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

  53. http://compass-style.org

  54. Compass makes vendor prefixes easy...

  55. Compass brings sanity to gradients...

  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
  57. IE9 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]-->
  58. None
  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
  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
  61. Private “constant” variables…

  62. None
  63. Application “skeleton” object…

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

  66. None
  67. Handling “state” changes…

  68. Maintaining an app’s state can drive you crazy @MikeTownson dared

    us to use a “lolcat” — Challenge accepted!
  69. None
  70. Pop out external links (for PhoneGap)…

  71. None
  72. Rudimentary caching, for one hour…

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

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

  78. None
  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!
  80. “Real artists ship” — Steve Jobs Hopefully we have inspired

    you to create more rapidly shippable software today :)
  81. Want to reread something? You can get the slides here:

    http://j.mp/web-skills
  82. Questions? We (might) have answers. @mbxtr & @nathansmith If you

    think of something later, feel free to ask us on Twitter…