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.

GitLab Frontend and VueJS at GitLab

1,410 views

Published on

At GitLab, we release a new version on 22nd of every month. This is a story of the evolution of GitLab Frontend and why we choose VueJS and how we use it on production.

Published in: Software
  • Be the first to comment

GitLab Frontend and VueJS at GitLab

  1. 1. GitLab Frontend and VUE.JS AT GITLAB DevFest Nantes 2018 Fatih Acet
  2. 2. Sr. Frontend Engineer at GitLab Google Developer Expert in Web Technologies @fatihacet WHO AM I? FATIH ACET
  3. 3. 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.
  4. 4. WHAT IS GITLAB? GitLab is a single application for the complete DevOps lifecycle.
  5. 5. REPOSITORY VIEW
  6. 6. ISSUE BOARDS
  7. 7. MERGE REQUEST VIEW
  8. 8. PIPELINEs VIEW (CI/CD)
  9. 9. GITLAB THE COMPANY
  10. 10. GITLAB THE COMPANY ‣ 365 team members from 45 countries
  11. 11. GITLAB THE COMPANY ‣ 365 team members from 45 countries
  12. 12. GITLAB THE COMPANY ‣ 365 team members from 45 countries ‣ Remote only company with no office location
  13. 13. GITLAB THE COMPANY 20 Frontend Engineers and growing…
  14. 14. GITLAB THE COMPANY Team Handbook is a definitive guide for how we run the company.
  15. 15. GITLAB THE COMPANY Team Handbook is a definitive guide for how we run the company.
  16. 16. GITLAB FRONTEND (MAY 2016)
  17. 17. GITLAB FRONTEND (MAY 2016) ‣ Ruby on Rails Asset Pipeline
  18. 18. GITLAB FRONTEND (MAY 2016) ‣ Ruby on Rails Asset Pipeline
  19. 19. GITLAB FRONTEND (MAY 2016) ‣ Ruby on Rails Asset Pipeline ‣ jQuery based codebase
  20. 20. GITLAB FRONTEND (MAY 2016)
  21. 21. GITLAB FRONTEND (MAY 2016) ‣ Ruby on Rails Asset Pipeline ‣ jQuery based codebase
  22. 22. GITLAB FRONTEND (MAY 2016) ‣ Ruby on Rails Asset Pipeline ‣ jQuery based codebase ‣ Haml templates
  23. 23. GITLAB FRONTEND (MAY 2016)
  24. 24. GITLAB FRONTEND (MAY 2016) ‣ Ruby on Rails Asset Pipeline ‣ jQuery based codebase ‣ Haml templates
  25. 25. GITLAB FRONTEND (MAY 2016) ‣ Ruby on Rails Asset Pipeline ‣ jQuery based codebase ‣ Haml templates ‣ Inline JavaScript in Haml
  26. 26. GITLAB FRONTEND (MAY 2016)
  27. 27. GITLAB FRONTEND (MAY 2016) ‣ Ruby on Rails Asset Pipeline ‣ jQuery based codebase ‣ Haml templates ‣ Inline JavaScript in Haml
  28. 28. GITLAB FRONTEND (MAY 2016) ‣ Ruby on Rails Asset Pipeline ‣ jQuery based codebase ‣ Haml templates ‣ Inline JavaScript in Haml ‣ CoffeeScript
  29. 29. GITLAB FRONTEND (JUNE 2016) Replaced CoffeeScript with ES6
  30. 30. GITLAB FRONTEND (JULY 2016) Added ESLint to our codebase
  31. 31. GITLAB FRONTEND (NOVEMBER 2016) Replaced Rails Asset Pipeline with Webpack Replaced Teaspoon rails gem with Karma test runner
  32. 32. GITLAB FRONTEND (FEBRUARY 2017) Switched to Yarn
  33. 33. GITLAB FRONTEND (AUGUST 2016)
  34. 34. GITLAB FRONTEND (AUGUST 2016)
  35. 35. GITLAB FRONTEND (NOVEMBER 2016) Upgraded to Vue v2
  36. 36. Why did we choose Vue?
  37. 37. Why did we choose Vue? ‣ Webpack and npm was not a part of our Frontend stack
  38. 38. Why did we choose Vue? ‣ Webpack and npm was not a part of our Frontend stack ‣ No time to rewrite
  39. 39. Why did we choose Vue? ‣ Webpack and npm was not a part of our Frontend stack ‣ No time to rewrite ‣ Progressive framework
  40. 40. Why did we choose Vue? ‣ Webpack and npm was not a part of our Frontend stack ‣ No time to rewrite ‣ Progressive framework ‣ Much smaller and faster
  41. 41. Why did we choose Vue? ‣ Webpack and npm was not a part of our Frontend stack ‣ No time to rewrite ‣ Progressive framework ‣ Much smaller and faster ‣ Easy to learn
  42. 42. Why did we choose Vue? ‣ Webpack and npm was not a part of our Frontend stack ‣ No time to rewrite ‣ Progressive framework ‣ Much smaller and faster ‣ Easy to learn ‣ Great ecosystem and community
  43. 43. Why did we choose Vue? ‣ Webpack and npm was not a part of our Frontend stack ‣ No time to rewrite ‣ Progressive framework ‣ Much smaller and faster ‣ Easy to learn ‣ Great ecosystem and community ‣ No Licence issues
  44. 44. HOW DO WE USE VUE?
  45. 45. HOW DO WE USE VUE? ‣ Vuex for state management
  46. 46. HOW DO WE USE VUE? ‣ Vuex for state management
  47. 47. HOW DO WE USE VUE? ‣ Vuex for state management
  48. 48. HOW DO WE USE VUE? ‣ Vuex for state management ‣ Standalone, SPA like, smart components
  49. 49. HOW DO WE USE VUE?
  50. 50. HOW DO WE USE VUE?
  51. 51. HOW DO WE USE VUE?
  52. 52. HOW DO WE USE VUE?
  53. 53. HOW DO WE USE VUE?
  54. 54. HOW DO WE USE VUE?
  55. 55. HOW DO WE USE VUE?
  56. 56. HOW DO WE USE VUE?
  57. 57. HOW DO WE USE VUE?
  58. 58. HOW DO WE USE VUE?
  59. 59. HOW DO WE USE VUE?
  60. 60. HOW DO WE USE VUE? Vuex structure
  61. 61. HOW DO WE USE VUE? Folder structure
  62. 62. HOW DO WE USE VUE? Testing Vue components
  63. 63. HOW DO WE USE VUE? Testing Vue components
  64. 64. HOW DO WE USE VUE? Testing Vue components
  65. 65. HOW DO WE USE VUE? ‣ Vuex for state management ‣ Standalone, SPA like, smart components ‣ Single File Components without style tag
  66. 66. HOW DO WE USE VUE? ‣ Vuex for state management ‣ Standalone, SPA like, smart components ‣ Single File Components without style tag ‣ Build new things with Vue
  67. 67. HOW DO WE USE VUE? ‣ Vuex for state management ‣ Standalone, SPA like, smart components ‣ Single File Components without style tag ‣ Build new things with Vue ‣ Rewrite old parts when only needed
  68. 68. WHAT IS THE OUTCOME?
  69. 69. WHAT IS THE OUTCOME? ‣ Started to write less code
  70. 70. WHAT IS THE OUTCOME? ‣ Started to write less code ‣ Less code means less bugs
  71. 71. WHAT IS THE OUTCOME? ‣ Started to write less code ‣ Less code means less bugs ‣ Bugs were easier to fix
  72. 72. WHAT IS THE OUTCOME? ‣ Started to write less code ‣ Less code means less bugs ‣ Bugs were easier to fix ‣ Started to have reusable components
  73. 73. WHAT IS THE OUTCOME? ‣ Started to write less code ‣ Less code means less bugs ‣ Bugs were easier to fix ‣ Started to have reusable components ‣ Allowed us to start working on realtime updates
  74. 74. FUTURE PLANS
  75. 75. FUTURE PLANS ‣ Make it faster
  76. 76. FUTURE PLANS ‣ Make it faster ‣ Make it reusable
  77. 77. FUTURE PLANS ‣ Make it faster ‣ Make it reusable ‣ Creating a design system called gitlab-ui
  78. 78. FUTURE PLANS ‣ Make it faster ‣ Make it reusable ‣ Creating a design system called gitlab-ui ‣ Better tooling to optimise workflows and automate things
  79. 79. FUTURE PLANS ‣ Make it faster ‣ Make it reusable ‣ Creating a design system called gitlab-ui ‣ Better tooling to optimise workflows and automate things ‣ Expand Frontend Team by hiring new engineers
  80. 80. JOIN GITLAB Want to work at GitLab? We are hiring for different engineering positions. Join GitLab! Current Engineering positions as 26th of July. May be outdated in the future.
  81. 81. QUESTIONS?
  82. 82. THANK YOU 😍 Follow me on Twitter @fatihacet

×