Profile picture of Michael Thiessen

Michael Thiessen

@MichaelThiessen

Published: October 29, 2024
8
37
275
1/9
01:04 PM

Design patterns in @vuejs are incredibly useful. But how many of them do you know? Here are 6 different patterns from the Clean Components Toolkit.

2/9Continued
01:06 PM

@vuejs In growing applications, prop drilling and event frothing increase complexity, as state and events are passed through many component layers. The Data Store Pattern solves this by creating a global state singleton, exposing parts of this state, and including methods to modify it.

Image in tweet by Michael Thiessen
3/9Continued
01:08 PM

@vuejs The Thin Composables Pattern introduces an additional layer of abstraction, separating the reactivity management from the core business logic. Here we use plain JavaScript or TypeScript for business logic, using pure functions, with a thin layer of reactivity on top.

Image in tweet by Michael Thiessen
4/9Continued
01:10 PM

@vuejs Humble Components are designed for simplicity, focusing on presentation and user input, keeping business logic elsewhere. Following the "Props down, events up" principle, these components ensure clear, predictable data flow, making them easy to reuse, test, and maintain.

Image in tweet by Michael Thiessen
5/9Continued
01:12 PM

@vuejs To simplify templates with multiple conditional branches, we extract each branch's content into separate components. This improves readability and maintainability of the code.

Image in tweet by Michael Thiessen
6/9Continued
01:14 PM

@vuejs Extract your logic into composables, even for single-use cases. This helps us keep logic separate from UI. Composables also make it easy to add related methods and state, such as undo and redo features.

Image in tweet by Michael Thiessen
7/9Continued
01:16 PM

@vuejs Large lists in components can lead to cluttered and unwieldy templates. The solution? Abstract the v-for loop logic into a child component. This simplifies the parent and encapsulates the iteration logic in a dedicated list component, keeping things nice and tidy.

Image in tweet by Michael Thiessen
8/9Continued
01:18 PM

@vuejs These tools (and more) are all included in Clean Components Toolkit, where each pattern also includes: - Edge cases and common mistakes - In-depth refactoring example - Quiz to test your knowledge - Video to go over quiz answers and add further explanation

9/9Continued
01:20 PM

@vuejs If you enjoyed this thread: 1. Follow me @MichaelThiessen for more of these 2. RT the tweet below to share this thread

Share this thread

Read on Twitter

View original thread

Navigate thread

1/9