Use Web Skills To Build Mobile Apps

  • 3,971 views
Uploaded on

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

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

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,971
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
92
Comments
0
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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