DEV Community

Adalbertus Chris
Adalbertus Chris

Posted on

Frontend Evolution — Rethinking Frontend - part 2

Introduction

Based on feedback, I have refined the goals to bring more clarity to the concept of frontend evolution. The primary objective is to restructure Frontend Developer responsibilities to reduce complexity and improve efficiency.

Why Change Frontend Development Responsibilities?

Currently, Frontend Developers handle too many responsibilities—UI implementation, business logic, state management, API handling, performance optimization, accessibility, and more. This overload increases complexity, slows down development, and blurs role boundaries.

Splitting Frontend Responsibilities: UI & Model

To simplify frontend work, we can split frontend responsibilities into two distinct layers:

  • UI Layer (Presentation & Interaction)
  • Model Layer (Business Logic & Data Handling)

Once we establish this separation, we can determine who should handle each part.

Who Should Handle the UI Layer?

The UI layer should remain simple, including HTML, CSS, and basic JavaScript for animations and data transformations. Since UI Designers already work on UI, their responsibilities can be slightly extended to include implementation (creating UI components).

Understanding HTML and CSS doesn’t require deep programming skills, making it feasible for Web Designers to handle this part, especially with the assistance of AI tools. This allows for a more efficient workflow, where designers can directly translate their designs into functional UI components without relying on additional Frontend Developers.

Who Should Handle the Model Layer?

The model layer includes business logic, state management, API communication, validation, caching etc. Backend Developers already work on business logic and have strong programming skills.
Since this layer is purely logic-based (no styling), Backend Developers can easily manage it, even in JS/TS (language has no big meaning when someone has programming skills).

Why Doesn't Splitting Layers Alone Solve the Problem?

Separating the model from the UI without redefining roles doesn’t simplify frontend development — it adds complexity and increases the workload for Frontend Developers. The key is not just separation but clear role definitions to ensure responsibilities are effectively distributed.

New Role Specializations in Web Development

By following this structure, we can introduce clearer role definitions:

UI/UX Developer
This role extends UI/UX Designers' responsibilities beyond just design, allowing them to implement components using HTML, CSS, and basic JavaScript. UI/UX Developers don’t need to worry about logic, they focus purely on UI implementation.

Responsibilities:

  • Create UI designs and UX workflows
  • Implement UI components using HTML, CSS, and minimal JavaScript (for animations, transformations)
  • Handle UI interactions (button clicks, transitions, hover effects, etc.)
  • Ensure accessibility, responsiveness, and usability
  • Integrate ready-made methods, services, and models provided by Model Developers

Benefits of this role:

  • Stronger collaboration between design & development – designers don’t just hand off static designs, they actively build UI components
  • Reduces miscommunication – eliminates the extra layer of frontend developers, making collaboration more direct
  • Faster development – UI/UX Developers work directly with Model Developers, reducing dependency on Frontend Developers
  • Improves AI-assisted UI generation – having logic-free UI components makes it easier to automate UI generation in the future

Model Developer
This role extends Backend Developers' responsibilities to include frontend business logic, state management, API handling, validations etc.

Responsibilities:

  • Focus on business logic (backend and frontend),
  • Handle API calls, data fetching, state management, data transformations, validations, caching etc.
  • Create services and utilities that UI components use
  • Collaborate with UI/UX Developers to define proper models
  • Manage frontend architecture, routing, and core features (with Frontend Developer support)
  • Ensure performance optimization and frontend security (with Frontend Developer support)

Benefits of this role:

  • Data consistency across backend & frontend – Model Developers define and maintain data structures (models) across both layers
  • Reduces miscommunication – eliminates the extra layer of Frontend Developers, making collaboration more direct
  • Faster development and easier API Integration, better synchronization - Model Developers work directly with UI/UX Developers reducing dependency on Frontend Developers
  • Having a single person who handle models ensures they stay in sync, API payloads are adjusted to UI requirements

Frontend Developer / Lead / Architect / Mentor
A Frontend Developer ensures that UI/UX Developers and Model Developers follow best practices in frontend development. Switching to new roles without prior expertise in certain areas can be challenging, so guidance from experts is essential for a smooth transition.

Responsibilities:

  • Provide guidance to UI/UX Developers on creating well-structured and maintainable components
  • Help Model Developers with frontend complexity (state management, reactivity etc.)
  • Review & optimize frontend logic for performance and best practices
  • Handle complex frontend scenarios (e.g., advanced state management, SSR, performance improvements)

In every team, we can have Backend Developers, Model Developers, UI/UX Developers, and a Frontend Developers. This specializations brings flexibility and scalability to Web Development.

Why Is This Role Specialization Better Than the Traditional Approach?

  • This role specialization allows teams to be more structured, efficient, and scalable. It reduces the workload on Frontend Developers, improves collaboration, and makes it easier to adopt new technologies
  • Improves team efficiency – reduces unnecessary communication and clarifies responsibilities
  • Enhances specialization – each team member focuses on their strengths, reducing cognitive load
  • Lighter UI frameworks – by removing logic from UI, frameworks can be leaner and focus only on rendering and interactions
  • Design-to-code workflow is more direct – UI/UX Developers can instantly apply design adjustments without delays
  • Ensure data consistency across the backend and frontend model layers with cleaner solutions
  • Reduces UI-Model mistakes – clearer role separation minimizes miscommunication

Challenges & Potential Issues

  • UI/UX Developers need some coding skills – HTML, CSS, and basic JavaScript should be part of their skill set. AI tools can assist in simplifying this learning curve.
  • Risk of tight coupling between UI & backend logic – a clear separation of concerns is necessary. Frontend Developers should review implementations to prevent coupling issues
  • Handling complex tasks – Frontend Developers still play a role in advanced scenarios

What's Next?

When the roles are defined, the next step is to focus on tools. UI Layer tools should be easy to use for UI/UX Developers, and Model Layer tools should be suitable for Model Developers. Currently I'm focusing on building Model tools (UI Model Library).

The next article will take a closer look at the UI Model Library, which trying to provide a simple, framework-independent way to manage models in frontend applications.

Would love to hear your thoughts! 🚀

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

DEV shines when you're signed in, unlocking a customized experience with features like dark mode!

Okay