Javascriptを書きたくないヒ トのためのPythonScript
-
Upload
kazufumi-ohkawa -
Category
Documents
-
view
13.640 -
download
10
description
Transcript of Javascriptを書きたくないヒ トのためのPythonScript
![Page 1: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/1.jpg)
Javascriptを書きたくないヒトのためのPythonScript
Shizuoka.py #2 @kzfm
![Page 2: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/2.jpg)
私について • @kzfm – 製薬会社の研究員(最近インフラ周りばかり) – perl -> python (-> haskell)
• 最近pandas(Rみたいに使えるやつ)がお気に入り
• PyconAPACも参加登録済み
![Page 3: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/3.jpg)
マリー・アントワネット曰く
![Page 4: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/4.jpg)
じJajavascriptがいやなら pythonで書けばいいじゃない
![Page 5: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/5.jpg)
これによりPython革命勃発 (私の中で)
![Page 6: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/6.jpg)
ブラウザでのPython実行方法 1. javascriptでpythonを実装する 1. <script type=“text/python”></
script>
2. pythonで書いてjavascriptにコンパイルする 1. 実行されるのはjavascript
1. sass -> css 2. jade -> html
![Page 7: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/7.jpg)
Brython
javascriptに汚染されて汚れまくった この世界をPythonで浄化してやる! (意訳)
h%p://www.brython.info/
![Page 8: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/8.jpg)
python inside !
![Page 9: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/9.jpg)
いいところ、わるいところ • brython.jsを読みこめばpythonで開発できるのでお手軽にはじめられる
• 開発も活発
• jQuery等のjavascript資産を気軽に流用できなさそう
• 最初の読み込みで若干モサッとする – javascriptのパーサを通して構文解析して構文木をつくってjavascriptを出力してevalしている
![Page 10: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/10.jpg)
我々は 完全に浄化された言語世界では
生きられないのです!
![Page 11: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/11.jpg)
ブラウザでのPython実行方法 1. javascriptでpythonを実装する 1. <script type=“text/python”></
script>
2. pythonで書いてjavascriptにコンパイルする 1. 実行されるのはjavascript
1. scss -> css
![Page 12: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/12.jpg)
Javascriptと Pythonの 融合個体的アプローチ
![Page 13: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/13.jpg)
PythonScript • Pythonサブセット • javascriptライブラリを簡単に取り込める
h%p://apppyjs.appspot.com/
![Page 14: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/14.jpg)
はじめかた pip install pythonscripttranslator wget http://bit.ly/YSAbSS -O pythonscript.js echo 'print "Hello Shizuoka"' > app.py pythonscript < app.py > app.py.js
(app.py.js) console.log("Hello Shizuoka");
![Page 15: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/15.jpg)
<!DOCTYPE html> <html> <body> <h1>PythonScript Example</h1> <script src="pythonscript.js"></script> <script src="app.py.js"></script> </body> </html>
![Page 16: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/16.jpg)
補足 • pythonscripttranslatorをインストールするとpythonscriptというコマンドが使えるようになります
• これはpythonをjavasrcriptに変換します。
• wgetでDLしたpythonscript.jsには上記javascriptが必要とする関数が定義されています。
![Page 17: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/17.jpg)
コンパイルの流れ 1. コードをPythonの
astモジュールでパースして抽象構文木に変換
2. PythonToPythonJSにより抽象構文木がPythonJSに変換
3. PythonJSの抽象構文木からJavascript生成
![Page 18: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/18.jpg)
jQueryの使い方 • PythonScriptにjQueryバインディングがついてるのでそれを読み込んでおく
• J関数でアクセスできる($といっしょ)
• jQueryオブジェクトはj
bu%on = J("#newtask”) bu%on.bind("click", false, self.create)
j = J("#taskinput").j name = JS("j.val()")
![Page 19: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/19.jpg)
Javascriptを取り込む • JS関数を使えばいい • 例)handlebarsをつかう
source = "<div class='view'>{{name}}<a href='#' class='destroy'></a></div>" + “” template = JS("Handlebars.compile(source)") name = self.model.name data = JS("template({name:name})")
注1)0.7.3だとJS関数の中で文字列をそのまま書くとコケる 注2)文字列も一度評価しないといけない感じ (+ “”)
![Page 20: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/20.jpg)
開発Tips • livereloadを使えば、コードの更新を検知してコンパイル、ブラウザのリロードをしてくれる – http://blog.kzfmix.com/entry/1367924270
• よく監視させてるもの – Jade – Sass/Compass – PythonScript
![Page 21: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/21.jpg)
いいところ、わるいところ • Javascriptの資産を手軽に使えるので便利
• 楽しい、超楽しい、そして超ハマる
• バージョン上がると「えー動かんやん、なんでやーーー!?」ってなる – 発展途上
![Page 22: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/22.jpg)
はまったところ • jQueryバインディングにdelegateがなかった
– 自分で追加して解決 • ブラウザのイベントが受け取れない
– どうすんの? • クラスメソッドが使えない
– シングルトンの作り方が分からなかった • *args,**kwargsはサポートされているが
– 関数で渡せなくてこまった • “””が使えないのもテンプレート書くときにちょっとめんどくさかった
![Page 23: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/23.jpg)
デモ • HakuinというSpine.jsインスパイアなフロントエンドMVCフレームワークを紹介します。
• 白隠正宗美味いので飲むといいよ
![Page 24: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/24.jpg)
あなたが使うべきなのは、 PythonScript?
それともJavaScript?
![Page 25: Javascriptを書きたくないヒ トのためのPythonScript](https://reader031.fdocument.pub/reader031/viewer/2022012400/554e849fb4c90545698b54f5/html5/thumbnails/25.jpg)
CoffeeScriptでしたー \(^O^)/
javascript