Fatih Acet, a senior frontend engineer at GitLab, discusses GitLab as an open-source devops tool designed to streamline software development. The presentation covers the evolution of GitLab's frontend technology, including the transition to Vue.js for improved efficiency and reduced bugs. Future plans include enhancing performance, building a design system, and expanding the frontend team.

1. GitLab Frontend
AmsterdamJS Meetup
Fatih Acet

2. Sr. Frontend Engineer at GitLab
Google Developer Expert in Web Technologies
@fatihacet
WHO AM I?
FATIH ACET

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. WHAT IS GITLAB?
GitLab is a single application for the complete DevOps lifecycle.

5. REPOSITORY VIEW

6. ISSUE BOARDS

7. MERGE REQUEST VIEW

8. PIPELINEs VIEW (CI/CD)

9. GITLAB THE COMPANY
Remote only company with
320 team members from 41 countries

10. GITLAB THE COMPANY
19 Frontend Engineers and growing…

11. GITLAB THE COMPANY
Team Handbook is a definitive guide for how we run the company.

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. GITLAB FRONTEND (MAY 2016)
‣ Ruby on Rails Asset Pipeline
‣ jQuery based codebase
‣ Haml templates
‣ Inline JavaScript in Haml
‣ CoffeeScript

14. GITLAB FRONTEND (JUNE 2016)
Replaced CoffeeScript with ES6

15. GITLAB FRONTEND (JULY 2016)
Added ESLint to our codebase

16. GITLAB FRONTEND (NOVEMBER 2016)
Replaced Rails Asset Pipeline with Webpack
Replaced Teaspoon rails gem with Karma test runner

17. GITLAB FRONTEND (FEBRUARY 2017)
Switched to Yarn

18. GITLAB FRONTEND (AUGUST 2016)
💥
🎉 🎊

19. GITLAB FRONTEND (NOVEMBER 2016)
Upgraded to Vue v2

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. 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. 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. HOW DO WE USE VUE?

24. HOW DO WE USE VUE?

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. QUESTIONS?

27. THANK YOU 😍
Follow me on Twitter
@fatihacet