Slide 1
Slide 1 text
Cross-Platform
Mobile Development
Nathan Smith
Principal UI Architect, projekt202
TUESDAY — NOVEMBER 13, 2012 — AUSTIN, TX
Slide 2
Slide 2 text
Relax, don’t stress out
taking notes. You can get
the slides here…
http://j.mp/cross-mobile
Slide 3
Slide 3 text
Who am I?
Slide 4
Slide 4 text
I do mobile/web
UX + JavaScript at
http://projekt202.com
(Me, on Twitter: @nathansmith)
Slide 5
Slide 5 text
The Rise
of Mobile
Slide 6
Slide 6 text
http://flickr.com/photos/djwudi/382030798
State of mobile in 2007 — The year the iPhone was introduced
Slide 7
Slide 7 text
Handset design was quite
diverse “way back when.”
Industrial designers were
still (awkwardly) searching
for the best form factor…
Slide 8
Slide 8 text
http://zackmorriscellphone.com
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
The state of mobile, now… Touch screens reign supreme
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Nowadays, it’s more about
the software on the device.
Slide 13
Slide 13 text
http://lukew.com/ff/entry.asp?1506
1,450,000
mobile devices activated
317,124
newborns begin life
Each day, on planet Earth…
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
http://computerworld.com/s/article/9227412/Obama_orders_agencies_to_optimize_Web_content_for_mobile
Slide 16
Slide 16 text
“Obama orders agencies to optimize Web content for mobile…”
http://flickr.com/photos/whitehouse/7161178504
Slide 17
Slide 17 text
The term “Responsive Web Design”
was coined by Ethan Marcotte, in an
an article published by A List Apart.
Loosely defined, it means adapting
to various screen sizes, using a fluid
grid and @media queries in CSS.
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Ethan also wrote a book…
http://www.abookapart.com/products/responsive-web-design
Slide 20
Slide 20 text
Essentially, “responsive” has
broken into the mainstream.
It ain’t just for designer blogs
anymore. Some pretty big
name sites are adapting…
Slide 21
Slide 21 text
Microsoft.com — Home page is responsive
Slide 22
Slide 22 text
Time.com — Entire site is responsive
Slide 23
Slide 23 text
Disney.com — Entire site is responsive
There is one Flash ad, which disappears if the browser is at “mobile” width.
Note: Most mobile devices have little/no support for Flash, Silverlight, etc.
Slide 24
Slide 24 text
Disney.com — Menu adapts, based on screen size
Slide 25
Slide 25 text
When should you use RWD™?
Responsive web design using @media queries (with one
codebase for all devices) typically works best for web
“sites” (not apps). Apps work best when tailored to one
particular interaction paradigm. For instance, mobile
Gmail is a different experience than on the desktop.
As a general rule of thumb, if your content can be read
via RSS (such as Google Reader) and still make sense, it
might be worth considering a responsive approach.
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Like accessibility, “responsive” works best with planning…
#FAIL
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
// For good browsers...
@import base
@media (min-width:320px)
@import 320-up
@media (min-width:480px)
@import 480-up
@media (min-width:780px)
@import 780-up
@media (min-width:960px)
@import 960-up
@media (min-width:1100px)
@import 1100-up
Slide 30
Slide 30 text
// For older IE...
@import base
@import 320-up
@import 480-up
@import 780-up
@import 960-up
Slide 31
Slide 31 text
@media queries
aren’t just for width.
Also works well for
“retina” detection…
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min-device-pixel-ratio: 2) {
span.location {
background-image: url([email protected]);
background-size: 16px 14px;
}
span.success {
background-image: url([email protected]);
background-size: 13px 14px;
}
a.delete {
background: url([email protected]) no-repeat 0 -100px;
}
.content a.fav-link {
background-image: url([email protected]);
background-size: 11px 13px;
}
}
Slide 34
Slide 34 text
The biggest problem facing
responsive design is ![]()
and potential file size.
But, there’s a neat solution
for JPG images, at least…
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Mobile web trivia time…
— PhoneGap on Windows Phone uses
the IE10 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
Slide 37
Slide 37 text
So, what should I build?
[A] Desktop web app
[B] Mobile web app
[C] Mobile native app
Slide 38
Slide 38 text
[D] All of the above
Note: I’m not saying you have to
build all-in-one. But it is possible.
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
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
Slide 43
Slide 43 text
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.
Slide 44
Slide 44 text
Facebook was HTML5, but is going native
http://bits.blogs.nytimes.com/2012/06/27/facebook-plans-to-speedup-its-iphone-app/
Slide 45
Slide 45 text
Note: Essentially, Facebook was just
“doing it wrong” when it came to
HTML5 — Sending down HTML, CSS, JS
to the app, rather than building the app
with that embedded, and consuming
lightweight JSON sent from the server.
“A craftsman doesn’t blame his tools”
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
Titanium
from Appcelerator
http://appcelerator.com/platform
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
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)
Slide 52
Slide 52 text
http://j.mp/bachmann-eyezed
Slide 53
Slide 53 text
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.
Slide 54
Slide 54 text
http://phonegap.com
PhoneGap
from Adobe
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
— 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
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
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, too
Slide 59
Slide 59 text
http://youtu.be/nOEw9iiopwI
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
http://host.sonspring.com/handlebbbars
Handlebbbars
demo of Handlebars.js
and the Dribbble API
Slide 62
Slide 62 text
http://handlebarsjs.com
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
Site/App adapts, based on screen width…
http://host.sonspring.com/handlebbbars
Slide 65
Slide 65 text
@media (min-width: 880px) {
/* line 198, ../sass/_site.sass */
body {
width: 880px;
margin: 0 auto;
}
/* line 202, ../sass/_site.sass */
#list li {
float: left;
width: 400px;
height: 36em;
}
}
@media (min-width: 1320px) {
/* line 208, ../sass/_site.sass */
body {
width: 1320px;
}
}
Slide 66
Slide 66 text
http://dribbble.com/api
Slide 67
Slide 67 text
Dribbble API: JSON
Slide 68
Slide 68 text
Handlebars template
{{#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}}
Slide 69
Slide 69 text
{{#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}}
Handlebars template
Slide 70
Slide 70 text
...
{{#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
Slide 71
Slide 71 text
...
{{#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
Slide 72
Slide 72 text
@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
Slide 73
Slide 73 text
http://fontsquirrel.com
Slide 74
Slide 74 text
http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
CSS served to browser
Neatly organized *.sass
Slide 75
Slide 75 text
CSS Sass Compass
http://sonspring.com/journal/sass-for-designers
Slide 76
Slide 76 text
http://compass-style.org
Slide 77
Slide 77 text
Compass makes vendor prefixes easy...
Slide 78
Slide 78 text
Compass brings sanity to gradients...
Slide 79
Slide 79 text
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
Slide 80
Slide 80 text
IE <= 9 gets jQuery, other browsers get Zepto
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
// 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
Slide 83
Slide 83 text
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
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
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
Slide 86
Slide 86 text
Building the app, on Android phone
Slide 87
Slide 87 text
PhoneGap tip: Declare “safe” domains on iOS
http://anujgakhar.com/2011/11/22/phonegap-gotcha-error-whitelist-rejection
Slide 88
Slide 88 text
“Real artists ship” — Steve Jobs
Hopefully, I have inspired you to create
more rapidly shippable software today :)