GitLab Frontend and VueJS at GitLab

5 likes1,919 views

The document presents a talk by Fatih Acet, a senior frontend engineer at GitLab, discussing GitLab's frontend development using Vue.js and its evolution from various technologies. GitLab is an open-source software development tool aimed at streamlining the DevOps lifecycle, which has transitioned to Vue.js for its smaller size, speed, and ease of learning. Future plans include creating a design system called gitlab-ui, improving tool workflows, and expanding the frontend team.

Software

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

GITLAB THE COMPANY
‣ 365 team members from 45 countries

GITLAB THE COMPANY
‣ 365 team members from 45 countries
‣ Remote only company with no ofﬁce location

GITLAB THE COMPANY
20 Frontend Engineers and growing…

GITLAB THE COMPANY
Team Handbook is a deﬁnitive guide for how we run the company.

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

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

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

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

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 (NOVEMBER 2016)
Upgraded to Vue v2

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

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

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

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

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

HOW DO WE USE VUE?
‣ Vuex for state management

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

HOW DO WE USE VUE?
Testing Vue components

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

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

WHAT IS THE OUTCOME?
‣ Started to write less code

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

WHAT IS THE OUTCOME?
‣ Started to write less code
‣ Less code means less bugs
‣ Bugs were easier to ﬁx

WHAT IS THE OUTCOME?
‣ Started to write less code
‣ Less code means less bugs
‣ Bugs were easier to ﬁx
‣ Started to have reusable components

WHAT IS THE OUTCOME?
‣ Started to write less code
‣ Less code means less bugs
‣ Bugs were easier to ﬁx
‣ Started to have reusable components
‣ Allowed us to start working on realtime updates

FUTURE PLANS
‣ Make it faster
‣ Make it reusable

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

FUTURE PLANS
‣ Make it faster
‣ Make it reusable
‣ Creating a design system called gitlab-ui
‣ Better tooling to optimise workﬂows and automate things

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.

THANK YOU 😍
Follow me on Twitter
@fatihacet

GitLab Frontend and VueJS at GitLab

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 ofﬁce location

13. GITLAB THE COMPANY 20 Frontend Engineers and growing…

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

15. GITLAB THE COMPANY Team Handbook is a deﬁnitive 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 ﬁx

72. WHAT IS THE OUTCOME? ‣ Started to write less code ‣ Less code means less bugs ‣ Bugs were easier to ﬁx ‣ Started to have reusable components

73. WHAT IS THE OUTCOME? ‣ Started to write less code ‣ Less code means less bugs ‣ Bugs were easier to ﬁx ‣ 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 workﬂows and automate things

79. FUTURE PLANS ‣ Make it faster ‣ Make it reusable ‣ Creating a design system called gitlab-ui ‣ Better tooling to optimise workﬂows 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

GitLab Frontend and VueJS at GitLab

More Related Content

Similar to GitLab Frontend and VueJS at GitLab (20)

Recently uploaded (20)

GitLab Frontend and VueJS at GitLab