Recomendados
Recomendados
Mais conteúdo relacionado
Último
Último (20)
Destaque
Destaque (20)
NetMash: Native + Web + More - OTA 2011
- 1. NetMash The Best of Native Apps and the Mobile Web Duncan Cragg
- 2. Pure Native Apps e.g.: iOS / Android; Objective-C / Java App App App AppStore Server download app protocols mobile- oriented App App full runnable device code and access layouts Mobile Device
- 3. Pure Web Documents e.g.: HTML5 / CSS3 alone, no JS APIs Doc Doc Doc Doc links Server Server download HTTP or submit large text- & very Doc Doc limited page- oriented Browser device docs access Mobile Device
- 4. Pure Native Apps e.g.: iOS / Android; Objective-C / Java 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
- 5. Pure Web Documents e.g.: HTML5 / CSS3 alone, no JS APIs 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
- 6. JS Web Apps e.g.: HTML5 JS APIs; JQuery Mobile Doc Doc Doc Doc links JS JS Server Server download HTTP or submit large text- & partial Doc Doc JS device page- JS Browser access oriented docs + Mobile Device runnable
- 7. Hybrid Web Apps e.g.: WAC, PhoneGap, Titanium App App App AppStore Server download HTTP large text- & App partial App device page- Doc oriented access docs + JS Mobile Device runnable
- 8. JS Web Apps e.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
- 9. Hybrid Web Apps e.g.: WAC, PhoneGap, Titanium 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
- 10. Start Native, Add Pure Web Doc links Server Server HTTP full App device Mobile Device access
- 11. NetMash = Native + Web Obj Obj Obj Doc Obj links NetMash Server Server small HTTP nested mobile- oriented Obj Obj Obj full two-way device NetMash App dynamic access objects
- 12. NetMash = Native + Web 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
- 13. 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 .. ]}
- 14. Calendar Event: Mobile View DroidConf: Big Droid fest! Start: .. End: .. Location:
- 15. Switch to Calendar View Mon Tues Wed Thurs Fri Sat Sun Droid Conf Big Droid fest!
- 16. Plot the Weather Report, too Mon Tues Wed Thurs Fri Sat Sun Droid Conf Big Droid fest!
- 17. Switch to Map View Droid Conf Big Droid fest!
- 18. Plot the Weather Report, too Droid Conf Big Droid fest!
- 19. Scroll Down to Attendees DroidConf: Big Droid fest! Attending: Ann Droid Me Too! Rob Ott Maybe No, Sorry
- 20. 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 .. ]}
- 21. View Source of User Object location updated direct from Mobile { is: user location: {.. } saying: ".." vcard: http://... }
- 22. User Object User vCard
- 23. User Object Pushed Mobile Server Mobile Mobile Mobile User A User A User A
- 24. So Plot The Attendees List Droid Conf Big Droid fest!
- 25. See Everyone's Messages Droid Conf Big Droid fest! It's just gone cloudy!
- 26. View Source of User Object message updated direct from Mobile { is: user location: {.. } saying: "It's just gone cloudy!" vcard: http://... }
- 27. See Just-Taken Photos Droid Conf Big Droid fest!
- 28. Hit the "Me Too!" Button DroidConf: Big Droid fest! Attending: Ann Droid Me Too! Rob Ott Maybe No, Sorry
- 29. Returns This: View Source { is: rsvp user: http://p.com/uid-12 event: http://x.net/uid-a7 attending: "yes" }
- 30. You're on the list DroidConf: Big Droid fest! Attending: Si Bermann Me Too! Ann Droid Maybe No, Sorry
- 31. You Appear on Everyone's Maps Droid Conf Big Droid fest! I'm in the area - be there soon!
- 32. 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 ] }
- 33. Make Your Own App! My DroidConf DroidConf Ann Droid Cafe Droid Twitter #droidconf
- 34. GUI Object { is: gui view: { direction:vertical "Option" "#opt":"?[/string;1|2/]?" } }
- 35. GUI Object
- 36. Form Object { is: form user: http://p.com/uid-12 gui: http://n.net/uid-72 form: { opt: "2" } }
- 37. NetMash = Native + Web 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
- 38. NetMash = Native + Web + More 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
- 39. NetMash Demo NetMash is an Android and Java client- and server-side implementation
- 40. 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
- 41. NetMash is based on FOREST FOREST is described in Chapter 7 of this book http://www.amazon.co.uk/dp/1441983023
Notas do Editor
- One approach is to try to make the Web more Native. By adding Javascript executables, Native APIs and libraries to simulate Native UX
- Even more extreme is the Widgetisation or Native-packaging approach
- Which works up to a point But it's a compromise, at the expense of true Webbiness - the Web isn't an app platform HTML5 JS APIs are just formalised hacks; JQuery Mobile is good, but not perfect The more you try to become like an app, the less you benefit from the Web's linkable, declarative architecture
- Hybrid apps are even less Webby, harder to program, less cross-platform, less linkable But not much more Native
- A much better approach is to start with Native, start with Mobile Then ask what the Web's pure architecture can give us
- Linked-up Mobile Objects! Dynamic, interactive JSON data Representing users, contacts, locations, dates, messages, photos, galleries, lists, GUIs - a Native app completely driven by dynamic data - and itself pushing its own updated data into the Web, and on to other users
- Which keeps all the benefits of pure Native and adds on the benefits of the pure Web!
- Based on iCalendar, but with concessions to normalising certain field names with other types - e.g. description -> content
- Drill down into the Calendar object to see the list of attendees When you hit the "Me Too!" button, you want to be added to the list
- Once again, you can plot it on the shared map Or plot it on the single, shared calendar Alongside the Weather objects
- Once again, you can plot it on the shared map Or plot it on the single, shared calendar Alongside the Weather objects
- You can plot anything mappable on a single map Individual objects or, as here, lists of objects Objects get pushed and notified when they update So you see them move about!
- Keep plotting more stuff, more lists of objects with locations, on the map There's no application boundaries, here, no separate Weather app Just sources of Weather objects
- Drill down into the Calendar object to see the list of attendees Nested Summary views of dynamic objects from multiple sources Jump to User B full view by touching it Or maybe it will expand in current view When you hit the "Me Too!" button, you want to be added to the list
- Based on vCalendar, but with concessions to normalising certain field names with other types - e.g. description -> content Notice that these objects have opaque UIDs - GUIDs, UUIDs, etc - which can be fetched by http Notice that objects can come from completely different sources If you can see an object, you can link to it And put that object link in a shared collection
- Here's an example of a mobile object - representing a user - You or one of your friends - you just need to get the link to their user object It has a GPS location and a link to a vCard object with the user's public contact info
- On the screen, this can be rendered in a fixed way. You can nest in information from the vCard And have a jumpable link to it, for full contact info You can then see where they are on a map
- User objects can be pushed to servers when they change And others can see them as they change These servers are assigned to users as their 'home' servers When the network breaks, updates stop, of course But you can still keep on seeing all of the objects you have seen before, indefinitely
- You can plot anything mappable on a single map Individual objects or, as here, lists of objects Objects get pushed and notified when they update So you see them move about!
- Nor a separate chat app!
- Here's an example of a mobile object - representing a user - You or one of your friends - you just need to get the link to their user object It has a GPS location and a link to a vCard object with the user's public contact info
- Or separate photo-sharing app! You don't manually share or upload or send objects or lists of links of objects You just set their permission to visible so anyone watching gets updated. Set in one place for all 'applications'. This applies to all objects: photos, links, messages, contacts, etc. And user's current location. You can also set private objects to be automatically backed up onto the same 'home' servers
- Drill down into the Calendar object to see the list of attendees When you hit the "Me Too!" button, you want to be added to the list
- This is what is POSTed back directly at the calendar object. It links to the calendar event object it came from, and the object of the user who is attending On receiving this, the event object will update the attendees accordingly Which updates every user's view If you change your mind, this very same object is updated and notified to the event
- Drill down into the Calendar object to see the list of attendees When you hit the "Me Too!" button, you want to be added to the list
- You can plot anything mappable on a single map Individual objects or, as here, lists of objects Objects get pushed and notified when they update So you see them move about!
- This is the simplest form of mashup Just a list of links to other objects - each on a different host NetMash allows the user to create new lists or copy lists And to create or copy other objects
- You're meeting Ann in the Cafe before going to DroidConf; So knock up your own app for it! Track Ann on her way, get the address and read reviews of the Cafe, watch the news on Twitter Content sources and services are a breeze to construct, and existing services, like Twitter, are easy targets for exposing as objects Once in the object network, new objects that depend on them are a snap to create There are no application boundaries, applications can build on one another in an exponentially valuable way
- There is a GUI object, for full control of the UX Complete with Native widgets
- See the native widgets. They're real, not faked. So they work fast at least.
- Changing the option chosen POSTs a message back to the GUI object itself; Or could have it wait for a submit button This is the form object that is sent back when option "2" is chosen It links to the GUI object it came from, and the object of the user who chose the option On receiving this, the GUI object could update accordingly, or redirect to another object Really easy to create remote, interactive apps this way
- Which keeps all the benefits of pure Native and adds on the benefits of the pure Web!
- NetMash has all the benefits of pure Native NetMash has all the benefits of the pure Web And it adds two major new benefits of its own