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

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
@mbxtr & @nathansmith
(In case you want to talk smack on Twitter)
http://projekt202.com

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

6. The Rise
of Mobile

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

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. Each day, on planet Earth…
317,124
newborns begin life
1,450,000
mobile devices activated
http://lukew.com/ff/entry.asp?1506

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. 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.
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. Titanium
from Appcelerator
http://appcelerator.com/platform

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

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

36. http://youtu.be/nOEw9iiopwI

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

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

41. http://handlebarsjs.com

42. http://dribbble.com/api

43. Dribbble API: JSON

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

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. 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');
}

50. http://fontsquirrel.com

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

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 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 PhpStorm
http://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

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]-->

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

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

61. Private “constant” variables…

63. Application “skeleton” object…

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

67. Handling “state” changes…

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

70. Pop out external links (for PhoneGap)…

72. Rudimentary caching, for one hour…

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

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

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.
If you think of something later,
feel free to ask us on Twitter…
@mbxtr & @nathansmith