A Frontend-to-Java Full-Stack Path, Paved with Four Open-Source Projects

Recently browsing the community, I noticed a clear trend: the survival space for pure frontend is shrinking, and more and more frontend developers are transitioning toward full-stack, with Java being the most common choice for the tech stack.

This reminds me of a controversial article from three years ago: Maybe I'm different from everyone else, this is how I use TypeScript for frontend development. Back then, many friends in the comments debated Java-related issues with me. Time flies.

Speaking of transitioning from frontend to full-stack, I have deep feelings about it.

In the early days of writing web pages, it was still the era of ASP + HTML, with no concepts of frontend-backend separation or frontend engineering. Later, I briefly touched ASP.NET, but I never really clicked with the Microsoft tech stack, so I turned to Java Web: from the earliest JSP to Servlet, and then to the SSH framework, I never found that 'smooth' feeling.

For a long time afterward, I switched to PHP, tinkering with CodeIgniter, Laravel, Yii, ThinkPHP, and made a living. During that time, I wasn't idle; I tried Node.js backends, played with Egg.js, Express, Koa, and even NestJS — the frameworks themselves were good, but dependency injection always felt awkward, lacking a 'comfortable' experience.

Later, I became a dedicated frontend developer, writing from Vue2 to Vue3, and naturally started the Juejin column Writing Frontend with TypeScript. But it was also during this phase that my backend tech stack slowly 'returned' to Java — not because of nostalgia, but because its strong typing and engineering capabilities can precisely meet the stability requirements of complex business systems.

If you also plan to transition from frontend to Java full-stack, my advice is: First, face Java's 'foot-binding cloth' — strong object-orientation. This is also the thinking foundation I repeatedly emphasize in my frontend column.

:) If you haven't read this column yet, I still recommend you read it first.

We also organized a dedicated Java backend column: Have a Cup of Java to Calm Down, which contains many backend development insights from a frontend perspective.

Regarding object-orientation, we have also repeatedly mentioned it in multiple frontend articles:

---

Recommended Open Source Projects

To lower the 'steep curve' of transitioning from frontend to full-stack, I open-sourced a complete solution on GitHub, ranging from basic frameworks to enterprise-level applications. Detailed code comments and clear design patterns make it very suitable for learning by doing:

🟢 AirPower4J

This is a Java backend development scaffold based on SpringBoot + JPA.

It includes modules frequently needed in daily development:

• RBAC Permission System: Complete implementation of users, roles, and permissions
• CRUD Encapsulation: Generic Controller/Service/Repository layers to reduce repetitive code
• Exception Handling: Custom exception system with a unified error response format
• Multi-tenant SaaS: Support for subdomain/independent domain binding
• Security Module: Encryption/decryption, signature verification, anti-replay attack
• WebSocket: Real-time communication support

Project Features:

• Extensive use of annotations, Aspect-Oriented Programming (AOP), and design patterns, resulting in highly readable code
• Based on JPA's ddl-auto, no need to write SQL manually to initialize the database
• Unified use of Entity as the data structure, reducing the cognitive load of DTO/VO/EO
• Complete set of utility classes (Utils), dictionary enums (IDictionary), and tree structure tools (TreeUtil)

If you have a frontend background, looking at this project's code will reveal many 'familiar flavors': decorator thinking, configuration-driven development, layered architecture — essentially, it shares the same mindset as frontend componentization.

---

🔵 SPMS-Server

This is an enterprise-level backend application developed based on AirPower4J, integrating core business modules for the manufacturing industry:

• MES (Manufacturing Execution System): Full production order process tracking, real-time data collection
• WMS (Warehouse Management System): Inbound/outbound/inventory/batch management
• ERP (Enterprise Resource Planning): Integration of finance, procurement, sales, and inventory
• QMS (Quality Management System): Quality planning, control, and improvement closed loop
• IoTS (Internet of Things System): Remote device monitoring, preventive maintenance

Learning Advice: You can first cut out unnecessary modules (like temporarily not needing IoTS), focus on the core logic, and then gradually expand. This is the best path to learning complex business system architecture.

---

🟠 SPMS-Web

This is the frontend project paired with SPMS-Server, developed based on Vue3 + Element Plus + @airpower/web.

It provides a complete frontend development framework, including pages for modules like MES, WMS, ERP, QMS, IoTS, as well as common pages such as login, registration, 404, 500, 403, permission management, multi-language, file upload, rich text, and charts.

---

🟣 @airpower/web

This is a complete frontend development framework based on Vue3, Element Plus, and TypeScript.

Core Features:

• Extensive use of object-oriented programming patterns (such as Model definitions, Decorator usage)
• Built-in data model transformation, where 'dirty data' returned by the backend is automatically adapted to the frontend structure
• Well-encapsulated common capabilities like permission management, encryption/decryption, and network requests

This makes the entire frontend-backend collaboration more seamless, and it is very suitable for frontend developers accustomed to TypeScript to smoothly transition to full-stack development.

---

Final Words

The projects recommended today have all been polished in my actual business work. The code comments are as detailed as possible, and the design is tailored to fit the learning habits of frontend developers.

Happy Coding! 🚀