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
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
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
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
39. Storybook: write a Story
40. Storybook: Component stories
41. Tooling: Summary Tools Tools
42. Architecture
43. Components
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
45. Components: architecture Sta s om n Sta l o p t
46. Vikings
47. State Management • Redux • Epics for handling side effects ( Rx )
48. State Management: side effects via Epic Component Reducer Action State Epic Service Server Action Actions in, Actions out Action
49. Libraries
50. Libraries: Redux
51. Libraries: Epics
52. Libraries: Axios
53. Summary
54. Summary - Common - 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
57. Summary: TODO • Custom Angular CLI Schematics !
58. Summary: BFF
59. New Friends !
60. Thank you ! Martin Hochel @martin_hotell