use web skills to build mobile apps

Use Web Skills ToBuild Mobile Apps

with Matt Baxter & Nathan SmithSATURDAY — JUNE 2, 2012 — DALLAS, TX

http://bigdesignevents.com

Put down that pen! (or not)

You can get the slides here:

http://j.mp/web-skills

Who are we?

We do mobile/webUX & JavaScript at

http://projekt202.com

@mbxtr & @nathansmith(In case you want to talk smack on Twitter)

We’re hiring JavaScript savvy developers to join our team at projekt202.

(You can talk to us after the presentation)

An urgent (not desperate) announcement

http://projekt202.com

The Riseof Mobile

http://flickr.com/photos/djwudi/382030798

State of mobile in 2007 — The year the iPhone was introduced

Handset design was quite diverse “way back when.”

Industrial designers were still (awkwardly) searching for the best form factor…

http://zackmorriscellphone.com

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

The state of mobile in 2012 — Touch screens reign supreme

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

<old-man-voice>

Nowadays, it’s more aboutthe software on the device.

</old-man-voice>

http://lukew.com/ff/entry.asp?1506

317,124newborns begin life

1,450,000mobile devices activated

Each day, on planet Earth…

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

“Obama orders agencies to optimize Web content for mobile…”

http://flickr.com/photos/whitehouse/7161178504

http://computerworld.com/s/article/9227412/Obama_orders_agencies_to_optimize_Web_content_for_mobile

Mobile web trivia time…

— PhoneGap on Windows Phone usesthe IE9 engine (it is pretty good)

— WebKit is the dominant renderingengine across most mobile devices

— iOS, Android, Blackberry, webOS

— Blackberry has one of the bestWebKit-based browsers available

So, what should I build?

[A] Desktop web app[B] Mobile web app[C] Mobile native app

[D] All of the above

Note: We’re not saying you have tobuild all-in-one… But it is possible.

http://alistapart.com/articles/responsive-web-design

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.

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

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

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

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

Drawbacks of hybrid development

— Build for lowest common denominator

— 3rd party SDK’s might lag behind OS

— Want to use feature X? Wait for animplementation in abstraction layer.

— An abstraction layer can have bugs ofits own. Have to determine if a bug is inyour code, the abstraction layer, or OS.

Titaniumfrom Appcelerator

http://appcelerator.com/platform

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)

http://j.mp/bachmann-eyezed

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.

http://phonegap.com

PhoneGapfrom Adobe

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

http://youtu.be/nOEw9iiopwI

— 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

http://host.sonspring.com/handlebbbars

Handlebbbarsdemo of Handlebars.jsand the Dribbble API

http://handlebarsjs.com

http://dribbble.com/api

Dribbble API: JSON

Handlebars template

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

<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

...{{#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

...{{#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

Sweet, responsive Handlebbbars action

http://host.sonspring.com/handlebbbars

@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

http://fontsquirrel.com

http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli

CSS served to browserNeatly organized *.sass

CSS Sass Compasshttp://sonspring.com/journal/sass-for-designers

http://compass-style.org

Compass makes vendor prefixes easy...

Compass brings sanity to gradients...

Text editors and IDE’s that support Sass/SCSS syntax

Aptanahttp://aptana.org

BBEdithttp://barebones.com/bbedit

Chocolathttp://chocolatapp.com

Codahttp://panic.com/coda

E Text Editorhttp://e-texteditor.com

Eclipsehttp://eclipse.org

Emacshttp://gnu.org/software/emacs

Espressohttp://macrabbit.com/espresso

GEdithttp://projects.gnome.org/gedit

Komodohttp://activestate.com/komodo-ide

Netbeanshttp://netbeans.org

PhpStormhttp://jetbrains.com/phpstorm

PyCharmhttp://jetbrains.com/pycharm

RubyMinehttp://jetbrains.com/ruby

SubEthaEdithttp://codingmonkeys.de/subethaedit

Sublime Texthttp://sublimetext.com/dev

TextMatehttp://macromates.com

Vimhttp://vim.org

Visual Studiohttp://microsoft.com/visualstudio

http://sass-lang.com/editors.html

^We  recommend

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

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

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 youdon’t have to write yourself! :)

http://host.sonspring.com/handlebbbars/assets/js/application.js

Private “constant” variables…

Application “skeleton” object…

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

Handling “state” changes…

Maintaining an app’s state can drive you crazy

@MikeTownson dared us to use a “lolcat” — Challenge accepted!

Pop out external links (for PhoneGap)…

Rudimentary caching, for one hour…

Ajax call (JSONP) to Dribbble’s API…

PhoneGap tip: Declare “safe” domains on iOS

http://anujgakhar.com/2011/11/22/phonegap-gotcha-error-whitelist-rejection

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!

“Real artists ship” — Steve Jobs

Hopefully we have inspired you to createmore rapidly shippable software today :)

Want to reread something?

You can get the slides here:

http://j.mp/web-skills

Questions?We (might) have answers.

@mbxtr & @nathansmith

If you think of something later,feel free to ask us on Twitter…