GitLab's journey with Vue

from jQuery to GraphQL

Filipa Lacerda

senior frontend engineer @ GitLab

connectfest 2019

@filipalacerda

WHAT IS GITLAB?

connectfest 2019

@filipalacerda

861+ team members

199+ pets

https://about.gitlab.com/team/

connectfest 2019

@filipalacerda

Remote only

connectfest 2019

@filipalacerda

0 offices

58 countries

connectfest 2019

@filipalacerda

open source

connectfest 2019

@filipalacerda

COLLABORATION

RESULTS

EFFICIENCY

ITERATION

TRANSPARENCY

Work asynchronously with fully remote workforce

Track outcomes, not hours

Boring solutions win.

Minimum Viable Change. If it's better than the existing solution, ship it.

Everything at GitLab is public by default

connectfest 2019

@filipalacerda

results

connectfest 2019

@filipalacerda

efficiency

iteration

WHAT ABOUT THE PRODUCT?

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

One product that covers the entire software development lifecycle.

DEVELOPMENT

DELIVERY

connectfest 2019

@filipalacerda

1 new release every month

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/5554

connectfest 2019

@filipalacerda

1 month

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

1 month

@iamphill

@dbalexandre

connectfest 2019

@filipalacerda

why Vue?

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

🦄     VERSATILE

connectfest 2019

@filipalacerda

🚀     PERFORMANT

connectfest 2019

@filipalacerda

     COMPONENT BASED

connectfest 2019

@filipalacerda

COMPOSING COMPONENTS

Props go down, events go up

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

Template system

Conditional rendering

List rendering

Form input bindings

Class and style bindings

Event handling

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

but how?

connectfest 2019

@filipalacerda

rewrite all the things?

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

results

efficiency

iteration

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

what about complex states?

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

human readable

maintanable

consistency

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

challenges

connectfest 2019

@filipalacerda

connectfest 2019

@filipalacerda

+

over 55 frontend engineers

NONE

connectfest 2019

@filipalacerda

  • One way of writing Vue Apps
  • Architecture
  • Tests
  • Style guide

https://docs.gitlab.com/ce/development/fe_guide/vue.html

https://docs.gitlab.com/ce/development/fe_guide/vuex.html 

connectfest 2019

@filipalacerda

next steps

connectfest 2019

@filipalacerda

everyone can contribute

https://gitlab.com/gitlab-org/gitlab-ce/tree/master

connectfest 2019

@filipalacerda

questions?

connectfest 2019

@filipalacerda

THANK YOU!

connectfest 2019

@filipalacerda

Made with Slides.com