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

31 points by flapjackfritz 8 years ago | 10 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.

davidjnelson 8 years 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.

davidjnelson 8 years ago | |

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

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

yisheng 8 years 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.

icedchai 8 years ago |

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

bausshf 8 years 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.

ShMcK 8 years ago |

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

javierluraschi 8 years ago |

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

paulborza 8 years 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.

zygotic12 8 years ago |

Copy an old one.