Use Angular for better React apps

Angular is a fantastic piece of technology focused on huge apps/teams and enterprise solutions. While that’s nice and everything it’s a huge power plant with non trivial complexity, which you might not need/want, especially on component level...
React, though, does one thing and does it very well - building components…
With that said what if we took the good parts of Angular and incorporate them with React to get ultimate solution for building apps with top notch developer experience ? In this session I’ll show you how to do it ⚛⚛⚛.

Transcript

1. Use Angular for better React apps Martin Hochel @martin_hotell FrontendCon, PL
2. Martin Hochel Principal SE, GDE WEB Prague / Czech Republic @martin_hotell medium.com/@martin_hotell github.com/hotell
3. What I like about Angular
4. What I like about Angular Official style guides Architecture DI TypeScript guarantees Tooling Very tasty!
5. What I dislike about Angular
6. What I dislike about Angular Component model Angular modules Proprietary DSL + HTML like templates Change Detection / Dirty checking
7. What I like about React
8. What I like about React Simple/Robust Component model It’s just javascript (functions and classes) #dealWithIt Testability Mature / Industry standard Very tasty!
9. What I dislike about React
10. What I dislike about React No official style-guides No official libraries - 200 routers, 100 state management libs… TypeScript ? eh? Flow? Maybe.Just.Nothing ?
11. Finding the ultimate solution
12. ReAnctular
13. Using Angular /good parts/ for better React
14. Episode I The TypeScript Menace
15. Episode I: TypeScript Setup yarn add -D typescript yarn add -D @types/{react,react-dom} yarn tsc --init --moduleResolution node --jsx react --module ESNext --lib dom,es2015
16. Episode I: React API + Type safety + DX - Component - Props DEMO
17. Episode II Attack of the Style Guides
18. Episode II: Style guides Do Consider Avoid Why?
19. Episode II: Style guides - naming (symbols/file names) DO: hero-list.tsx class HeroList extends Component { } WHY? readable file names. e.g MyHalfFixedDedupedDirResolver vs my-half-fixed-deduped-dir-resolver CONSIDER: <feature>.<type>.ts?x hero.service.ts class HeroService {} counter.hoc.ts function withCounter() counter.hook.ts function useCounter() AVOID: HeroList.tsx
20. Episode II: Style guides - Application structure DO: LIFT Locate Identify Flat T-Dry Root Shared Core Feature
21. Episode II: Style guides/patterns - moar https://medium.com/@martin_hotell
22. Episode III Revenge of the DI
23. Episode III: Angular DI @Injectable() class HeroService {} constructor injection
24. Episode III: React DI React.createContext(value) Provider Consumer Provider Consumer
25. Episode III: Angular DI without Angular Injection-js (4kb)
26. @martin_hotell/rea-di (1.6kb) Episode III: Angular DI with React DEMO
27. Episode IV A new State management hope
28. Episode IV: Angular vs React State @Component() class CounterComponent { count = 0 after = 3 } @Injectable() class CounterService { count = 0 after = 3 } class Counter extends Component { state = {count:0} }
29. Episode IV: Stateful services in React import {Stateful, Injectable} from ‘@martin_hotell/rea-di’ @Injectable() class Service extends Stateful<T> { state: T }
30. Episode V The HttpClient strikes back
31. Episode V: Angular vs React HttpClient @angular/common/http - provider - interceptors fetch ( low level ) Axios ( Angular 1 $http )
32. Episode V: injectable Axios @martin_hotell/axios-http (0.8kb)
33. Episode VI Return of the Router
34. Static Router Config Absolute/Relative path Router Outlet Lazy loading Episode VI: Angular vs React router Declarative component routing Absolute path only handling of 404 / exact
35. Episode VI: Angular like React router config @martin_hotell/rr-ear (0.8kb) DEMO OSS soon !
36. Episode VII The Observable Awakens
37. Episode VII: React with Observables YES WE CAN! WE EVEN SHOULD! DEMO
38. Episode VIII The Last CLI/Schematic
39. Episode VIII: The Last CLI/Schematic Angular CLI - Core - @angular-devkit/core - Architect - @angular-devkit/architect - @angular-devkit/architect-cli - Builder - @angular-devkit/build-webpack - Schematics - @angular-devkit/schematics - @angular-devkit/schematics-cli
40. Episode VIII: Angular Schematics - ng new - scaffold new app - ng add - add 3rd party library and setup - ng upgrade - update core libraries - ng generate <schematic> - generate.modify file based on schematic ng-new ng-add upgrade schematics
41. Episode VIII: Just Schematics yarn schematics <schematic-name>:<generator-name> <arguments> @angular-devkit/schematics-cli @martin_hotell/my-schematics component functional-component hoc render-prop-component hook
42. Episode VIII: Just Schematics schematics @martin_hotell/my-schematics:component ./heroes/hero /heroes/hero.tsx ===> class Hero extends Component { }
43. Episode IX ??? WebComponents ???
44. Episode IX: WebComponents - Angular Elements - SkateJS
45. Summary Leverage the best parts of Angular within React Apps + type safety + common style guides / patterns + robust Dependency Injection + Reactivity via Observables + CLI / productivity / refactoring / updates = Enterprise Ready
46. medium.com/@martin_hotell
47. Thanks !