Using only CoffeeScript to build an SmartPhone Application

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/