Scribd
Upload
16 views1 page

3 Frontend in Full Stack Java

The document outlines the frontend development options for Full Stack Java applications, detailing traditional methods like JSP and Thymeleaf, as well as modern frameworks such as React.js, Angular, and Vue.js. It emphasizes the communication between frontend and backend through REST APIs using JSON, and mentions styling options like Bootstrap and TailwindCSS. An example project structure is provided, illustrating the integration of a React frontend with a Spring Boot backend.

Uploaded by

erbinay
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views1 page

3 Frontend in Full Stack Java

The document outlines the frontend development options for Full Stack Java applications, detailing traditional methods like JSP and Thymeleaf, as well as modern frameworks such as React.js, Angular, and Vue.js. It emphasizes the communication between frontend and backend through REST APIs using JSON, and mentions styling options like Bootstrap and TailwindCSS. An example project structure is provided, illustrating the integration of a React frontend with a Spring Boot backend.

Uploaded by

erbinay
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Frontend Development in Full Stack Java

The frontend of a Full Stack Java application is responsible for user interaction. It can be built using
traditional or modern approaches.

1. Traditional Java Frontend


- JSP (Java Server Pages).
- Thymeleaf template engine.
- Mostly server-rendered.

2. Modern Frontend Options


- React.js: Fast, component-based library.
- Angular: Full-featured framework using TypeScript.
- Vue.js: Lightweight alternative.

3. Communicating with Backend


- Frontend calls REST APIs exposed by Java backend.
- Data is exchanged using JSON.

Example in React:
useEffect(() => {
fetch('/api/products')
.then(response => response.json())
.then(data => setProducts(data));
}, []);

4. Styling
- Bootstrap for responsive design.
- TailwindCSS for utility-first styling.

5. Example Project Structure


- React frontend at localhost:3000
- Spring Boot backend at localhost:8080
- API requests: frontend → backend → database

You might also like