Introduction
Frontend development has evolved significantly over the years, becoming increasingly complex. Frontend developers must be familiar with various frameworks, libraries, tools, and solutions. They need expertise in multiple areas, including UI, business logic, design tools etc. This complexity leads to blurred boundaries between responsibilities, making development slower, more expensive, and harder to maintain.
This article explores the concept of frontend evolution, advocating for a clear separation between the UI and model layers to improve efficiency, maintainability, and scalability.
Current Frontend Challenges
Mixing Model with UI
Many frameworks tightly integrate logic, state management, validation, API handling within UI components. This coupling makes it difficult to refactor and adapt to new technologies efficiently.
Technology Stack Complexity
Developers must learn and work with numerous frameworks, libraries, and tools.
Redundant libraries exist across UI frameworks, each handling similar tasks e.g., state management (Zustand, Redux, MobX, VueX, Pinia, NGRX, NGXS, Akita etc.), validation, API communication.
We have one programming language but numerous solutions, with many UI frameworks differing in many cases only in syntax and coding style.
Too many solutions make slows down the progress of the frontend part.
Frontend Developer Skills and Responsibilities
Currently, frontend developers must be skilled in multiple areas: working with design tools, know frontend frameworks, know concepts like DI, reactivity, browser behavior, REST API principles, has knowledge about accessibility, responsive UI, security, performance optimization and more.
Inefficient Collaboration
Frontend developers constantly need to sync with designers and backend developers. Misunderstandings can happen—sometimes the backend doesn't provide exactly what's needed, or designs are missing details, leading to extra discussions.
Frontend developers often act as mediators, making sure designs are feasible while coordinating with backend teams to connect everything properly. This back-and-forth takes time, slows development, and reduces efficiency.
Goals
Separate model from UI – Clearly separate the data logic from how it's presented in the user interface.
Make frontend simpler – Reduce unnecessary complexity for easier development. Reduce reliance on multiple libraries that serve the same purpose.
More precise role specializations – Define clearer roles to reduce cognitive load. Make each role easier by reducing what they need to handle.
Improve collaboration – Make teamwork more efficient by reducing unnecessary communication, clarifying responsibilities, and ensuring smoother coordination between team members.
Proposed Solutions
Separate UI and Model
UI Layer (Frontend UI)
- Focuses solely on rendering, styling, animations, and user interactions.
- Handled by UI/UX developers with minimal programming expertise.
- Can be AI-assisted to generate components and establish links with models.
Model Layer (Frontend Model + Backend)
- Focuses on state management, validation, API interactions, caching, business logic.
- Developed by model developers, ensuring consistency with backend logic.
New Role Specialization in Web Development
UX/UI Developer (Responsible for UI Layer)
- Design preparation
- Build views using HTML, CSS, basic JavaScript, and UI framework syntax
- Ensure accessibility, responsiveness, and compliance with UX best practices
- Link UI components with the application's model without implementing business logic
- Can leverage AI-assisted tools
Model Developer (Responsible for Model Layer)
- Focuses on business logic
- Handles both backend and frontend model responsibilities - works on typical backend tasks and creates and manages the frontend application model including authorization, state management, validation, caching, data synchronization with the API
- Ensures data consistency between frontend and backend
- Troubleshoots issues with data flow and application performance
Frontend Developer (Optional)
- Acts as a bridge between UI and model when needed in complex applications
- Has advanced knowledge of frontend frameworks and integrations
Benefits of this approach
- Separating the model (logic) from the UI makes the UI simpler, enhances maintainability
- UI frameworks/libraries can become lighter and more focused on rendering and interactions
- A separate model allows for creating a universal, reusable model that can work across different UI frameworks (React, Angular, Vue, Svelte) and platforms (e.g., web, mobile)
- By separating the model from the UI, changing UI technologies is more straightforward, enabling easier adoption of new technologies or switching between UI frameworks without having to rebuild the entire application
- It can reduce development time, enhance coordination and collaboration, improve productivity, and lower costs by eliminating the need for an additional role between the UI and model (no “mediator” between the UI and backend)
- Teams can work more efficiently, when each member focusing on their strengths and specializations, which reduces cognitive load — UI Developers focus on design, appearance, and interactions, while Model Developers handle business logic and data management
- Sometimes, designs are hard to turn into HTML and styles. If one person handles both, we avoid wasting time redoing things. Designs are usually static, but when the UI connects to data, style adjustments can be needed and UX/UI Developers can handle it at once
- The Model Developer doesn’t have to worry about styling, responsiveness, or UX. They focus on tasks like data transformation and validation, which are more aligned with backend work. When one person handles specific tasks like endpoint models, authorization, and validation, there's no need for constant consultations on how to deliver data, coordination, or solution explanations. The only requirement is to establish a clear model contract with the UX/UI Developer
- Backend developers can easily transition into the role of Model Developer thanks to their expertise in business logic
- Clearer specializations enhance code quality and the final product—it's challenging for one person, like a frontend developer, to master all areas of web development. Specialists in each domain produce higher-quality code due to their deep expertise
- A clearer role division reduces mistakes between the UI and model layers
- It can reduce cognitive load and the learning curve for each developer
- In some companies, there isn't enough full-time work for designers, but it’s great to have one. However, with a UI/UX developer, the company always has access to design expertise
- Separating the model from the UI (browser APIs) opens the door for WASM adoption:
- The model can be written in any WebAssembly-compatible language (e.g., Rust, Go, C++, Python)
- This can improve performance, as the model runs natively in the browser
- Maybe there will be possibility to sharing logic between the backend and frontend, reducing code duplication (e.g., types, validations) and saving time spending on writing the same things
To make this separation I started prototyping UI Model Library in JS/TS for better visualization what Model Layer should include
UI Model Library - Basic requirements
- Include built-in Dependency Injection, validation, state management, caching, API handling, reactivity
- Universal solution that works with various UI frameworks
- APIs should be standardized (e.g., method names, data consumption), similar to how web standards work for browsers
The next article will explore the UI Model library in more detail.
Top comments (0)