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.

Evolution of GitLab Frontend


Published on

At GitLab, we release a new version on 22nd of every month. This is a story of the evolution of GitLab Frontend while we keep delivering to production.

Published in: Software
  • Be the first to comment

Evolution of GitLab Frontend

  1. 1. GitLab Frontend AmsterdamJS Meetup 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.
  9. 9. GITLAB THE COMPANY Remote only company with 320 team members from 41 countries
  10. 10. GITLAB THE COMPANY 19 Frontend Engineers and growing…
  11. 11. GITLAB THE COMPANY Team Handbook is a definitive guide for how we run the company.
  12. 12. GITLAB THE COMPANY 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.
  13. 13. GITLAB FRONTEND (MAY 2016) ‣ Ruby on Rails Asset Pipeline ‣ jQuery based codebase ‣ Haml templates ‣ Inline JavaScript in Haml ‣ CoffeeScript
  14. 14. GITLAB FRONTEND (JUNE 2016) Replaced CoffeeScript with ES6
  15. 15. GITLAB FRONTEND (JULY 2016) Added ESLint to our codebase
  16. 16. GITLAB FRONTEND (NOVEMBER 2016) Replaced Rails Asset Pipeline with Webpack Replaced Teaspoon rails gem with Karma test runner
  17. 17. GITLAB FRONTEND (FEBRUARY 2017) Switched to Yarn
  18. 18. GITLAB FRONTEND (AUGUST 2016) 💥 🎉 🎊
  19. 19. GITLAB FRONTEND (NOVEMBER 2016) Upgraded to Vue v2
  20. 20. Why did we choose Vue? ‣ Webpack and npm was a part of our Frontend stack ‣ Progressive framework ‣ No time for rewrite ‣ Much smaller and faster ‣ Easy to learn ‣ Great ecosystem and community
  21. 21. 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
  22. 22. HOW DO WE USE VUE? ‣ Vuex for state management ‣ Standalone, SPA like, smart components ‣ Build new things with Vue ‣ Rewrite old parts when only needed
  23. 23. HOW DO WE USE VUE?
  24. 24. HOW DO WE USE VUE?
  25. 25. 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
  26. 26. QUESTIONS?
  27. 27. THANK YOU 😍 Follow me on Twitter @fatihacet