Tweet
Tweet

Slide 1

Slide 1 text

TITANIUM DEVELOPMENT WITH COFFEESCRIPT, COMPASS, AND SASS Accelerated WYNNNETHERLAND

Slide 2

Slide 2 text

$ whoami

Slide 3

Slide 3 text

NETHERLAND

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Mobile? Web? Both?

Slide 6

Slide 6 text

Nice to meet ya.

Slide 7

Slide 7 text

PIXELS I'VE PUSHED With some very talented folks.

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Play golf? Find this dude and get in on the beta.!

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Titanium powered kiosk!

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

TITANIUM STACK A polyglot's

Slide 18

Slide 18 text

COFFEESCRIPT

Slide 19

Slide 19 text

It's still just JavaScript.

Slide 20

Slide 20 text

var foo = function () { } foo = () -> I’d rather write this. JAVASCRIPT COFFEESCRIPT

Slide 21

Slide 21 text

var button = Titanium.UI.createButton({ title: 'I am a Button', height: 40, width: 200, top: 10 }); button.addEventListener('click', function(e) { alert("Oooh, that tickles!"); }); JAVASCRIPT

Slide 22

Slide 22 text

button = Titanium.UI.createButton title: 'I am a Button' height: 40 width: 200 top: 10 button.addEventListener 'click', (e) -> alert "Oooh, that tickles!" COFFEESCRIPT

Slide 23

Slide 23 text

It's about more than aesthetics ;{ } For me,

Slide 24

Slide 24 text

Some of my favorite features...

Slide 25

Slide 25 text

for own key, value of query uri += "#{ key }=#{ escape(value) }&" COFFEESCRIPT var key, value; var __hasProp = Object.prototype.hasOwnProperty; for (key in query) { if (!__hasProp.call(query, key)) continue; value = query[key]; uri += "" + key + "=" + (escape(value)) + "&"; } JAVASCRIPT

Slide 26

Slide 26 text

for own key, value of query uri += "#{ key }=#{ escape(value) }&" COFFEESCRIPT Comprehensions

Slide 27

Slide 27 text

for own key, value of query uri += "#{ key }=#{ escape(value) }&" COFFEESCRIPT Interpolation

Slide 28

Slide 28 text

courseButtonSubhead = Ti.UI.createLabel className: 'optRowSubhead' text: "#{GolfStatus.App.currentGame?.green?.name}" COFFEESCRIPT The Existential Operator

Slide 29

Slide 29 text

class GolfStatus.Models.Game constructor: (@owner, @course, @playingFor='brag', @scoringFormat='low_net') -> @players = {} @addPlayer @owner if @owner @green = @course.greens[0] if @course @currentHole = 1 @maxHolePlayed = 1 # elsewhere game = new GolfStatus.Models.Game(...) COFFEESCRIPT Simple inheritance pattern

Slide 30

Slide 30 text

class GolfStatus.Models.Game constructor: (@owner, @course, @playingFor='brag', @scoringFormat='low_net') -> @players = {} @addPlayer @owner if @owner @green = @course.greens[0] if @course @currentHole = 1 @maxHolePlayed = 1 COFFEESCRIPT @

Slide 31

Slide 31 text

class GolfStatus.Models.Game constructor: (@owner, @course, @playingFor='brag', @scoringFormat='low_net') -> @players = {} @addPlayer @owner if @owner @green = @course.greens[0] if @course @currentHole = 1 @maxHolePlayed = 1 COFFEESCRIPT Default values

Slide 32

Slide 32 text

class GolfStatus.Models.Game constructor: (@owner, @course, @playingFor='brag', @scoringFormat='low_net') -> @players = {} @addPlayer @owner if @owner @green = @course.greens[0] if @course @currentHole = 1 @maxHolePlayed = 1 COFFEESCRIPT More human conditionals

Slide 33

Slide 33 text

