Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using only CoffeeScript to build an SmartPhone Application

Naoya Ito
October 29, 2011

Using only CoffeeScript to build an SmartPhone Application

Naoya Ito

October 29, 2011
Tweet

More Decks by Naoya Ito

Other Decks in Technology

Transcript

  1. CoffeeScript
    using only
    to build an SmartPhone Application
    Naoya Ito

    View Slide

  2. Chrome To iOS

    View Slide

  3. View Slide

  4. Node
    Titanium Mobile
    Chrome Extension
    +
    +

    View Slide

  5. JavaScript

    View Slide

  6. });
    });
    });
    });
    });
    });

    View Slide

  7. \(^o^)/

    View Slide

  8. CoffeeScript
    will save us from the darkside of JavaScript

    View Slide

  9. Node
    express = require "express"
    app = module.exports = express.createServer()
    app.get "/", (req, res) ->
    res.render "index", title: "Express"

    View Slide

  10. Titanium Mobile
    win = Ti.UI.createWindow
    title: "Chrome To iOS"
    table = Ti.UI.createTableView
    top: 0
    data: []
    win.add table
    tabGroup = Ti.UI.createTabGroup
    tab = Ti.UI.createTab
    window: win
    tabGroup.addTab tab
    tabGroup.open()

    View Slide

  11. Chrome Extension
    chrome.browserAction.onClicked.addListener (tab) ->
    chrome.tabs.executeScript null, file: "jquery-1.6.4.min.js", ->
    chrome.tabs.executeScript null, file: "content_script.js"
    chrome.extension.onConnect.addListener (port) ->
    port.onMessage.addListener (info) ->
    socket = io.connect 'http://localhost:3000'
    socket.emit 'fireEvent:openUrl'
    title: info.title
    url: info.url
    image: info.image

    View Slide

  12. To learn more about
    CoffeeScript

    View Slide

  13. CoffeeScript
    All your product are belong to

    View Slide

  14. How do they communicate
    with each other?

    View Slide

  15. View Slide

  16. socket.emit() socket.emit()
    using socket.io for messaging

    View Slide

  17. Hacking Titanium for enabling Socket.IO
    WebView proxy technique
    0px WebView
    left: -100
    top: -100
    enabling socket.io on HTML
    socket.emit()
    Titanium.App.fireEvent()
    github.com/euforic/ChatSocks/tree/wv-proxy

    View Slide

  18. WebView proxy for Socket.IO
    socket = {}
    socket.connect = (win) ->
    proxy = Ti.UI.createWebView
    url: "webview/webview.html"
    top: -100,
    left: -100,
    width: 0
    height: 0
    win.add proxy
    # Alias for Titanium functions just for fun
    socket.emit = (e, params) ->
    Ti.App.fireEvent e, params
    socket.on = (e, callback) ->
    Ti.App.addEventListener e, callback
    on Titanium App

    View Slide

  19. Open new URL when receiving socket events
    socket.on 'openUrl', (params) ->
    table.prependRow $$.ui.createRow
    title: params.title || params.url
    message: 'URLを開く'
    image: params.image
    click: ->
    w = Ti.UI.createWindow()
    w.add Ti.UI.createWebView
    url: params.url
    tab.open w
    on Titanium App

    View Slide

  20. Using socket.io on Chrome is easy
    # background.html


    src="http://localhost:3000/socket.io/socket.io.js">



    # background.coffee
    chrome.extension.onConnect.addListener (port) ->
    port.onMessage.addListener (info) ->
    socket = io.connect 'http://localhost:3000'
    socket.emit 'fireEvent:openUrl'
    ...
    on Chrome Extension

    View Slide

  21. done!

    View Slide

  22. Node & Titanium Mobile
    can help you to
    write SmartPhone Apps only in CoffeeScript
    Socket.IO
    makes work easy!

    View Slide

  23. To learn more about
    CoffeeScript
    NO MORE JS HELL!?

    View Slide

  24. Thanks!
    github/naoya/push-to-ios (Titanium App & Node server)
    github/naoya/chrome2ios (Chrome Extension)
    Design inspired by: zachholman.com/posts/slide-design-for-developers/

    View Slide