Architektura aplikacji w React.js

Czyli poszukiwania świętego graala.

Jak zaprojektować strukturę plików w aplikacji reactowej?
Co z routingiem? Autoryzacja i uwierzytelnianie?
Redux? Rest API?

Transcript

1. ARCHITEKTURA
   APLIKACJI W
   REAKCIE
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. OK.
    

    View Slide

13. MOGŁEM SIĘ
    TEGO
    SPODZIEWAĆ
    

    View Slide

14. O TO SAMO PYTAJĄ
    MOI KURSANCI
    

    View Slide

15. @MEHOWTE
    MICHAŁ TASZYCKI
    12-TYGODNIOWY
    PROGRAM NAUKI
    DLA POCZĄTKUJĄCYCH
    KursReacta.pl
    

    View Slide

16. OK.
    ZATEM
    ARCHITEKTURA
    

    View Slide

17. CZYLI CO
    WŁAŚCIWIE?
    

    View Slide

18. 1. STRUKTURA PLIKÓW
    2. ZARZĄDZANIE STYLAMI
    3. ZARZĄDZANIE STANEM
    4. WARSTWY ABSTRAKCJI
    5. WZORCE
    

    View Slide

19. STRUKTURA PLIKÓW
    TO ROZWIĄZANY
    PROBLEM
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. ≠
    

    View Slide

26. NO OK.
    TO JAK
    ZACZĄĆ?
    

    View Slide

27. KEEP
    IT
    SIMPLE
    STUPID
    NO OK.
    TO JAK
    ZACZĄĆ?
    

    View Slide

28. index.js
    KEEP
    IT
    SIMPLE
    STUPID
    

    View Slide

29. index.js
    styles.css
    KEEP
    IT
    SIMPLE
    STUPID
    

    View Slide

30. index.js
    styles.css
    

    View Slide

31. index.js
    styles.css
    
    
    
    
    

    View Slide

32. index.js
    styles.css
    
    
    
    
    .App {…};
    .TodoList {…};
    .Todo {…};
    .AddTodoForm {…};
    

    View Slide

33. index.js
    styles.css
    CO
    DALEJ?
    

    View Slide

34. index.js
    styles.css
    THE
    RAILS
    WAY
    

    View Slide

35. index.js
    components/
    styles/
    THE
    RAILS
    WAY
    

    View Slide

36. index.js
    components/
    styles/
    __tests__/
    THE
    RAILS
    WAY
    

    View Slide

37. index.js
    components/
    styles/
    __tests__/
    utilities/
    THE
    RAILS
    WAY
    

    View Slide

38. index.js
    components/
    styles/
    __tests__/
    utilities/
    

    View Slide

39. index.js
    components/
    styles/
    __tests__/
    utilities/
    App.js
    TodoList.js
    Todo.js
    AddTodoForm.js
    

    View Slide

40. index.js
    components/
    styles/
    __tests__/
    utilities/
    main.css
    App.css
    TodoList.css
    Todo.css
    AddTodoForm.css
    

    View Slide

41. index.js
    components/
    styles/
    __tests__/
    utilities/
    SCSS/SASS?
    main.scss
    App.scss
    TodoList.scss
    Todo.scss
    AddTodoForm.scss
    

    View Slide

42. index.js
    components/
    styles/
    __tests__/
    utilities/
    main.scss
    App.scss
    TodoList.scss
    Todo.scss
    AddTodoForm.scss
    @import “App.scss”
    @import “TodoList.scss”
    @import “Todo.js”
    @import “AddTodoForm.scss”
    

    View Slide

43. index.js
    components/
    styles/
    __tests__/
    utilities/
    main.scss
    App.scss
    TodoList.scss
    Todo.scss
    AddTodoForm.scss
    @import “App.scss”
    @import “TodoList.scss”
    @import “Todo.js”
    @import “AddTodoForm.scss”
    

    View Slide

44. App.js import “../styles/App.scss”
    Todo.js import “../styles/Todo.scss”
    WEBPACK IMPORT > SASS IMPORT
    

    View Slide

45. A MOŻE CSS IN JS?
    

    View Slide

46. JASNE, ALE OSTROŻNIE
    

    View Slide

47. PAMIĘTAJ O DESIGNERACH
    

    View Slide

48. PAMIĘTAJ O DESIGNERACH
    

    View Slide

49. index.js
    components/
    styles/
    __tests__/
    utilities/
    components/
    App.js
    TodoList.js
    Todo.js
    AddTodoForm.js
    

    View Slide

50. index.js
    components/
    styles/
    __tests__/
    utilities/
    App.test.js
    TodoList.test.js
    Todo.test.js
    AddTodoForm.test.js
    

    View Slide

