Web aplikacije budućnosti - React ekosistem

Uvod u ReactJS ekosistem, tehnologije i alate koji se koriste.

Transcript

1. Web aplikacije budućnosti React ekosistem Ilija Tešić Software engineer @ Klika
2. Evolucija www HTML CSS DHTML, JavaScript Dynamic Web Pages SPA ???
4. Gomila nepoznatih pojmova • JS engine • DOM • Transpiling • Bundling • Linter • API • JSON • ES6 • Pure functions • Git • lodash • Arrow funkcije • Spread operator • . . .
5. React ekosistem • Dependency management ◦ npm ili yarn • User Interface ◦ React • State management ◦ Redux • Routing ◦ React router • Transpiling and bundling ◦ Babel ◦ Webpack • Testing ◦ Jest i Enzyme
6. Dependency management • JS moduli • Node biblioteke • package.json
7. User Interface • React je UI biblioteka (nije framework) • Zasnovan je na komponentama • Virtual DOM • One way data binding • JSX • Controlled inputs
8. State management • Predictable state container for JS apps • Store • Actions • Reducers • Ključni principi ◦ Single source of truth ◦ State is read only ◦ Changes are made with pure functions
9. Routing • React router omogućava rutiranje unutar SPA • Redirekcija • Error pages
10. Transpiling and bundling • Webpack povezuje sve module u jedan* bundle • Babel pretvara ES6* kod u JS koji je podržan u svakom okruženju • Hot reload • Webpack dev server
11. Zašto biste koristili React? • Arhitektura je zasnovana na komponentama • Veoma je brz jer ima Virtual DOM • Nije framework tako da nema bespotrebnih stvari • Mogu se pisati mobilne aplikacije (React Native) • JSX je deklarativan i lak za razumjevanje • Lako testiranje komponenti • Facebook stoji iza njega • Ogromna zajednica razvija React i ostale module
12. Ilija Tešić Software engineer @ Klika @itesic ilija.tesic@klika.ba