Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
アメブロフロント刷新にみる
ひかりとつらみ
2016/12/5 Frontrend
Hara Kazunari @CyberAgent
アメブロ2016
🎉
@herablog
@kouhin
https://developers.cyberagent.co.jp/blog/archives/636/
😂YES
アメブロフロント刷新にみる
ひかりとつらみ
アメブロ2016
PV DOWN
TOO SLOW TO LOAD
2016年4月のデータ
バックエンドのAPI化
http://www.slideshare.net/nin2hanzo/spring-69237035
! "#表示速度
改善
システム
モダン化
UX
ver. 2016
GOAL
#表示速度は、Web UXにとって、
最も大事な項目のひとつです。
モダンなエコシステムを使うこ
とは、良いアプリを作るのに役
立ちます。
!
時代にあった、ユーザー体験を
作ることで使いやすいアプリに
なります。
"
! "#表示速度
改善
システム
モダン化
UX
ver. 2016
GOAL
コンセプト決め
by Steve Souders
🙏
by Steve Souders
by Steve Souders
サーバーサイドははやい
HTMLのサイズが大きめ
ブロッキングリソース多め
リソース多いサイズも大きい
💡
サーバーサイドははやいまま
HTMLのサイズ減らす
リソースの非同期読み込み
ATF以外のリソースの遅延表示
💡
ブログというプロダクト
テキスト中心の読み物
SEO大事
一度に複数ページ
見られている
SSR SPA
Before
After
SPASSR
SSR SSR SSR
SPA
SSR
First Paint
SEO
Runtime Paint
UX
Before After
LAZY LOAD
Before
Main
Sub
Not displayed
Above The Fold
After
Main
Sub
Not displayed
HTML Size -20%
16.1 → 13.5 KB
$
#Under 100msHTML Response Time
renderToString()
8,000 rps at Ameba
300ms - 500ms, High CPU usage
Caching HTML/API Data
Dynamic CSS Classes
node
API
Cache
Client
HTTP
Blog Data
Blog Data
zlib
HTML
Add client info
to <body>
as class name
HTML Responses
Entry List Pages
Entry Pages
2016年9月のデータ
! "#表示速度
改善
システム
モダン化
UX
ver. 2016
GOAL
まるでexampleアプリのように
React with Redux
コンポーネント志向
Pure functions
React with Redux
Page
Navi Article Paging
コンポーネント志向
React with Redux
Action
Page
Navi Article Paging
Reducer
props
State (Store)
propsobject
object
func
Pure functionsによる一定フロー
React with Redux
State State State
Stateの情報だけで表示内容が確定できる
CSS Modules
各コンポーネントごとのスタイル
SpNavigationBar.js SpNavigationBar.css
.Nav {
background: #fff;
border-bottom: 1px solid #e3e5e...
css-loader
CSS Modules
各コンポーネントごとのスタイル
.SpNavigationBar__Logo___${HASH}
(BEM CamelCase style:
MyBlock__SomeElem_modName_mo...
CSS Modules
各コンポーネントごとのスタイル
スコープがきれる
影響範囲が絞れる
モジュール・開発者多い
アメブロでは機能
Atomic Design
Presentational and Container Components
% &Containers Components
状態を持つコンポーネント 表示内容だけのコンポーネント
Atomic Design
% &Containers Components
状態を持つコンポーネント 表示内容だけのコンポーネント
状態が肥大化 😿
処理が肥大化 😿
どっちに書いていいかわからない 🙀
Atomic Design
最小単位
<Icon>
状態持つ
<Entry>
再利用
<List>
各ページ SPA用
organisms/SpEntry.js
organisms/SpBlogInfo.js
organisms/SpNavigationBar.js
atoms/Icon.js
molecules/BloggerThumbnail.js
organisms/SpEntry.js
organisms/SpBlogInfo.js
organisms/SpNavigationBar.js
atoms/Icon.js
molecules/BloggerThumbnail.js
Atomic Design
Organismのコンポーネントは状態を持てる
connectを使って状態を持てる
データ取得処理を記述できる
import { connect } from 'react-redux';
import { routerHooks } from 'react-router-hook';
import { fetchBloggerRequest } fro...
SSR SPA
Isomorphic JavaScript
Isomorphic JavaScript
ほとんどJavaScript
Isomorphic JavaScript
Action
Page
Navi Article Paging
Reducer
State (Store)
% actions/
% components/
% reducers/
% service...
Babel
決まっている未来は、
早めに試そう
Babel
http://node.green/
Babel
export function getPages(amebaId, page = 1) {
const url = `https://api.jp/pages/${amebaId}/${page}`;
return fetch(ur...
Babel
export default class SpThumbnail extends React.Component {
render() {
const { id, ...restProps } = this.props;
retur...
Babel
const defer = async ({ dispatch, getState, params }) => {
const amebaId = params.amebaId;
const blogger = await disp...
Babel
最悪、該当部分だけ書
き直すのは難しくない
…はず 😅
ESLint, Stylelint
比較的固めのルールを選択
ガイドラインを明確に
eslint-config-airbnb, stylelint-config-standard
ESLint, Stylelint
例えばこんなのもエラー
ESLint, Stylelint
const foo = {
a: ‘a’,
b: ‘b’ // comma-dangle
} // semi
.Block{ // block-opening-brace-space-before
borde...
ESLint, Stylelint
個人的な好みはあるが…
ルールを統一して一貫性を保つ
レビュー時に毎回指摘は気まずい… 😇
CI
Pushされたものは
必ずCIテスト
を通して
安全性を担保する
CI
Docker
node.jsにポータビリティをもたらす
Docker
一度、イメージを作ってしまえば、
複数サーバーへのリリース
切り戻しも簡単
Docker
さらに、nodeのアップデートも
簡単
Docker
https://nodejs.org/en/download/releases/
Docker
FROM node:7.2
Dockerfileを変えるだけ
Docker
アメブロでは
極力node最新版を利用する
CI, Lint
Semantic Versioning
README.md
CONTRIBUTING.md
PULL_REQUEST_TEMPLATE.md
etc.
OSSっぽく開発
外でもそのまま使える技術を
! "#表示速度
改善
システム
モダン化
UX
ver. 2016
GOAL
No more ガタンッ 🎯
ATFのコンテンツの高さを固定
誤タップはモバイルで
最悪のUXのひとつ
No more ガタンッ 🎯
No more ガタンッ 🎯
コンテンツファースト
Before After
アクセシビリディ
伊原 力也さん
太田 良典さん
アクセシビリディ
https://speakerdeck.com/herablog/ameburowosukurinridadedu-mishang-getemita-2016nian-xia
! "#表示速度
改善
システム
モダン化
UX
ver. 2016
GOAL
#
Business & System✌
GOOD BOTH
'
Desktop version
Markup, a11y
Design x Development
Webpack2
https, HTTP/2
Service Worker, PWA, etc.
Roadmap
https://developers.cyberagent.co.jp/blog/
@ca_developers
@herablog
アメブロフロント刷新にみる
ひかりとつらみ
アメブロ2016
Reduxむずい 😂
新メンバーが理解するまで
最大2ヶ月かかる (当社比)
(実装しながらわかってくる)
Lintスパルタ 😂
最初はだいたいCIエラー
アメブロモジュール大杉 😂
文章ママ
周辺技術も大杉 😂
結論
みんなで、頑張ろ😂
🍣🍕🍺🍣🍕🍺🍣🍕
🍺🍣🍕🍺🍣🍕🍺🍣
🍕🍺🍣🍕🍺🍣🍕🍺
🍺🍕🍺🍣🍕🍺🍣🍕
🍕🍺🍕🍺🍣🍕🍺🍣
アメブロフロント刷新にみる
ひかりとつらみ
Hara Kazunari @herablog
アメブロ2016
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
Próxima SlideShare
Cargando en…5
×

アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ

4.899 visualizaciones

Publicado el

アメブロのフロントエンド刷新についてFrontrend Vol.8で発表した内容です。

Publicado en: Tecnología
  • Sé el primero en comentar

アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ

  1. 1. アメブロフロント刷新にみる ひかりとつらみ 2016/12/5 Frontrend Hara Kazunari @CyberAgent アメブロ2016
  2. 2. 🎉
  3. 3. @herablog @kouhin
  4. 4. https://developers.cyberagent.co.jp/blog/archives/636/
  5. 5. 😂YES
  6. 6. アメブロフロント刷新にみる ひかりとつらみ アメブロ2016
  7. 7. PV DOWN
  8. 8. TOO SLOW TO LOAD 2016年4月のデータ
  9. 9. バックエンドのAPI化 http://www.slideshare.net/nin2hanzo/spring-69237035
  10. 10. ! "#表示速度 改善 システム モダン化 UX ver. 2016 GOAL
  11. 11. #表示速度は、Web UXにとって、 最も大事な項目のひとつです。
  12. 12. モダンなエコシステムを使うこ とは、良いアプリを作るのに役 立ちます。 !
  13. 13. 時代にあった、ユーザー体験を 作ることで使いやすいアプリに なります。 "
  14. 14. ! "#表示速度 改善 システム モダン化 UX ver. 2016 GOAL
  15. 15. コンセプト決め
  16. 16. by Steve Souders 🙏
  17. 17. by Steve Souders
  18. 18. by Steve Souders サーバーサイドははやい HTMLのサイズが大きめ ブロッキングリソース多め リソース多いサイズも大きい
  19. 19. 💡
  20. 20. サーバーサイドははやいまま HTMLのサイズ減らす リソースの非同期読み込み ATF以外のリソースの遅延表示 💡
  21. 21. ブログというプロダクト テキスト中心の読み物 SEO大事 一度に複数ページ 見られている
  22. 22. SSR SPA
  23. 23. Before After SPASSR SSR SSR SSR
  24. 24. SPA SSR First Paint SEO Runtime Paint UX
  25. 25. Before After
  26. 26. LAZY LOAD
  27. 27. Before Main Sub Not displayed Above The Fold After Main Sub Not displayed
  28. 28. HTML Size -20% 16.1 → 13.5 KB $
  29. 29. #Under 100msHTML Response Time
  30. 30. renderToString() 8,000 rps at Ameba 300ms - 500ms, High CPU usage
  31. 31. Caching HTML/API Data Dynamic CSS Classes
  32. 32. node API Cache Client HTTP Blog Data Blog Data zlib HTML Add client info to <body> as class name
  33. 33. HTML Responses Entry List Pages Entry Pages 2016年9月のデータ
  34. 34. ! "#表示速度 改善 システム モダン化 UX ver. 2016 GOAL
  35. 35. まるでexampleアプリのように
  36. 36. React with Redux コンポーネント志向 Pure functions
  37. 37. React with Redux Page Navi Article Paging コンポーネント志向
  38. 38. React with Redux Action Page Navi Article Paging Reducer props State (Store) propsobject object func Pure functionsによる一定フロー
  39. 39. React with Redux State State State Stateの情報だけで表示内容が確定できる
  40. 40. CSS Modules 各コンポーネントごとのスタイル SpNavigationBar.js SpNavigationBar.css .Nav { background: #fff; border-bottom: 1px solid #e3e5e4; display: flex; height: 40px; width: 100%; } .Logo { text-align: center; } import React from 'react'; import style from './SpNavigationBar.css' export class SpBlogInfo extends React.Component { render() { return ( <nav className={style.Nav}> <div className={style.Logo}> <img alt="Ameba" height="24" src="logo.svg" width="71" /> </div> <div ...> </nav> ); }
  41. 41. css-loader CSS Modules 各コンポーネントごとのスタイル .SpNavigationBar__Logo___${HASH} (BEM CamelCase style: MyBlock__SomeElem_modName_modVal) https://en.bem.info/methodology/naming-convention/#camelcase-style
  42. 42. CSS Modules 各コンポーネントごとのスタイル スコープがきれる 影響範囲が絞れる モジュール・開発者多い アメブロでは機能
  43. 43. Atomic Design
  44. 44. Presentational and Container Components % &Containers Components 状態を持つコンポーネント 表示内容だけのコンポーネント
  45. 45. Atomic Design % &Containers Components 状態を持つコンポーネント 表示内容だけのコンポーネント 状態が肥大化 😿 処理が肥大化 😿 どっちに書いていいかわからない 🙀
  46. 46. Atomic Design 最小単位 <Icon> 状態持つ <Entry> 再利用 <List> 各ページ SPA用
  47. 47. organisms/SpEntry.js organisms/SpBlogInfo.js organisms/SpNavigationBar.js atoms/Icon.js molecules/BloggerThumbnail.js
  48. 48. organisms/SpEntry.js organisms/SpBlogInfo.js organisms/SpNavigationBar.js atoms/Icon.js molecules/BloggerThumbnail.js
  49. 49. Atomic Design Organismのコンポーネントは状態を持てる connectを使って状態を持てる データ取得処理を記述できる
  50. 50. import { connect } from 'react-redux'; import { routerHooks } from 'react-router-hook'; import { fetchBloggerRequest } from '../../../actions/bloggerAction'; // データ取得処理 (react-router-hookを利用) const defer = async ({ dispatch }) => { await dispatch(fetchBloggerRequest()); }; // Redu storeのstateをpropsとして利用 const mapStateToProps = (state, owndProps) => { const amebaId = owndProps.params.amebaId; const blogger = state.bloggerMap.bloggerMap[amebaId].nickName; return { nickName, }; }; @connect(mapStateToProps) @routerHooks({ done }) export class SpProfileInfo extends React.Component { static propTypes = { nickName: React.PropTypes.string.isRequired, };
  51. 51. SSR SPA Isomorphic JavaScript
  52. 52. Isomorphic JavaScript ほとんどJavaScript
  53. 53. Isomorphic JavaScript Action Page Navi Article Paging Reducer State (Store) % actions/ % components/ % reducers/ % services/ & server.js & client.js ブラウザの入り口 サーバーの入り口 node API
  54. 54. Babel 決まっている未来は、 早めに試そう
  55. 55. Babel http://node.green/
  56. 56. Babel export function getPages(amebaId, page = 1) { const url = `https://api.jp/pages/${amebaId}/${page}`; return fetch(url); } publicBlogger.getPages(amebaId) .then((res) => res.json()) .then(json => json.data); fetch, Template Strings, default arguments, arrow functions, Promise
  57. 57. Babel export default class SpThumbnail extends React.Component { render() { const { id, ...restProps } = this.props; return ( <Thumbnail {...restProps} src=`https://img.com/${id}` /> ); } } Rest Parameters
  58. 58. Babel const defer = async ({ dispatch, getState, params }) => { const amebaId = params.amebaId; const blogger = await dispatch(fetchBloggerRequest(amebaId)); if (blogger.isOfficial) {} }; @routerHooks({ defer }) export class SpBlogHeaderInfo extends React.Component { } async/await, class, import/export, decorator
  59. 59. Babel 最悪、該当部分だけ書 き直すのは難しくない …はず 😅
  60. 60. ESLint, Stylelint 比較的固めのルールを選択 ガイドラインを明確に eslint-config-airbnb, stylelint-config-standard
  61. 61. ESLint, Stylelint 例えばこんなのもエラー
  62. 62. ESLint, Stylelint const foo = { a: ‘a’, b: ‘b’ // comma-dangle } // semi .Block{ // block-opening-brace-space-before border-top: 1px solid #CCC; // color-hex-case border-bottom: 1px solid #ccc; // declaration-block-properties-order color:#333; // declaration-colon-space-after } // no-missing-end-of-source-newline
  63. 63. ESLint, Stylelint 個人的な好みはあるが… ルールを統一して一貫性を保つ レビュー時に毎回指摘は気まずい… 😇
  64. 64. CI Pushされたものは 必ずCIテスト を通して 安全性を担保する
  65. 65. CI
  66. 66. Docker node.jsにポータビリティをもたらす
  67. 67. Docker 一度、イメージを作ってしまえば、 複数サーバーへのリリース 切り戻しも簡単
  68. 68. Docker さらに、nodeのアップデートも 簡単
  69. 69. Docker https://nodejs.org/en/download/releases/
  70. 70. Docker FROM node:7.2 Dockerfileを変えるだけ
  71. 71. Docker アメブロでは 極力node最新版を利用する
  72. 72. CI, Lint Semantic Versioning README.md CONTRIBUTING.md PULL_REQUEST_TEMPLATE.md etc. OSSっぽく開発
  73. 73. 外でもそのまま使える技術を
  74. 74. ! "#表示速度 改善 システム モダン化 UX ver. 2016 GOAL
  75. 75. No more ガタンッ 🎯 ATFのコンテンツの高さを固定 誤タップはモバイルで 最悪のUXのひとつ
  76. 76. No more ガタンッ 🎯
  77. 77. No more ガタンッ 🎯
  78. 78. コンテンツファースト Before After
  79. 79. アクセシビリディ 伊原 力也さん 太田 良典さん
  80. 80. アクセシビリディ https://speakerdeck.com/herablog/ameburowosukurinridadedu-mishang-getemita-2016nian-xia
  81. 81. ! "#表示速度 改善 システム モダン化 UX ver. 2016 GOAL
  82. 82. # Business & System✌ GOOD BOTH '
  83. 83. Desktop version Markup, a11y Design x Development Webpack2 https, HTTP/2 Service Worker, PWA, etc. Roadmap
  84. 84. https://developers.cyberagent.co.jp/blog/ @ca_developers @herablog
  85. 85. アメブロフロント刷新にみる ひかりとつらみ アメブロ2016
  86. 86. Reduxむずい 😂 新メンバーが理解するまで 最大2ヶ月かかる (当社比) (実装しながらわかってくる)
  87. 87. Lintスパルタ 😂 最初はだいたいCIエラー
  88. 88. アメブロモジュール大杉 😂 文章ママ
  89. 89. 周辺技術も大杉 😂
  90. 90. 結論 みんなで、頑張ろ😂
  91. 91. 🍣🍕🍺🍣🍕🍺🍣🍕 🍺🍣🍕🍺🍣🍕🍺🍣 🍕🍺🍣🍕🍺🍣🍕🍺 🍺🍕🍺🍣🍕🍺🍣🍕 🍕🍺🍕🍺🍣🍕🍺🍣
  92. 92. アメブロフロント刷新にみる ひかりとつらみ Hara Kazunari @herablog アメブロ2016

×