Slide 1

Slide 1 text

MOBILE Tools of the MOBILE web

Slide 2

Slide 2 text

Native Hybrid Mobile Web Frameworks

Slide 3

Slide 3 text

All-in-one frameworks Sencha Touch too

Slide 4

Slide 4 text

Frameworks allow for quick development of mobile apps.

Place Puppy Mobile

Puppies
Slide
Slide Up

List of Puppies
Another List of Puppies

© 2012 Place Puppy

No Sencha Touch example could ﬁt in a slide.

Slide 5

Slide 5 text

Frameworks are great for quick development, but...

Slide 6

Slide 6 text

...framework apps just never feel right.

Slide 7

Slide 7 text

If an app looks native, it should perform natively.

Slide 8

Slide 8 text

Framework experiences tend to be choppy...

Slide 9

Slide 9 text

...and their scrolling sucks.

Slide 10

Slide 10 text

If you’re going with the web, embrace the web. The good & bad parts. http://cri.st/EUli

Slide 11

Slide 11 text

It’s possible to use a framework while embracing the web. http://bagcheck.com

Slide 12

Slide 12 text

Hybrid Mobile Web Frameworks à la carte

Slide 13

Slide 13 text

50% of mobile users abandon after 6-10 seconds.

Slide 14

Slide 14 text

Server Response Processing + Page time

Slide 15

Slide 15 text

Every library adds processing time.

Slide 16

Slide 16 text

Backbone.js Sammy.js Spine.js Javscript MVC Agility.js Knockout.js Angular.js Ember.js Eyeballs.js Client side MVC...

Slide 17

Slide 17 text

... can be overkill. Handle with care.

Slide 18

Slide 18 text

Micro libraries can ensure you only use what you need. jQuery Zepto Zest http://cri.st/EdMn http://zeptojs.com/ > >

Slide 19

Slide 19 text

Ender.js helps too... “Build only what you need, when you need it.”

Slide 20

Slide 20 text

http://microjs.com/

Slide 21

Slide 21 text

~92% of mobile is webkit...

Slide 22

Slide 22 text

...build if it were 0%

Slide 23

Slide 23 text

Replace JavaScript animations with CSS3...

Slide 24

Slide 24 text

...fall back to Javascript if you have to.

Slide 25

Slide 25 text

CSS3’s translate3d utilizes hardware acceleration. .selector {transform: translate3d(0,0,0)}

Slide 26

Slide 26 text

Use local storage to cache to maximize performance. window.localStorage.set(‘something’, variable);

Slide 27

Slide 27 text

Cache manifest in HTML5 can reduce calls to the server. ... CACHE MANIFEST puppy.html puppy.css jquery.min.js puppy.js puppy.html puppy.appcache