内容 1. コミュニティにおける View 2. ライブラリの選定と経緯 3. Backbone.js との付き合い方 4. ユニットテスト構成 5. 今後の課題

Size: px

Start display at page:

Download "内容 1. コミュニティにおける View 2. ライブラリの選定と経緯 3. Backbone.js との付き合い方 4. ユニットテスト構成 5. 今後の課題"

あゆみおとべ
5 years ago
Views:

1 ぼくのかんがえたふつうのじぇいえす Skill U Friday CyberAgent, Inc.

2 内容 1. コミュニティにおける View 2. ライブラリの選定と経緯 3. Backbone.js との付き合い方 4. ユニットテスト構成 5. 今後の課題

3 ケーススタディとプラクティス i

4 ふつうです i

5 ふつうのプラクティスを理性的なコードで書く i

6 コミュニティにおける View の傾向と対策

7 イニシャルロードが速い実行時のレスポンスが速いスクロールの滑らかさアクションに対するレスポンスの良さ操作フィードバックの丁寧さ etc...

8 縦方向が長い多くのPRJが 3,000 4,000px あるスクロールパフォーマンス超重要 DOMContentLoadedのあとに JSで遅れて描画されるとコンテンツの高さが変わって不安定...

9 スクロールパフォーマンススクロール時に30 60FPSを維持 1フレーム約 16msの処理が理想詳しくは別スライドを参照のこと

10 Contents NewContent Showing 非同期コンテンツの描画が発生 Contents Contents Contents 見ていたコンテンツがズレ落ちる Showing Contents

11 JSON (Object Literal) HTML JSON (API) JS Template

12 Wrapper Wrapper Wrapper Wrapper Wrapper DOMContentLoaded jquery template 個別に $el.html() やっぱりガクガク Render Content Render Content Render Content Render Content

13 テンプレートの共通化 jquery template のみで描画していた所を初期表示を安定させるために PHP 化初期表示 PHP 追加表示 JS 2 重管理化...?

14 無理に共通化しない勇気サーバーサイド自身が書き換えられる可能性もあった為今回は無茶をせずやるならPHP JSテンプレートに変換する補助スクリプトを挟むとか

15 地味なリアクション大事ボタンを押したら凹むとか悪くてもハイライトくらい欲しい touchstart ~ touchendで is-pressed クラスをトグル制御

16 ボタンのステート is-pressdのほかにも is-animatedやis-activeなど CSSと連携して確実に実装

17 ボタンがキュンキュン動く CSS Animationsであれば自然と合成レイヤーに入るんだけど... 細々したボタンUIにCreateJSとかをぶち込むのはまた別のノウハウ

18 過剰な合成レイヤーアニメーション適用前から合成レイヤーに入りまくってたなにかおまじないの形跡?

19 ライブラリの選定と経緯

20 Libraries Selector Based Library Structuring Library Utility Belt Library Templating Library Dependency Management

21 Requirements そのジャンルで有名であること文法や諸機能が素直であることベンチマークが劣悪でないこと

