Upload
jan-van-den-berg
View
234
Download
0
Tags:
Embed Size (px)
DESCRIPTION
A case for the importance of mobile frameworks like PhoneGap and Titanium, and a deeper look into how Titanium works.
Citation preview
THE FUTURE IS THE FUTURE IS
MOBILE
Introduction
The "App gold rush"
number of apps per platform
Mobile was easy in 2007
Still an Apple world in 2008
2009Android came to town
2010● The iPad hit● So did Android● In December
mobile out sold desktop
2012Mobile chaos reigns
And then you have your customers...
that's great, but....
Source: Forrester Research
Forrester Research:"Most apps take at least six months of full-time work and cost between $20,000 and $150,000 to develop"
padgadget.com:"For a nice but simple app, including design work, back-end services and project management your total budget is around $35,000
So many platform, so little time
Java Objective-C C++, C#
HTML5 Java C++
TVTabletPC
It's no longer about smartphones
Smartphone
Mac computers
Chrome books
iPhone iPad Apple TV
Android Android tablets Google TV
Windows Windows Phone Windows 8 Xbox
Time to reflect
The marviq story so far ...
Cross platform to choose from
2000 today
100+
Source: VisionMobile 2012
Diversity of tools for all sorts of developers, apps and mobile platforms
Source: VisionMobile 2012
How do you choose?
Putting the iq back in marviq
Pushing marviq forward
"Native developers"
Create apps using programming
languages and tools specific to
platforms
300K
"Web developers"
Create apps using HTML/CSS/JavaScript
Less dependent on specific programming
skills
3 million Source: VisionMobile 2012
HTML5 is pitched as the future of mobile apps
But what is HTML5, really?
HTML5 is just past the peak of expectations
● Fragmentation across platforms (iOS, Android, BlackBerry, Windows Phone)● Challenges to compete with native user experience● Lack of distribution channels and monetisation for web apps
HTML5 is fragmented across platforms
html5test.com (April 2012)
Andrew Betts of Assanka on app.ft.com:
"It took a full-time team of 3 developers at Assanka 8 months to launch on iPad, and that team a further 4 months to bug-fix the iPad and ready for distribution to Android tables."
Marviq, mobile and more
Time for a new strategy
The need for a mobile strategy
Presentation
Logic
Data
Yesterday3-tier centralized web architecture
TodayCloud connected app centric modal
How to implement the strategy?
Bridging the gap
Native app development
The missing link
Why native?
● Fragmentation across platforms (iOS, Android, BlackBerry, Windows Phone)
● Challenges to compete with native user experience
● Lack of distribution channels and monetisation for web apps
Reach
Performance
Future friendly
Right now
Because it's all JavaScript
Foundation of reuse
Modular Application Development
MAT goes MAD
Modular code advantages
● Reusable with multiple tools● Tried & tested code● Easier to test● Easier to document● Resource scaling● Performance (non-blocking)● Optimisable (less code)
Presentation
Functional core
localStorage
DOM Utilities
Data formatters
Data objects
Data caching
XML Utilities
Phone utilitiesDOM Utilities
HTML Fragments
Components
HTML Fragments
Process handlers
Service handlers
XHR
XDM
Widgets
CSS Templates
Widgets
CSS Templates
JSON UtilitiesData stubs
Unit tests
View panes
Formatters Formatters
Controls
Web portal Native mobile HTML Mobile
MAD TechnologyFunctional core:● requireJS● promises / XHR / XDM● XPath / XML Dom
HTML5 Web:● jQuery / jQuery UI widgets● moment.js / accouting.js / ??● MAT / SASS / HAML / ??
Native mobile:● Appcelerator
HTML5 mobile:● PhoneGap● jQueryMobile / Twitter bootstrap / Vanilla HTML + JS / ??
Enter Appcelerator
Titanium SDK
Titanium Studio
Cloud services
Analytics
Support
Appcelerator
Titanium SDK
JavaScript runtime to run native apps
Cross device UI (not 100%)
Networking
Database / XML / Json
Yup, it's Eclipse
Titanium Studio
Eclipse / Aptana based
Helps install and manage SDK's
Can directly launch emulators / devices
Code completion and documentation
Integrated developer portal
Titanium Studio
Titanium marketplace
Cloud services
Appcelerator ecosystem
Appcelerator is modularCommonJS based
function Car( params ) {}module.exports = Car;
Modules in Appcelerator
var Car = require( "Car" ), ferrari = new Car();
A module:
How to use:
function Car( params ) {}exports.drive = function(){
console.log( "driving" );}module.exports = Car;
Modules in Appcelerator
var Car = require( "Car" ), ferrari = new Car( { color: "red" } );ferrari.drive();
function Car( params ) {}
function drive = function() {console.log( "driving" );
}exports.drive = drive;module.exports = Car;
Modules in Appcelerator
function Car( params ) {}
exports.exports = Car;
Car.prototype.drive = function() {console.log( "driving" );
}
Modules in Appcelerator
More to follow...
LabsStart your editors...