developing desktop applications using html and javascript
DESCRIPTION
Presentation given by Jeff Haynie, CEO of Appcelerator on building Desktop Applications using Appcelerator Titanium. http://titaniumapp.com This presentation was given at the JSConf 2009 in Washington, DC.TRANSCRIPT
![Page 1: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/1.jpg)
Desktop ApplicationsUsing HTML and JavaScript (and Python and Ruby)
Jeff Haynie@jhaynie
![Page 2: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/2.jpg)
JEFF HAYNIE
CEO, Appcelerator
Open Source Developer
Twitter: jhaynie
Blog: blog.jeffhaynie.us
![Page 3: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/3.jpg)
Why?
Why would I want to build a desktop application instead of a web application?
![Page 4: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/4.jpg)
The experience
For the same reasons you’re building a mobile application instead of running it in the browser on the device
![Page 5: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/5.jpg)
The user experience
The experience is richer
Drag and Drop
True offlineNotifications
Filesystem
App-to-app interaction
Backgrounding
![Page 6: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/6.jpg)
The interaction
Desktop applications typically have deeper interaction and user affinity
![Page 7: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/7.jpg)
Desktop Development
Windows: Win32 API, MFC, AFC, .NETMacintosh: Cocoa, CarbonLinux: GTK+
Cross-platform toolkits:Java Swing, Eclipse SWT, Mono, GTK+
Adobe AIR *
![Page 8: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/8.jpg)
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?
![Page 9: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/9.jpg)
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
![Page 10: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/10.jpg)
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
![Page 11: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/11.jpg)
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
![Page 12: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/12.jpg)
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$.=)
![Page 13: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/13.jpg)
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
![Page 14: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/14.jpg)
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”
![Page 15: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/15.jpg)
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)
![Page 16: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/16.jpg)
HTML 5 ++
• Database support (we also have Sync DB API)
• CSS animation, transitions, gradients
• Custom CSS scrollbars
• Web workers
• Custom Fonts (@font-face)
• SVG
![Page 17: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/17.jpg)
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
![Page 18: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/18.jpg)
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%
![Page 19: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/19.jpg)
Demo
• It’s usually easier to demonstrate
![Page 20: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/20.jpg)
Where to get it?
• Download:
• http://titaniumapp.com/download
• Currently Preview Release 3
• Beta coming very soon
![Page 21: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/21.jpg)
Please talk to me
• Looking for feedback, input and help
• @jhaynie
• #titanium_app on irc.freenode.net
![Page 22: Developing Desktop Applications using HTML and Javascript](https://reader034.vdocument.in/reader034/viewer/2022042614/554f5defb4c905c8088b481a/html5/thumbnails/22.jpg)
Big Thanks!
• Thanks to Jonathan Snook for demo code and inspiration
• http://snook.ca
• @snookca