An overVue

a tale of speed and maintainability

commit porto 2018

@filipalacerda

Filipa lacerda

senior frontend engineer @ GitLab

@filipalacerda

gitlab.com/filipa

github.com/filipalacerda

alligator.io/author/filipa-lacerda

commit porto 2018

@filipalacerda

wHAT IS GITLAB?

commit porto 2018

@filipalacerda

300 team members

70 pets

commit porto 2018

@filipalacerda

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

0 offices

Remote only

40 countries

commit porto 2018

@filipalacerda

open source

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

COLLABORATION

RESULTS

EFFICIENCY

DIVERSITY

ITERATION

TRANSPARENCY

Work asynchronously with fully remote workforce

Track outcomes, not hours

Boring solutions win.

We want cultural diversity instead of cultural conformity.

Minimum Viable Change. If the change is better than the existing solution, ship it.

Everything at GitLab is public by default

results
efficiency
iteration

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

WHAT ABOUT THE PRODUCT?

commit porto 2018

@filipalacerda

1 new release every month

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

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

1 month

commit porto 2018

@filipalacerda

1 month

@iamphill

@dbalexandre

commit porto 2018

@filipalacerda

why Vue?

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

🦄     VERSATILE

commit porto 2018

@filipalacerda

🚀     PERFORMANT

commit porto 2018

@filipalacerda

     COMPONENT BASED

commit porto 2018

@filipalacerda

COMPOSING COMPONENTS

Props go down, events go up

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

Template system

Conditional rendering

List rendering

Form input bindings

Class and style bindings

Event handling

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

rewrite all the things?

commit porto 2018

@filipalacerda

rewrite all the things?

no.

commit porto 2018

@filipalacerda

results
efficiency
iteration

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

what about complex states?

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

https://gitlab.com/gitlab-org/gitlab-ce/blob/master/spec/javascripts/helpers/vuex_action_helper.js

commit porto 2018

@filipalacerda

commit porto 2018

@filipalacerda

challenges?

commit porto 2018

@filipalacerda

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

commit porto 2018

@filipalacerda

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

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

next steps

commit porto 2018

@filipalacerda

EVERYONE CAN CONTRIBUTE

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

commit porto 2018

@filipalacerda

Thank you

@filipalacerda

gitlab.com/filipa

github.com/filipalacerda

commit porto 2018

@filipalacerda