Wireframes and Component Hierarchy

Welcome Back! It’s been a little bit longer than I planned between my last post in this series and this one, but I should be back on track soon. This series picks up where the last series left off:

Backend Wrap Up

Andrew Luchuk ・ Jun 27 '20 ・ 2 min read

#webdev

Wireframes

Wireframing helps developers by laying out the look of a UI in advance. Knowing how the UI will look is not only useful for making sure the UI is clean and usable, but also helps developers by enabling them to identify which parts of a UI can be reused.

I’ve created a few basic wireframes to give a simple idea of how the UI should be laid out when it’s done. As I’ve mentioned before, I am by no means the world’s best frontend engineer or UI designer, so I tried to make the UI look roughly like it is made up of Bulma components, which I’ll be using for the frontend.

Users will be greeted with a sign in page:

If they do not have an account, they can click the sign up button to get one:

Once logged in, users will be greeted by a list of posts, and after clicking one, they will see the post detail page:

If there are replies to the topic, it will look like this:

Finally, when replying to a post, users will see something like this:

Component Hierarchy

Once the wireframes are finished, we can begin to analyze the UI to identify reusable components of the UI. The UI analysis process is fairly straightforward. Essentially, the developer takes each part of the UI and breaks it down into components that can't be broken down any further.

I'm not going to go through the whole process here because it would take many words to describe something which is much more easily understood through images. If analyzing the UI is new to you, then the React docs have an excellent tutorial to help you understand the process: Thinking in React.

I’ve gone ahead and created some simple charts to demonstrate how the components should work together. Identical names indicate that the component is to be reused in multiple places. Finally, since we will be using redux to share state across components, we won’t need to worry about making sure state flows in an easy way.

For the Login page, the component tree will look something like this:

The sign up page components:

The main page hierarchy:

Finally, the topic page is going to be the most complex page with a hierarchy something like this:

Each reply is going to be made up of a few more components, much like the topic:

I know it’s a lot to take in, but you won’t need to remember this, it just gives a skeleton around which to build the react page.

What’s next

As promised, this post starts a new series (which is itself part of a larger series) covering the frontend of our mini forum application.

Here’s the first post of the series:

Build a Forum App, from Code to Deploy

Andrew Luchuk ・ May 23 '20 ・ 3 min read

#webdev

In keeping with the plan laid out there, this series will cover the following topics:

1. Wireframing and component Hierarchy (this post)
2. Writing tests for components and building the basic components
3. Querying the backend with GraphQL
4. Tying all the pieces together to complete the frontend.

Unfortunately, because I’m working on another project at the moment, I may not be able to post in this series every week, but I’ll do my best to keep on schedule.

Thank you all for reading, and I hope you find it helpful!