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
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
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
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.
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)
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.
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
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
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');
}
51. Neatly organized *.sass CSS served to browser
http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
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
77. PhoneGap tip: Declare “safe” domains on iOS
http://anujgakhar.com/2011/11/22/phonegap-gotcha-error-whitelist-rejection
78.
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