Best practices for frontend web applications

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