GolfStatus.Models.Game::PlayingForTypes = brag: 'Bragging Rights' cash: 'Status Cash' GolfStatus.Models.Game::ScoringFormats = low_net: 'Low Net' low_grows: 'Low Gross' COFFEESCRIPT Easy object.prototype

Slide 34

Slide 34 text

noticeHTML =''' ''' noticeHTML += "
#{noticeText}
" noticeHTML += ''' ''' COFFEESCRIPT Heredocs

Slide 35

Slide 35 text

Because string building sucks.

Slide 36

Slide 36 text

And so much more.

Slide 37

Slide 37 text

http://wynn.fm/2Y

Slide 38

Slide 38 text

GET THE BOOK. http://wynn.fm/g8

Slide 39

Slide 39 text

STYLESHEETS

Slide 40

Slide 40 text

Are you using JSS?

Slide 41

Slide 41 text

JSS works like CSS.

Slide 42

Slide 42 text

Why do we have CSS?

Slide 43

Slide 43 text

content presentation
  • Wynn Netherland on design, development, and general geekery.
  • Gowalla
  • Facebook
  • Dribbble
  • LinkedIn
  • GitHub
  • Twitter
    • ... ✂ You gotta keep 'em separated.

Slide 44

Slide 44 text

A example

Slide 45

Slide 45 text

var buttonOne = Titanium.UI.createButton({ title:'I am a Button', height:40, width:200, top:10 }); var buttonTwo = Titanium.UI.createButton({ title:'I am also a Button', image:'../images/chat.png', width:200, height:40, top:60 }); JAVASCRIPT

Slide 46

Slide 46 text

var buttonOne = Titanium.UI.createButton({ title:'I am a Button', height:40, width:200, top:10 }); var buttonTwo = Titanium.UI.createButton({ title:'I am also a Button', image:'../images/chat.png', width:200, height:40, top:60 }); Presentation JAVASCRIPT

Slide 47

Slide 47 text

#buttonOne { title:'I am a Button'; width:200; height:40; top:10 } #buttonTwo { title:'I am also a Button'; image:'../images/chat.png'; width:200; height:40; top:60 } .button { height: 40; width: 200; } var buttonOne = Titanium.UI.createButton({ id: "buttonOne", className: "button" }); var buttonTwo = Titanium.UI.createButton({ id: "buttonTwo", className: "button" }); Behavior and composition in Presentation in .js .jss JSS JAVASCRIPT

Slide 48

Slide 48 text

#buttonOne { title:'I am a Button'; width:200; height:40; top:10 } #buttonTwo { title:'I am also a Button'; image:'../images/chat.png'; width:200; height:40; top:60 } .button { height: 40; width: 200; } var buttonOne = Titanium.UI.createButton({ id: "buttonOne", className: "button" }); var buttonTwo = Titanium.UI.createButton({ id: "buttonTwo", className: "button" }); Style hooks JAVASCRIPT JSS

Slide 49

Slide 49 text

There's a better way to write CSS. JSS

Slide 50

Slide 50 text

& CSS extensions & compiler Patterns & plugins

Slide 51

Slide 51 text

gem install compass

Slide 52

Slide 52 text

#buttonOne { title: 'I am a Button'; width: 200; height: 40; top: 10 } #buttonTwo { title: 'I am also a Button'; image: '../images/chat.png'; width: 200; height: 40; top: 60 } .button { height: 40; width: 200; } Is it JSS or Sassy CSS? Yes? JSS / SCSS

Slide 53

Slide 53 text

#buttonOne title: 'I am a Button' width: 200 height: 40 top: 10 #buttonTwo title: 'I am also a Button' image: '../images/chat.png' width: 200 height: 40 top: 60 .button height: 40 width: 200 I prefer Sass' original indented, whitespace aware syntax. SASS

Slide 54

Slide 54 text

Which do you prefer?

Slide 55

Slide 55 text

#buttonOne { title: 'I am a Button'; width: 200; height: 40; top: 10 } #buttonTwo { title: 'I am also a Button'; image: '../images/chat.png'; width: 200; height: 40; top: 60 } .button { height: 40; width: 200; } SCSS

