What should the front end part of an applications technical design represent and consider? With back end, there's the database schema, API endpoints, flow charts for processes. But with the front end, only recently has it become somewhat data heavy. What do you do when asked to submit a technical design as a front end engineer? For reference, at my employment design is a large part of being a senior developer, so I have to do something, I'm not sure what though, and have not been successful in finding examples online.
A few ideas. The data model. How to map and continually re-map the server side model to the client side model. The design patterns appropriate to the problem, for instance using redux middleware to implement an interceptor, and leveraging any number of message based programming patterns from the Patterns Of Enterprise Application Architecture book. The communication mechanism from client to server. The data serialization format. Establishing testing patterns that are reliable in preventing bugs and regressions.
Define the customer experience. If you have a Product Manager who is involved with the project, you would ideally meet with them ahead of putting together a technical design document and discuss what the customer experience is going to look like. Try to finalize as many details as possible—APIs, latencies, accessibility etc. This should be an important part of your technical design as it defines the problem you're trying to solve. Your design should then be an answer to the customer experience problem you've formulated.
I use this when designing a redux application:<p>1. Define function signatures of selectors and action creators.
2. Define the state tree shape.<p>Action Creators and Selectors translate to the "API endpoints" as it's the public interface to your frontend data model.<p>The state tree translates to the "database schema".<p>I would also consider what the data model for client-side persistence (localstorage, cookies) is.