Scribd Logo
Upload

Welcome to Scribd!

  • Module 4 Cheatsheet

    Uploaded by

    Nitish
    4 views1 page
    This document discusses finding and splitting component seams in a Vue application. It identifies four categories for finding seams: 1) interface props, 2) state, 3) computed props, and 4) logic. The process involves finding seams in these categories, stacking them to create a master list of groups, and then splitting the component along the seams by either extracting or passing dependencies through props. The goal is to create cleaner, more modular components.

    Original Description:

    clean components vuejs cheatsheet 4

    Original Title

    module-4-cheatsheet

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document discusses finding and splitting component seams in a Vue application. It identifies four categories for finding seams: 1) interface props, 2) state, 3) computed props, and 4) logic. The process involves finding seams in these categories, stacking them to create a master list of groups, and then splitting the component along the seams by either extracting or passing dependencies through props. The goal is to create cleaner, more modular components.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views1 page

    Module 4 Cheatsheet

    Uploaded by

    Nitish
    This document discusses finding and splitting component seams in a Vue application. It identifies four categories for finding seams: 1) interface props, 2) state, 3) computed props, and 4) logic. The process involves finding seams in these categories, stacking them to create a master list of groups, and then splitting the component along the seams by either extracting or passing dependencies through props. The goal is to create cleaner, more modular components.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    module 04

    component seams framework


    by Michael Thiessen

    4.0 component seams interface props that are used together

    framework state state that is used together

    seams places where it’s natural to break a computed props like state, but we also have
    component apart. to include anything the computed prop depends
    on
    Look for code that is:
    01 used together logic finding seams in watchers and methods is
    02 updated together the same as with computed props
    03 changed together
    4.3 stacking seams
    component seams framework:
    Combine the different groups from each
    01 find the seams
    category to create a master list of groups.
    02 stack the seams
    03 split along the seams If the different categories don’t agree:
    01 you need to clean up the component better
    02 the component is as small as it can be
    4.1 finding seams in your
    template
    What we did in Module 1 was really about
    4.4 splitting along the seams
    finding the seams in those templates For each piece you pull out you use the master
    list to determine it’s dependencies (everything in
    it’s group).
    4.2 finding seams everywhere For each dependency you either:
    else 01 extract into the new component
    02 pass into the new component through a prop
    Four categories where we can find seams:
    01 interface - the props your component uses Starting with the template is often the easiest.
    02 state - anything that changes over time
    03 computed props - slightly different state
    04 logic - how your component manipulates
    data

    clean components

    You might also like