51. index.js
    components/
    styles/
    __tests__/
    utilities/
    App.test.js
    TodoList.test.js
    Todo.test.js
    AddTodoForm.test.js
    ŁATWIEJSZE
    WYSZUKIWANIE
    PLIKÓW
    

    View Slide

52. index.js
    components/
    styles/
    __tests__/
    utilities/
    App.test.js
    TodoList.test.js
    Todo.test.js
    AddTodoForm.test.js
    PROSTSZA
    REFAKTORYZACJA
    

    View Slide

53. index.js
    components/
    styles/
    __tests__/
    utilities/
    

    View Slide

54. index.js
    components/
    styles/
    __tests__/
    utilities/
    TO JUŻ
    SUKCES
    

    View Slide

55. index.js
    components/
    styles/
    __tests__/
    utilities/
    MOGŁO BYĆ
    UTILITIES.JS
    

    View Slide

56. index.js
    components/
    styles/
    __tests__/
    utilities/
    CO JEST W
    ŚRODKU?
    

    View Slide

57. index.js
    components/
    styles/
    __tests__/
    utilities/ common_utils.js
    

    View Slide

58. index.js
    components/
    styles/
    __tests__/
    utilities/ common_utils.js
    

    View Slide

59. index.js
    components/
    styles/
    __tests__/
    utilities/ common_utils.js
    

    View Slide

60. index.js
    components/
    styles/
    __tests__/
    utilities/
    time.js
    string.js
    array.js
    

    View Slide

61. index.js
    components/
    styles/
    __tests__/
    utilities/
    THE
    RAILS
    WAY
    

    View Slide

62. index.js
    components/
    styles/
    __tests__/
    utilities/
    JEST TO
    JAKAŚ
    KONWENCJA
    

    View Slide

63. index.js
    components/
    styles/
    __tests__/
    utilities/
    ALE
    NIENAJLEPSZA
    :)
    

    View Slide

64. KOLOKACJA
    

    View Slide

65. KOLOKACJA /
    KOMPONENTO-
    CENTRYCZNOŚĆ
    

    View Slide

66. index.js
    components/
    utilities/
    KOLOKACJA /
    KOMPONENTO-
    CENTRYCZNOŚĆ
    

    View Slide

67. index.js
    components/
    App.js
    App.test.js
    App.scss
    Todo.js
    Todo.test.js
    Todo.scss
    utilities/
    POWIĄZANE
    RZECZY
    BLISKO SIEBIE
    

    View Slide

68. index.js
    components/
    App/
    Todo/
    utilities/
    JESZCZE LEPIEJ
    

    View Slide

69. index.js
    components/
    App/
    App.js
    App.test.js
    App.scss
    Todo/
    utilities/
    import App from “components/App/App”
    MAŁY PROBLEM
    

    View Slide

70. index.js
    components/
    App/
    App.js
    App.test.js
    App.scss
    Todo/
    utilities/
    import App from “components/App”
    

    View Slide

71. index.js
    components/
    App/
    index.js
    App.test.js
    App.scss
    Todo/
    utilities/
    import App from “components/App”
    

    View Slide

72. index.js
    components/
    App/
    index.js
    App.test.js
    App.scss
    Todo/
    utilities/
    import App from “components/App”
    NIE IDŹ
    TĄ DROGĄ
    

    View Slide

73. index.js
    components/
    App/
    index.js
    App.js
    App.test.js
    App.scss
    Todo/
    utilities/
    import App from “components/App”
    LEPIEJ
    

    View Slide

74. index.js
    components/
    App/
    index.js
    App.js
    App.test.js
    App.scss
    Todo/
    utilities/
    import App from “components/App”
    LEPIEJ
    import App from “./App”
    export default App;
    

    View Slide

75. index.js
    components/
    App/
    index.js
    App.js
    App.test.js
    App.scss
    Todo/
    utilities/
    import App from “components/App”
    ALBO
    

    View Slide

76. index.js
    components/
    App/
    package.json
    App.js
    App.test.js
    App.scss
    Todo/
    utilities/
    import App from “components/App”
    ALBO
    

    View Slide

77. index.js
    components/
    App/
    package.json
    App.js
    App.test.js
    App.scss
    Todo/
    utilities/
    import App from “components/App”
    ALBO
    {
    main: “App.js”
    }
    

    View Slide

78. index.js
    components/
    App/
    Todo/

    Button/
    TodoList/
    utilities/
    PŁASKA
    STRUKTURA
    

    View Slide

79. index.js
    components/
    App/
    Todo/

    Button/
    TodoList/
    TodoListItem/
    TodoSearchBar/
    utilities/
    KOMPONENTY
    ZŁOŻONE
    (MAX 3 POZIOMY
    ZAGNIEŻDŻEŃ)
    

    View Slide

80. index.js
    components/
    utilities/
    A CO Z
    ROUTINGIEM?
    

    View Slide

