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

Best practices for frontend web applications

April 13, 2021

Best practices for frontend web applications


April 13, 2021

More Decks by Quan

Other Decks in Programming


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