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.
Ask HN: What should the technical design for a front end feature include?
1–10 of 11 posts
Re: Ask HN: What should the technical design for a front end feature include?
#2A 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.
Re: Ask HN: What should the technical design for a front end feature include?
#3I use this when designing a redux application:
1. Define function signatures of selectors and action creators. 2. Define the state tree shape.
Action Creators and Selectors translate to the "API endpoints" as it's the public interface to your frontend data model.
The state tree translates to the "database schema".
I would also consider what the data model for client-side persistence (localstorage, cookies) is.
Re: Ask HN: What should the technical design for a front end feature include?
#4A 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 serializa…
The messaging patterns are actually in the book Enterprise Integration Patterns.
Re: Ask HN: What should the technical design for a front end feature include?
#5Define 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.
Re: Ask HN: What should the technical design for a front end feature include?
#6I would say: Controls, events, views, view-data bindings, data-server bindings, state, authentication, telemetry and error handling.
Re: Ask HN: What should the technical design for a front end feature include?
#7Haven't you heard? We do agile now. Nobody designs anything anymore - they just fix it in the next sprint!
Re: Ask HN: What should the technical design for a front end feature include?
#8I would say: Controls, events, views, view-data bindings, data-server bindings, state, authentication, telemetry and error handling.
To the list above, also include unit testing with preferably at least 80% code coverage. I'm always amazed how easy it is to break things on the frontend without even realizing it. You make one little change here and it breaks somewhere else.
Re: Ask HN: What should the technical design for a front end feature include?
#9Copy an old one.
Re: Ask HN: What should the technical design for a front end feature include?
#10Statecharts can be especially helpful. https://statecharts.github.io