Using only CoffeeScript to build an SmartPhone Application

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