Створення масштабованих веб-додатків з React та Spring Boot - javascript.org.ua

Огляд архітектури додатку повного стеку: клієнт взаємодіє з сервером через веб-сервіси. Сервер управляє зберіганням даних за допомогою баз даних, оптимізує продуктивність за допомогою кешування та зберігає файли в системі блочного зберігання.

У сучасному світі веб-розробки створення масштабованих і високопродуктивних веб-додатків є ключем до успіху. Якщо ви хочете створювати додатки, які зможуть безперешкодно обробляти більше користувачів, даних і запитів, важливо вибрати правильне поєднання технологій. Одним із найпопулярніших стеків для створення масштабованих веб-додатків повного стеку сьогодні є 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 — це бібліотека для управління станом, яка допомагає організувати стан додатка в передбачуваний спосіб. Використовуючи один глобальний магазин, Redux дозволяє всім вашим компонентам доступати та оновлювати стан в узгоджений спосіб.

Кращі практики для Redux:

Використовуйте Redux Toolkit: Redux Toolkit — це рекомендований спосіб написання логіки Redux.
Це спрощує багато задач, таких як створення редюсерів і дій, а також включає корисні функції, щоб уникнути повторюваного коду.

Приклад налаштування 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 для визначення дій і редюсерів у більш простий і зрозумілий спосіб.

Приклад створення user 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 контролера в 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:

// UserController.java  
@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)

Для full-stack додатків часто необхідно зберігати дані в базі даних.
Популярні реляційні бази даних, такі як 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 Repositories: 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