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.

1. GitLab Frontend
and VUE.JS AT GITLAB
DevFest Nantes 2018
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

10. GITLAB THE COMPANY
‣ 365 team members from 45 countries

11. GITLAB THE COMPANY
‣ 365 team members from 45 countries

12. GITLAB THE COMPANY
‣ 365 team members from 45 countries
‣ Remote only company with no office location

13. GITLAB THE COMPANY
20 Frontend Engineers and growing…

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

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

16. GITLAB FRONTEND (MAY 2016)

17. GITLAB FRONTEND (MAY 2016)
‣ Ruby on Rails Asset Pipeline

18. GITLAB FRONTEND (MAY 2016)
‣ Ruby on Rails Asset Pipeline

19. GITLAB FRONTEND (MAY 2016)
‣ Ruby on Rails Asset Pipeline
‣ jQuery based codebase

20. GITLAB FRONTEND (MAY 2016)

21. GITLAB FRONTEND (MAY 2016)
‣ Ruby on Rails Asset Pipeline
‣ jQuery based codebase

22. GITLAB FRONTEND (MAY 2016)
‣ Ruby on Rails Asset Pipeline
‣ jQuery based codebase
‣ Haml templates

23. GITLAB FRONTEND (MAY 2016)

24. GITLAB FRONTEND (MAY 2016)
‣ Ruby on Rails Asset Pipeline
‣ jQuery based codebase
‣ Haml templates

25. GITLAB FRONTEND (MAY 2016)
‣ Ruby on Rails Asset Pipeline
‣ jQuery based codebase
‣ Haml templates
‣ Inline JavaScript in Haml

26. GITLAB FRONTEND (MAY 2016)

27. GITLAB FRONTEND (MAY 2016)
‣ Ruby on Rails Asset Pipeline
‣ jQuery based codebase
‣ Haml templates
‣ Inline JavaScript in Haml

28. GITLAB FRONTEND (MAY 2016)
‣ Ruby on Rails Asset Pipeline
‣ jQuery based codebase
‣ Haml templates
‣ Inline JavaScript in Haml
‣ CoffeeScript

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

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

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

32. GITLAB FRONTEND (FEBRUARY 2017)
Switched to Yarn

33. GITLAB FRONTEND (AUGUST 2016)

34. GITLAB FRONTEND (AUGUST 2016)

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

36. Why did we choose Vue?

37. Why did we choose Vue?
‣ Webpack and npm was not a part of our Frontend stack

38. Why did we choose Vue?
‣ Webpack and npm was not a part of our Frontend stack
‣ No time to rewrite

39. Why did we choose Vue?
‣ Webpack and npm was not a part of our Frontend stack
‣ No time to rewrite
‣ Progressive framework

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

45. HOW DO WE USE VUE?
‣ Vuex for state management

46. HOW DO WE USE VUE?
‣ Vuex for state management

47. HOW DO WE USE VUE?
‣ Vuex for state management

48. HOW DO WE USE VUE?
‣ Vuex for state management
‣ Standalone, SPA like, smart components

49. HOW DO WE USE VUE?

50. HOW DO WE USE VUE?

51. HOW DO WE USE VUE?

52. HOW DO WE USE VUE?

53. HOW DO WE USE VUE?

54. HOW DO WE USE VUE?

55. HOW DO WE USE VUE?

56. HOW DO WE USE VUE?

57. HOW DO WE USE VUE?

58. HOW DO WE USE VUE?

59. HOW DO WE USE VUE?

60. HOW DO WE USE VUE?
Vuex structure

61. HOW DO WE USE VUE?
Folder structure

62. HOW DO WE USE VUE?
Testing Vue components

63. HOW DO WE USE VUE?
Testing Vue components

64. HOW DO WE USE VUE?
Testing Vue components

65. HOW DO WE USE VUE?
‣ Vuex for state management
‣ Standalone, SPA like, smart components
‣ Single File Components without style tag

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. 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. WHAT IS THE OUTCOME?

69. WHAT IS THE OUTCOME?
‣ Started to write less code

70. WHAT IS THE OUTCOME?
‣ Started to write less code
‣ Less code means less bugs

71. WHAT IS THE OUTCOME?
‣ Started to write less code
‣ Less code means less bugs
‣ Bugs were easier to fix

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. 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. FUTURE PLANS

75. FUTURE PLANS
‣ Make it faster

76. FUTURE PLANS
‣ Make it faster
‣ Make it reusable

77. FUTURE PLANS
‣ Make it faster
‣ Make it reusable
‣ Creating a design system called gitlab-ui

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

82. THANK YOU 😍
Follow me on Twitter
@fatihacet