Introduction to presentational / container architecture in Vuejs

Whats’up hombre, today, and for my first post, we are gonna see the implementation of the presentational & container architecture in Vuejs. The goal of that post is to look at how we can implement this pattern in our codebase and see the benefits of it in our coder life.

I know that there are already some blog post about what it is but nothing about how to apply that in Vuejs application.

The what ?

Container and presentational components is a simple unopiniated pattern about “how can i get my code cleaner and seperate my components ?” in two categories :

Here is a quick uml about what we are talking about..

• Containers that compose the skeleton of our app identified as layout components like a sub-menu and the components that composes our feature in the application like an users page components who will check for a token in database and show the right slots component presentation.

<jumbotron-container /> who is our container component.

• Presentation components that englobe our data from containers and show it into the application. thoses components are not allowed to fetch their own data but receive his data from his parent, in this context, we are passing vuex value as props in our container who can be ‘Success’ or ‘Error’ to our child presentation component.

<page-jumbotron /> who is our presentational component.

The why ?

This pattern is designed to help ya at code organization and leave the “Spaghetti” code management. with this architecture, you well be able to clearly seperate the functionnal components that will retrieves your data and make action from the components who will receive the data.

The other major benefits inside that pattern is that it make all of your presentation components reusable in multiple context because there are not attached to a specific datasource.

The when ?

You can implement this pattern whenever you want in the application, at the start of his developement or later if you want since the refactoring associated to this pattern dont cost a lot of time since its just about move functions in the right container components and pass the data with the appropriated state management in your presentation components (it can be props, vuex or $bus)

The who ?

Anybody who is familiar with javascript modern developement is able to implement this pattern into an app, even Vuejs newbies. It dont require a lot of knowledge about the framework but only good senses about where do i put my actions and data call, whatever state management you’ll be using..

Conclusion

Container / presentational architecture is a good way to start with code quality since it force the user to make reusable components and it dont nee expert coding skills to make things act right. You can push this pattern forward by using advanced state management pattern like Mobx who is oriented for this type of architecture.