Slide 56

Slide 56 text

#buttonOne title: 'I am a Button' width: 200 height: 40 top: 10 #buttonTwo title: 'I am also a Button' image: '../images/chat.png' width: 200 height: 40 top: 60 .button height: 40 width: 200 SASS

Slide 57

Slide 57 text

Pick one. Or not. Mix and match.

Slide 58

Slide 58 text

Organize with partials.

Slide 59

Slide 59 text

stylesheets ├── _activity.sass ├── _base.sass ├── _confirmation.sass ├── _course.scss ├── _courses.sass ├── _friends.scss ├── _gameplay.sass ├── _leaderboard.sass ├── _leaders.sass ├── _login.sass ├── _requests.sass ├── _tourcard.sass └── app.sass @import 'base' @import 'login' @import 'activity' @import 'course' @import 'courses' @import 'friends' @import 'leaderboard' @import 'leaders' @import 'requests' @import 'tourcard' @import 'confirmation' @import 'gameplay' Resources ├── app.js ├── app.jss ...

Slide 60

Slide 60 text

stylesheets ├── _activity.sass ├── _base.sass ├── _confirmation.sass ├── _course.scss ├── _courses.sass ├── _friends.scss ├── _gameplay.sass ├── _leaderboard.sass ├── _leaders.sass ├── _login.sass ├── _requests.sass ├── _tourcard.sass └── app.sass @import 'base' @import 'login' @import 'activity' @import 'course' @import 'courses' @import 'friends' @import 'leaderboard' @import 'leaders' @import 'requests' @import 'tourcard' @import 'confirmation' @import 'gameplay' Resources ├── app.js ├── app.jss ... Mix scss with sass if you're so inclined.

Slide 61

Slide 61 text

Don't Repeat Yourself

Slide 62

Slide 62 text

.user-info bottom: 1 color: #333 font-size: 11 font-weight: bold height: auto left: 0 shadowColor: #fff shadowOffset-x: 0 shadowOffset-y: -1 text-align: center width: 92 SASS

Slide 63

Slide 63 text

.user-info bottom: 1 color: #333 font: size: 11 weight: bold height: auto left: 0 shadowColor: #fff shadowOffset: x: 0 y: '-1' text-align: center width: 92 DRY it up. Nesting SASS

Slide 64

Slide 64 text

#buttonOne title: 'I am a Button' width: 200 height: 40 top: 10 #buttonTwo title: 'I am also a Button' image: '../images/chat.png' width: 200 height: 40 top: 60 .button height: 40 width: 200 SASS

Slide 65

Slide 65 text

=button height: 40 width: 200 #buttonOne +button title: 'I am a Button' top: 10 #buttonTwo +button title: 'I am also a Button' image: '../images/chat.png' top: 60 DRY it up. Mixins SASS

Slide 66

Slide 66 text

=bottom-right($height: 40, $width: 200) height: $size width: $size right: 0 bottom: 0 #buttonOne +bottom-right title: 'I am a Button' #buttonTwo +bottom-right(50, 300) title: 'I am also a Button' image: '../images/chat.png' DRY it up. Mixins with params SASS

Slide 67

Slide 67 text

#buttonOne title: 'I am a Button' width: 200 height: 40 top: 10 #buttonTwo title: 'I am also a Button' image: '../images/chat.png' width: 200 height: 40 top: 60 .button height: 40 width: 200 SASS

Slide 68

Slide 68 text

.button height: 40 width: 200 #buttonOne @extend .button title: 'I am a Button' top: 10 #buttonTwo @extend .button title: 'I am also a Button' image: '../images/chat.png' top: 60 DRY it up. @extend SASS

Slide 69

Slide 69 text

