Frontend Meetup vol.1に行ってきた

株式会社FiNCで主催された「Frontend Meetup vol.1 - SPAを語り尽くす会!」に行ってきました。
テーマは「Single Page Application(SPA)」ということで、実際に業務でReactやAngularを使ってSPAを取り入れている方々の話を伺いました。スピーカーの方々が資料をあげてくれているので、細かい内容はそちらに任せて内容の抜粋と個人的な所感を記しておきます。

React/Reduxで半年くらい真面目にSPAするとわかること

@takayuki_shmz (株式会社FiNC)

発表スライド

ReactでSPAをやるときはコレに気をつけた方がいい

• 正しいコンポーネント思考
  コンポーネントは、状態をもたない再利用性の高いDumpComponentと、それとactionなどをつなぐ為の状態をもつSmartComponentの意識をもつこと。とはいってもStateを内部で持った方が便利なコンポーネントもあるので、柔軟に。
  CSSとコンポーネントは１対１ ← 割とよく聞く話。CSSの扱いはCSSinJSよりは、CSS(scss)でコンポーネントごとに名前空間を切って管理するのがベストプラクティスっぽい。

• this.context
  恥ずかしながら初めて知りました。親コンポーネントの値を子・孫にバケツリレーしなくても渡せずにグローバル的な参照ができるものらしい。
  公式的には非推奨な機能だけども、他言語化とかGAタグ埋め込みとかアプリケーション全体で扱うようなものには非常に便利。

• エンティティと型
  APIから受け取った値はきちんとエンティティに入れて扱うことで、可読性も上がるし、エンティティでエラーチェックしておけば後の処理もシンプルになる。
  エンティティはUI単位ではなく概念として最小単位で作るのが肝。

革命と秩序とSPA

@joe_re (freee株式会社)

発表スライド

• flux-utilsという選択
  既存実装のあるところにSingleStoreであるReduxでは、新機能のところだけfluxにしたいというのが合わない。そこで選択したのがflux-utils。flux-utilsはfluxでのStoreとViewのみをカバーしたシンプルなものなので部分適用がやりやすい。

• flowtypeで型チェック
  各層のIFが乱雑になってきたので型チェックツールのflowtypeを入れたそう。JSに型は必要なのか議論はあるが、チーム開発では必須。←同意

##Angularと心中する
@Quramy (株式会社WACUL)

発表スライド

Angular1.5およびAngulr2の話

• Component
  Angular1.5からcomponentが使えるようになったので、directiveは利用せずにcomponentを使うようになった

• css用のクラス名が長くなる問題
  コンポーネントとcssは１対１で扱うようにして、CSSの名前空間はBEMの設計に基づいて行った。ところが、クラス名がとにかく長いのが辛い。
  ということで独自directive ukyo/angular-simple-bemを作って、クラス名を自動的に展開したクラス名に書き換えるようにして解決したそう。

• 自動生成
  Compoentnはgulp + inquirer + mustacheを使ってscaffoldタスクで自動生成。

• エラーまわり
  ExceptionHandlerでキャッチした例外はRollbarへ投げて管理

コンテンツ配信とSPA

@konpyu (Piece of cake,Inc)

発表スライド

Angular1.3のSPAを改善した話

• ロードが遅い問題
  SPAにつきまとうInitialLoadがどうしても遅くなってしまう問題。
  DOM数を減らす、cacheを使うことで30%くらい早くなったとのこと。

• 理想のコンテンツ配信
  コンポーネント化 + コンポーネントごとSSR + コンポーンネントの遅延ロード + HTTP/2 が理想の形ではないか。
  遅延ロード：できたところから表示されるので体感的に早く感じる
  SSR(サーバーサイドレンダリング)： サーバー側でレンダリングするのでJSの読み込みが減る
  HTTP/2： assetを並列で読み込める。CroudFrontで簡単に移行できる。

空divだけが表示されてから中身が表示するのって、やっぱりカッコ悪いからSSRでページまるっと表示するべきという話を聞いたことがあったり、SSR自体が遅いから実用は厳しい、という話を聞いたりもするので、ベストプラクティスは今の段階では難しそう

###以下、LT

「SPAと覚悟」

@teppeis (サイボウズ)

発表スライド

「SPAって事は、あなたは覚悟して来てる人ですよね？」
SPAであることはブラウザがやってくれる事を自前で実装しなければいけない。例えば、画面遷移のヒストリー管理とか、遷移後のスクロール位置とか。流行りに乗ってSPAにする前にSPAのデメリットを踏まえたで選択することを改めて考えさせられて、とても刺さりました。

「1pxをめぐる戦い」

@yoshiko_pg

発表スライド

リストボックスの一番下のボーダーをどうやって処理するかという話。CSSを片手間でやってるマンには、とても為になる内容でこうゆうのもっと知りたい。

##「SPAでのセッション管理とセキュリティ」
@uryyyyyyy

発表スライド

Webでのセキュリティ周りの話。セキュリティ疎いのでこういうのちゃんとやらんとなぁ、と遠い目をしながら聴いてました。知っておく事は大事。

「Angular2でつまづいたところ

@nacika_ins

発表スライド

Angular2でサービスを作った話。ハマリどころとして認証情報をどこで持つかというところで、SharedServieを使うという解答。

###さいごに
会場のFiNCさんは、会の途中にさわやかな体操のお兄さんが登場してウェルネスタイムとしてストレッチを教えてくれたり、オフィスに立派なキッチンがあって管理栄養士さんがご飯作ってくれたり、とても素敵な環境でした。