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

More Decks by Naoya Ito

Other Decks in Technology


  1. Node express = require "express" app = module.exports = express.createServer()

    app.get "/", (req, res) -> res.render "index", title: "Express"
  2. 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()
  3. 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
  4. Hacking Titanium for enabling Socket.IO WebView proxy technique 0px WebView

    left: -100 top: -100 enabling socket.io on HTML <head> socket.emit() Titanium.App.fireEvent() github.com/euforic/ChatSocks/tree/wv-proxy
  5. 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
  6. 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
  7. Using socket.io on Chrome is easy # background.html <html> <head>

    <script type="text/javascript" src="http://localhost:3000/socket.io/socket.io.js"></script> <script type="text/javascript" src="background.js"></script> </head> </html> # background.coffee chrome.extension.onConnect.addListener (port) -> port.onMessage.addListener (info) -> socket = io.connect 'http://localhost:3000' socket.emit 'fireEvent:openUrl' ... on Chrome Extension
  8. Node & Titanium Mobile can help you to write SmartPhone

    Apps only in CoffeeScript Socket.IO makes work easy!
  9. 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/