Огляд архітектури повноцінного стеку застосунків: клієнт взаємодіє з сервером через веб-сервіси. Сервер керує зберіганням даних за допомогою баз даних, оптимізує продуктивність за допомогою кешувальних сервісів і зберігає файли в системі блочного зберігання.
У сучасному світі веб-розробки створення масштабованих і високопродуктивних веб-застосунків є критично важливим для успіху. Якщо ви хочете створювати застосунки, які здатні обробляти більше користувачів, даних і запитів без проблем, ключем до цього є правильне поєднання технологій. Одним із найпопулярніших стеків для створення масштабованих повноцінних веб-застосунків сьогодні є React для фронтенду та Spring Boot для бекенду.
У цьому блозі ми розглянемо кілька кращих практик для розробки повноцінних застосунків з використанням React і Spring Boot.
Ми також розглянемо поради щодо управління станом за допомогою Redux, створення ефективних REST API та інтеграції з базами даних, такими як MySQL чи PostgreSQL.
Що таке React?
React — це бібліотека JavaScript для створення користувацьких інтерфейсів, особливо для односторінкових застосунків (SPA). Вона дозволяє створювати повторно використовувані компоненти, що значно полегшує розробку складних інтерфейсів. React здобув популярність завдяки своїй компонентній архітектурі, віртуальному DOM та оптимізаціям продуктивності.
Що таке Spring Boot?
Spring Boot — це фреймворк для створення бекенд-застосунків на Java. Він спрощує процес налаштування та конфігурації Spring-застосунків, дозволяючи розробникам більше зосереджуватись на написанні бізнес-логіки. Spring Boot постачається з вбудованими інструментами для легкого створення RESTful API, інтеграції з базами даних та масштабування застосунків.
Сполучення React і Spring Boot: ідеальний тандем
Разом React і Spring Boot утворюють потужне поєднання для створення масштабованих, високопродуктивних веб-застосунків.
React обробляє фронтенд, роблячи його інтерактивним та адаптивним, в той час як Spring Boot обробляє бекенд, керуючи даними та бізнес-логікою. Ось як ви можете ефективно використовувати ці технології.
Найкращі практики для розробки повноцінних веб-застосунків
1. Управління станом за допомогою Redux
Управління станом — це один з найважливіших аспектів розробки на React. Для малих застосунків вбудоване управління станом в React працює добре. Однак при створенні більших і складніших застосунків керування станом між різними компонентами може стати складним. Тут на допомогу приходить Redux.
Redux — це бібліотека для управління станом, яка допомагає вам керувати станом застосунку в передбачуваний спосіб. Використовуючи єдиний глобальний магазин (store), Redux дозволяє всім вашим компонентам доступати та оновлювати стан послідовним чином.
Найкращі практики для Redux:
- Використовуйте Redux Toolkit: Redux Toolkit — це рекомендований спосіб написання логіки Redux.
Це спрощує багато завдань, таких як створення редьюсерів (reducers) і дій (actions), і включає корисні функції для уникнення зайвого коду.
Приклад налаштування Redux Toolkit:
// store.js
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './features/userSlice';
export const store = configureStore({
reducer: {
user: userReducer,
},
});
- Використовуйте Slice для управління станом: В Redux Toolkit ви можете використовувати
createSliceдля визначення дій та редьюсерів (reducers) більш простим та зрозумілим способом.
Приклад створення slice для користувача:
// userSlice.js
import { createSlice } from '@reduxjs/toolkit';
export const userSlice = createSlice({
name: 'user',
initialState: {
name: '',
email: '',
},
reducers: {
setUser: (state, action) => {
state.name = action.payload.name;
state.email = action.payload.email;
},
},
});
export const { setUser } = userSlice.actions;
export default userSlice.reducer;
2.
Створення ефективних REST API з Spring Boot
Бекенд-додаток, який працює на Spring Boot, може легко надавати RESTful API, що взаємодіють з фронтендом. Однак важливо дотримуватись кращих практик для забезпечення ефективності, масштабованості та безпеки API.
Кращі практики для REST API:
- Правильне використання HTTP статус-кодів: Переконайтесь, що ваш API повертає правильні HTTP статус-коди. Наприклад, 200 для успішних запитів, 404 для невідомих ресурсів, і 500 для помилок сервера.
Це допомагає клієнтам зрозуміти результат їхніх запитів.
Приклад простого REST контролера (REST Controller) у Spring Boot:
// UserController.java
package com.example.demo.controller;
import com.example.demo.model.User;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/api/users")
public class UserController {
@Autowired
private UserService userService;
@GetMapping
public List getAllUsers() {
return userService.getAllUsers();
}
@PostMapping
public User createUser(@RequestBody User user) {
return userService.createUser(user);
}
}
- Версіонуйте ваші API: З часом ваш API може змінюватися в міру розвитку вашого додатку. Щоб забезпечити зворотну сумісність, важливо версіювати ваші API.
Це можна зробити, включивши номер версії в URL, наприклад,/api/v1/products.
Приклад версійованого API:
@RestController
@RequestMapping("/api/v1/users")
public class UserController {
// Те саме, але точка доступу має версію
}
- Використовуйте пагінацію для великих наборів даних: При роботі з великими обсягами даних не варто відправляти все одразу. Реалізуйте пагінацію, щоб розбити великі набори даних на зручні частини. Spring Boot має вбудовану підтримку пагінації в репозиторіях.
Приклад пагінації у Spring Boot:
// UserRepository.java
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
public interface UserRepository extends JpaRepository {
Page findAll(Pageable pageable);
}
3. Інтеграція з базами даних (MySQL або PostgreSQL)
Для повноцінних застосунків на стороні сервера часто потрібно зберігати дані в базі даних.
Популярні реляційні бази даних, такі як MySQL і PostgreSQL, часто використовуються з застосунками на Spring Boot.
Кращі практики інтеграції з базою даних:
- Використовуйте JPA та Hibernate: Spring Boot добре інтегрується з JPA (Java Persistence API) та Hibernate, фреймворком ORM (Object-Relational Mapping), який допомагає відображати об'єкти Java на таблиці бази даних.
Приклад класу сутності в Spring Boot:
// User.java
import javax.persistence.Entity;
import javax.persistence.Id;
@Entity
public class User {
@Id
private Long id;
private String name;
private String email;
// Геттери та сеттери
}
- Використовуйте Spring Data репозиторії: Spring Data JPA значно спрощує взаємодію з базою даних.
Це автоматично реалізує інтерфейси репозиторіїв на основі ваших моделей сутностей, тому ви можете виконувати операції CRUD (Create, Read, Update, Delete) без написання власних запитів.
Приклад репозиторію Spring Data:
// UserRepository.java
import org.springframework.data.jpa.repository.JpaRepository;
public interface UserRepository extends JpaRepository {
// Не потрібно писати реалізацію, Spring Boot зробить це автоматично
}
- Оптимізуйте продуктивність бази даних: Створюйте індекси на часто використовуваних стовпцях, щоб прискорити запити. Крім того, використовуйте пулінг з'єднань для ефективного управління з'єднаннями з базою даних.
4. Обробка автентифікації та авторизації
Безпека є важливим аспектом будь-якого веб-застосунку, особливо коли йдеться про обробку даних користувачів.
Коли використовуєте React та Spring Boot разом, потрібно забезпечити правильну автентифікацію та авторизацію.
Кращі практики безпеки:
- JWT автентифікація: JSON Web Tokens (JWT) широко використовуються для обробки автентифікації в сучасних веб-застосунках. Після входу в систему сервер (Spring Boot) генерує JWT токен і надсилає його на фронтенд (React), який зберігає його в localStorage або sessionStorage.
Цей токен потім додається в заголовки наступних API запитів для автентифікації користувача.
Приклад генерації JWT у Spring Boot:
// JwtTokenProvider.java
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
public class JwtTokenProvider {
private String secretKey = "secret"; // Використовуйте безпечний ключ в продакшн середовищі
public String createToken(String username) {
return Jwts.builder()
.setSubject(username)
.signWith(SignatureAlgorithm.HS512, secretKey)
.compact();
}
}
- Авторизація на основі ролей: Використовуйте Spring Security для реалізації контролю доступу на основі ролей (RBAC) для вашого застосунку.
Визначте ролі, такі якADMINабоUSER, та обмежте доступ до певних точок доступу на основі цих ролей.
Приклад захисту точки доступу за ролями в Spring Boot:
// SecurityConfig.java
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/admin/**").hasRole("ADMIN")
.antMatchers("/user/**").hasRole("USER")
.anyRequest().authenticated()
.and()
.httpBasic();
}
}
5.
Обробка CORS
Cross-Origin Resource Sharing (CORS) — це функція безпеки, реалізована веб-браузерами для запобігання зловмисним веб-сайтам від виконання запитів до іншого домену.
Якщо ваш фронтенд на React розміщений на іншому сервері, ніж бекенд на Spring Boot, вам потрібно налаштувати CORS, щоб дозволити фронтенду здійснювати запити до бекенду.
Кращі практики для CORS:
- Налаштуйте CORS у Spring Boot, дозволяючи запити з домену вашого фронтенду за допомогою анотації
@CrossOriginабо глобальної конфігурації CORS.
Приклад глобального увімкнення CORS у Spring Boot:
// WebConfig.java
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://localhost:3000") // URL React додатку
.allowedMethods("GET", "POST", "PUT", "DELETE");
}
}
Висновок
Розробка масштабованих повноцінних веб-застосунків з використанням React та Spring Boot — це потужний підхід до створення сучасних веб-застосунків.
Дотримуючись кращих практик управління станом за допомогою Redux, створюючи ефективні REST API за допомогою Spring Boot та інтегруючи надійні бази даних, такі як MySQL або PostgreSQL, ви можете розробляти застосунки, які є як продуктивними, так і легкими для масштабування.
Реалізуючи ці кращі практики, ви не тільки створите міцну основу для вашого веб-застосунку, але й забезпечите його гарну продуктивність в міру його зростання та обробки більшої кількості користувачів. Тож починайте створювати свій масштабований повноцінний застосунок вже сьогодні!
Перекладено з: Building Scalable Web Applications with React and Spring Boot