Facebook의 테크스택 재구축 이야기
(engineering.fb.com)간단한 PHP로 시작한 페이스북이 이번 새 디자인에 맞게 React + Relay(GraphQL) 로 바꿔온 과정과 교훈
CSS,JS,Data,Navigation 각각에 빠른 앱을 위한 기본원칙 적용
1. 필요한 자원만 최대한 빨리 전송
2. 사용자 경험을 위한 엔지니어링 경험
CSS
- Atomic CSS로 CSS를 80%줄이고, 필요없는 CSS는 다운받지 않게 변경
- 접근성을 위해 rems 사용, px → rems 수동 변환할때의 버그를 줄이기 위해 빌드도구에서 이를 자동 변환
- Theming(다크모드)를 위해 CSS 변수 사용
- 깜박임 방지를 위해 Inline SVG 사용(img 에 SVG파일 넣는 대신). 이를통해 색상 변경도 런타임에서 가능해짐
JS
- 3단계 Code-splitting 한 JS를 단계별로 전송
ㅤTier 1. 로딩시 UI Skeleton을 빠르게 보이기 위한 베이직 레이아웃
ㅤTier 2. 화면에 보이는 모든 콘텐츠를 완전히 렌더링 하기 위한 JS. 완전히 동작가능하고, Tier 2 이후에 코드가 로딩되더라도 화면 구성이 바뀌면 안됨
ㅤTier 3. 화면 출력후 필요한 모든 것. 로깅코드, 실시간 업데이트 구독 등.
- 500KB의 JS가 50KB Tier 1, 150KB Tier 2, 300KB Tier 3 로 분할 → 로딩 및 화면 표시가 매우 빨리 끝나는 효과
- 분할 덕분에 A/B 테스트 시에도 양쪽에서 필요한 코드만 받게 설정이 가능해짐
- Data-Driven React 앱을 만들도록 도와주는 Relay 의 기능을 이용, 어떤 데이터를 가져올 지에 따라 필요한 컴포넌트만 로딩하게 변경
- Product별 JS Budget(예산) 제도를 도입. 성능 목표, 기술적 제약 및 제품 고려사항을 기반으로 예산을 설정. 시간이 흐른뒤에도 코드가 늘어나는 것을 방지.
Data
- Relay 를 이용, 모든 데이터 페칭을 GraphQL 로을 이용하도록 표준화
- Realy 덕분에 페이지 요청단계부터 먼저 필요한 데이터를 병렬로 다운로드. 화면에 빠르게 보여주도록 가능
- GraphQL 내부 확장인 @stream을 이용해서 뉴스피드 같은 걸 여러번의 라운드트립없이 한번의 쿼리로 데이터를 차례차례 보내게 함
- @defer + React Suspense 로 당장 필요하지 않은 데이터는 나중에 로딩하도록
Navigation
- SPA 네비게이션시 새 페이지 로딩할때 자원 로딩 시간및 라운드트립을 줄이기 위해 Route Map을 구성
- 필요할 때마다 최대한 빨리 Route Map에 Route 정보를 분할하여 로딩
- 자원은 가능한 빨리 먼저 프리페칭 (호버시 프리페치, 마우스 다운시 코드와 데이터 가져오고, 클릭이 일어나면 React 상태 변경)
- 네비게이션 간에 빈화면을 보여주는 것 대신, React Suspense 트랜지션을 활용하여 새 Route 가져오기 전에 기존 Route 를 지속해서 보여주기
- EntryPoints ( 코드 분기 포인트 와 데이터 쿼리를 Wrapping 한 작은 파일) 를 이용해서 코드 및 데이터 다운로드를 병렬화
페이스북 새 디자인의 CSS에서 알게된 것들 https://news.hada.io/topic?id=1819
글도 같이 참고하시면 좋습니다.