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

Martin Hochel

March 02, 2018
Tweet

More Decks by Martin Hochel

Other Decks in Technology

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