Mobile web& hybrid apps

Romain Prieto

It's just for basic apps...

UI frameworks

You don't have to use everything

ex: jQuery mobile

<a href="#"
data-role="button"     data-icon="arrow-l"
data-corners="true"    data-shadow="true"
data-iconshadow="true" data-wrapperels="span">
</a>
						

<a href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text"></span><span class="ui-icon ui-icon-arrow-l ui-icon-shadow"> </span></span>
						

Fancy transitions

Danger zone

Responsiveness

HTML5 touch events

addEventListener('touchstart');
// give feedback

addEventListener('touchmove');
// moving too much?

addEventListener('touchend');
// click!
					

Javascript is slower

• How much processing?
• Be efficient

Search 20,000 post codes

Runs the regex 20,000 times

function matches(rgx) {
    return function(text) {
        return rgx.test(text);
    }
}

list.filter(matches(/Syd/))
    .slice(0, 3);
						

Lazy evaluation

3 < times < 20,000

// streamjs to the rescue

Stream.make(...)
      .filter(matches(/Syd/))
      .take(3)
						

The uncanny valley

http://www.agriffindesign.com/blog.php?id=3

A few CSS tips

Not a web page

-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
					

Scrolling, improved

/* On the container */
overflow: scroll;
-webkit-overflow-scrolling: touch;

/* On the items */
-webkit-transform: translate3d(0,0,0);
					

+ Full native bounce scroll trick

Sticky content

position: fixed;
height: 50px;
z-index: 1;
					

No native widgets?

THIS

IS

SOFTWARE!

Web app = web server

Middleman

• HAML, SASS, Compass
• ERB, partials, routes

   <% if target == :android %>

build

Build it!

platforms includes assets jshint jasmine android signing iphone testflight

Modular JS

• DI — closures, require.js
• Event hubs — eve.js

Going back?

Different platforms

What's the limit?

• Smooth animations
• Heavy graphics
• Infinite scrolling
• Pixel perfection

http://www.phoboslab.org/xtype/

   THE END.

reveal.js

with animations

github.com/rprieto/reveal.js