GitLab Frontend
AmsterdamJS Meetup
Fatih Acet
Sr. Frontend Engineer at GitLab
Google Developer Expert in Web Technologies
@fatihacet
WHO AM I?
FATIH ACET
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.
WHAT IS GITLAB?
GitLab is a single application for the complete DevOps lifecycle.
REPOSITORY VIEW
ISSUE BOARDS
MERGE REQUEST VIEW
PIPELINEs VIEW (CI/CD)
GITLAB THE COMPANY
Remote only company with
320 team members from 41 countries
GITLAB THE COMPANY
19 Frontend Engineers and growing…
GITLAB THE COMPANY
Team Handbook is a definitive guide for how we run the company.
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.
GITLAB FRONTEND (MAY 2016)
‣ Ruby on Rails Asset Pipeline
‣ jQuery based codebase
‣ Haml templates
‣ Inline JavaScript in Haml
‣ CoffeeScript
GITLAB FRONTEND (JUNE 2016)
Replaced CoffeeScript with ES6
GITLAB FRONTEND (JULY 2016)
Added ESLint to our codebase
GITLAB FRONTEND (NOVEMBER 2016)
Replaced Rails Asset Pipeline with Webpack
Replaced Teaspoon rails gem with Karma test runner
GITLAB FRONTEND (FEBRUARY 2017)
Switched to Yarn
GITLAB FRONTEND (AUGUST 2016)
💥
🎉 🎊
GITLAB FRONTEND (NOVEMBER 2016)
Upgraded to Vue v2
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
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
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
HOW DO WE USE VUE?
HOW DO WE USE VUE?
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
QUESTIONS?
THANK YOU 😍
Follow me on Twitter
@fatihacet

Evolution of GitLab Frontend