mobile frameworks and titanium specifically

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...