Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Use React tools for better Angular apps

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

2d3d5ccc782ff1ecc42eeeb4d8b8ec02?s=128

Martin Hochel

March 02, 2018
Tweet

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