Ask HN: What should the technical design for a front end feature include?

31 pointsflapjackfritz7y ago10 comments

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.

10 comments

davidjnelson7y ago

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.

davidjnelson7y ago

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

eigen-vector7y ago

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.

yisheng7y ago

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.

icedchai7y ago

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

bausshf7y ago

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.

ShMcK7y ago

Statecharts can be especially helpful. https://statecharts.github.io

javierluraschi7y ago

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

paulborza7y ago

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.

zygotic127y ago

Copy an old one.

j / k navigate · click thread line to collapse

10 comments

davidjnelson7y ago

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

eigen-vector7y ago

yisheng7y ago

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.

icedchai7y ago

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

bausshf7y ago

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.

ShMcK7y ago

Statecharts can be especially helpful. https://statecharts.github.io

javierluraschi7y ago

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

paulborza7y ago

zygotic127y ago

Copy an old one.

j / k navigate · click thread line to collapse