Use React tools for better Angular apps

Angular, React, Vue… they all have their own ecosystem, specific patterns and best practices… For us, the developers, this might become indeed very frustrating as we have to switch between various projects with various libraries… Have no fear, universal solution is here! In this session I will show you how to learn libraries/patterns/tooling only once and apply it everywhere. 💃

Transcript

1. React tools
   for better
   Angular apps Martin Hochel
   @martin_hotell
   

   View Slide

2. Hello Vikings !
   ▪ @ngPartyCz meetup founder
   ▪ Author of ngMetadata
   ▪ Member of @skate_js, @ngParty
   ▪
   ▪
   Martin Hochel
   Principal SE, GDE
   Prague / Czech Republic
   @martin_hotell
   github.com/Hotell
   

   View Slide

3. Fight !
   

   View Slide

4. Fight
   leads
   to the dark side
   Twi r ne m a s
   

   View Slide

5. We can be all friends !
   

   View Slide

6. How ?
   

   View Slide

7. Tools Architecture
   Libraries
   

   View Slide

8. Baseline
   

   View Slide

9. CLI Tools
   Libraries
   Architecture
   

   View Slide

10. Disclaimer: Tombstones ahead
    sorry about that
    

    View Slide

11. Tools
    

    View Slide

12. Task runner/package manager
    

    View Slide

13. Tools: task runner
    

    View Slide

14. Tools: task runner
    

    View Slide

15. Tools: package manager
    

    View Slide

16. Formatting
    

    View Slide

17. Tools: Formatting
    T li
    

    View Slide

18. Tools: Formatting
    

    View Slide

19. Tools: Formatting conflicts with linter
    

    View Slide

20. Tools: Formatting - let robots do the work
    

    View Slide

21. Unit Testing
    

    View Slide

22. Unit Testing
    Kar
    Jas
    

    View Slide

23. Unit testing
    

    View Slide

24. Unit testing: add Jest to @angular/cli
    

    View Slide

25. Unit testing: speed
    karma-chrome:
    14.911s
    karma-phantomjs:
    13.119s
    jest:
    4.970s
    

    View Slide

26. Unit testing: Jest - Snapshots
    

    View Slide

27. Unit testing: Jest - Interactive watch mode
    

    View Slide

28. Unit testing: Jest - much more awesomeness
    - Powerful mocking features ( ES2015 mo s, as s )
    - Code coverage - 0CJS `jest --coverage`
    - Pluggable ( run Puppeteer with Jest )
    - Huge ecosystem
    - jest-axe ( a11y )
    - jest-images-snapshots
    

    View Slide

29. E2E Testing
    

    View Slide

30. E2E Testing
    Pro c
    Sel u
    

    View Slide

31. E2E Testing
    A node.js tool to automate
    end-to-end web testing
    

    View Slide

32. E2E Testing: add TestCafe to @angular/cli
    

    View Slide

33. E2E
    demo
    

    View Slide

34. E2E Testing: summary
    - TestCafe ( Fast, 100% reliable, just NodeJS ! )
    - Windows, MacOS, Linux
    - Chrome, Firefox, Safari, Opera, Edge, IE, Custom
    - CI integration
    - TypeScript
    

    View Slide

35. Components
    development/catalogue
    

    View Slide

36. Components development
    

    View Slide

37. Storybook
    

    View Slide

38. Components dev:
    add Storybook to @angular/cli
    

    View Slide

39. Storybook: write a Story
    

    View Slide

40. Storybook: Component stories
    

    View Slide

41. Tooling: Summary
    Tools
    Tools
    

    View Slide

42. Architecture
    

    View Slide

43. Components
    

    View Slide

44. Components: architecture
    HOC f(C)=> C.f @Directive
    React.Component @Component
    CSS / CSS in JS Inline CSS
    render ( JSX ) Inline template
    Immutable props ChangeDetectionStrategy.OnPush
    

    View Slide

45. Components: architecture
    Sta s om n
    Sta l o p t
    

    View Slide

46. Vikings
    

    View Slide

47. State Management
    ● Redux
    ● Epics for handling side effects ( Rx )
    

    View Slide

48. State Management: side effects via Epic
    Component
    Reducer
    Action
    State
    Epic
    Service
    Server
    Action
    Actions in,
    Actions out
    Action
    

    View Slide

49. Libraries
    

    View Slide

50. Libraries: Redux
    

    View Slide

51. Libraries: Epics
    

    View Slide

52. Libraries: Axios
    

    View Slide

53. Summary
    

    View Slide

54. Summary
    - Common
    - Tools
    - Architecture
    - Libraries
    Kar
    Jas
    T li
    Pro c
    Sel u
    

    View Slide

55. Better CLI Tools
    Libraries
    Architecture
    ● Immutable
    ● Reactive one way
    data flow
    

    View Slide

56. Summary: OSS
    ● Starter
    ● Example app
    

    View Slide

57. Summary: TODO
    ● Custom Angular CLI Schematics !
    

    View Slide

58. Summary: BFF
    

    View Slide

59. New Friends !
    

    View Slide

60. Thank you !
    Martin Hochel
    @martin_hotell
    

    View Slide