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

Architektura aplikacji w React.js

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?

85977ebfe59c2ee669f2196930f1a701?s=128

Michał Taszycki

August 31, 2019
Tweet

Transcript

  1. ARCHITEKTURA APLIKACJI W REAKCIE

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. OK.

  13. MOGŁEM SIĘ TEGO SPODZIEWAĆ

  14. O TO SAMO PYTAJĄ MOI KURSANCI

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

  16. OK. ZATEM ARCHITEKTURA

  17. CZYLI CO WŁAŚCIWIE?

  18. 1. STRUKTURA PLIKÓW 2. ZARZĄDZANIE STYLAMI 3. ZARZĄDZANIE STANEM 4.

    WARSTWY ABSTRAKCJI 5. WZORCE
  19. STRUKTURA PLIKÓW TO ROZWIĄZANY PROBLEM

  20. None
  21. None
  22. None
  23. None
  24. None
  25. NO OK. TO JAK ZACZĄĆ?

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

  27. index.js KEEP IT SIMPLE STUPID

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

  29. index.js styles.css

  30. index.js styles.css <App /> <TodoList /> <Todo /> <AddTodoForm />

  31. index.js styles.css <App /> <TodoList /> <Todo /> <AddTodoForm />

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

  33. index.js styles.css THE RAILS WAY

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

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

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

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

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

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

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

    AddTodoForm.scss
  41. 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”
  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”
  43. App.js import “../styles/App.scss” Todo.js import “../styles/Todo.scss” WEBPACK IMPORT > SASS

    IMPORT
  44. A MOŻE CSS IN JS?

  45. JASNE, ALE OSTROŻNIE

  46. PAMIĘTAJ O DESIGNERACH

  47. PAMIĘTAJ O DESIGNERACH

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

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

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

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

    REFAKTORYZACJA
  52. index.js components/ styles/ __tests__/ utilities/

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

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

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

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

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

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

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

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

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

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

  63. KOLOKACJA

  64. KOLOKACJA / KOMPONENTO- CENTRYCZNOŚĆ

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

  66. index.js components/ App.js App.test.js App.scss Todo.js Todo.test.js Todo.scss utilities/ POWIĄZANE

    RZECZY BLISKO SIEBIE
  67. index.js components/ App/ Todo/ utilities/ JESZCZE LEPIEJ

  68. index.js components/ App/ App.js App.test.js App.scss Todo/ utilities/ import App

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

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

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

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

    App from “components/App” LEPIEJ
  73. 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;
  74. index.js components/ App/ index.js App.js App.test.js App.scss Todo/ utilities/ import

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

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

    App from “components/App” ALBO { main: “App.js” }
  77. index.js components/ App/ Todo/
 Button/ TodoList/ utilities/ PŁASKA STRUKTURA

  78. index.js components/ App/ Todo/
 Button/ TodoList/ TodoListItem/ TodoSearchBar/ utilities/ KOMPONENTY

    ZŁOŻONE (MAX 3 POZIOMY ZAGNIEŻDŻEŃ)
  79. index.js components/ utilities/ A CO Z ROUTINGIEM?

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

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

  82. A AUTORYZACJA I UWIERZYTELNIANIE?

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

  84. JEŚLI NIE…

  85. 2 KOMPONENTY

  86. 2 KOMPONENTY { userLoggedIn() ? <AuthenticatedApp /> : <UnauthenticatedApp />

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

    ? <React.Suspense fallback={"... Loading”}> <AuthenticatedApp /> </React.Suspense> : <UnauthenticatedApp /> }
  88. CO Z REST API?

  89. function TodoList() { useEffect(() => { fetch("example.com/todos", { method: “get”

    }).then( /* … */ ); }, []) } POJEDYNCZE REQUESTY
  90. import TodosAPI from “api/todos”; function TodoList() { useEffect(() => {

    TodosAPI.getAllTodos().then( /* … */ ); }, []) } FASADA DLA API
  91. TodosAPI = { getAllTodos: () => { fetch("example.com/todos", { method:

    “get” }).then( /* … */ ); } }; FASADA DLA API
  92. import TodosAPI from “api/TodosAPI”; import apiClient from “api/FetchClient”; function TodoList()

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

    { useEffect(() => { new TodosAPI(apiClient) .getAllTodos() .then( /* … */ ); }, []) } ADAPTER DLA API
  94. ADAPTER DLA API class TodosAPI constructor(client) { this.client = client;

    } getAllTodos: () => { this.client.getAll("example.com/todos"); } };
  95. 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
  96. REDUX?

  97. LOGIKA NIEZALEŻNA OD REACTA

  98. 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)
  99. WARTO MIEĆ WSZYSTKIE TYPY AKCJI W JEDNYM PLIKU TODO_ADD addTodo(todo)

    TODO_EDIT editTodo(todo) TODO_REPLACE replaceTodo(todo) TODO_DELETE deleteTodo(todo)
  100. 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)
  101. TESTOWANIE BLACK BOX it(“Adds a todo”, () => { const

    todoToAdd = {id: 42, title: “abc”}; store.dispatch(addTodo(todoToAdd)); expect( getTodoById(store.getState(), 42) ).toEq(todoToAdd); }
  102. TO TYLKO WIERZCHOŁEK GÓRY LODOWEJ

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

  104. TRZYMAJ SIĘ PROSTYCH ZASAD

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

  106. None
  107. AND CODE