22 Structuring Library jashkenas/backbone Reinventing the Wheel...( A`)

23 Utility Belt Library bestiejs/lodash jashkenas/underscore _.

24 Selector Based Library $. jquery 2.x Zepto Vanilla... `, ( `) `,

25 Build option Zepto 1.0 $. MODULES="zepto event ajax form"./make dist jquery grunt custom:-sizzle,-wrap,-event-alias,-effects,-deprecated,+ajax/xhr

26 Comparison table (bytes) jquery.min.js raw 58,062 23,717 gzip -1 23,734 9,582 gzip -3 22,236 9,155 gzip -6 20,423 8,561 zepto.min.js $.

27 Vanilla JS...? ベンチマーク最適化

28 Templating Library wycats/handlebars.js _.template() linkedin/dustjs

29 _.template() ミニマム構成で _. から呼べるシンプルすぎて生々しい自由度 = 力技の温床になりがち

30 linkedin/dustjs ドキュメントは十分あるベンチマーク的には良好な成績拡張性は高いが随所にクセが

31 wycats/handlebars.js ドキュメントは十分あるベンチマーク的には及第点基本がシンプルで拡張性も ( MeteorやEmber.jsでも利用される高信頼性 )

32 {{#if cond}} がないとかかなりロジックレスなので必要があればヘルパを追加する ex. ifcond

33 Dependency Management RequireJS Browserify Namespacing & CONCAT

34 Dependencies Libs of choice Plugins Your Code jquery Backbone via. Dependency Management with RequireJS 34

35 RequireJS 非常に優秀なライブラリだが... Async 部分はモバイル微妙 r.js 頼みの BIG ONE 運用が危うい規模感的に本当に必要?

36 Browserify CommonJS Syntaxを使えるのは魅力基本的にオールインワンの結合前提採用するにはちょっとエッジすぎた

37 Namespacing & CONCAT いわゆるシンプルイズベスト状態肥大化時も適当な粒度で分割しやすい特定ライブラリの盛衰に依存しない

38 Backbone.js との付き合い方

39 少ない法則で多くの複雑性を解決したい複雑にしたら複雑にした数だけ解決できる複雑性が多くなるのは当然これは作業者の認知資源を犠牲にする少ない法則で多くの複雑性を解決できるようにするのが理想

40 コピペでラクしたいどうせ改修は多いしツキものコレをコッチにもというのはよくあるコミュニケーションなのでラクに引き受けられるようにしたい

41 View の整理が一番の関心事 Viewは便利にするべき Viewを強化した薄いライブラリ Model... Collection... そこまで重要でもないかも? Collectionの存在を捨てた

42 Marionette

43 薄いライブラリについて Layout - 枠組み View - コンテンツパーツ Component - 独立したアクション

44 ahomu/phalanx

46 Layout (document.body) HeaderView ContentView var Layout = Phalanx.Layout.extend({ regions: { header : '#js- header', content: '#js- content', footer : '#js- footer' } }); var layout = new Layout({ el: body }); layout.assign('header', new HeaderView()); layout.assign('content', new FirstView()); layout.assign('footer', new FooterView()); FooterView // change View layout.assign('content', new SecondView());

47 View ろれむいぷさむらりるれろろれむいぷさむらりるれろろれむいぷさむらりるれろ Component ろれむいぷさむらりるれろろれむいぷさむらりるれろろれむいぷさむらりるれろ Component ろれむいぷさむらりるれろろれむいぷさむらりるれろろれむいぷさむらりるれろ Component ろれむいぷさむらりるれろろれむいぷさむらりるれろろれむいぷさむらりるれろ Component var LikeBtn = Phalanx.Component.extend({ events: { 'click [data- ui="btn"]': 'onclickbtn' }, onclickbtn: function(evt) { var pid = evt.currenttarget.getattribute('data- pid'); $.ajax({ method: POST path: api/v1/like data: {id: pid}, success: function(resp) { this.trigger('success', resp); }.bind(this) }); } }); var ListView = Phalanx.View.extend({ components: { 'likebtn': LikeBtn }, listeners: { 'success likebtn': 'listenermethod' }, listenermethod: function() { alert( Commponent Success ); } });

48 HTML 側の雰囲気 data-* 的な宣言が多め {} // <div data-component="likebtn" dataid="790580" class="ref r" > // <em data-ui="count" class="btn-like-a-count mr-b cd is-liked">43</em> // <span data-ui="likebtn"class="btn-like btnlike-a" > <i class="heart ir"> </i> </span> </div>

49 DOM Based State DOM(HTML) がすべてを知っている状態を前提として JavaScriptに仕事をさせないテンプレートのdata 属性とかは多少もっさりするが分散と割り切る

50 つまり _ 人人人人人人人人人人人人人 _ > JavaScript かきたくない < Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^

51 今後の課題

52 今後の課題 1. 運用を経て JS がどうなるか? 2. DOM Based で成り立つか? 3. ライブラリの標準化? 4. Backbone.js のプラクティス 5. シングルページアプリ ( A`;)

53 Questions? ć github.com/ahomu

vuejs_meetup.key

vuejs_meetup.key Rails Vue.js Vue.js Meetup 2015-01-28 @kazupon About Me @kazupon CUUSOO SYSTEM Vue.js Plugin vue-i18n: https://github.com/kazupon/vue-i18n vue-validator: https://github.com/kazupon/vue-validator Vue.js