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

Best practices for frontend web applications

28410ec97da16f250a154d9b335c8a32?s=47 Quan
April 13, 2021

Best practices for frontend web applications

28410ec97da16f250a154d9b335c8a32?s=128

Quan

April 13, 2021
Tweet

Transcript

  1. Best practices for frontend web applications @quannt

  2. Auto import components https://www.npmjs.com/package/@nuxt/components https://harlanzw.com/blog/vue-automatic-component-imports/ https://github.com/antfu/vite-plugin-components https://github.com/harlan-zw/vue-cli-plugin-import-components

  3. 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)
  4. 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.
  5. Component documentation

  6. 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
  7. 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.
  8. Managing third party plugins DON’T DO

  9. 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
  10. 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).