Embed Size (px)
Citation preview
PythonとJavaScriptで作る Reactiveなウェブサイト
株式会社アカリ 山下 陽介
弊社
• 2006年創業
• ウェブ制作とCG制作、ウェブアプリを使った新規ビジネスなど
• 人材募集中
• なにとぞよろしくお願いします
Reactiveなウェブサイト
• あらゆる状態変化にシームレスに対応
• javascriptを駆使して実装
• シングルページアプリケーションなどとも呼ばれる
• 企業のウェブサイトにも必要に応じて導入されてもいいのでは？
• 開発上の利点も？
こんな風なものを実現するのに 興味を持っていただければ幸いです
Pythonサイド（バックエンド）
• Djangoを使う • Django Rest Frameworkを使ってAPIを作る • WebSocketにはtornadoを導入
Djangoやウェブフレームワークの役割をざっくり説明
Browser
<a href=“/test”>TEST</a>
Django Databasedef test(request): … html = “<html><body>…” # HTMLレンダリングして返す return HttpResponse(html)
保存 更新 削除など
取得など
新しいURLリクエスト
レスポンス （次のページのコード）
<html> <head></head> <body>…</body> </html>
ページごとにpythonのdefを用意して、新しいhtmlをブラウザに返す ブラウザはhtmlをレンダリングする。を繰り返す
API化したときの動き
Browser<script> $.ajax(“/test”)… </script>
Django Databasedef test(request): … data = {“users”:users} # dictやlistをそのまま # JSONにして返す return Response(data)
保存 更新 削除など
取得など
APIリクエスト
レスポンス （dictをjsonにしたデータ）
{“users”: [ {“name”:”A”, age:20} …
]}
javascriptでjsonデータを受け取る。 javascriptは必要に応じて部分的にhtmlを書き換える、を繰り返す
Django APIの展開
APIJS
desktop app
JS iOS
JS website
swift iOS
android java
C/C++などで書いたコードはウェブサイトでは基本使えません。asm.jsを使うとものにより可能だけど、コンパイルにてこずるのと、コンパイル結果が10mbを超えてしまうというデメリットあり
Objective C++
Python Module
Native Addon
Native Addon
JNI
API化のメリット
• 呼び出すプラットフォームが増える
• jsonによる少ないレスポンス量
• クライアント側の資源を生かせて、サーバーに低負荷
• DjangoでViewを書く工数とコード行数が減少
• フロントエンドとバックエンドのコード依存を最小に留める
• html / cssのコードが比較的、散らばらない
• 余った時間はデザインの実現に費やせる
デメリット
• フロントエンドでやることが増えるので、フロントエンドのコードがとにかく煩雑になりやすい、保守不能なコードになりがち
そこで、しんどいフロントエンドの コーディングを少しでもベターにするために javascriptをレビューしてみます
最近のjavascript
• ES6からclass構文、アロー関数など記述ルールが刷新されて少し親切に。※babelというコンパイルツールが必要
• coffeescript, typescriptなど中間言語もいろいろ
• Electron、NW.js、Ionic…アプリを作れるツールも多々
• node.jsとの戦い
this.callApi(“/loadUsers”) .map((data) => data.users) .subscribe( (users) => this.users.concat(users), (err) => console.error(err), () => console.log(“done”) );
javascript Python
Reactive Extensionsを使ったAPIコールの雰囲気（流しそうめんのイメージでコーディングしています）。コールバック関数の散在を防ぐ ※Rxpyというのもあります
def loadUsers(request): users = User.objects.filter(…).fetchall() data = UserSerializer(users).data return Response({“users”:data})
Pythonはとても簡単 これまでhtmlに覆って出力していた手順が、これだけでjsonとしてクライアントに渡せる
モダンなAPIコール
this.users.push({ name: “User A”, age: 24 });
• User X : 35歳 • User Y : 50歳 • User Z : 2歳 • User A : 24歳
ブラウザ表示
jqueryを使ってDOMを操作していたコードが不要になってきた。 データ配列に追加、削除、編集するだけでhtmlが自動更新される。 Virtual DOMという概念が導入されレンダリングがスピードアップ
モダンなHTMLバインディング
こんなことを実現させてくれる javascriptのフレームワークや ライブラリにも目を通してみます
有名なjavascriptフレームワークを一部紹介
backbone.js (Jeremy Ashkenas作) やりたいことは自分で実装する。１ページのライブラリ。自由度の高さ。同作者のcoffeescriptも併用すると少ない行数で快適にコーディングできた
react.js (facebook) htmlバインディングが実装されている。fluxの登場でfacebookのような複雑なUIを大人数で設計しやすそう
angular2 (google (microsoft)) rxjsを標準装備して、angular.jsより動作も早くなった感じ。記述はtypescriptかjavascriptかdart
他多数
Flux
※Fluxは設計手法です。
manager class
classclass class
classclass class
これまでのMyコード
イベントやSingletonを駆使するも コードは散在しがち 自由に書けすぎた
ユーザアクション、html描画、APIコールの実行順序と依存関係を綺麗に整理できる
Action Dispatcher Store
View
API
Fluxのフロントエンド設計
全体の感じ
tornado Django API
Service
StoreViewAction
Backend
Frontend
auth
message
requestresponsemessagepush
学習に役立ったもの
TodoMVC.com react.js + flux Reactive Extensions angular2
javascript
pythonDjango tutorial https://docs.djangoproject.com/en/1.9/intro/tutorial01/ Django Rest Framework http://www.django-rest-framework.org/
ぜひ素敵なウェブサービスを作ってみてください！ もしくは、一緒に作りましょう！
あと、最後に…
2016年８月 渋谷イメージフォーラムにて公開！
映画「フォトグラファーズ・イン・ニューヨーク」
※前売り券発売中
いいね！ https://www.facebook.com/akarifilmsco/
（Pythonのおかげで公開実現しました）
<広告>
