Angular 1 nás naučil, co nechceme. jQuery spaghetti nás naučilo, proč potřebujeme framework. React 15 nás naučil, že knihovna na UI komponenty může být základ enterprise aplikace — pokud kolem ní postavíte správný ekosystém.
Proč React a ne Angular 2?¶
Na začátku 2017 stojíme před volbou: Angular 2 (čerstvě přejmenovaný na Angular 4), React nebo Vue.js. Angular nabízí „batteries included” — routing, forms, HTTP klient, dependency injection. React je „just the view layer” — zbytek si složíte sami.
Pro enterprise projekt jsme zvolili React. Důvody: flexibilita (vybereme si vlastní řešení pro routing, state, forms), ekosystém (npm balíčků pro React je řádově více), najímání (React vývojářů je na trhu více než Angular) a inkrementální adopce (React můžete přidat do existující aplikace po částech).
Architektura velkého projektu¶
Náš projekt: interní systém pro banku, 15 vývojářů, 200+ komponent, 40+ obrazovek. Struktura, kterou jsme zvolili:
src/
├── components/ # Sdílené UI komponenty
│ ├── Button/
│ │ ├── Button.jsx
│ │ ├── Button.test.js
│ │ └── Button.css
│ └── DataTable/
├── features/ # Business features (modulární)
│ ├── accounts/
│ │ ├── components/
│ │ ├── containers/
│ │ ├── actions.js
│ │ ├── reducer.js
│ │ └── selectors.js
│ └── transactions/
├── services/ # API klienti, utility
├── store/ # Redux store konfigurace
└── routes/ # React Router definice
Klíčové rozhodnutí: feature-based struktura místo type-based (všechny reducery v jedné složce, všechny akce v jiné). Když vývojář pracuje na „accounts”, má všechno pohromadě.
State management — Redux¶
Redux je v roce 2017 de facto standard pro React state management. Jednosměrný data flow, immutable state, čisté reducer funkce. Pro enterprise aplikaci s komplexním stavem je to záchrana — predictable state, time-travel debugging, middleware pro side effects.
Ale Redux má cenu: boilerplate. Action types, action creators, reducery, selektory — pro jednu feature napíšete 4 soubory než se dostanete k UI. Řešíme to generátory (Plop.js) a konvencemi.
Pro async operace používáme redux-saga. Generátory jsou složitější než thunky, ale testovatelnost a kontrola nad side effects je v enterprise kritická. Saga umí cancel, retry, race conditions — věci, které v thunku řešíte ručně.
Komponentová knihovna¶
S 15 vývojáři potřebujete sdílenou komponentovou knihovnu. Jinak máte 8 různých implementací tlačítka. My jsme postavili interní knihovnu nad React + CSS Modules. Storybook jako dokumentace a playground.
Pravidla: každá komponenta má PropTypes (TypeScript jsme v 2017 ještě nezavedli — zpětně litujeme), unit test, story ve Storybooku. Code review neproběhne bez všech tří.
Testování¶
Jest pro unit testy (rychlý, snapshot testing, mocking). Enzyme pro testování komponent (shallow rendering, mount, simulate events). Snapshot testy pro regresi UI — změníte komponentu, Jest ukáže diff.
Cíl: 80% code coverage na business logice (reducery, selektory, utility). UI komponenty testujeme na chování, ne na implementaci. „Klikni na tlačítko, zkontroluj že se zavolal callback” — ne „zkontroluj že div má třídu active”.
Performance a code splitting¶
200+ komponent = velký bundle. Řešení: React Router code splitting s Webpack 2 dynamic imports. Každá route se načte lazy — initial load pod 200 KB gzipped. Webpack Bundle Analyzer odhalil, že moment.js zabíral 60 KB locale soubory, které nikdo nepoužíval.
React Perf tools (v 2017 ještě React DevTools Profiler neexistuje) pro identifikaci zbytečných re-renderů. Reselect pro memoizované selektory. PureComponent místo Component kde to dává smysl.
Co bychom udělali jinak¶
- TypeScript od začátku — PropTypes nestačí, refactoring 200 komponent bez typů je bolestivý
- CSS-in-JS místo CSS Modules — styled-components by řešily theming elegantněji
- Méně Redux — ne každý state patří do store, lokální state je OK pro formuláře a UI
- Mono-repo — komponentová knihovna v separátním repo přidává friction, Lerna mono-repo by bylo lepší
React v enterprise funguje — s disciplínou¶
React vám nedá strukturu — musíte si ji vytvořit. Konvence, code review, sdílená komponentová knihovna, testovací strategie. Flexibilita Reactu je síla i slabina. Pro malý tým je to svoboda, pro velký tým bez pravidel je to chaos.