Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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.

Use Web Skills To Build Mobile Apps

  1. Use Web Skills ToBuild 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/webUX & JavaScript at@mbxtr & @nathansmith(In case you want to talk smack on Twitter) http://projekt202.com
  5. An urgent (not desperate) announcementWe’re hiring JavaScriptsavvy developers to joinour team at projekt202.(You can talk to us after the presentation) http://projekt202.com
  6. The Riseof Mobile
  7. State of mobile in 2007 — The year the iPhone was introduced http://flickr.com/photos/djwudi/382030798
  8. Handset design was quitediverse “way back when.”Industrial designers werestill (awkwardly) searchingfor 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. Each day, on planet Earth… 317,124 newborns begin life1,450,000mobile devices activated http://lukew.com/ff/entry.asp?1506
  15. The one thing all these phones havein common (besides Angry Birds) isthey 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. Whither Responsive Web Design?Responsive web design using @mediaqueries (with one codebase for all devices)typically works best for web “sites” (notapps). As a general rule of thumb, if yourcontent can be read via RSS and still makesense, it is a good candidate for RWD. http://alistapart.com/articles/responsive-web-design
  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. Titaniumfrom Appcelerator http://appcelerator.com/platform
  28. 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)
  29. http://j.mp/bachmann-eyezed
  30. Abstraction layers tend to beharder to debug than “native”languages — Objective-C,C#, or Java — whilst using anIDE such as Visual Studio,Xcode, or Eclipse.With “the web,” you havefamiliar browser-baseddesktop tools in Chrome,Firebug, or Opera Dragonfly.
  31. PhoneGap from Adobe http://phonegap.com
  32. 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
  33. http://youtu.be/nOEw9iiopwI
  34. How PhoneGap works— 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
  35. Handlebbbarsdemo of Handlebars.jsand the Dribbble API http://host.sonspring.com/handlebbbars
  36. http://handlebarsjs.com
  37. http://dribbble.com/api
  38. Dribbble API: JSON
  39. <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
  40. <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
  41. ...{{#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
  42. ...{{#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
  43. Sweet, responsive Handlebbbars action http://host.sonspring.com/handlebbbars
  44. All modern browsers support *.woff or *.ttf@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);}
  45. http://fontsquirrel.com
  46. Neatly organized *.sass CSS served to browser http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
  47. CSS Sass Compass http://sonspring.com/journal/sass-for-designers
  48. http://compass-style.org
  49. Compass makes vendor prefixes easy...
  50. Compass brings sanity to gradients...
  51. Text editors and IDE’s that support Sass/SCSS syntax Aptana BBEdit Chocolat Coda http://aptana.org http://barebones.com/bbedit http://chocolatapp.com http://panic.com/coda E Text Editor Eclipse Emacs Espresso http://e-texteditor.com http://eclipse.org http://gnu.org/software/emacs http://macrabbit.com/espresso GEdit Komodo Netbeans PhpStormhttp://projects.gnome.org/gedit http://activestate.com/komodo-ide http://netbeans.org http://jetbrains.com/phpstorm PyCharm RubyMine SubEthaEdit Sublime Text ^ http://jetbrains.com/pycharm http://jetbrains.com/ruby http://codingmonkeys.de/subethaedit http://sublimetext.com/dev TextMate Vim Visual Studio nd http://macromates.com http://vim.org http://microsoft.com/visualstudio We  recomme http://sass-lang.com/editors.html
  52. 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]-->
  53. Overview of Handlebbbars’ application.js file// 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
  54. Where the magic of Handlebars happens markup = $(#_template-list-item) .html() .replace(/ss+/g, ); template = Handlebars.compile(markup); 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
  55. Private “constant” variables…
  56. Application “skeleton” object…
  57. Nav shortcuts: J/K keys, swipe left/right…
  58. Handling “state” changes…
  59. Maintaining an app’s state can drive you crazy@MikeTownson dared us to use a “lolcat” — Challenge accepted!
  60. Pop out external links (for PhoneGap)…
  61. Rudimentary caching, for one hour…
  62. Ajax call (JSONP) to Dribbble’s API…
  63. PhoneGap tip: Declare “safe” domains on iOS http://anujgakhar.com/2011/11/22/phonegap-gotcha-error-whitelist-rejection
  64. Underscore.js is a power tool for workingwith collections of objects and arrays…— Collections — sortBy — pluck — uniq — extend — flatten — each — filter — find— Utility functions — throttle — chain — times and  much  more!
  65. “Real artists ship” — Steve JobsHopefully we have inspired you to createmore rapidly shippable software today :)
  66. Want to reread something?You can get the slides here:http://j.mp/web-skills
  67. Questions? We (might) have answers.If you think of something later, feel free to ask us on Twitter… @mbxtr & @nathansmith

×