Appcelerator

Fundamentals

What we'll cover Today

  • Approaching development with Appcelerator
  • Moving into a New Form of Development
  • Structuring Mobile Applications

Why Appcelerator?

  • Java(Coffee)Script
  • Cross Platform
  • It Can Be really easy!
  • Awesome for page based applications
  • Near native performance

Page Based Applications

Near Native?

How does it differ from other tools?

  • Objective-C / Java
  • PhoneGap, jQueryMobile, MobileWeb
  • RareWire / XML & Document based Tools
  • CoronaSDK / Language Conversion

What shouldn't I use it for?

  • Heavy graphics processing and pixel manipulation?
  • Game development or anything that requires an excessive amount of visual manipulation?

Can I Do This?

Professional JavaScript Programmers not entirely required...

SetUp

Moving Into Mobile Application Development

Changing Up Workflows

  • There is no DOM!
  • Appcelerator uses a web browser for business logic
  • Transitioning from Backbone, Sproutcore...
  • Don't use the IDE

Dirty DOMming

Do not tie data directly into your interface elements


<div class='users'>
	<div class='user'>
		<div class='name'> Joe </div>
		<div class='attributes'>
			<div class='age'> 26 </div>
			<div class='gender'> Male </div>
		</div>
	</div>
	...
</div>
						

jQuery


for user in $('.users')
	if parseInt(user.find('.age')) > 21
		alert 'of age!'
						

Appcelerator


users = e.source.getChildren()
for user in users
	attrs = user.getChildren()
	for attr in attrs
		if attr.type == 'age'
			if parseInt(attr.value) > 21
				alert 'of age'
						

A Better Way


<div class='users'>
	<div class='user' data-user=user() >
		<div class='name'> Joe </div>
		<div class='attributes'>
			<div class='age'> user.get_name() </div>
			<div class='gender'> user.get_gender() </div>
		</div>
	</div>
	...
</div>
						

Attaching Event Listeners

Structuring an Application

Directory Structure


App Root
|
--> Build
--> Resources
	|
	--> app.js
	--> lib
		|
		--> logic.js
	--> src
		|
		--> logic.coffee
	--> android/iphone
		|
		--> image assets

					

Application Loader


var APP = {}

/*** Data Sources ***/
Ti.include('data/some data.js');
/*** ---------- ***/

/*** Utilities ***/
Ti.include('lib/utilities and or styles.js');
/*** ---------- ***/

/*** Class Includes ***/
Ti.include('lib/Formula.js');
/*** ---------- ***/

/*** Controller ***/
Ti.include('lib/controller.js');
/*** ---------- ***/
					

Codez


class APP.Formula
	create_base_elements : (window) ->
		button 				= Ti.UI.createButton
			image 			: APP.ICONS.STAR
			width 			: APP.WIDTH*.075
			height 			: APP.WIDTH*.075
			backgroundImage		: 'none'
		window.add button


class APP.Formula_Type extends APP.Formula	
	initialize : ->
		window = Ti.UI.createWindow()
		@create_base_elements window

					

More Codez


class APP.Screen
	constructor : (data) ->

		window 				= Ti.UI.createWindow
			title 			: 'Window Title'
			barImage 		: APP.BG.HEADER
		label 				= Ti.UI.createLabel
			text 			: data.title
		window.add label

		for item data.items
			sub_label 		= Ti.UI.createLabel
				text  		: data.title
			sub_label.addEventListener 'click', (e) ->
				alert e.source
			window.add sub_label
					

Common JS Modules

Definition


exports.createFormValidator = (o) ->
	...
					

Require


require('vendor/form_validator').createFormValidator
	text_fields 	: text_fields,
	data 		: data
					

How complex can I really get?

  • Create custom data models that respond to change
  • Gyroscope/Accelerometer
  • Particle Generation
  • Web Socket Integration
  • Mobile Payment Gateway
  • Device + Application State
  • Custom Model and Controller Interaction

The Non-"native" development stigma

Getting Help

  • Q&A Forums are hosted by Appcelerator
  • Stack Overflow
  • Lynda.com & Other External TutSites
  • Proprietary Paid services

Common Issues

  • 2.1 == Beta‚Ķ or maybe Alpha
  • Missing Error Messaging
  • OMG WTF, NOTHING WORKS!
  • Apple/Android Deployment Issues

Opensource

  1. Create a ticket in their bug tracking sytem
  2. Create a signed CLA
  3. Write a series of test cases
  4. Update the Docs

Questions?

BY Joe Longstreet