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

Using only CoffeeScript to build an SmartPhone Application

B4afc7d853d7f1cb6a253d3c7183c05a?s=47 Naoya Ito
October 29, 2011

Using only CoffeeScript to build an SmartPhone Application

B4afc7d853d7f1cb6a253d3c7183c05a?s=128

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

  2. Chrome To iOS

  3. None
  4. Node Titanium Mobile Chrome Extension + +

  5. JavaScript

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

  7. \(^o^)/

  8. CoffeeScript will save us from the darkside of JavaScript

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

    app.get "/", (req, res) -> res.render "index", title: "Express"
  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()
  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
  12. To learn more about CoffeeScript

  13. CoffeeScript All your product are belong to

  14. How do they communicate with each other?

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

  17. 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
  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
  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
  20. 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
  21. done!

  22. Node & Titanium Mobile can help you to write SmartPhone

    Apps only in CoffeeScript Socket.IO makes work easy!
  23. To learn more about CoffeeScript NO MORE JS HELL!?

  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/