Your SlideShare is downloading. ×
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for Perl Programmers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for Perl Programmers

8,556
views

Published on

Published in: Technology

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,556
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
37
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Perlプログラマのためのスマートフォン開発ガイド CoffeeScript / Node / HTML5 Naoya Ito
  • 2. キーワード• PhoneGap• Titanium Mobile• CoffeeScript• Node.js• Socket.IO• Express• npm• …
  • 3. 半年ほど前
  • 4. 一ヶ月前
  • 5. 今週
  • 6. “Embedded Web Vies”
  • 7. Web UI
  • 8. モチベーション
  • 9. ネイティブと Web App のハイブリッドへ• HTML5アプリケーションをネイティブで補う...• ネイティブをWeb技術 (スクリプト言語) で作る...
  • 10. アジェンダ• クライアントサイド • PhoneGap • Titanium Mobile • Scripting Layer for Android• サーバーサイド • Node or Perl
  • 11. PhoneGap, Titanium Mobile, Scripting Layer for Androidクライアントサイド
  • 12. スクリプト言語で iOS/Android アプリ • HTML5 • Web開発、同様スクリプト言語で書きたい! • JavaScript, CoffeeScript • スクリプト言語な俺たち歓喜 \(^o^)/ • Perl で書ける?
  • 13. PhoneGap
  • 14. PhoneGap • UIWebView ベースのアプリ開発 F/W • JavaScript / HTML / CSS • UIWebView の js に Native Bridge な API • Phone"Gap" navigator.camera.getPictures(onSuccess, onFail) onSuccess = function (base64data) { var img = document.getElementById(myImage); img.src = "data:image/jpeg;base64;" + base64data; }
  • 15. 例: Photo Receiver • PhoneGap (+ jQuery mobile) + Node (+ Express + Socket.IO) WebSocket (Socket.IO) iOS app with PhoneGap Node
  • 16. Photo Receiver (sender, index.html) <html> <head> ... <script type="text/javascript" src="phonegap-1.0.0.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="socket.io.min.js"></script> ... <script type="text/javascript" src="sender.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-theme="b"> <h1>Photo Sender</h1> </div> ...
  • 17. Photo Receiver (sender, sender.coffee) onDeviceReady = -> socket = io.connect http://localhost:3000/sender onSuccess = (data) -> socket.emit pushPhoto, data ... $(#camera).click -> navigator.camera.getPicture onSuccess, onFailure, opt $(document).ready -> $(document).bind deviceready, onDeviceReady # sender.coffee の変更を watch → sender.js を生成 $ coffee -cw *.coffee
  • 18. Photo Receiver (receiver, app.coffee) express = require "express" app = module.exports = express.createServer() app.get "/", (req, res) -> res.render "index", title: "Photo Receiver" app.listen 3000 io = require(socket.io).listen app sender = io.of(/sender).on connection, (socket) -> socket.on pushPhoto, (data) -> data_uri = "data:image/jpeg;base64," + data receiver.emit showPhoto, data_uri
  • 19. PhoneGap あれこれ • HTML + JS = "HTML5 ready" • jQuery / jQuery mobile • CoffeeScript • socket.io • sass, less, stylus • Facebook/Google+ と似ているが... • UIKit の制御は bridge しない • UIWebView は Safari より遅い • UIWebView = not Nitro • JITコンパイラなし • Adobe が買収 • Native → HTML5 アプローチとして PhoneGap モデルは有力
  • 20. Titanium Mobile
  • 21. Titanium Mobile • ネイティブアプリを JavaScript で • Titanium Studio でビルド • インタプリタ上で動く • iOS : JavascriptCore / Android : Rhino • JSエンジンがUIKitを操作 • 動的に動作確認できる
  • 22. 例: Cover Flow
  • 23. Cover Flow win = Ti.UI.currentWindow() view = Ti.UI.createCoverFlowView images: [ ../images/01.jpg ../images/02.jpg ../images/03.jpg ../images/04.jpg ../images/05.jpg ] backgroundColor: #000 win.add view
  • 24. 例: HBFav https://github.com/naoya/HBFav
  • 25. HBFav • クライアント • Titanium Mobile • CoffeeScript • サーバー • Node.js • Express • xml2json • Heroku
  • 26. HBFav コード断片require lib/underscoreTi.include feed.jsclass AbstractState toString : () -> AbstractState constructor: (@feedView) -> getFeed : (url) -> self = @ onload = @.onload onerror = @.onerror xhr = Ti.Network.createHTTPClient() xhr.timeout = 100000 xhr.open GET, url xhr.onload = -> data = JSON.parse @.responseText onload.apply(self, [ data ]) xhr.onload = null xhr.onerror = null xhr = null xhr.onerror = (err) -> onerror.apply(self, [ err ]) xhr.send()
  • 27. Titanium Mobile あれこれ • JavaScript ready • CoffeeScript • CommonJS ・・・ underscore, socket.io etc. • Titanium Mobile != HTML5 • JavaScript だからといって HTML5 へ向かってるわけではない • 「JS でネイティブ書ける」 • 現時点では、現実的な解 • 実用的だが当然、トレードオフも – メモリ管理不要、ダイナミック更新、ラピッドに開発可 – ネイティブとは速度差 / 細かなチューニングが難しい – デバッグ環境がこなれていない
  • 28. Scripting Layer for Android (SL4A) • Androidアプリを Perl で • ここは YAPC だぜ? use Android my $android = Android->new; $android->makeToast( "Hello, Android!" );
  • 29. SL4A • PhoneGap, Titanium とも別アプローチ • Java アプリが "Scripting Layer" と JSON-RPC で通信 • Java アプリのAPIがネイティブの機能をブリッジ • 本格的なアプリを作るのには向かない • 速度、安定性...
  • 30. クライアントサイドまとめ• JavaScript によるネイティブブリッジFWは発展途上 • この方向性のフレームワークは増える • PhoneGap, Titanium Mobile は"そこそこ" 実用的 • ※ debug しんどい• Facebook/G+ の言う "Embedded Web Views" のFWはまだ • UIWebView アプリを作りつつ • ネイティブの "UI" と橋渡し• Perl でクライアントサイドは、さすがに ... • SL4A はおもちゃの領域を出ない
  • 31. Node vs Perlサーバーサイド
  • 32. サーバサイド• これまで通り Perl で書いても良いですが・・・• クライアントを JS で、なら、サーバも JSで • この流れは止められない • Node.js : server-side JavaScript が現実的に
  • 33. Node.js • Perl と比較しながら見ていきたい
  • 34. perl vs Node Perl Node.js プリプロセッサ N/A CoffeeScript 言語 Perl言語 JavaScript 実行環境 perlインタプリタ node ウェブ実行環境 mod_perl, PSGI http.Server, connect etc. middleware, etc. Web Framework Catalyst, Mojolicious::Lite, Express, etc. Dancer etc. パッケージ管理 cpan npm 主なWebアプリのモデル prefork (同期) Single Process Event Driven (非同期)
  • 35. Node.js • Single Process Event Driven な server-side JavaScript Engine – Perl : POE, AnyEvent http = require http http.createServer (req, res) -> res.writeHead 200, Content-Type:text/plain res.end Hello World!¥n .listen 8080 % node-dev hello.coffee • Perl でできないことをやってるわけではない • 一方の「手軽さ」、JavaScript との相性
  • 36. npm $ npm install express cpanm Mojolicious::Lite
  • 37. search.npmjs.org
  • 38. underscore.js require underscore pow = _([1, 2, 3]).map (n) -> n * 2 max = _([1, 2, 3]).max() sum = _([1, 2, 3]).reduce (memo, num) -> memo + num use List::Util qw/max reduce/; my $pow = map { $_ * 2 } (1, 2, 3); my $sum = reduce { $a + $b } (1, 2, 3); my $max = max(1, 2, 3);
  • 39. Express • Web framework, Sinatra inspired • Perl ... Mojolicious::Lite etc • SASS/LESS/Stylus, Coffee, Jade/EJS, Socket.IO ready – emerging web technologies... express = require "express" app = module.exports = express.createServer() app.configure -> app.set view engine, "jade" app.use express.compiler src: __dirname + "/public" enable: [ "sass" ] app.get "/", (req, res) -> res.render "index", title: "Hello, Express"
  • 40. vows • Perl : Test::More, Test::Base, Test::Declare • vows : Asynchronous BDD vows = require vows assert = require assert test = vows.describe(ゼロでの割り算).addBatch 任意の数をゼロで割った時 : topic: -> 42 / 0 無限大になる : (topic) -> assert.equal topic, Infinity ただし、ゼロをゼロで割った場合 topic: -> 0/ 0 以下となる : 数値でない : (topic) -> assert.isNan topic 自分自身とは等価でない : -> assert.notEqual topic, topic do test.run
  • 41. xml2js • Perl : XML::Simple + JSON parser = new xml2js.Parser() parser.addListener end, (json) -> console.log json parser.parseString xml
  • 42. aws-lib • Perl : Net::Amazon aws = require aws-lib aws = aws.createProdAdvClient( accessKey, secretKey, associateId, region: "JP" host: ecs.amazonaws.jp ) aws.call "ItemSearch", SearchIndex: "Books" Title: "Perl" ItemPage: 1 ResponseGroup: Medium (result) -> console.log result
  • 43. Node modules https://github.com/joyent/node/wiki/modules
  • 44. Socket.IO • WebSocket-like API – 抽象化 : WebSocket, xhr-polling, xhr-multipart, jsonp-polling .... • Node.js の急先鋒/* client (jade w/ express) */ /* server (app = express object) */script(src=/socket.io/socket.io.js) io = require(socket.io).listen app io.sockets.on connection, (socket) ->:coffeescript socket.on send, (data) -> socket = io.connect http://localhost’ console.log data socket.on recv, (data) -> socket.emit recv, data console.log data socket.emit send, "Hello!"
  • 45. pocketio • Perl の Socket.IO server – JS ⇔ Perl – JS ⇔ Perl ⇔ Perl modules use PocketIO; use Plack::Builder; builder { mount /socket.io => PocketIO->new handler => sub { my $self = shift; $self->on( recv => sub { my ($socket, $data) = @_; $socket->emit(send, $data); }); ...
  • 46. サーバサイドまとめ• Node きてる – スマートフォン開発のバックエンドを Node にする"必然性"はないが – クライアントを JS / Coffee で書くなら"優位性"はある• npm++ • CommonJS ウマー• node ・・・ 新しいn実装が多い • Socket.IO • CSS frameworks• 一方の perl ・・・ 莫大な資産 = CPAN• node / perl の pro/cons を比較して • (1) アーキテクチャ • 共存させるアプローチ ・・・ RPC, pocketio
  • 47. まとめ• スマートフォン : 今後、ネイティブからHTML5へ • Facebook/Google+ • × 100% HTML5 ○ ハイブリッド• JS (Coffee) のみでアプリが開発できるように • PhoneGap, Titanium Mobile • クライアントからサーバまで一気通関 • クライアントが JS なら、Node 利用の動機は大きい • Native → HTML5 への移行は JavaScript の進化にアリ• Node.js = Web Dev の梁山泊に (beyond Rails...?) • socket.IO / express / jade, stylus, coffeekup, CSS FW / coffee ... • ただし、Node だけではサポートできない領域もまだまだ • Perl の莫大な資産は活かしたい • pocketio などのアプローチ