Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

VueJS Best Practices

675 views

Published on

Presentation of the talk I gave in AmsterdamJS. You can watch my talk here in this link https://www.youtube.com/watch?v=_4nrh6mTt4E&t=4451s

Published in: Software
  • Be the first to comment

  • Be the first to like this

VueJS Best Practices

  1. 1. VUE.JS Fatih Acet Amsterdam JS BEST PRACTICES
  2. 2. WHO AM I? FATIH ACET Sr. Frontend Engineer at GitLab Google Developer Expert in Web Technologies @fatihacet
  3. 3. AGENDA 1. Quick Introduction to Vue.js 2. Vue.js at GitLab 3. Best Practices
  4. 4. ‣ Progressive JavaScript framework for building user interfaces VUE.JS
  5. 5. ‣ Progressive JavaScript framework for building user interfaces ‣ Core library focused on the View layer VUE.JS
  6. 6. ‣ Progressive JavaScript framework for building user interfaces ‣ Core library focused on the View layer ‣ Amazing ecosystem to create large SPAs VUE.JS ‣ Vuex ‣ Vue Router ‣ Vue CLI ‣ Vue Devtools
  7. 7. ‣ Progressive JavaScript framework for building user interfaces ‣ Core library focused on the View layer ‣ Amazing ecosystem to create large SPAs (Vuex, VueRouter, VueCLI, Vue DevTools) ‣ Easy to learn VUE.JS
  8. 8. ‣ Progressive JavaScript framework for building user interfaces ‣ Core library focused on the View layer ‣ Amazing ecosystem to create large SPAs (Vuex, VueRouter, VueCLI, Vue DevTools) ‣ Easy to learn ‣ Lightweight (20KB min+gzip) VUE.JS
  9. 9. became the most starred project on GitHub in 2017 and 2016. VUE.JS 2017 JavaScript Rising Stars
  10. 10. VUE.JS AT GITLAB
  11. 11. WHAT IS GITLAB? GitLab is an Open Source software development tool which provides a single application for every stage of the DevOps lifecycle. GitLab’s goal is to make software development faster so you can spend more time writing code and less time maintaining your tool chain.
  12. 12. WHAT IS GITLAB? GIT repository management
  13. 13. WHAT IS GITLAB? Issue Tracking with Issue Boards
  14. 14. WHAT IS GITLAB? Merge Request reviews
  15. 15. WHAT IS GITLAB? CI/CD integration
  16. 16. WHAT IS GITLAB? Monitoring tools with Prometheus
  17. 17. WHY WE CHOOSE VUE.JS? ‣ Easy integration
  18. 18. WHY WE CHOOSE VUE.JS? ‣ Easy integration ‣ Easy to pick up
  19. 19. WHY WE CHOOSE VUE.JS? ‣ Easy integration ‣ Easy to pick up ‣ Lightweight
  20. 20. WHY WE CHOOSE VUE.JS? ‣ Easy integration ‣ Easy to pick up ‣ Lightweight ‣ Plays nice with our existing app
  21. 21. WHY WE CHOOSE VUE.JS? ‣ Easy integration ‣ Easy to pick up ‣ Lightweight ‣ Plays nice with our existing app ‣ No time to rewrite or refactor
  22. 22. HOW DO WE USE? ‣ Vuex for state management ‣ Standalone SPA like Smart components
  23. 23. HOW DO WE USE?
  24. 24. HOW DO WE USE? ‣ Vuex for state management ‣ Standalone SPA like Smart components ‣ Do new things with Vue ‣ Rewrite legacy stuff only when needed
  25. 25. BEST PRACTICES 👍
  26. 26. ▸ Define data properties upfront to make them reactive COMPONENT DATA
  27. 27. ▸ Define data properties upfront ▸ Avoid touching the DOM directly COMPONENT DATA
  28. 28. ▸ Define data properties upfront ▸ Avoid touching the DOM directly ▸ No need to put static data in Vue data object COMPONENT DATA
  29. 29. v-if Higher toggle cost v-show Higher initial render cost CONDITIONAL RENDERING
  30. 30. v-if in the child component’s root element will always trigger the created hook child-component.vue CONDITIONAL RENDERING
  31. 31. CONDITIONAL RENDERING parent-component.vue v-if in the child component’s root element will always trigger the created hook
  32. 32. Computed Properties are cached based on their dependencies COMPUTED PROPERTIES
  33. 33. Computed Properties are cached based on their dependencies COMPUTED PROPERTIES
  34. 34. Computed Properties are cached based on their dependencies COMPUTED PROPERTIES Prefer Computed Properties over Methods when possible
  35. 35. Split complex computed properties into as many simpler properties COMPUTED PROPERTIES
  36. 36. COMPUTED PROPERTIES
  37. 37. Split complex computed properties into as many simpler properties COMPUTED PROPERTIES ‣ Easier to test
  38. 38. Split complex computed properties into as many simpler properties COMPUTED PROPERTIES ‣ Easier to test ‣ Easier to read
  39. 39. Split complex computed properties into as many simpler properties COMPUTED PROPERTIES ‣ Easier to test ‣ Easier to read ‣ More manageable
  40. 40. COMPUTED PROPERTIES Simplify complex template conditions
  41. 41. SINGLE FILE COMPONENTS
  42. 42. SINGLE FILE COMPONENTS ‣ Precompile templates on build time
  43. 43. SINGLE FILE COMPONENTS ‣ Precompile templates on build time ‣ Scoped CSS is cool
  44. 44. SINGLE FILE COMPONENTS ‣ Precompile templates on build time ‣ Scoped CSS is cool ‣ Better editor support, eg. Vetur
  45. 45. ERROR HANDLING ‣ Vue.config.errorHandler ▸ Runtime error tracking using services like Sentry and Bugsnag ▸ errorCaptured hook
  46. 46. PERFORMANCE ‣ Vue.config.performance = true; ‣ Vue Performance DevTool extension
  47. 47. COMPONENT COMMUNICATION Use props to pass data to child components
  48. 48. COMPONENT COMMUNICATION Never mutate props of the parent component in the child components and don’t use $parent
  49. 49. COMPONENT COMMUNICATION Use custom events to let parent component handle the action
  50. 50. COMPONENT COMMUNICATION Use EventBus pattern eventbus.js
  51. 51. COMPONENT COMMUNICATION Use EventBus pattern child-component.vue
  52. 52. COMPONENT COMMUNICATION Use EventBus pattern parent-component.vue
  53. 53. VUEX Vuex is the state management pattern & library for Vue applications.
  54. 54. VUEX Vuex is the state management pattern & library for Vue applications. ‣ Consider adding Vuex to your stack earlier
  55. 55. VUEX Vuex is the state management pattern & library for Vue applications. ‣ Consider adding Vuex to your stack earlier ‣ Some boilerplate but will make your life easier
  56. 56. VUEX Vuex is the state management pattern & library for Vue applications. ‣ Consider adding Vuex to your stack earlier ‣ Some boilerplate but will make your life easier ‣ One way of accessing and updating the state
  57. 57. VUEX Vuex is the state management pattern & library for Vue applications. ‣ Consider adding Vuex to your stack earlier ‣ Some boilerplate but will make your life easier ‣ One way of accessing and updating the state ‣ Consistent codebase and easy code reviews
  58. 58. THANK YOU 😍 Follow me on Twitter @fatihacet

×