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. 🖖

1. React tools
for better
Angular apps
Martin Hochel
@martin_hotell
Angular Dragons
Kraków, PL

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

3. Fight !

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

5. We can be all friends !

6. How ?

7. Tools Architecture
Libraries

8. Baseline

9. CLI Tools
Libraries
Architecture

10. Disclaimer: Tombstones ahead
sorry about that

11. Tools

12. Task runner/package manager

13. Tools: task runner

14. Tools: task runner

15. Tools: package manager

16. Formatting

17. Tools: Formatting
T li

18. Tools: Formatting

19. Tools: Formatting conflicts with linter

20. Tools: Formatting - let robots do the work

21. Unit Testing

22. Unit Testing
Kar
Jas

23. Unit testing

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

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

26. Unit testing: Jest - Snapshots

27. Unit testing: Jest - Interactive watch mode

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

29. E2E Testing

30. E2E Testing
Pro c
Sel u

31. E2E Testing
A node.js tool to automate
end-to-end web testing
Ultimate cure for your E2E testing sickness,
MUDr. TestCafe ⚕

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

33. E2E
demo

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

35. Components
development/catalogue

36. Components development

37. Storybook

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

40. Storybook: write a Story

41. Storybook: Component stories

42. Architecture

43. Components

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

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

46. Dragons

47. State Management: types
Context API @Injectable
this.state @Component/@Directive
FLUX( Redux ) FLUX( Redux )

48. Libraries

49. Libraries: Redux

50. Libraries: Handling side effects

51. Handling side effects via Epic
Component
Reducer
Action
State
Epic
Service
Server
Action
Actions in,
Actions out
Action

52. Libraries: Axios

53. Summary

54. Summary: What did we learn today ?
- Common JS ecosystem:
- Tools
- Architecture
- Libraries
Kar
Jas
T li
Pro c
Sel u

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

56. Summary: OSS
● Starter
● Example app
● Article

57. Summary: OSS @TODO Martin
● Custom Angular CLI Schematics ! ( that you’re looking for )

58. Summary: BFF

59. Thank you ! Martin Hochel
@martin_hotell