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
   

   View Slide

2. Martin Hochel
   Principal SE, GDE WEB
   Prague / Czech Republic
   @martin_hotell
   medium.com/@martin_hotell
   github.com/hotell
   

   View Slide

3. What I like about Angular
   

   View Slide

4. What I like about Angular
   Official style guides
   Architecture
   DI
   TypeScript guarantees
   Tooling
   Very tasty!
   

   View Slide

5. What I dislike about Angular
   

   View Slide

6. What I dislike about Angular
   Component model
   Angular modules
   Proprietary DSL + HTML like templates
   Change Detection / Dirty checking
   

   View Slide

7. What I like about React
   

   View Slide

8. What I like about React
   Simple/Robust Component model
   It’s just javascript (functions and classes) #dealWithIt
   Testability
   Mature / Industry standard
   Very tasty!
   

   View Slide

9. What I dislike about React
   

   View Slide

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 ?
    

    View Slide

11. Finding the ultimate solution
    

    View Slide

12. ReAnctular
    

    View Slide

13. Using Angular /good parts/
    for better React
    

    View Slide

14. Episode I
    The TypeScript Menace
    

    View Slide

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
    

    View Slide

16. Episode I: React API + Type safety + DX
    - Component
    - Props
    DEMO
    

    View Slide

17. Episode II
    Attack of the Style Guides
    

    View Slide

18. Episode II: Style guides
    Do
    Consider
    Avoid
    Why?
    

    View Slide

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: ..ts?x
    hero.service.ts class HeroService {}
    counter.hoc.ts function withCounter()
    counter.hook.ts function useCounter()
    AVOID: HeroList.tsx
    

    View Slide

20. Episode II: Style guides - Application structure
    DO: LIFT
    Locate
    Identify
    Flat
    T-Dry
    Root
    Shared
    Core
    Feature
    

    View Slide

21. Episode II: Style guides/patterns - moar
    https://medium.com/@martin_hotell
    

    View Slide

22. Episode III
    Revenge of the DI
    

    View Slide

23. Episode III: Angular DI
    @Injectable()
    class HeroService {}
    constructor injection
    

    View Slide

24. Episode III: React DI
    React.createContext(value)
    Provider
    Consumer
    Provider
    Consumer
    

    View Slide

25. Episode III: Angular DI without Angular
    Injection-js (4kb)
    

    View Slide

26. @martin_hotell/rea-di (1.6kb)
    Episode III: Angular DI with React
    DEMO
    

    View Slide

27. Episode IV
    A new State management hope
    

    View Slide

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}
    }
    

    View Slide

29. Episode IV: Stateful services in React
    import {Stateful, Injectable} from ‘@martin_hotell/rea-di’
    @Injectable()
    class Service extends Stateful {
    state: T
    }
    

    View Slide

30. Episode V
    The HttpClient strikes back
    

    View Slide

31. Episode V: Angular vs React HttpClient
    @angular/common/http
    - provider
    - interceptors
    fetch ( low level )
    Axios ( Angular 1 $http )
    

    View Slide

32. Episode V: injectable Axios
    @martin_hotell/axios-http (0.8kb)
    

    View Slide

33. Episode VI
    Return of the Router
    

    View Slide

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
    

    View Slide

35. Episode VI: Angular like React router config
    @martin_hotell/rr-ear (0.8kb)
    DEMO
    OSS soon !
    

    View Slide

36. Episode VII
    The Observable Awakens
    

    View Slide

37. Episode VII: React with Observables
    YES WE CAN!
    WE EVEN SHOULD!
    DEMO
    

    View Slide

38. Episode VIII
    The Last CLI/Schematic
    

    View Slide

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
    

    View Slide

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
    - generate.modify file based on
    schematic
    ng-new
    ng-add
    upgrade
    schematics
    

    View Slide

41. Episode VIII: Just Schematics
    yarn schematics :
    @angular-devkit/schematics-cli
    @martin_hotell/my-schematics
    component
    functional-component
    hoc
    render-prop-component
    hook
    

    View Slide

42. Episode VIII: Just Schematics
    schematics @martin_hotell/my-schematics:component ./heroes/hero
    /heroes/hero.tsx ===> class Hero extends Component { }
    

    View Slide

43. Episode IX
    ??? WebComponents ???
    

    View Slide

44. Episode IX: WebComponents
    - Angular Elements - SkateJS
    

    View Slide

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
    

    View Slide

46. medium.com/@martin_hotell
    

    View Slide

47. Thanks !
    

    View Slide