There's more than web

Mobile Apps with JavaScript - there’s more than web!

Heiko Behrens
@HBehrens

@moskovich: “Your mobile phone has more
computing power than all of NASA in 1969.
NASA put a man on the moon...

...we put a bird into pigs.”

what’s so great
about the web
anyway ?

Bulletproof*@Font.Face*Syntax
@font&face*{
****font.family:*'MyFontFamily';
****src:*url('myfont&webfont.eot?#iefix')*format('embedded&opentype'),
*********url('myfont&webfont.woff')*format('woff'),
*********url('myfont&webfont.ttf')**format('truetype'),
*********url('myfont&webfont.svg#svgFontName')*format('svg');
}

Cross.Browser*Min*Height
#div*{
***min.height:*500px;
***height:auto*!important;
***height:*500px;
Box*Shadow }

.shadow*{
******&moz&box&shadow:*0*0*4px*#000;
******&webkit&box&shadow:*0*0*4px*#000;
******&ms&filter:*"progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
******filter:
**************progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
**************progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
******box&shadow:*0*0*4px*#000;
}

user’s
i ve
perspec t

HTML5
cache manifest, local storage, forms, geo location

CSS3
animation, transitions, 3D transformation

Resolution
css media queries, reference, categories, ﬂoat layout

URLs
mails, telephone, sms, maps, youtube, etc.

server-side web

Web Server
executes application
logic

Web Browser

Files Database

Device Backend

client-side web

Web Browser

JavaScript
executes application logic

Files Database

Device Backend

web frameworks

iWebKit, iUI, jQTouch, JQuery mobile, Jo, Zepto

Sencha Touch, SproutCore

See also any mew library that spawns each new week

Sencha Touch

GPL+MIT License GPL + Free License
declarative + JQuery programmatically
simple complex

Sencha Touch
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var groupingBase = {
! ! ! // snip
},
<ul data-role="listview" data-theme="g">
store: new Ext.data.Store({
! <li><a href="acura.html">Acura</a></li>
model: 'Contact',
! <li><a href="audi.html">Audi</a></li>
sorters: 'firstName',
! <li><a href="bmw.html">BMW</a></li>
</ul> getGroupString : function(record) {
return record.get(
'firstName')[0];
},

data: [
{firstName: 'Tommy',
lastName: 'Maintz'},
! ! ! ! ! // snip
{firstName: 'Zed',
lastName: 'Zacharias'}
]
})
};

new Ext.List(Ext.apply(groupingBase, {
fullscreen: true
}));
}
});

Cocos2D JavaScript Impact JS
MIT License MIT License

Simple 2D + Physics 2D, Physics, Sound

Emphasizes Mobile

production
learning easy and countless tutorials+libraries
tools can mostly be developed on desktop
monetization no app store distribution
scenarios
lists and data
rich media inferior performance
games poor performance, only limited 3D
experience
hardware no camera, partly accelerometer, no fancy stuff
user interface fancy UI possible, but platform speciﬁc
ofﬂine HTML5
platforms
iOS
Android
Windows Phone since 7.5 aka Mango
others great movement in responsive design!

hybrid app

Native App

Interpreter

Request
Interceptor

JavaScript Bridge

Browser
executes JavaScript

Device Backend

request interception

demo

Logitech Squeezebox Controller

RNAO Nursing Best Practice Guidelines

PhoneGap on Windows Phone

demo

production
learning as with web
tools cloud build, yes but barely no debugging
monetization
scenarios
lists and data
rich media same as with web
games same as with web
experience
hardware mostly accessible
user interface high effort to match platform’s UI
ofﬂine
platforms
iOS
Android
Windows Phone
others best coverage of cross-platform frameworks

interpreted app

Native App

interpreter

Database
Application
Script
Files

Device Backend

Apache 2 License

JavaScript
native controls

iPhone, iPad, Android
(BlackBerry, Mobile Web)

production
learning speciﬁc API, similar to Sencha & Co.
tools own IDE, including debugger
monetization marketplace for apps and components
scenarios
lists and data perfect match
rich media hard to work with movies/images and animations
games some modules for rendering and physics
experience
hardware complete support
user interface truly native widgets
ofﬂine
platforms
iOS
Android
Windows Phone no plans on roadmap
others plans for BlackBerry and HTML5

Corona Impact
349 USD / year 99 USD

Lua Runtime
JavaScript

comprehensive simple
2D games 2D Games

iOS, Android iOS, HTML5

generated app

Generator

Generator Input Native App

Logic Logic
Model
describes logic and
Database Database
complete system

Files Files
Files Database

Device Backend

commercial commercial
(BETA)

Java, AS Ruby

iOS, Android, iOS
Windows Phone,
HTML5, WebOS,
BlackBerry, Flash

commercial
800-4500 USD

JavaScript / C#

full 2D/3D
games tool chain

iOS, Android

production
learning completely new tool chain
tools scene editors, debuggers, asset manager, team versioning
monetization
scenarios
lists and data no native UI
rich media not optimized for movies
games
experience
hardware OpenGL and sensors
user interface best for games
ofﬂine
platforms
iOS
Android
Windows Phone no plans on agenda
others desktop and web

Web Hybrid Interpreted Game Engine
production
learning
tools
monetization
scenarios
lists and data
rich media
games
experience
hardware
user interface
ofﬂine
platforms
iOS
Android
Windows Phone
others

native
own language
own culture
own ecosystem

ﬁeld skills
promotion: watch avatar - the movie

not-so-native
economic objectives
establishment

“natives are endangered”


best of both
“I see you”

twitter @HBehrens
blog http://HeikoBehrens.net

CEO & Founder getBeamApp.com

There's more than web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

En vedette

En vedette (7)

Similaire à There's more than web

Similaire à There's more than web (20)

Dernier

Dernier (20)

There's more than web