Submit Search
Upload
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
•
9 likes
•
6,585 views
Kazunari Hara
Follow
アメブロのフロントエンド刷新についてFrontrend Vol.8で発表した内容です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 96
Download now
Download to read offline
Recommended
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Kazunari Hara
CA流 フロントエンドエンジニアの働きかた
CA流 フロントエンドエンジニアの働きかた
Kazunari Hara
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
アメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpring
Takuya Hattori
Spring Day 2016 - Web API アクセス制御の最適解
Spring Day 2016 - Web API アクセス制御の最適解
都元ダイスケ Miyamoto
Jawsug chiba API Gateway
Jawsug chiba API Gateway
Takuro Sasaki
Apiドキュメンテーションツールを使いこなす【api blueprint編】
Apiドキュメンテーションツールを使いこなす【api blueprint編】
dcubeio
Azure Load Testingを試してみた
Azure Load Testingを試してみた
Hiroyuki Mori
Recommended
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Kazunari Hara
CA流 フロントエンドエンジニアの働きかた
CA流 フロントエンドエンジニアの働きかた
Kazunari Hara
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
アメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpring
Takuya Hattori
Spring Day 2016 - Web API アクセス制御の最適解
Spring Day 2016 - Web API アクセス制御の最適解
都元ダイスケ Miyamoto
Jawsug chiba API Gateway
Jawsug chiba API Gateway
Takuro Sasaki
Apiドキュメンテーションツールを使いこなす【api blueprint編】
Apiドキュメンテーションツールを使いこなす【api blueprint編】
dcubeio
Azure Load Testingを試してみた
Azure Load Testingを試してみた
Hiroyuki Mori
サーバーレスの今とこれから
サーバーレスの今とこれから
真吾 吉田
Lineにおけるspring frameworkの活用
Lineにおけるspring frameworkの活用
Tokuhiro Matsuno
実践サーバレスアーキテクチャ
実践サーバレスアーキテクチャ
太郎 test
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
AWSオンリーで実現するIoTクラウド基盤
AWSオンリーで実現するIoTクラウド基盤
Godai Nakamura
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
Toshiaki Maki
ヘッドレスCMSとサーバーレス
ヘッドレスCMSとサーバーレス
真吾 吉田
AWS Step FunctionとLambdaでディープラーニングの訓練を全自動化する
AWS Step FunctionとLambdaでディープラーニングの訓練を全自動化する
mizugokoro
[jjug] Java と Benchmark
[jjug] Java と Benchmark
Tokuhiro Matsuno
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
Toshiaki Maki
AWS クックパッドの運用事例
AWS クックパッドの運用事例
Satoshi Takada
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
zaru sakuraba
Serverless Framework 使ってる話(node.js)
Serverless Framework 使ってる話(node.js)
Naoto Teruya
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
miso- soup3
Springを使ったwebアプリにリファクタリングしよう
Springを使ったwebアプリにリファクタリングしよう
土岐 孝平
Yapc fukuoka crust
Yapc fukuoka crust
Tokuhiro Matsuno
REST with Spring Boot #jqfk
REST with Spring Boot #jqfk
Toshiaki Maki
Going Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No Servers
Keisuke Nishitani
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
Masato Noguchi
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
Angular js はまりどころ
Angular js はまりどころ
Ayumi Goto
More Related Content
What's hot
サーバーレスの今とこれから
サーバーレスの今とこれから
真吾 吉田
Lineにおけるspring frameworkの活用
Lineにおけるspring frameworkの活用
Tokuhiro Matsuno
実践サーバレスアーキテクチャ
実践サーバレスアーキテクチャ
太郎 test
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
AWSオンリーで実現するIoTクラウド基盤
AWSオンリーで実現するIoTクラウド基盤
Godai Nakamura
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
Toshiaki Maki
ヘッドレスCMSとサーバーレス
ヘッドレスCMSとサーバーレス
真吾 吉田
AWS Step FunctionとLambdaでディープラーニングの訓練を全自動化する
AWS Step FunctionとLambdaでディープラーニングの訓練を全自動化する
mizugokoro
[jjug] Java と Benchmark
[jjug] Java と Benchmark
Tokuhiro Matsuno
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
Toshiaki Maki
AWS クックパッドの運用事例
AWS クックパッドの運用事例
Satoshi Takada
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
zaru sakuraba
Serverless Framework 使ってる話(node.js)
Serverless Framework 使ってる話(node.js)
Naoto Teruya
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
miso- soup3
Springを使ったwebアプリにリファクタリングしよう
Springを使ったwebアプリにリファクタリングしよう
土岐 孝平
Yapc fukuoka crust
Yapc fukuoka crust
Tokuhiro Matsuno
REST with Spring Boot #jqfk
REST with Spring Boot #jqfk
Toshiaki Maki
Going Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No Servers
Keisuke Nishitani
What's hot
(19)
サーバーレスの今とこれから
サーバーレスの今とこれから
Lineにおけるspring frameworkの活用
Lineにおけるspring frameworkの活用
実践サーバレスアーキテクチャ
実践サーバレスアーキテクチャ
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
AWSオンリーで実現するIoTクラウド基盤
AWSオンリーで実現するIoTクラウド基盤
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
ヘッドレスCMSとサーバーレス
ヘッドレスCMSとサーバーレス
AWS Step FunctionとLambdaでディープラーニングの訓練を全自動化する
AWS Step FunctionとLambdaでディープラーニングの訓練を全自動化する
[jjug] Java と Benchmark
[jjug] Java と Benchmark
20160927 reactmeetup
20160927 reactmeetup
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
AWS クックパッドの運用事例
AWS クックパッドの運用事例
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
Serverless Framework 使ってる話(node.js)
Serverless Framework 使ってる話(node.js)
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
Springを使ったwebアプリにリファクタリングしよう
Springを使ったwebアプリにリファクタリングしよう
Yapc fukuoka crust
Yapc fukuoka crust
REST with Spring Boot #jqfk
REST with Spring Boot #jqfk
Going Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No Servers
Similar to アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
Masato Noguchi
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
Angular js はまりどころ
Angular js はまりどころ
Ayumi Goto
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
アシアル株式会社
OpenWhisk - Docker action で MeCab を動かす
OpenWhisk - Docker action で MeCab を動かす
KUNITO Atsunori
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
Hayashi Yuichi
20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~
20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~
MasashiOtsuka1
Koa.js_エンジニア勉強会20140328
Koa.js_エンジニア勉強会20140328
エンジニア勉強会 エスキュービズム
Express Web Application Framework
Express Web Application Framework
LearningTech
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Yuta Matsumura
名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例
名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例
Shigeru UCHIYAMA
Head toward Java 16 (Night Seminar Edition)
Head toward Java 16 (Night Seminar Edition)
Yuji Kubota
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
Monaca
About rails 3
About rails 3
issei126
densan2014-late01
densan2014-late01
Takenori Nakagawa
Dev for Citizen Manual
Dev for Citizen Manual
テスト データ
徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925
Yu Ito
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
Microsoft Azure Japan
楽ちんユーザー認証付Spa
楽ちんユーザー認証付Spa
Takahiro Tsuchiya
Azure 高速サイトソリューション
Azure 高速サイトソリューション
Hiromasa Oka
Similar to アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
(20)
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Angular js はまりどころ
Angular js はまりどころ
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
OpenWhisk - Docker action で MeCab を動かす
OpenWhisk - Docker action で MeCab を動かす
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~
20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~
Koa.js_エンジニア勉強会20140328
Koa.js_エンジニア勉強会20140328
Express Web Application Framework
Express Web Application Framework
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例
名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例
Head toward Java 16 (Night Seminar Edition)
Head toward Java 16 (Night Seminar Edition)
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
About rails 3
About rails 3
densan2014-late01
densan2014-late01
Dev for Citizen Manual
Dev for Citizen Manual
徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
楽ちんユーザー認証付Spa
楽ちんユーザー認証付Spa
Azure 高速サイトソリューション
Azure 高速サイトソリューション
More from Kazunari Hara
俺はMETAだ!
俺はMETAだ!
Kazunari Hara
俺の、プレゼン構築法
俺の、プレゼン構築法
Kazunari Hara
Watch the Time
Watch the Time
Kazunari Hara
CSS3 Design Recipe
CSS3 Design Recipe
Kazunari Hara
スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2
Kazunari Hara
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
Kazunari Hara
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
Kazunari Hara
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
Kazunari Hara
速くなければスマフォじゃない
速くなければスマフォじゃない
Kazunari Hara
Hybrid appのすすめ
Hybrid appのすすめ
Kazunari Hara
More from Kazunari Hara
(10)
俺はMETAだ!
俺はMETAだ!
俺の、プレゼン構築法
俺の、プレゼン構築法
Watch the Time
Watch the Time
CSS3 Design Recipe
CSS3 Design Recipe
スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
速くなければスマフォじゃない
速くなければスマフォじゃない
Hybrid appのすすめ
Hybrid appのすすめ
Recently uploaded
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Shota Ito
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
osamut
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
furutsuka
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
Atomu Hidaka
Recently uploaded
(9)
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
1.
アメブロフロント刷新にみる ひかりとつらみ 2016/12/5 Frontrend Hara Kazunari
@CyberAgent アメブロ2016
2.
🎉
3.
@herablog @kouhin
4.
https://developers.cyberagent.co.jp/blog/archives/636/
5.
6.
7.
😂YES
8.
アメブロフロント刷新にみる ひかりとつらみ アメブロ2016
9.
PV DOWN
10.
TOO SLOW TO
LOAD 2016年4月のデータ
11.
バックエンドのAPI化 http://www.slideshare.net/nin2hanzo/spring-69237035
12.
! "#表示速度 改善 システム モダン化 UX ver. 2016 GOAL
13.
#表示速度は、Web UXにとって、 最も大事な項目のひとつです。
14.
モダンなエコシステムを使うこ とは、良いアプリを作るのに役 立ちます。 !
15.
時代にあった、ユーザー体験を 作ることで使いやすいアプリに なります。 "
16.
! "#表示速度 改善 システム モダン化 UX ver. 2016 GOAL
17.
コンセプト決め
18.
by Steve Souders 🙏
19.
by Steve Souders
20.
by Steve Souders サーバーサイドははやい HTMLのサイズが大きめ ブロッキングリソース多め リソース多いサイズも大きい
21.
💡
22.
サーバーサイドははやいまま HTMLのサイズ減らす リソースの非同期読み込み ATF以外のリソースの遅延表示 💡
23.
ブログというプロダクト テキスト中心の読み物 SEO大事 一度に複数ページ 見られている
24.
SSR SPA
25.
Before After SPASSR SSR SSR SSR
26.
SPA SSR First Paint SEO Runtime Paint UX
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月のデータ
36.
! "#表示速度 改善 システム モダン化 UX ver. 2016 GOAL
37.
まるでexampleアプリのように
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
44.
CSS Modules 各コンポーネントごとのスタイル スコープがきれる 影響範囲が絞れる モジュール・開発者多い アメブロでは機能
45.
Atomic Design
46.
Presentational and Container
Components % &Containers Components 状態を持つコンポーネント 表示内容だけのコンポーネント
47.
Atomic Design % &Containers
Components 状態を持つコンポーネント 表示内容だけのコンポーネント 状態が肥大化 😿 処理が肥大化 😿 どっちに書いていいかわからない 🙀
48.
Atomic Design 最小単位 <Icon> 状態持つ <Entry> 再利用 <List> 各ページ SPA用
49.
organisms/SpEntry.js organisms/SpBlogInfo.js organisms/SpNavigationBar.js atoms/Icon.js molecules/BloggerThumbnail.js
50.
organisms/SpEntry.js organisms/SpBlogInfo.js organisms/SpNavigationBar.js atoms/Icon.js molecules/BloggerThumbnail.js
51.
Atomic Design Organismのコンポーネントは状態を持てる connectを使って状態を持てる データ取得処理を記述できる
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, };
53.
SSR SPA Isomorphic JavaScript
54.
Isomorphic JavaScript ほとんどJavaScript
55.
Isomorphic JavaScript Action Page Navi Article
Paging Reducer State (Store) % actions/ % components/ % reducers/ % services/ & server.js & client.js ブラウザの入り口 サーバーの入り口 node API
56.
Babel 決まっている未来は、 早めに試そう
57.
Babel http://node.green/
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
61.
Babel 最悪、該当部分だけ書 き直すのは難しくない …はず 😅
62.
ESLint, Stylelint 比較的固めのルールを選択 ガイドラインを明確に eslint-config-airbnb, stylelint-config-standard
63.
ESLint, Stylelint 例えばこんなのもエラー
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
65.
ESLint, Stylelint 個人的な好みはあるが… ルールを統一して一貫性を保つ レビュー時に毎回指摘は気まずい… 😇
66.
CI Pushされたものは 必ずCIテスト を通して 安全性を担保する
67.
CI
68.
Docker node.jsにポータビリティをもたらす
69.
Docker 一度、イメージを作ってしまえば、 複数サーバーへのリリース 切り戻しも簡単
70.
Docker さらに、nodeのアップデートも 簡単
71.
Docker https://nodejs.org/en/download/releases/
72.
Docker FROM node:7.2 Dockerfileを変えるだけ
73.
Docker アメブロでは 極力node最新版を利用する
74.
CI, Lint Semantic Versioning README.md CONTRIBUTING.md PULL_REQUEST_TEMPLATE.md etc. OSSっぽく開発
75.
外でもそのまま使える技術を
76.
! "#表示速度 改善 システム モダン化 UX ver. 2016 GOAL
77.
No more ガタンッ
🎯 ATFのコンテンツの高さを固定 誤タップはモバイルで 最悪のUXのひとつ
78.
No more ガタンッ
🎯
79.
No more ガタンッ
🎯
80.
コンテンツファースト Before After
81.
アクセシビリディ 伊原 力也さん 太田 良典さん
82.
アクセシビリディ https://speakerdeck.com/herablog/ameburowosukurinridadedu-mishang-getemita-2016nian-xia
83.
! "#表示速度 改善 システム モダン化 UX ver. 2016 GOAL
84.
85.
86.
# Business & System✌ GOOD
BOTH '
87.
Desktop version Markup, a11y Design
x Development Webpack2 https, HTTP/2 Service Worker, PWA, etc. Roadmap
88.
https://developers.cyberagent.co.jp/blog/ @ca_developers @herablog
89.
アメブロフロント刷新にみる ひかりとつらみ アメブロ2016
90.
Reduxむずい 😂 新メンバーが理解するまで 最大2ヶ月かかる (当社比) (実装しながらわかってくる)
91.
Lintスパルタ 😂 最初はだいたいCIエラー
92.
アメブロモジュール大杉 😂 文章ママ
93.
周辺技術も大杉 😂
94.
結論 みんなで、頑張ろ😂
95.
🍣🍕🍺🍣🍕🍺🍣🍕 🍺🍣🍕🍺🍣🍕🍺🍣 🍕🍺🍣🍕🍺🍣🍕🍺 🍺🍕🍺🍣🍕🍺🍣🍕 🍕🍺🍕🍺🍣🍕🍺🍣
96.
アメブロフロント刷新にみる ひかりとつらみ Hara Kazunari @herablog アメブロ2016
Download now