Developing Desktop Applications using HTML and Javascript

Desktop ApplicationsUsing HTML and JavaScript (and Python and Ruby)

Jeff Haynie@jhaynie

JEFF HAYNIE

CEO, Appcelerator

Open Source Developer

Twitter: jhaynie

Blog: blog.jeffhaynie.us

Why?

Why would I want to build a desktop application instead of a web application?

The experience

For the same reasons you’re building a mobile application instead of running it in the browser on the device

The user experience

The experience is richer

Drag and Drop

True offlineNotifications

Filesystem

App-to-app interaction

Backgrounding

The interaction

Desktop applications typically have deeper interaction and user affinity

Desktop Development

Windows: Win32 API, MFC, AFC, .NETMacintosh: Cocoa, CarbonLinux: GTK+

Cross-platform toolkits:Java Swing, Eclipse SWT, Mono, GTK+

Adobe AIR *

Why web technologies?Speed (and thus, cost) of developmentLots of people know themGreat toolingLots of librariesHTML/CSS are good enough for UIPlenty of online resources, trainingMix of great languages: JavaScript, Python, Ruby

Why not?

Appcelerator Titanium

• Open source SDK, Tools (Apache)

• Cross-platform (Win32, OSX, Linux)

• Based on WebKit

• Modular and extensible

• Supports JavaScript, Python, Ruby (more coming)

• http://github.com/marshall/titanium

What about AIR?

• Adobe AIR is a great product

• Different architecture

• Not open source

• Very strong (and rigid) security model

• Mature

• Requires Flash

• Requires pre-installed Runtime

Desktop API

• Filesystem - read, write

• Process - start/stop/control

• UI - menus, trays, drag-drop, etc

• Media - sound, video, camera, mic

• Database - online, offline

• Notifications - user notifications

• Network - robust access and protocols

Titanium Architecture

!"#$%&%'$()

*+,)

-,)

*./#&01%)

*22)

+#/345()6/7/%15"2')

89:&)

+&';4.)

<$="/)

>40?1/04.)

@$%A'42)

+541$%%)

>$'B45A)

<4.A$&)

C4((4.)D:E$1')F/&$5) G;"5=H2/5'&)F":5/5"$%))I$JKJL)M$:N"'O)

C9%'4()P)

C9%'4()Q)

C9%'4()R)

<4=9#$)

</."S$%')

G"/22)

T<F)

UG<F)

6V)

CVV)

W44')>$')

,.%'/##$5)

>$'B45A)#4/=)89.0($)

/.=)<4=9#$%)"S).4')#41/#)

V'/5')*22#"1/04.)4.1$)89.0($)

/.=)<4=9#$%)25$%$.')

X495)

*22#"1/04.)

*11$%%)(4=9#$%)7"/)6VL)89:&)/.=)+&';4.)

G"'/."9()89.0($)/.=)<4=9#$%)

5$Y9"5$=)

4204./#)

F$K$.=)

Kroll microkernel

• Cross-platform C++

• Small boot kernel which dynamically loads modules

• Cross-language, in-process binding technology (C++, JS, Ruby, Python)

• All APIs in Titanium are kroll modules

• Separate Github open source project:

• http://github.com/jhaynie/kroll

You focus on app

• We’ll focus on complexities of packaging, installation, updating, analytics, etc

• Apps are packaging in a cross-platform specific manner

• Developers control their packaging

• Apps look and feel “native”

Your happy place

• You can use your-favorite-javascript-framework

• JQuery, Dojo, Mootools, Prototype, etc.

• Capuccino, ExtJS, Entourage, etc.

• Import existing modules/gems (Py/Ruby)

• Even Flash/Flex, Silverlight (and maybe Java/Java FX)

HTML 5 ++

• Database support (we also have Sync DB API)

• CSS animation, transitions, gradients

• Custom CSS scrollbars

• Web workers

• Custom Fonts (@font-face)

• SVG

Titanium Apps

• Focus on writing HTML/JavaScript etc which runs natively on the desktop machine

• Resources are bundled with application and are local (but can remotely use resources)

• No cross-domain restrictions (except remote resources origin touching Titanium)

• Benefit from shared runtime

• Supports Flash, Silverlight and other plugins

Performance

• Titanium runs on various architectures (Intel, PPC, 32-bit, 64-bit)

• Running on EFIKA 5200 B (PPC 128MB)

• http://www.genesi-usa.com/efika

• Yahoo Sideline port uses 1/4 memory of AIR app

• Pandora AIR app pegs CPU at 100%, Titanium 8-10%

Demo

• It’s usually easier to demonstrate

Where to get it?

• Download:

• http://titaniumapp.com/download

• Currently Preview Release 3

• Beta coming very soon

Please talk to me

• Looking for feedback, input and help

• [email protected]

• @jhaynie

• #titanium_app on irc.freenode.net

Big Thanks!

• Thanks to Jonathan Snook for demo code and inspiration

• http://snook.ca

• @snookca