Download to read offline
![API化したときの動き
Browser
<script>
$.ajax( /test )…
</script>
Django Database
def test(request):
…
data = { users :users}
# dictやlistをそのまま
# JSONにして返す
return Response(data)
保存
更新
削除など
取得など
APIリクエスト
レスポンス
（dictをjsonにしたデータ）
{ users : [
{ name : A , age:20}
…
]}
javascriptでjsonデータを受け取る。
javascriptは必要に応じて部分的にhtmlを書き換える、を繰り返す](https://image.slidesharecdn.com/s14t3yosukeyamashita-160707142216/75/S14-t3-yosuke_yamashita-6-2048.jpg)
Uploaded byTakeshi Akutsu
S14 t3 yosuke_yamashita
Talk 3:「PythonとJavaScriptで作るReactiveなウェブサイト」 山下陽介（株式会社アカリ）
More Related Content
S14 t3 yosuke_yamashita
- 1.
- 2. 弊社 • 2006年創業 • ウェブ制作とCG制作、ウェブアプリを使った新規ビジネスなど •人材募集中 • なにとぞよろしくお願いします
- 3. Reactiveなウェブサイト • あらゆる状態変化にシームレスに対応 • javascriptを駆使して実装 •シングルページアプリケーションなど とも呼ばれる • 企業のウェブサイトにも必要に応じて 導入されてもいいのでは？ • 開発上の利点も？ こんな風なものを実現するのに 興味を持っていただければ幸いです
- 4. Pythonサイド（バックエンド） • Djangoを使う • DjangoRest Frameworkを使ってAPIを作る • WebSocketにはtornadoを導入
- 5. Djangoやウェブフレームワークの役割をざっくり説明 Browser <a href= /test>TEST</a> Django Database def test(request): … html = <html><body>… # HTMLレンダリングして返す return HttpResponse(html) 保存 更新 削除など 取得など 新しいURLリクエスト レスポンス （次のページのコード） <html> <head></head> <body>…</body> </html> ページごとにpythonのdefを用意して、新しいhtmlをブラウザに返す ブラウザはhtmlをレンダリングする。を繰り返す
- 6. API化したときの動き Browser <script> $.ajax( /test )… </script> DjangoDatabase def test(request): … data = { users :users} # dictやlistをそのまま # JSONにして返す return Response(data) 保存 更新 削除など 取得など APIリクエスト レスポンス （dictをjsonにしたデータ） { users : [ { name : A , age:20} … ]} javascriptでjsonデータを受け取る。 javascriptは必要に応じて部分的にhtmlを書き換える、を繰り返す
- 7.
- 8. API化のメリット • 呼び出すプラットフォームが増える • jsonによる少ないレスポンス量 •クライアント側の資源を生かせて、サーバー に低負荷 • DjangoでViewを書く工数とコード行数が減 少 • フロントエンドとバックエンドのコード依存 を最小に留める • html / cssのコードが比較的、散らばらない • 余った時間はデザインの実現に費やせる デメリット • フロントエンドでやることが増えるので、 フロントエンドのコードがとにかく煩雑に なりやすい、保守不能なコードになりがち
- 9.
- 10. 最近のjavascript • ES6からclass構文、アロー関数など記述ルールが刷新されて少し親切に。※ babelというコンパイルツールが必要 • coffeescript,typescriptなど中間言語もいろいろ • Electron、NW.js、Ionic…アプリを作れるツールも多々 • node.jsとの戦い
- 11. 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コール
- 12. 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バインディング
- 13.
- 14. 有名なjavascriptフレームワークを一部紹介 backbone.js (Jeremy Ashkenas作) やりたいことは自分で実装する。１ページのライブラリ。自由度の高さ。同 作者のcoffeescriptも併用すると少ない行数で快適にコーディングできた react.js(facebook) htmlバインディングが実装されている。fluxの登場でfacebookのような複 雑なUIを大人数で設計しやすそう angular2 (google (microsoft)) rxjsを標準装備して、angular.jsより動作も早くなった感じ。記述は typescriptかjavascriptかdart 他多数
- 15. Flux ※Fluxは設計手法です。 manager class classclass class classclassclass これまでのMyコード イベントやSingletonを駆使するも コードは散在しがち 自由に書けすぎた ユーザアクション、html描画、APIコー ルの実行順序と依存関係を綺麗に整理で きる Action Dispatcher Store View API Fluxのフロントエンド設計
- 16.
- 17. 学習に役立ったもの TodoMVC.com react.js + flux ReactiveExtensions angular2 javascript python Django tutorial https://docs.djangoproject.com/en/1.9/intro/tutorial01/ Django Rest Framework http://www.django-rest-framework.org/
- 18.
- 19.