Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Using only CoffeeScript to build an SmartPhone Application
Naoya Ito
October 29, 2011
Technology
19
9.5k
Using only CoffeeScript to build an SmartPhone Application
Naoya Ito
October 29, 2011
Tweet
Share
More Decks by Naoya Ito
See All by Naoya Ito
「問題から目を背けず取り組む」 一休の開発チームが6年間で学んだこと
naoya
137
48k
一休の現在と、ここまでの道のり
naoya
87
39k
技術的負債と向き合う
naoya
247
73k
System of Record と System of Engagement
naoya
184
63k
Serverless Architecture
naoya
118
43k
Webプログラマと数学の接点、その入り口
naoya
88
28k
開発組織マネジメントのコツ
naoya
243
100k
Infrastructure as Code
naoya
31
11k
情報共有 失敗あるある
naoya
81
39k
Other Decks in Technology
See All in Technology
ふりかえりの技術 / retrospectives
soudai
3
140
データをコネコネ!メール配信用データ生成の仕組み
kappezoro
0
110
Azure DevOps Online Vol.6 - 業務で必要なCIをみんなで考えよう
kkamegawa
0
240
ジョブ管理システムをAWS Step Functionsに移行する時の勘所
non97
0
480
GCCP Creator @ COSCUP 2022
line_developers_tw
PRO
0
1.4k
AWSを始める人に向けた7つの大切なこと / 7 tips for AWS beginners
hiranofumio
1
640
20220731 如何跟隨開源技術保持你的職涯發展
pichuang
0
120
20220728_新資格『SAP on AWS - Specialty 認定』ってどんな資格?/about-SAP-on-AWS-Specialty
emiki
1
420
Amplifyで Webアプリケーションの 堅固な土台をサクッと構築する方法
kawasakiteruo
0
210
Oracle Cloud Infrastructure:2022年7月度サービス・アップデート
oracle4engineer
PRO
0
170
DevelopersIO 2022 俺のTerraform Pipeline
takakuni
0
430
最先端の生成AIから考える、ビジネスにおける10年後のパラダイムシフト
sbtechnight
1
310
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
32
11k
Building Adaptive Systems
keathley
25
1.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Clear Off the Table
cherdarchuk
79
290k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
How to name files
jennybc
40
63k
Teambox: Starting and Learning
jrom
123
7.7k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Unsuck your backbone
ammeep
659
55k
Scaling GitHub
holman
451
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
980
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Transcript
CoffeeScript using only to build an SmartPhone Application Naoya Ito
Chrome To iOS
None
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?
None
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
done!
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/