アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
•
9 likes•6,589 views
アメブロのフロントエンド刷新についてFrontrend Vol.8で発表した内容です。
Recommended
More Related Content
What's hot
What's hot (19)
Similar to アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
Similar to アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ (20)
More from Kazunari Hara
Recently uploaded
Recently uploaded (12)
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
- 1. アメブロフロント刷新にみる ひかりとつらみ 2016/12/5 Frontrend Hara Kazunari @CyberAgent アメブロ2016
- 2. 🎉
- 7. 😂YES
- 9. PV DOWN
- 10. TOO SLOW TO LOAD 2016年4月のデータ
- 17. コンセプト決め
- 19. by Steve Souders
- 21. 💡
- 24. SSR SPA
- 27. Before After
- 28. LAZY LOAD
- 29. Before Main Sub Not displayed Above The Fold After Main Sub Not displayed
- 30. HTML Size -20% 16.1 → 13.5 KB $
- 31. #Under 100msHTML Response Time
- 32. renderToString() 8,000 rps at Ameba 300ms - 500ms, High CPU usage
- 33. Caching HTML/API Data Dynamic CSS Classes
- 34. node API Cache Client HTTP Blog Data Blog Data zlib HTML Add client info to <body> as class name
- 35. HTML Responses Entry List Pages Entry Pages 2016年9月のデータ
- 38. React with Redux コンポーネント志向 Pure functions
- 39. React with Redux Page Navi Article Paging コンポーネント志向
- 40. React with Redux Action Page Navi Article Paging Reducer props State (Store) propsobject object func Pure functionsによる一定フロー
- 41. React with Redux State State State Stateの情報だけで表示内容が確定できる
- 42. 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> ); }
- 43. css-loader CSS Modules 各コンポーネントごとのスタイル .SpNavigationBar__Logo___${HASH} (BEM CamelCase style: MyBlock__SomeElem_modName_modVal) https://en.bem.info/methodology/naming-convention/#camelcase-style
- 45. Atomic Design
- 46. Presentational and Container Components % &Containers Components 状態を持つコンポーネント 表示内容だけのコンポーネント
- 47. Atomic Design % &Containers Components 状態を持つコンポーネント 表示内容だけのコンポーネント 状態が肥大化 😿 処理が肥大化 😿 どっちに書いていいかわからない 🙀
- 52. 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, };
- 55. Isomorphic JavaScript Action Page Navi Article Paging Reducer State (Store) % actions/ % components/ % reducers/ % services/ & server.js & client.js ブラウザの入り口 サーバーの入り口 node API
- 58. 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
- 59. Babel export default class SpThumbnail extends React.Component { render() { const { id, ...restProps } = this.props; return ( <Thumbnail {...restProps} src=`https://img.com/${id}` /> ); } } Rest Parameters
- 60. 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
- 64. 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
- 67. CI
- 75. 外でもそのまま使える技術を
- 77. No more ガタンッ 🎯 ATFのコンテンツの高さを固定 誤タップはモバイルで 最悪のUXのひとつ
- 78. No more ガタンッ 🎯
- 79. No more ガタンッ 🎯
- 82. アクセシビリディ https://speakerdeck.com/herablog/ameburowosukurinridadedu-mishang-getemita-2016nian-xia
- 86. # Business & System✌ GOOD BOTH '
- 87. Desktop version Markup, a11y Design x Development Webpack2 https, HTTP/2 Service Worker, PWA, etc. Roadmap
- 93. 周辺技術も大杉 😂
- 94. 結論 みんなで、頑張ろ😂