81. index.js
    components/
    pages/
    utilities/
    WZORZEC
    Z NEXT.JS
    

    View Slide

82. index.js
    components/
    pages/
    Root.js
    Settings.js
    utilities/
    WZORZEC
    Z NEXT.JS
    

    View Slide

83. A AUTORYZACJA I
    UWIERZYTELNIANIE?
    

    View Slide

84. JEŚLI MOŻESZ ZRÓB
    LOGOWANIE POZA
    REACTEM
    

    View Slide

85. JEŚLI NIE…
    

    View Slide

86. 2 KOMPONENTY
    

    View Slide

87. 2 KOMPONENTY
    {
    userLoggedIn()
    ?
    :
    }
    

    View Slide

88. LEPIEJ
    const AuthenticatedApp = React.lazy(() =>
    import(“./AuthenticatedApp”)
    );
    {
    userLoggedIn()
    ?
    
    
    :
    }
    

    View Slide

89. CO Z REST API?
    

    View Slide

90. function TodoList() {
    useEffect(() => {
    fetch("example.com/todos", {
    method: “get”
    }).then( /* … */ );
    }, [])
    }
    POJEDYNCZE REQUESTY
    

    View Slide

91. import TodosAPI from “api/todos”;
    function TodoList() {
    useEffect(() => {
    TodosAPI.getAllTodos().then( /* … */ );
    }, [])
    }
    FASADA DLA API
    

    View Slide

92. TodosAPI = {
    getAllTodos: () => {
    fetch("example.com/todos", {
    method: “get”
    }).then( /* … */ );
    }
    };
    FASADA DLA API
    

    View Slide

93. import TodosAPI from “api/TodosAPI”;
    import apiClient from “api/FetchClient”;
    function TodoList() {
    useEffect(() => {
    new TodosAPI(apiClient)
    .getAllTodos()
    .then( /* … */ );
    }, [])
    }
    ADAPTER DLA API
    

    View Slide

94. import TodosAPI from “api/TodosAPI”;
    import apiClient from “api/FakeClient”;
    function TodoList() {
    useEffect(() => {
    new TodosAPI(apiClient)
    .getAllTodos()
    .then( /* … */ );
    }, [])
    }
    ADAPTER DLA API
    

    View Slide

95. ADAPTER DLA API
    class TodosAPI
    constructor(client) {
    this.client = client;
    }
    getAllTodos: () => {
    this.client.getAll("example.com/todos");
    }
    };
    

    View Slide

96. Client = {
    getAll: function (url) {…},
    getOne: function (url, id) {…},
    post: function (url, payload) {…},
    put: function (url, id, payload) {…},
    patch: function (url, id, payload) {…},
    delete: function (url, id) {…},
    }
    ADAPTER DLA API
    

    View Slide

97. REDUX?
    

    View Slide

98. LOGIKA
    NIEZALEŻNA
    OD REACTA
    

    View Slide

99. SPÓJNE NAZEWNICTWO
    TYPÓW I GENERATORÓW AKCJI
    TODO_ADD addTodo(todo)
    TODO_EDIT editTodo(todo)
    TODO_REPLACE replaceTodo(todo)
    TODO_DELETE deleteTodo(todo)
    

    View Slide

100. WARTO MIEĆ WSZYSTKIE
     TYPY AKCJI W JEDNYM PLIKU
     TODO_ADD addTodo(todo)
     TODO_EDIT editTodo(todo)
     TODO_REPLACE replaceTodo(todo)
     TODO_DELETE deleteTodo(todo)
     

     View Slide

101. KOLOKACJA SELECTORÓW
     I REDUCERÓW
     todosReducer = (state = [], action) {
     switch(action.type) {
     case TODO_ADD:
     return […state, action.todo];
     }
     }
     getAllTodos(state) => state;
     getTodoById(state, id) =>
     state.find(todo => todo.id === id)
     

     View Slide

102. TESTOWANIE BLACK BOX
     it(“Adds a todo”, () => {
     const todoToAdd = {id: 42, title: “abc”};
     store.dispatch(addTodo(todoToAdd));
     expect(
     getTodoById(store.getState(), 42)
     ).toEq(todoToAdd);
     }
     

     View Slide

103. TO TYLKO
     WIERZCHOŁEK GÓRY
     LODOWEJ
     

     View Slide

104. GRAPH QL
     MOBX
     MICROSERVICES
     MICROFRONTENDS
     SERVER-SIDE-RENDERING
     REACT-NATIVE
     

     View Slide

105. TRZYMAJ SIĘ
     PROSTYCH
     ZASAD
     

     View Slide

106. 1. ZACZNIJ NAJPROŚCIEJ
     2. DBAJ O SPÓJNOŚĆ
     3. WPROWADZAJ ZMIANY
     

     View Slide

107. View Slide

108. AND CODE
     

     View Slide