
Ask HN: What should the technical design for a front end feature include? - flapjackfritz
What should the front end part of an applications technical design represent and consider?  With back end, there&#x27;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&#x27;m not sure what though, and have not been successful in finding examples online.
======
davidjnelson
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.

~~~
davidjnelson
The messaging patterns are actually in the book Enterprise Integration
Patterns.

------
eigen-vector
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.

------
yisheng
I 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.

------
icedchai
Haven't you heard? We do agile now. Nobody designs anything anymore - they
just fix it in the next sprint!

~~~
bausshf
I would argue that you cannot do agile management without having at least a
working prototype first.

It would simply fall apart otherwise, because you need a long-term plan
whether you're working in sprints or not.

------
ShMcK
Statecharts can be especially helpful.
[https://statecharts.github.io](https://statecharts.github.io)

------
javierluraschi
I would say: Controls, events, views, view-data bindings, data-server
bindings, state, authentication, telemetry and error handling.

~~~
paulborza
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.

------
zygotic12
Copy an old one.

