Skip to content

Latest commit

 

History

History

frontend

README.md

Frontend

I tried lots of different approaches to my projects and finally came to this structure.

It's not perfect, but it allows to grow the codebase with minimal cost.

General rules

  1. Treat every component and page as a standalone project, domain. Try to make them as independent as possible without any external dependencies.

    Store everything related to component inside it's folder (assets, composables, subcomponents etc.).

    Create abstractions only when you need them, don't overengineer ahead of time. Create subcomponents only when you are absolutely sure it's necessary.

    Ask yourself: "Can this component be used in another project as-is? Does it really need to be split into multiple components? Does it really need that dependency?".

    It's a Locality of Behaviour Principle.

  2. Don't hesitate to violate DRY if you feel that it will greatly improve the readability and simplicity of the code.

    For example, 3 of your components use small function, but it requires lots of dependencies. It's better to duplicate it and not make it external.

    But of course, it depends.

  3. Don't be shy to use SomeVeryLongAndAwkwardLookingNames. Instead, prioritize self-explanation of your function or component.

    Ask yourself: "If somebody without context will read this name, will he clearly understand what it does?".

    Another bonus is that it will let you easily search files by name.

  4. Don't pass objects as arguments or props, fight with temptation to do it.

    Always pass primitive values, composables and components shouldn't know about the form of the object.

    First of all, it makes your code much more readable. And more importantly it makes writing unit tests sooooo much easier.

    Bad:

    function useSomething({ bigObject }) {
  // using bigObject.property
  // using bigObject.anotherProperty
}

useSomething({ bigObject })
    <ChildComponent :parent="parent" />

    Good:

    function useSomething({ property, anotherProperty }) {
  // using property
  // using anotherProperty
}

useSomething({
  property: bigObject.property,
  anotherProperty: bigObject.anotherProperty
})
    <ChildComponent
    :parent-property="parent.property"
    :another-property="parent.another" />

  5. Always use vueuse. Moreover, check releases from time to time, because they add new stuff pretty often.

List of all guides