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.

Building our Component Library

327 views

Published on

Slides from GitLab Meetup JP (July 19, 2019)

Published in: Technology
  • Be the first to comment

Building our Component Library

  1. 1. Building our Component Library Clement Ho
  2. 2. Clement Ho Frontend Engineering Manager GitLab - Monitor Health Austin, Texas USA @ClemMakesApps
  3. 3. When people hear that we are using Vue, most people think GitLab’s frontend is a Vue SPA
  4. 4. SPA (Single Page Application) Frontend runs as one application on the client
  5. 5. GitLab’s frontend is not a Vue SPA
  6. 6. Vue SPA Vue SPA Vue SPA Vue SPA Vue SPA Vue SPA GitLab’s Frontend
  7. 7. Why multiple SPAs?
  8. 8. To understand, we need to understand the historical context
  9. 9. Fullstack Application
  10. 10. Fullstack Application Backend HTML Templating Transcompiles into JavaScript
  11. 11. https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/create_merge_request_dropdown.js#L35-46 Problem 1: UI’s with high DOM manipulation was slow
  12. 12. https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/create_merge_request_dropdown.js#L35-46 Problem 1: UI’s with high DOM manipulation was slow Bad Performance
  13. 13. Problem 2: State management was difficult to maintain DropdownUser DropdownAjaxFilter FilteredSearchDropdown Extends Extends
  14. 14. Problem 2: State management was difficult to maintain DropdownUser DropdownAjaxFilter FilteredSearchDropdown Extends Extends Bad Maintainability
  15. 15. Problem 3: DOM and JS were often coupled
  16. 16. Problem 3: DOM and JS were often coupled Bad Performance + Maintainability
  17. 17. All these can be resolved with a modern framework
  18. 18. Modern Framework Frameworks tend to minimize multiple DOM read and writes, helps with state management and maximize reuse of components
  19. 19. Fullstack Application Backend HTML Templating JavaScript
  20. 20. In the spirit of Iteration, we started with one Vue app for Issue Boards
  21. 21. Why Issue Boards? 1. New feature that was independent 2. High DOM interactions with drag and drop
  22. 22. Issue boards validated that Vue would be our framework of choice いちばん!
  23. 23. At that point, we could have decided to convert the entire frontend into one SPA
  24. 24. That would mean no new frontend features for a long time
  25. 25. That was not acceptable for us
  26. 26. So, we decided to iterate
  27. 27. High DOM interaction components => Vue
  28. 28. As we continued, more and more frontend was written in Vue because components are easily reusable
  29. 29. Our ~/vue_shared/ kept growing
  30. 30. We decided to build our own component library
  31. 31. Problems we hoped to solve 1. Increase velocity of our team 2. Create an organized system to see reusable components
  32. 32. We started our component library in Jun 18, 2018
  33. 33. First component added in July 26, 2018
  34. 34. We began 1. Moving some components from vue_shared 2. Creating common components for the team to use that were styled and ready to go
  35. 35. Why component wrappers?
  36. 36. Encapsulation
  37. 37. Where are we today (1 year later)?
  38. 38. We have 42 components
  39. 39. What are our challenges?
  40. 40. Difficult to manage hot fixes and security releases with gitlab-ce/ee
  41. 41. gitlab-ui is quite coupled with the CSS from gitlab-ce
  42. 42. What do I foresee in our future?
  43. 43. 1. More components (quantity) 2. More reliable components (better test coverage) 3. Used in more projects besides gitlab-ce/ee
  44. 44. If you’re interested, we are always open to community contributors for gitlab-ui :) https://gitlab.com/gitlab-org/gitlab-ui
  45. 45. Thank you

×