Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Best practices for frontend web applications

Quan
April 13, 2021

Best practices for frontend web applications

Quan

April 13, 2021
Tweet

More Decks by Quan

Other Decks in Programming

Transcript

  1. Auto linting tools ❏ Using tools like eslint, prettier, stylint,

    etc. ❏ Automatically lint all staged files on commit using husky. ❏ Create a standard format for the code base, helping developers navigating the code base faster. ❏ Save time on pointless debates. (tab or space, semicolon or not, etc)
  2. Component documentation ❏ Ensure consistency in the UI. ❏ Encourage

    reusable components, save development time. ❏ Tools like Styleguidist, Storybook can help, or just creating a simple page importing all the components in the code base.
  3. Avoid putting relevant files in different folders my-app/ ├─ src/

    │ ├─ components/ ├─ Inventory ├─ InventoryForm.vue ├─ services ├─ inventoryService.js ├─ helpers ├─ inventoryFormHelper.js ├─ views/ │ ├─ Inventory/ │ │ ├─ InventoryList.vue ├─ EditInventory.vue e D my-app/ ├─ src/ ├─ views/ ├─ Inventory ├─ components/ ├─ InventoryForm.vue ├─ services ├─ inventoryService.js ├─ helpers ├─ inventoryFormHelper.js ├─ EditInventory.vue e ├─ InventoryList.vue ├─ EditInventory.vue DON’T DO
  4. Avoid putting relevant files in different folders ❏ Most of

    the time the code will not be reused. ❏ Prematurely separating them just makes it harder to update the feature in the future. ❏ When there are too many features, nobody will know which features consume this piece of code.
  5. Organizing components ❏ Three levels: Base, Common, Feature. ❏ Base

    level (commonly called Atom in a design system): ❏ Example: Button, Slider, Grid, Table. ❏ Should be available globally automatically. ❏ Should not contain any business logic. ❏ Reusable. ❏ Common level (Pattern in a design system): ❏ Example: Facility picker, rank picker. ❏ Contain some limited business logic. ❏ Reusable. ❏ Feature level ❏ Contain business logic specific to the feature. ❏ Most likely will not be reused. ├─ src/ │ ├─ components/ ├─ Base ├─ BaseButton.vue ├─ BaseSelect.vue ├─ Common ├─ CommonFacilityPicker.vue ├─ CommonDatePicker.vue
  6. State management ❏ KISS (Keep it simple) ❏ Keep the

    state as close as possible to where it is used. ❏ Consider lifting it up one level when more than one component uses it. ❏ If there are still more components need to use that piece of state, consider putting it into a global store (Vuex, Redux, etc).