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
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
25. ≠
26. NO OK. TO JAK ZACZĄĆ?
27. KEEP IT SIMPLE STUPID NO OK. TO JAK ZACZĄĆ?
28. index.js KEEP IT SIMPLE STUPID
29. index.js styles.css KEEP IT SIMPLE STUPID
30. index.js styles.css
31. index.js styles.css <App /> <TodoList /> <Todo /> <AddTodoForm />
32. index.js styles.css <App /> <TodoList /> <Todo /> <AddTodoForm /> .App {…}; .TodoList {…}; .Todo {…}; .AddTodoForm {…};
33. index.js styles.css CO DALEJ?
34. index.js styles.css THE RAILS WAY
35. index.js components/ styles/ THE RAILS WAY
36. index.js components/ styles/ __tests__/ THE RAILS WAY
37. index.js components/ styles/ __tests__/ utilities/ THE RAILS WAY
38. index.js components/ styles/ __tests__/ utilities/
39. index.js components/ styles/ __tests__/ utilities/ App.js TodoList.js Todo.js AddTodoForm.js
40. index.js components/ styles/ __tests__/ utilities/ main.css App.css TodoList.css Todo.css AddTodoForm.css
41. index.js components/ styles/ __tests__/ utilities/ SCSS/SASS? main.scss App.scss TodoList.scss Todo.scss 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. 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”
44. App.js import “../styles/App.scss” Todo.js import “../styles/Todo.scss” WEBPACK IMPORT > SASS IMPORT
45. A MOŻE CSS IN JS?
46. JASNE, ALE OSTROŻNIE
47. PAMIĘTAJ O DESIGNERACH
48. PAMIĘTAJ O DESIGNERACH
49. index.js components/ styles/ __tests__/ utilities/ components/ App.js TodoList.js Todo.js AddTodoForm.js
50. index.js components/ styles/ __tests__/ utilities/ App.test.js TodoList.test.js Todo.test.js AddTodoForm.test.js
51. index.js components/ styles/ __tests__/ utilities/ App.test.js TodoList.test.js Todo.test.js AddTodoForm.test.js ŁATWIEJSZE WYSZUKIWANIE PLIKÓW
52. index.js components/ styles/ __tests__/ utilities/ App.test.js TodoList.test.js Todo.test.js AddTodoForm.test.js PROSTSZA REFAKTORYZACJA
53. index.js components/ styles/ __tests__/ utilities/
54. index.js components/ styles/ __tests__/ utilities/ TO JUŻ SUKCES
55. index.js components/ styles/ __tests__/ utilities/ MOGŁO BYĆ UTILITIES.JS
56. index.js components/ styles/ __tests__/ utilities/ CO JEST W ŚRODKU?
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/ common_utils.js
60. index.js components/ styles/ __tests__/ utilities/ time.js string.js array.js
61. index.js components/ styles/ __tests__/ utilities/ THE RAILS WAY
62. index.js components/ styles/ __tests__/ utilities/ JEST TO JAKAŚ KONWENCJA
63. index.js components/ styles/ __tests__/ utilities/ ALE NIENAJLEPSZA :)
64. KOLOKACJA
65. KOLOKACJA / KOMPONENTO- CENTRYCZNOŚĆ
66. index.js components/ utilities/ KOLOKACJA / KOMPONENTO- CENTRYCZNOŚĆ
67. index.js components/ App.js App.test.js App.scss Todo.js Todo.test.js Todo.scss utilities/ POWIĄZANE RZECZY BLISKO SIEBIE
68. index.js components/ App/ Todo/ utilities/ JESZCZE LEPIEJ
69. index.js components/ App/ App.js App.test.js App.scss Todo/ utilities/ import App from “components/App/App” MAŁY PROBLEM
70. index.js components/ App/ App.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”
72. index.js components/ App/ index.js App.test.js App.scss Todo/ utilities/ import App from “components/App” NIE IDŹ TĄ DROGĄ
73. index.js components/ App/ index.js App.js App.test.js App.scss Todo/ utilities/ import App from “components/App” LEPIEJ
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;
75. index.js components/ App/ index.js 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
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” }
78. index.js components/ App/ Todo/
 Button/ TodoList/ utilities/ PŁASKA STRUKTURA
79. index.js components/ App/ Todo/
 Button/ TodoList/ TodoListItem/ TodoSearchBar/ utilities/ KOMPONENTY ZŁOŻONE (MAX 3 POZIOMY ZAGNIEŻDŻEŃ)
80. index.js components/ utilities/ A CO Z ROUTINGIEM?
81. index.js components/ pages/ utilities/ WZORZEC Z NEXT.JS
82. index.js components/ pages/ Root.js Settings.js utilities/ WZORZEC Z NEXT.JS
83. A AUTORYZACJA I UWIERZYTELNIANIE?
84. JEŚLI MOŻESZ ZRÓB LOGOWANIE POZA REACTEM
85. JEŚLI NIE…
86. 2 KOMPONENTY
87. 2 KOMPONENTY { userLoggedIn() ? <AuthenticatedApp /> : <UnauthenticatedApp /> }
88. LEPIEJ const AuthenticatedApp = React.lazy(() => import(“./AuthenticatedApp”) ); { userLoggedIn() ? <React.Suspense fallback={"... Loading”}> <AuthenticatedApp /> </React.Suspense> : <UnauthenticatedApp /> }
89. CO Z REST API?
90. function TodoList() { useEffect(() => { fetch("example.com/todos", { method: “get” }).then( /* … */ ); }, []) } POJEDYNCZE REQUESTY
91. import TodosAPI from “api/todos”; function TodoList() { useEffect(() => { TodosAPI.getAllTodos().then( /* … */ ); }, []) } FASADA DLA API
92. TodosAPI = { getAllTodos: () => { fetch("example.com/todos", { method: “get” }).then( /* … */ ); } }; FASADA DLA API
93. import TodosAPI from “api/TodosAPI”; import apiClient from “api/FetchClient”; function TodoList() { useEffect(() => { new TodosAPI(apiClient) .getAllTodos() .then( /* … */ ); }, []) } ADAPTER DLA API
94. import TodosAPI from “api/TodosAPI”; import apiClient from “api/FakeClient”; function TodoList() { useEffect(() => { new TodosAPI(apiClient) .getAllTodos() .then( /* … */ ); }, []) } ADAPTER DLA API
95. ADAPTER DLA API class TodosAPI constructor(client) { this.client = client; } getAllTodos: () => { this.client.getAll("example.com/todos"); } };
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
97. REDUX?
98. LOGIKA NIEZALEŻNA OD REACTA
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)
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)
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)
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); }
103. TO TYLKO WIERZCHOŁEK GÓRY LODOWEJ
104. GRAPH QL MOBX MICROSERVICES MICROFRONTENDS SERVER-SIDE-RENDERING REACT-NATIVE
105. TRZYMAJ SIĘ PROSTYCH ZASAD
106. 1. ZACZNIJ NAJPROŚCIEJ 2. DBAJ O SPÓJNOŚĆ 3. WPROWADZAJ ZMIANY
108. AND CODE