Angular + Java: ساخت برنامه های Fullstack قوی

هنگامی که صحبت از توسعه وب Fullstack برای برنامه های تجاری می شود ، تعداد کمی از ترکیبات استحکام و بلوغ فرنترند زاویه ای و جاوا را در پس زمینه ارائه می دهند. این پشته تکنولوژیکی یک انتخاب محبوب برای سیستمهایی است که نیاز به قابلیت اطمینان ، ایمنی و مقیاس پذیری دارند.

من به عنوان یک توسعه دهنده که با استفاده از این ترکیب در چندین پروژه کار کرده است ، می توانم به اشتراک بگذارم که منحنی یادگیری اولیه ممکن است شیب دار به نظر برسد ، اما مزایای طولانی مدت قابل توجه است.

چرا زاویه ای + جاوا؟

در تجربه من ، چندین دلیل قانع کننده برای انتخاب این پشته وجود دارد:

1. تایپ قوی در طول برنامه – TypeScript در زاویه ای و جاوا در پس زمینه محیطی کاملاً تایپ شده را فراهم می کند و خطاها را در زمان اجرای کاهش می دهد
2. معماری شرکت بالغ – هر دو فناوری با توجه به سیستم های تجاری در ذهن طراحی شده اند
3. اکوسیستم های غنی – Angular از Google پشتیبانی دارد ، در حالی که اکوسیستم Java/Spring یکی از کامل ترین بازار است
4. مقیاس پذیری – هر دو بوت بهار زاویه ای و جاوا برای صعود به عنوان نیازهای تجاری طراحی شده اند

پیکربندی محیط توسعه

قبل از اینکه به جزئیات بپردازیم ، بیایید یک محیط اساسی برای توسعه Angular + Java ایجاد کنیم.

بوت بهار com backend

بوت بهار به طرز چشمگیری تنظیم برنامه های جاوا را ساده می کند. بیایید با یک پروژه اساسی شروع کنیم:

@RestController
@RequestMapping("/api/products")
public class ProductController {

    private final ProductService productService;

    @Autowired
    public ProductController(ProductService productService) {
        this.productService = productService;
    }

    @GetMapping
    public ResponseEntity<List<Product>> getAllProducts() {
        return ResponseEntity.ok(productService.findAll());
    }

    @PostMapping
    public ResponseEntity<Product> createProduct(@RequestBody Product product) {
        return ResponseEntity.status(HttpStatus.CREATED)
                .body(productService.save(product));
    }

    @GetMapping("/{id}")
    public ResponseEntity<Product> getProductById(@PathVariable Long id) {
        return productService.findById(id)
                .map(ResponseEntity::ok)
                .orElse(ResponseEntity.notFound().build());
    }
}

جلوی زاویه ای

از طرف زاویه ای ، ما باید یک سرویس ارتباطی را با API جاوا پیکربندی کنیم:

// product.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Product } from '../models/product.model';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private apiUrl = 'http://localhost:8080/api/products';

  constructor(private http: HttpClient) { }

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.apiUrl);
  }

  getProduct(id: number): Observable<Product> {
    return this.http.get<Product>(`${this.apiUrl}/${id}`);
  }

  createProduct(product: Product): Observable<Product> {
    return this.http.post<Product>(this.apiUrl, product);
  }

  updateProduct(product: Product): Observable<Product> {
    return this.http.put<Product>(`${this.apiUrl}/${product.id}`, product);
  }

  deleteProduct(id: number): Observable<void> {
    return this.http.delete<void>(`${this.apiUrl}/${id}`);
  }
}

ادغام جلو و پس زمینه

یکی از چالش های اولیه من با کار با Angular و Java به درستی پیکربندی COR ها (اشتراک منابع متقاطع) بود. بوت بهار این را تسهیل می کند:

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:4200")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

مدیریت دولت و جریان داده ها

در برنامه های زاویه ای + جاوا ، یک الگوی مشترک که من از آن استفاده کرده ام به شرح زیر است:

1. DTO (اشیاء انتقال داده) در جاوا برای انتقال داده بین لایه ها
2. رابط در Typescript که این DTO ها را آینه می دهد
3. خدمات در زاویه ای برای محاصره تماس های HTTP
4. اجزای که این خدمات را مصرف می کنند

این جریان جدایی واضح از مسئولیت ها را ایجاد می کند و کد را سازمان یافته نگه می دارد.

