Frontrend × Bonfire Frontend 参加してきた #frontrend_bonfire

Frontrend × Bonfire Frontend 参加してきました

FrontrendもBonfire Frontend参加したことなかったけど、名前だけ知っていた(うっすら)

Frontrend × Bonfire Frontend

frontrend.connpass.com

会場は何かと話題のAbema Towers

広い・綺麗

アベマタワーズに入りたかったから開催したらしいですw

テーマは「新しい挑戦と学び」のため、新人が多い

ライブ配信もしていた。

Roppongi.vue開催時はライブ配信LT会あまりないかなーと想っていたけど最近のLT会はライブ配信めっちゃしている(・∀・)

新卒3年目、ヤフーで学んだ2年間を振り返る

以下メモ

  • 濱田唯
  • 1994年
  • ヤフーの2年間の振り返り
  • 6ヶ月OJT
  • 未経験
  • 10月からFrontEnd
  • 3ヶ月基礎研修・OJT
  • いろんなチームの雰囲気把握のためローテしたりする
  • TS,Atomic Design,Redux
  • TSカンペキニリカイシタ
  • インプットアウトプットの習慣づけ
  • チーム内LT

ローテはいいなって思った

チーム内LTの合意の取り方気になる

AbemaTV 新卒1年目エンジニア実録

以下メモ

  • 野口 直寛 @nodaguti
  • 新卒2年目
  • 560PR
  • 10万行くらい
  • Prettierで2万行稼いだ
  • 1ヶ月くらいが新卒採用
  • 研修でSlack作った
  • 小さいUI変更を最初やっていた
  • 2週間スプリント
  • Flux独自実装
  • intersection Observerを使う
  • スマホ実装
  • 仕様固まっていたからひたすら実装をする
  • モバイルブラウザをどうプロダクトとして伸ばすか
  • 再生前の離脱ユーザー
  • 数字をあげるのが課題
  • 12月は負債返したりリファクタリングしたり
  • 機能開発がどうKPIに影響するか見ている
  • テックリードを目指す
    • リーダーシップ
    • 専門性
  • 技術から事業に貢献
  • パフォーマンス改善とリファクタリングは優先度さがりがち
  • パフォーマンスがビジネスの指標にどう貢献できるか見える化する

HTML5Conferenceで新卒研修でSlack作ったネタで登壇していた人だった

機能に重きをおかず、開発スタイルに重きを置いた(テスト・カバレッジ・英語で書くなど)話をしていて印象に残っていた

Webフロントエンド&デザインで学んだ2年間を総括

以下メモ

  • 内藤 秀彦 @innovate_7110
  • ヤフーショッピング
  • 3年目
  • 機械学習・デザイナー・フロントエンドエンジニア
  • デザインにおける改善
  • 解決したい課題を探す
  • チームで解決する課題を決める
  • ビジネス貢献考えUIを作る
  • ABテスト
  • 抽象的キーワードが多く、商品にたどり着けない
  • CTRが多い(ページネーションが多くクリックされる
  • その他で絞り込むからではなく、もっと絞り込むに変える
  • FVで商品見えるようにした
  • 1テストで1つの変更にしないと勝った理由がわからない(勝つだけが目的じゃない
  • モジュールとエレメントで管理
  • gulp
  • テスト→勝ち筋→施策
  • KPI分解
  • CVRめっちゃ追うチーム
  • CSS上書きで調整
  • ストーリーブック
  • PHP,jQuery
  • 独自jQueryライブラリ
  • React Atomic Design Next Redux
  • D3.jsでデータビジュアライズ

UIのABテストをまわす話とか前職を思い出した

こえのブログでのPWA 〜開発現場編〜

以下メモ

  • 原 一成 @herablog
  • IE 6対応。。。。
  • なぜwebアプリ
  • クロスプラットフォーム
  • 小さくリリースできる
  • ブラウザ機能の充実
  • ネイティブアプリに近づけた
  • 早い・オフライン
  • クライアントサイドレンダリングでつよつよに
  • time to interactive(操作可能
  • 遅くなりがち
  • HTML読んだあとにすぐJS呼ぶ(初期表示に必要なJSは減らす
  • ネットワークの速度(CDN使おう
  • PRPL Pattern
  • Push,Render Pre cache , Lazy Load
  • type moduleで
  • HTTP2 server push
  • HTML返却と同時にHTTP2 PUSH
  • スクリプトをとにかく読む
  • on loadでSW
  • SWがその後読み込む
  • CDNヒット率がとても高い
  • イベントドリブンでCDNのキャッシュパージ
  • ビルド時とか
  • LitElement
  • 捨てやすさ>再利用性
  • cssのカスタムプロパティ
  • 166kb
  • LHつよい
  • マイク関連
  • 音声の圧縮
  • 開発フロー
  • 細かく出す
  • 間違ったら直す
  • 再利用より捨てやすさ
  • 最速でプロトタイプ
  • FireBaseでプロトタイプ
  • HTML, Pure JSで作って、コンポーネント
  • アクセシビリティ
  • デプロイ
  • 心理的安全性を・・・高める
  • パフォーマンスバジェット設定
  • FCP,TTI,SpeedIndex
  • 競合より20%早いと差が出る
  • OSSのように社内で開発

こえのブログの開発ブログは読んでいて、今回一番楽しみだった

「捨てやすさ>再利用性」これに結構頭ガツンと殴られた

懇親会

寿司うまー

まとめ

BGM良かった