.button, #buttonOne, #buttonTwo { height: 40; width: 200; } #buttonOne { title: 'I am a Button'; width: 200; } #buttonTwo { title: 'I am also a Button'; image: '../images/chat.png'; top: 60 } DRY it up. @extend One less class in our .js JSS

Slide 70

Slide 70 text

Craft themes with color functions.

Slide 71

Slide 71 text

$button-base: #a7a7a7 #buttonOne color: $button-base title: "Button 1" #buttonTwo color: $button-base title: "Button 2" variables SASS

Slide 72

Slide 72 text

$button-base: #a7a7a7 #buttonOne color: $button-base title: "Button 1" #buttonTwo color: $button-base title: "Button 2" variables SASS

Slide 73

Slide 73 text

$button-base: #a7a7a7 #buttonOne color: $button-base title: "Button 1" #buttonTwo color: darken($button-base, 20%) title: "Button 2" color functions SASS

Slide 74

Slide 74 text

$button-base: #a7a7a7 #buttonOne color: $button-base title: "Button 1" #buttonTwo color: darken($button-base, 20%) title: "Button 2" color functions SASS

Slide 75

Slide 75 text

hue(#cc3) # => 60deg saturation(#cc3) # => 60% lightness(#cc3) # => 50% adjust-hue(#cc3, 20deg) # => #9c3 saturate(#cc3, 10%) # => #d9d926 desaturate(#cc3, 10%) # => #bfbf40 lighten(#cc3, 10%) # => #d6d65c darken(#cc3, 10%) # => #a3a329 grayscale(#cc3) # => desaturate(#cc3, 100%) = #808080 complement(#cc3) # => adjust-hue(#cc3, 180deg) = #33c mix(#cc3, #00f) # => #e56619 mix(#cc3, #00f, 10%) # => #f91405 mix(#cc3, #00f, 90%) # => #d1b72d more color functions SASS

Slide 76

Slide 76 text

mix(rgba(51, 255, 51, 0.75), #f00) # => rgba(178, 95, 19, 0.875) mix(rgba(51, 255, 51, 0.90), #f00) # => rgba(163, 114, 22, 0.95) alpha(rgba(51, 255, 51, 0.75)) # => 0.75 opacity(rgba(51, 255, 51, 0.75)) # => 0.75 opacify(rgba(51, 255, 51, 0.75), 0.1) # => rgba(51, 255, 51, 0.85) fade-in(rgba(51, 255, 51, 0.75), 0.1) # => rgba(51, 255, 51, 0.85) transparentize(rgba(51, 255, 51, 0.75), 0.1) # => rgba(51, 255, 51, 0.65) fade-out(rgba(51, 255, 51, 0.75), 0.1) # => rgba(51, 255, 51, 0.65) even more color functions SASS with alpha support!

Slide 77

Slide 77 text

Building a hybrid native+web app?

Slide 78

Slide 78 text

Share your stylesheet variables!

Slide 79

Slide 79 text

No more vendor namespaces. Selector inheritance. URL helpers. So much more.

Slide 80

Slide 80 text

I could write a book.

Slide 81

Slide 81 text

Oh wait. We did!

Slide 82

Slide 82 text

Isn’t she Sassy, folks? GET THE BOOK. http://wynn.fm/ti-sass

Slide 83

Slide 83 text

sass40 Save 40% and get early access! Sadly, sass100 is not a valid code. http://wynn.fm/ti-sass

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

Patterns

Slide 86

Slide 86 text

Web languages. Native apps.

Slide 87

Slide 87 text

Stateful.

Slide 88

Slide 88 text

Event driven.

Slide 89

Slide 89 text

MVC?

Slide 90

Slide 90 text

Views...

Slide 91

Slide 91 text

... are really ViewControllers.

Slide 92

Slide 92 text

So we create View factories...

Slide 93

Slide 93 text

... and Model factories ...

Slide 94

Slide 94 text

...and factories that make miniature models of factories.

Slide 95

Slide 95 text

The Titanium WayTM

Slide 96

Slide 96 text

button = Titanium.UI.createButton title: 'I am a Button' height: 40 width: 200 top: 10 button.addEventListener 'click', (e) -> alert "Oooh, that tickles!" COFFEESCRIPT Look familiar?

Slide 97

Slide 97 text

So how do you manufacture your own views?

Slide 98

Slide 98 text

Compose from other views.

Slide 99

Slide 99 text

MyApp.Views.createLoginWindow = (opts={}) -> window = Ti.UI.createWindow(opts) button = Titanium.UI.createButton title: 'I am a Button' height: 40 width: 200 top: 10 window.add button # methods say = (msg) -> alert(msg) # event handlers button.addEventListener 'click', -> say('hello') window COFFEESCRIPT

Slide 100

Slide 100 text

MyApp.Views.createLoginWindow = (opts={}) -> window = Ti.UI.createWindow(opts) button = Titanium.UI.createButton title: 'I am a Button' height: 40 width: 200 top: 10 window.add button # methods say = (msg) -> alert(msg) # event handlers button.addEventListener 'click', -> say('hello') window Create the factory method in the appropriate namespace. COFFEESCRIPT

Slide 101

Slide 101 text

MyApp.Views.createLoginWindow = (opts={}) -> window = Ti.UI.createWindow(opts) button = Titanium.UI.createButton title: 'I am a Button' height: 40 width: 200 top: 10 window.add button # methods say = (msg) -> alert(msg) # event handlers button.addEventListener 'click', -> say('hello') window Compose the view from Titanium types or others of your own COFFEESCRIPT

Slide 102

Slide 102 text

MyApp.Views.createLoginWindow = (opts={}) -> window = Ti.UI.createWindow(opts) button = Titanium.UI.createButton title: 'I am a Button' height: 40 width: 200 top: 10 window.add button # methods say = (msg) -> alert(msg) # event handlers button.addEventListener 'click', -> say('hello') window Methods in familiar place COFFEESCRIPT

Slide 103

Slide 103 text

MyApp.Views.createLoginWindow = (opts={}) -> window = Ti.UI.createWindow(opts) button = Titanium.UI.createButton title: 'I am a Button' height: 40 width: 200 top: 10 window.add button # methods say = (msg) -> alert(msg) # event handlers button.addEventListener 'click', -> say('hello') window And event handlers... COFFEESCRIPT

Slide 104

Slide 104 text

MyApp.Views.createLoginWindow = (opts={}) -> window = Ti.UI.createWindow(opts) button = Titanium.UI.createButton title: 'I am a Button' height: 40 width: 200 top: 10 window.add button # methods say = (msg) -> alert(msg) # event handlers button.addEventListener 'click', -> say('hello') window Return your view COFFEESCRIPT

Slide 105

Slide 105 text

Models

Slide 106

Slide 106 text

CoffeeScript classes

Slide 107

Slide 107 text

class GolfStatus.Models.Game constructor: (@owner, @course, @playingFor='brag', @scoringFormat='low_net') -> serialize: -> deserialize: (data) -> save: -> resume: -> dataForSubmit: () -> submit: (error) -> ... COFFEESCRIPT

Slide 108

Slide 108 text

API Wrappers

Slide 109

Slide 109 text

class GolfStatus.API # Initialize with login and password constructor: (@login, @password) -> COFFEESCRIPT CoffeeScript class

Slide 110

Slide 110 text

... # Build the full API URI for a request requestURI: (path, query={}) -> uri = "#{GolfStatus.API_ENDPOINT}#{path}.json?" for own key, value of query uri += "#{ key }=#{ escape(value) }&" uri COFFEESCRIPT URI building

Slide 111

Slide 111 text

# Common request handling across all verbs request: (path, options, authenticated=true) -> # Default to GET options.method ?= 'GET' options.query ?= {} options.success ?= -> Ti.API.info options.error ?= -> Ti.API.error xhr = Ti.Network.createHTTPClient() xhr.onreadystatechange = (e) -> ... # Default event handlers # Basic auth # other common stuff ... if options.body data = JSON.stringify(options.body) Ti.API.debug data xhr.send(data) else xhr.send() COFFEESCRIPT HTTP Request building

Slide 112

Slide 112 text

# High level method for GET requests get: (path, options, authenticated=true) -> options.method = 'GET' @request path, options, authenticated # High level method for POST requests post: (path, options, authenticated=true) -> options.method = 'POST' @request path, options, authenticated # High level method for DELETE requests delete: (path, options, authenticated=true) -> options.method = 'DELETE' @request path, options, authenticated COFFEESCRIPT High level methods for HTTP verbs

Slide 113

Slide 113 text

# ### Authenticate the user ### authenticate: (options) -> Ti.API.debug "GolfStatus.API.authenticate" @get '/me', options # ### Logout the user ### logout: (options) -> Ti.API.debug "GolfStatus.API.logout" @delete '/logout', options # ### Forgot password forgotPassword: (email, options) -> Ti.API.debug "GolfStatus.API.forgotPassword" options.query = {} options.query.email = email @post '/passwords', options, false # ### Convenience method to get current user info ### me: (options) -> Ti.API.debug "GolfStatus.API.me" @authenticate options COFFEESCRIPT Higher level API methods

Slide 114

Slide 114 text

Folder structure

Slide 115

Slide 115 text

. ├── Resources # Titanium root │ └── vendor # JavaScript frameworks ├── src # CoffeeScript root │ └── golf_status # App root │ ├── models │ └── views │ ├── account # App domains │ ├── activity │ ├── courses │ ├── leaderboard │ └── play └── stylesheets # Sass

Slide 116

Slide 116 text

Stitching it all together

Slide 117

Slide 117 text

app.js

Slide 118

Slide 118 text

GolfStatus = Models: {} Views: Account: {} Activity: {} Courses: {} Leaderboard: {} Play: {} Ti.include('vendor/date.js') Ti.include('vendor/underscore.js') Ti.include('golf_status.js') GolfStatus.App.init() COFFEESCRIPT

Slide 119

Slide 119 text

GolfStatus = Models: {} Views: Account: {} Activity: {} Courses: {} Leaderboard: {} Play: {} Ti.include('vendor/date.js') Ti.include('vendor/underscore.js') Ti.include('golf_status.js') GolfStatus.App.init() COFFEESCRIPT Set up your namespaces

Slide 120

Slide 120 text

GolfStatus = Models: {} Views: Account: {} Activity: {} Courses: {} Leaderboard: {} Play: {} Ti.include('vendor/date.js') Ti.include('vendor/underscore.js') Ti.include('golf_status.js') GolfStatus.App.init() COFFEESCRIPT third party frameworks

Slide 121

Slide 121 text

GolfStatus = Models: {} Views: Account: {} Activity: {} Courses: {} Leaderboard: {} Play: {} Ti.include('vendor/date.js') Ti.include('vendor/underscore.js') Ti.include('golf_status.js') GolfStatus.App.init() COFFEESCRIPT All of our app in just one file

Slide 122

Slide 122 text

GolfStatus = Models: {} Views: Account: {} Activity: {} Courses: {} Leaderboard: {} Play: {} Ti.include('vendor/date.js') Ti.include('vendor/underscore.js') Ti.include('golf_status.js') GolfStatus.App.init() COFFEESCRIPT Fire up the app and first window

Slide 123

Slide 123 text

Lean app.js makes for flexibility

Slide 124

Slide 124 text

Tapping through to test deep screens bites!

Slide 125

Slide 125 text

# GolfStatus.App.init() window = GolfStatus.Views.Play.createGameWindow() window.open() COFFEESCRIPT Comment out init and fire up the deepest view.

Slide 126

Slide 126 text

make

Slide 127

Slide 127 text

run-iphone: & @DEVICE_TYPE=iphone make run test-iphone: & @DEVICE_TYPE=iphone make test run-ipad: & @DEVICE_TYPE=ipad make run test-ipad: & @DEVICE_TYPE=ipad make test run: & @if [ "${DEVICE_TYPE}" == "" ]; then\ & & echo "Please run \"make run-[iphone|ipad]\" instead.";\ & & exit 1;\ & fi & @mkdir -p ${PROJECT_ROOT}/${PROJECT_NAME}/Resources/test/ & @echo "" > ${PROJECT_ROOT}/${PROJECT_NAME}/Resources/test/enabled.js & @make launch-titanium http://wynn.fm/g9 guilhermechapiewski (Guilherme Chapiewski)

Slide 128

Slide 128 text

rake I'm a Rubyist, so I speak

Slide 129

Slide 129 text

Compile

Slide 130

Slide 130 text

def compile_sass puts "Compiling stylesheets".blue input = "stylesheets/app.sass" output = "Resources/app.jss" system "sass --compass -C -t expanded #{input} > #{output}" end RAKEFILE

Slide 131

Slide 131 text

def compile_coffee paths = `find src/golf_status -name '*.coffee'`.split("\n") compilation = ( puts "Compiling CoffeeScript (golf_status.js)".blue output = "Resources/golf_status.js" system "coffee --join #{output} -b -c #{paths.join(' ')}" and puts "Compiling CoffeeScript (app.js)".blue system "coffee -p --bare src/app.coffee > Resources/app.js" ) if compilation puts "Successfully compiled CoffeeScript".green else puts "Error compiling CoffeeScript".red end compilation end RAKEFILE

Slide 132

Slide 132 text

def compile_coffee paths = `find src/golf_status -name '*.coffee'`.split("\n") compilation = ( puts "Compiling CoffeeScript (golf_status.js)".blue output = "Resources/golf_status.js" system "coffee --join #{output} -b -c #{paths.join(' ')}" puts "Compiling CoffeeScript (app.js)".blue system "coffee -p --bare src/app.coffee > Resources/app.js" ) if compilation puts "Successfully compiled CoffeeScript".green else puts "Error compiling CoffeeScript".red end compilation end RAKEFILE Compile App namespaces to single file

Slide 133

Slide 133 text

def compile_coffee paths = `find src/golf_status -name '*.coffee'`.split("\n") compilation = ( puts "Compiling CoffeeScript (golf_status.js)".blue output = "Resources/golf_status.js" system "coffee --join #{output} -b -c #{paths.join(' ')}" puts "Compiling CoffeeScript (app.js)".blue system "coffee -p --bare src/app.coffee > Resources/app.js" ) if compilation puts "Successfully compiled CoffeeScript".green else puts "Error compiling CoffeeScript".red end compilation end RAKEFILE Compile app.js which includes the app library

Slide 134

Slide 134 text

Build

Slide 135

Slide 135 text

def build(options={}) return unless compile options[:device] ||= 'iphone' puts "Building with Titanium... (DEVICE_TYPE:#{options[:device]})".blue sh %Q{bash -c "#{TI_BUILD} run #{PROJECT_ROOT}/ #{IPHONE_SDK_VERSION} #{APP_ID} #{APP_NAME} #{APP_DEVICE}" \ | perl -pe 's/^\\[DEBUG\\].*$/\\e[35m$&\\e[0m/g;s/^\\[INFO\\].*$/\\e[36m $&\\e[0m/g;s/^\\[WARN\\].*$/\\e[33m$&\\e[0m/g;s/^\\[ERROR\\].*$/\\e[31m $&\\e[0m/g;'} end RAKEFILE

Slide 136

Slide 136 text

def build(options={}) return unless compile options[:device] ||= 'iphone' puts "Building with Titanium... (DEVICE_TYPE:#{options[:device]})".blue sh %Q{bash -c "#{TI_BUILD} run #{PROJECT_ROOT}/ #{IPHONE_SDK_VERSION} #{APP_ID} #{APP_NAME} #{APP_DEVICE}" \ | perl -pe 's/^\\[DEBUG\\].*$/\\e[35m$&\\e[0m/g;s/^\\[INFO\\].*$/\\e[36m $&\\e[0m/g;s/^\\[WARN\\].*$/\\e[33m$&\\e[0m/g;s/^\\[ERROR\\].*$/\\e[31m $&\\e[0m/g;'} end RAKEFILE Build with Titanium Python command line

Slide 137

Slide 137 text

def build(options={}) return unless compile options[:device] ||= 'iphone' puts "Building with Titanium... (DEVICE_TYPE:#{options[:device]})".blue sh %Q{bash -c "#{TI_BUILD} run #{PROJECT_ROOT}/ #{IPHONE_SDK_VERSION} #{APP_ID} #{APP_NAME} #{APP_DEVICE}" \ | perl -pe 's/^\\[DEBUG\\].*$/\\e[35m$&\\e[0m/g;s/^\\[INFO\\].*$/\\e[36m $&\\e[0m/g;s/^\\[WARN\\].*$/\\e[33m$&\\e[0m/g;s/^\\[ERROR\\].*$/\\e[31m $&\\e[0m/g;'} end RAKEFILE Pipe to PERL for some colored terminal goodness

Slide 138

Slide 138 text

No content

Slide 139

Slide 139 text

Choose what works for you.

Slide 140

Slide 140 text

JavaScript Frameworks

Slide 141

Slide 141 text

Underscore.js https://github.com/documentcloud/underscore From Jeremy Ashkenas, the creator of CoffeeScript.

Slide 142

Slide 142 text

Don't Repeat Yourself Not Repeating Yourself

Slide 143

Slide 143 text

Ti GEM Automating these patterns. A work in progress.

Slide 144

Slide 144 text

gem install ti

Slide 145

Slide 145 text

Generate.

Slide 146

Slide 146 text

ti new

Slide 147

Slide 147 text

ti new codestrong-app com.codestrong.app iphone

Slide 148

Slide 148 text

├── Coffeefile ├── Guardfile ├── LICENSE ├── Rakefile ├── Readme.mkd ├── Resources │ ├── app.js │ ├── app.jss │ ├── images │ │ ├── KS_nav_ui.png │ │ └── KS_nav_views.png │ ├── lsrc.js │ └── vendor ├── app │ ├── app.coffee │ └── lsrc │ ├── api.coffee │ ├── app.coffee │ ├── helpers │ │ └── application.coffee │ ├── models │ ├── stylesheets │ │ ├── app.sass │ │ └── partials │ └── views ├── build ├── config │ └── config.rb ├── docs ├── spec │ ├── app_spec.coffee │ ├── helpers │ ├── models │ └── views ├── tiapp.xml └── tmp

Slide 149

Slide 149 text

ti generate

Slide 150

Slide 150 text

Golf.Views.GamePlay.createScoreCardView = (options) -> view = Ti.UI.createView (options) view

Slide 151

Slide 151 text

ti scaffold

Slide 152

Slide 152 text

Compile.

Slide 153

Slide 153 text

ti compile

Slide 154

Slide 154 text

Build.

Slide 155

Slide 155 text

ti build

Slide 156

Slide 156 text

Ti GEM @revans @baldrailers @rupakg

Slide 157

Slide 157 text

Get involved!

Slide 158

Slide 158 text

We've got BIG ideas.

Slide 159

Slide 159 text

Testing.

Slide 160

Slide 160 text

Jasmine

Slide 161

Slide 161 text

Jasmine https://github.com/akahigeg/jasmine-titanium

Slide 162

Slide 162 text

XIB

Slide 163

Slide 163 text

xib2js https://github.com/daoki2/xib2js

Slide 164

Slide 164 text

js2coffee http://ricostacruz.com/js2coffee/

Slide 165

Slide 165 text

http://spkr8.com/t/8342 QUESTIONS?