احراز هویت و امنیت

امنیت در برنامه های تجاری بسیار مهم است. ترکیبی از Security Security و JWT (Tokens Web JSON) با رهگیری های زاویه ای یک سیستم احراز هویت قوی ایجاد می کند:

یکی از بزرگترین مزایایی که در این پشته پیدا کردم سهولتی است که می توانیم ایمنی را در سطوح مختلف برنامه پیاده سازی کنیم.

شیوه های توصیه شده ای که من اتخاذ می کنم

بعد از کار بر روی پروژه های مختلف Angular + Java ، من برخی از شیوه ها را توسعه دادم که به طور قابل توجهی کیفیت کد و تجربه توسعه را بهبود می بخشد:

No Backend (جاوا)

1. ساختار لایه ای: کنترل کننده → سرویس → مخزن
2. dotos جدا از نهادها: از افشای جزئیات داخلی پایگاه داده جلوگیری می کند
3. اعتبارسنجی در چندین لایه: اعتبار سنجی لوبیا JSR-303 + اعتبار سنجی تجاری در خدمات
4. درمان متمرکز استثنائات کم @ControllerAdvice

بدون جلو (زاویه ای)

1. معماری مدولار: هسته ، ماژول های ویژگی E مشترک
2. مدیریت دولت: ngrx برای برنامه های پیچیده ، خدمات با رفتارهای ساده تر برای ساده تر
3. بارگذاری تنبل برای بهبود زمان بارگیری اولیه
4. ظروف “خر” و ظروف “هوشمند”: جدایی بین ارائه و منطق

چالش ها و چگونگی غلبه بر آنها

کار با Angular و Java چالش های خاصی دارد:

1. تکثیر مدل ها – کلاس های جاوا و رابط های TypeScript را هماهنگ نگه دارید

   • راه حل: ابزارهای تولید خودکار مانند OpenAPI/Swagger یا کتابخانه هایی مانند Maptruct

2. توسعه موازی – تیم های هماهنگ Fronand و Backend

   • راه حل: خوب قراردادهای API تعریف شده و سرورهای مسخره برای توسعه مستقل

3. ساخت پیچیده – ساخته شده از زاویه را با ساخت جاوا ادغام کنید

   • راه حل: افزونه های Maven/Gradle که فرایند ساخت زاویه را تأیید می کنند

تکامل پروژه

یکی از مواردی که بیشتر در ترکیب زاویه ای + جاوا از آن قدردانی می کند ، چگونگی تسهیل تکامل تدریجی پروژه است:

1. شروع ساده: کنترل کننده های اصلی استراحت و اجزای زاویه ای
2. در صورت لزوم پیچیدگی را اضافه می کند: حافظه پنهان ، امنیت پیشرفته ، مسنجر
3. مقیاس افقی: هر دو فناوری کانتینر و ارکستراسیون را به خوبی پشتیبانی می کنند

پایان

پس از کار با چندین پشته در طول سالها ، من به پروژه هایی که نیاز به ثبات طولانی مدت ، ایمنی و سهولت نگهداری دارند ، به ترکیب زاویه ای + جاوا بازگشتم.

علیرغم ظهور چارچوب های جوانتر و روند خدمات ریزگردها با مرزهای غیرمجاز ، ادغام Angular + Java یک گزینه محکم و تولیدی برای تیم هایی است که به دنبال تعادل بین نوآوری و ثبات هستند.

برای کسانی که در این سفر شروع می کنند ، توصیه من این است: قبل از ادغام آنها ، بنیادهای هر فناوری را به طور جداگانه یاد بگیرید. دانش عمیق بهار و زاویه ای به صورت جداگانه باعث می شود وقتی نیاز به کار با هم داشته باشید ، بسیار آسان تر می شود.

در SparkWebStudios ، ما دیده ایم که این پشته هنوز برای مشتریان مالی و دولتی ترجیح داده می شود ، جایی که استحکام یک الزام غیر قابل مذاکره است.

آیا تا به حال با این ترکیبی از فناوری ها کار کرده اید؟ با چه چالش هایی روبرو شدید؟ تجربه خود را در نظرات به اشتراک بگذارید!

این پست توسط یوهان هنریک ، توسعه دهنده و رئیس Sparkwebstudios نوشته شده است. برای محتوای بیشتر در مورد توسعه وب به نمونه کارها من مراجعه کنید.