Using only CoffeeScript to build an SmartPhone Application

CoffeeScript using only to build an SmartPhone Application Naoya Ito

Chrome To iOS

Node Titanium Mobile Chrome Extension + +

JavaScript

}); }); }); }); }); });

＼(＾o＾)／

CoffeeScript will save us from the darkside of JavaScript

Node express = require "express" app = module.exports = express.createServer()
app.get "/", (req, res) -> res.render "index", title: "Express"

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()

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

To learn more about CoffeeScript

CoffeeScript All your product are belong to

How do they communicate with each other?

socket.emit() socket.emit() using socket.io for messaging

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

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

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

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

Node & Titanium Mobile can help you to write SmartPhone
Apps only in CoffeeScript Socket.IO makes work easy!

To learn more about CoffeeScript NO MORE JS HELL!?

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/

Using only CoffeeScript to build an SmartPhone ...

Using only CoffeeScript to build an SmartPhone Application

Naoya Ito

More Decks by Naoya Ito

Other Decks in Technology

Featured

Transcript

CoffeeScript using only to build an SmartPhone Application Naoya Ito

Chrome To iOS

Node Titanium Mobile Chrome Extension + +

JavaScript

}); }); }); }); }); });

＼(＾o＾)／

CoffeeScript will save us from the darkside of JavaScript

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

Titanium Mobile win = Ti.UI.createWindow title: "Chrome To iOS" table

Chrome Extension chrome.browserAction.onClicked.addListener (tab) -> chrome.tabs.executeScript null, file: "jquery-1.6.4.min.js", ->

To learn more about CoffeeScript

CoffeeScript All your product are belong to

How do they communicate with each other?

socket.emit() socket.emit() using socket.io for messaging

Hacking Titanium for enabling Socket.IO WebView proxy technique 0px WebView

WebView proxy for Socket.IO socket = {} socket.connect = (win)

Open new URL when receiving socket events socket.on 'openUrl', (params)

Using socket.io on Chrome is easy # background.html <html> <head>

done!

Node & Titanium Mobile can help you to write SmartPhone

To learn more about CoffeeScript NO MORE JS HELL!?

Thanks! github/naoya/push-to-ios (Titanium App & Node server) github/naoya/chrome2ios (Chrome Extension)