S14 t3 yosuke_yamashita
•
0 likes•328 views
Talk 3:「PythonとJavaScriptで作るReactiveなウェブサイト」 山下陽介（株式会社アカリ）
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (17)
Similar to S14 t3 yosuke_yamashita
Similar to S14 t3 yosuke_yamashita (20)
More from Takeshi Akutsu
More from Takeshi Akutsu (20)
Recently uploaded
Recently uploaded (10)
S14 t3 yosuke_yamashita
- 2. 弊社 • 2006年創業 • ウェブ制作とCG制作、ウェブアプリを使った新規ビジネスなど • 人材募集中 • なにとぞよろしくお願いします
- 3. Reactiveなウェブサイト • あらゆる状態変化にシームレスに対応 • javascriptを駆使して実装 • シングルページアプリケーションなど とも呼ばれる • 企業のウェブサイトにも必要に応じて 導入されてもいいのでは？ • 開発上の利点も？ こんな風なものを実現するのに 興味を持っていただければ幸いです
- 4. Pythonサイド（バックエンド） • Djangoを使う • Django Rest 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> 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を書き換える、を繰り返す
- 8. API化のメリット • 呼び出すプラットフォームが増える • jsonによる少ないレスポンス量 • クライアント側の資源を生かせて、サーバー に低負荷 • DjangoでViewを書く工数とコード行数が減 少 • フロントエンドとバックエンドのコード依存 を最小に留める • html / cssのコードが比較的、散らばらない • 余った時間はデザインの実現に費やせる デメリット • フロントエンドでやることが増えるので、 フロントエンドのコードがとにかく煩雑に なりやすい、保守不能なコードになりがち
- 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バインディング
- 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 classclass class これまでのMyコード イベントやSingletonを駆使するも コードは散在しがち 自由に書けすぎた ユーザアクション、html描画、APIコー ルの実行順序と依存関係を綺麗に整理で きる Action Dispatcher Store View API Fluxのフロントエンド設計
- 17. 学習に役立ったもの TodoMVC.com react.js + flux Reactive Extensions angular2 javascript python Django tutorial https://docs.djangoproject.com/en/1.9/intro/tutorial01/ Django Rest Framework http://www.django-rest-framework.org/