NetMash: Native + Web + More - OTA 2011

41
NetMash The Best of Native Apps and the Mobile Web Duncan Cragg

Transcript of NetMash: Native + Web + More - OTA 2011

NetMash

The Best of Native Apps and the

Mobile Web

Duncan Cragg

AppStore

Mobile Device

Pure Native Appse.g.: iOS / Android; Objective-C / Java

AppApp App

Server

app protocols

fulldeviceaccess

App App

download

mobile-orientedrunnablecode andlayouts

Server

Mobile Device

Pure Web Documentse.g.: HTML5 / CSS3 alone, no JS APIs

Doc

downloador submit

HTTP

verylimiteddeviceaccess

Browser

DocDoc Doc

Doc Doc

Server

Doclinks

largetext- &page-orienteddocs

Fast, Slick, Tactile Interfaces Close to your Mobile Stuff Close to the Device Work Well Offline

Mashable, Linkable, SharableDistributable: Just a LinkEasy to ProgramCross-Platform

Pure Native Appse.g.: iOS / Android; Objective-C / Java

Fast, Slick, Tactile InterfacesClose to your Mobile StuffClose to the DeviceWork Well Offline

Mashable, Linkable, Sharable Distributable: Just a Link Easy to Program Cross-Platform

Pure Web Documentse.g.: HTML5 / CSS3 alone, no JS APIs

Server

Mobile Device

JS Web Appse.g.: HTML5 JS APIs; JQuery Mobile

Doc

downloador submit

HTTP

partialdeviceaccessBrowser

DocDoc Doc

Doc Doc

Server

Doclinks

JSJS

JS

JS

largetext- &page-orienteddocs +runnable

AppStore

Mobile Device

Hybrid Web Appse.g.: WAC, PhoneGap, Titanium

AppApp App

Server

App App

download HTTP

Doc

JS

largetext- &page-orienteddocs +runnable

partialdeviceaccess

Fast, Slick, Tactile Interfaces Close to your Mobile Stuff Close to the Device Work Well Offline

Mashable, Linkable, Sharable Distributable: Just a Link Easy to Program Cross-Platform

JS Web Appse.g.: HTML5 JS APIs; JQuery Mobile

Fast, Slick, Tactile Interfaces Close to your Mobile Stuff Close to the Device Work Well Offline

Mashable, Linkable, Sharable Distributable: Just a Link Easy to Program Cross-Platform

Hybrid Web Appse.g.: WAC, PhoneGap, Titanium

Server

Mobile Device

Start Native, Add Pure Web

Doc

fulldeviceaccess

App

Serverlinks

HTTP

fulldeviceaccess

NetMash App

Obj Obj

NetMash = Native + Web

Obj

smallnestedmobile-oriented two-waydynamicobjects

NetMash ServerDocObj

Obj Obj

Server

Objlinks

HTTP

Fast, Slick, Tactile Interfaces Close to your Mobile Stuff Close to the Device Works Well Offline

Mashable, Linkable, Sharable Distributable: Just a Link Easy to Program: Declarative JSON Cross-Platform: Port NetMash App

NetMash = Native + Web

JSON Calendar Event{ is: event title: "DroidConf" content: "Big Droidfest!" start: .. end: .. tz: .. location: { .. } attendees: [ http://p.com/uid-ef .. http://q.com/uid-93 .. ]}

Calendar Event: Mobile View

DroidConf: Big Droid fest!

Start: ..

End: ..

Location:

Switch to Calendar View

Mon Tues Wed Thurs Fri Sat Sun

Droid ConfBigDroidfest!

Plot the Weather Report, too

Mon Tues Wed Thurs Fri Sat Sun

Droid ConfBigDroidfest!

Switch to Map View

Droid ConfBig Droid fest!

Plot the Weather Report, too

Droid ConfBig Droid fest!

DroidConf: Big Droid fest!

Attending:

Scroll Down to Attendees

No, Sorry

Maybe

Me Too!

Ann Droid

Rob Ott

Links To User Objects{ is: event title: "DroidConf" content: "Big Droidfest!" start: .. end: .. tz: .. location: { .. } attendees: [ http://p.com/uid-ef .. http://q.com/uid-93 .. ]}

View Source of User Objectlocation updated direct from Mobile

{ is: user location: {.. } saying: ".." vcard: http://...}

User Object

User

vCard

MobileMobileMobile

User Object Pushed

User A

Mobile

User A

Server

User A

Droid ConfBig Droid fest!

So Plot The Attendees List

Droid ConfBig Droid fest!

See Everyone's Messages

It's just gone cloudy!

{ is: user location: {.. } saying: "It's just gone cloudy!" vcard: http://...}

View Source of User Objectmessage updated direct from Mobile

Droid ConfBig Droid fest!

See Just-Taken Photos

Hit the "Me Too!" Button

DroidConf: Big Droid fest!

Attending:

No, Sorry

Maybe

Ann Droid

Rob OttMe Too!

Returns This: View Source

{ is: rsvp user: http://p.com/uid-12 event: http://x.net/uid-a7 attending: "yes"}

You're on the list

DroidConf: Big Droid fest!

Attending:

No, Sorry

Maybe

Si Bermann

Ann DroidMe Too!

Droid ConfBig Droid fest!

You Appear on Everyone's Maps

I'm in the area - be there soon!

Make Your Own App!

{ title: "My DroidConf" list: [ http://x.net/uid-a7 http://p.com/uid-ef http://c.com/uid-35 http://t.com/uid-f3 ]}

My DroidConf

Make Your Own App!

Twitter #droidconf

Cafe Droid

Ann Droid

DroidConf

GUI Object

{ is: gui view: { direction:vertical "Option" "#opt":"?[/string;1|2/]?" }}

GUI Object

Form Object

{ is: form user: http://p.com/uid-12 gui: http://n.net/uid-72 form: { opt: "2" }}

Fast, Slick, Tactile Interfaces Close to your Mobile Stuff Close to the Device Works Well Offline

Mashable, Linkable, Sharable Distributable: Just a Link Easy to Program: Declarative JSON Cross-Platform: Port NetMash App

NetMash = Native + Web

No application boundaries - NetMash creates a seamless 'cyberspace' containing you, your friends and your and their mobile stuff - all linkable and mashable

No manual upload, download, save, submit, send, share, refresh, upgrade - NetMash objects are updating and interactive

NetMash = Native + Web + More

NetMash Demo

NetMash is an Android and Java

client- and server-side implementation

Help Build NetMash!

What's next?

If you know Java or Android,

and have an online / social app idea,

then help build NetMash!

or just use NetMash, when it's ready!

http://netmash.net

NetMash is based on FOREST

FOREST is described in Chapter 7 of this book http://www.amazon.co.uk/dp/1441983023