#software-engineering  > Web development is hard because internet is hard We always see thread about this topic: 1. [(3) Web Development is so Complicated : webdev (reddit.com)](https://www.reddit.com/r/webdev/comments/x5sra9/web_development_is_so_complicated/) 2. [(3) WebDev burnout : webdev (reddit.com)](https://www.reddit.com/r/webdev/comments/16o260l/webdev_burnout/?share_id=zccP_RaIH7oCxQoSXReFa&utm_content=1&utm_medium=ios_app&utm_name=ioscss&utm_source=share&utm_term=1) ## The Problem of Frontend 1. State management 1. data fetching 2. UI state 2. Style management 3. UI component skeleton 1. function 4. cross platform 1. app 2. web 3. desktop 5. deployment is difficult, build time, config, wait for approval etc. 1. android 2. ios 3. web 6. not having a definite set of requirement ## Not Having a Definite Set of Requirements When we think of a figma UI template, the requirement is straight forwards. Lets' say someone draw a wireframe or even have a picture of what the UI should look like, you recreated it right? You can surely organize your doc better. But there is an end of work. However, this is often not the case in frontend development. When we talk about frontend now. It no longer only means client side. Backend: all the logic in the background and storing the data Frontend: serving data to user Therefore, the APIs, the websocket thing, the streaming are all viewed as a part of frontend. The users (and your boss) always want the best user experience. And the user experience is never the concern of the backend people. And therefore the burden will lay on frontend people. But because of the high expectation of the people and the fact that there never seem to be a standard on how to perform a function on frontend, there are so many decision making on the frontend. And hence make frontend very difficult. ## How to Fix These Problems ### Fix Too Many UI Components to Manage UI components, use a design system so that everything will be supported out of the box. You will get a bunch of UI primitives and methods to style to style them. But more importantly, restrict the number of components in your app. Try to reuse the existing components as much as possible. For example ask yourself a question, if I can only build 10 high level UI components in this project, which one I will build. And then try to limit the number of UI component below 10. ### Fixing State Management To solve the state management issue, we would want to reduce the number of state on frontend. To do that, we need to make everything as declarative as possible. For example, nextjs server component is doing so. The components will get the data from props instead of hook. And in the server environment, there is no such thing as hook. All you can use is get function. Another way to think about state management is that we should limit the client side state. There are 3 types of components, complete display only, client side state component and mutation component. We want to reduce client side state component and hence client side interactivity. ### Fixing Cross Platform Issue try to use framework that support multiple platform. For example, expo router support app and web. [Capacitor](https://capacitorjs.com/) support all of them. Tauri support mobile app and desktop app. So far there is no perfect framework to this yet so we might need to wait. Also, you can also restrict the platform that you support. See [[Categories of application|types of application]]. Everything is about compromise. ### Fixing time to Deploy frontend deployment is much more difficult than backend. There is basically no way to avoid this but I can give some suggestion. 1. use good managed services. For example, Vercel make web deployment much easier and expo does that for mobile app 2. use web builder such as Google Site, Webflow and Framer so you will have real time update. ## Consider the Level of Complexity in Your Application You need to know your level of complexity so that you won't overcomplicated your techstack and your time spending on research. For example, making a basic CRUD app. All you need is form (input), some buttons and probably some data visualisation. If you don't need real time update, probably retool is enough. > [!info] see more > 1. [The Great Divide | CSS-Tricks - CSS-Tricks](https://css-tricks.com/the-great-divide/) > 2. [Front-of-the-front-end and back-of-the-front-end web development | Brad Frost](https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/) ## What Do We Need to Know / Deal with in the Frontend? - Persistence - saving and reading data from a database - Routing - directing traffic based on the URL - Data fetching - retrieving data from persistence - Data mutation - changing data in persistence - Rendering logic - displaying data to the user - UI Feedback - responding to user interaction