Using only CoffeeScript to build an SmartPhone Application

Transcript

1. CoffeeScript using only to build an SmartPhone Application Naoya Ito
2. Chrome To iOS
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?
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/