#12 Hello CoffeeScript! Meet Sencha Touch.

In yesterdays post I presented a few examples of how to write a "Hello World!" application in Sencha Touch 2.
These same examples actually serve well for giving you a glimpse into using Sencha Touch together with CoffeeScript.

We at 360releases have started using CoffeeScript for a Sencha Touch project. Going forward we'll most likely use it for every new project, be it Sencha Touch or Ext JS.

I know that a lot of people's initial reaction is rejection. So was mine. But after looking into and checking out the Pragmatic's CoffeeScript book, I didn't really see a reason not to use it.

Sencha and Sass already showed us (the Sencha community) that compiling hasn't have to be a pain, as we native script language developers usually think.

My take on CoffeeScript is basically this:
If CoffeeScript let's me save key strokes (and conserve my fingers joints for the years to come) without actually having to learn a complete different syntax or language, then heck yes.

Take a look at the CoffeeScript examples below yourself.

Wouldn't it be nice if you could stop worrying about commas after property definitions within config objects? With CoffeeScript you can.

As in the previous post, all examples have the exact same DOM and view output, which is the following (except the numbering obviously):

Hello World #1

Using Ext.setup, onReady and Ext.create.

Ext.setup
    onReady: ->
        Ext.create 'Ext.Panel',
            fullscreen: true
            html: 'Hello World! #1'

Hello World #2

Using Ext.setup, onReady and Ext.Viewport.add.

Ext.setup
    onReady: ->
        Ext.Viewport.add
            fullscreen: true
            html: 'Hello World! #2'

Hello World #3

Using Ext.application, onReady and Ext.Viewport.add.

Ext.application
    onReady: ->
        Ext.Viewport.add
            fullscreen: true
            html: 'Hello World! #3'

Hello World #4

Using Ext.application, launch and Ext.Viewport.add.

Ext.application
    launch: ->
        Ext.Viewport.add
            fullscreen: true
            html: 'Hello World! #4'

Hello World #5

Using Ext.application, launch and Ext.create.

Ext.application
    launch: ->
        Ext.create 'Ext.Panel',
            fullscreen: true
            html: 'Hello World! #5'

Hello World #6

Using Ext.application and autoCreateViewport.

Ext.define 'App.view.Viewport',
    extend: 'Ext.Container'
    config:
        fullscreen: true
        html: 'Hello World! #6'


Ext.application
    name: "App"
    autoCreateViewport: true

Hello World #7

Using Ext.application, controller, getView and create.

Ext.define 'App.view.HelloWorld',
    extend: 'Ext.Container'
    config:
        fullscreen: true
        html: 'Hello World! #7'


Ext.define 'App.controller.HelloWorld',
    extend: 'Ext.app.Controller'
    views: [
        'HelloWorld'
    ]
    init: ->
        @getView('HelloWorld').create()


Ext.application
    name: 'App'
    controllers: [
        'HelloWorld'
    ]

Hello World #8

Using Ext.application, controller, automatic generated view getter and create.

Ext.define 'App.view.WorldStage',
    extend: 'Ext.Container'
    config:
        fullscreen: true
        html: 'Hello World! #8'


Ext.define 'App.controller.HelloWorld',
    extend: 'Ext.app.Controller'
    views: [
        'WorldStage'
    ]
    init: ->
        @getWorldStageView().create()


Ext.application
    name: 'App'
    controllers: [
        'HelloWorld'
    ]

Hello World #9

Using Ext.application, controller, refs and ref's autoCreate.

Ext.define 'App.view.WorldStage',
    extend: 'Ext.Container'
    config:
        fullscreen: true
        html: 'Hello World! #9'


Ext.define 'App.controller.HelloWorld',
    extend: 'Ext.app.Controller'
    views: [
        'WorldStage'
    ]
    refs: [
        ref: 'worldstage'
        selector: 'worldstageview'
        xtype: 'worldstageview'
        autoCreate: true
    ]
    init: ->
        @getWorldstage()


Ext.application
    name: 'App'
    controllers: [
        'HelloWorld'
    ]

I'm currently in Austin, TX, for SenchaCon. So maybe see you at the conference. Follow me on Twitter @steffenhiller for Sencha Touch and Ext JS talk, and this week possibly some bar talk as well. :)

That's all for now.