GitLab Frontend

Software Craftsmanship Turkey

04.04.2018

Fatih Acet

Sr. Frontend Engineer at GitLab.com

@fatihacet
acetfatih@gmail.com
fatihacet.com
gitlab.com/fatihacet
github.com/fatihacet

Google Developer Expert on Web Technologies

GitLab Nedir?

Git altyapisini kullanan kod yonetim ve depolama araci
Acik kaynak kodlu
Is takip sistemi (Issue Tracker)
Kod gozden gecirme araclari (Merge Request Review)
Surekli Entegrasyon destegi (CI/CD)
Dokumantasyon destegi (Wiki)
Ucretsiz CE versiyonu

GitLab Community Edition

Issue Boards

Merge Requests

Pipelines (CI/CD)

37 ulkeden 265 calisani bulunan
"remote only" bir sirket

18 Frontend Gelistiricisi

Team Handbook

Mayis 2016

Legacy bir kod base
Karmasik ve uzun jQuery kodlari
CoffeeScript
Rails Asset Pipeline
Haml templates

Notes.prototype.renderDiscussionNote = function(note) {
  var discussionContainer, form, note_html, row;
  if (!this.isNewNote(note)) {
    return;
  }
  this.note_ids.push(note.id);
  form = $("#new-discussion-note-form-" + note.discussion_id);
  if ((note.original_discussion_id != null) && form.length === 0) {
    form = $("#new-discussion-note-form-" + note.original_discussion_id);
  }
  row = form.closest("tr");
  note_html = $(note.html);
  note_html.renderGFM();
  // is this the first note of discussion?
  discussionContainer = $(".notes[data-discussion-id='" + note.discussion_id + "']");
  if ((note.original_discussion_id != null) && discussionContainer.length === 0) {
    discussionContainer = $(".notes[data-discussion-id='" + note.original_discussion_id + "']");
  }
  if (discussionContainer.length === 0) {
    // insert the note and the reply button after the temp row
    row.after(note.diff_discussion_html);
    // remove the note (will be added again below)
    row.next().find(".note").remove();
    // Before that, the container didn't exist
    discussionContainer = $(".notes[data-discussion-id='" + note.discussion_id + "']");
    // Add note to 'Changes' page discussions
    discussionContainer.append(note_html);
    // Init discussion on 'Discussion' page if it is merge request page
    if ($('body').attr('data-page').indexOf('projects:merge_request') === 0) {
      $('ul.main-notes-list').append(note.discussion_html).renderGFM();
    }
  } else {
    // append new note to all matching discussions
    discussionContainer.append(note_html);
  }

  if (typeof gl.diffNotesCompileComponents !== 'undefined') {
    gl.diffNotesCompileComponents();
  }

  gl.utils.localTimeAgo($('.js-timeago'), false);
  return this.updateNotesCount(1);
};

Haziran 2016

CoffeeScript'den ES6'e gecis

Temmuz 2016

ESLint

Kasim 2016

Babel + Webpack'e gecis

Subat 2017

Yarn

Agustos 2016

❤️

VueJS v2

Neden Vue JS?

Npm, Webpack gibi araclarin eksikligi
Boyut olarak daha kucuk
Anlasilir ve ogrenmesi kolay
vue.min.js ekleyip gelistirmeye baslamak mumkun

Neler kazandirdi?

Daha az kod yazmaya basladik
Daha az bug gormeye basladik
Cikan bug'larin fix edilmesi daha kolay ve hizliydi
Tekrar kullanilabilir component'lere sahip olduk
Gercek zamanli guncellemelere gecis hizlandi

Nasil kullaniyoruz?

export default {
  directives: {
    tooltip,
  },
  props: {
    discussions: {
      type: Array,
      required: true,
    },
  },
  components: {
    Icon,
    UserAvatarImage,
  },
  computed: {
    discussionsExpanded() {
      return this.discussions.every(discussion => discussion.expanded);
    },
    allDiscussions() {
      return this.discussions.reduce((acc, note) => {
        return acc.concat(note.notes);
      }, []);
    },
  },
  methods: {
    ...mapActions(['toggleDiscussion']),
    getTooltipText(note) {
      if (note.length > LENGTH_OF_AVATAR_TOOLTIP) {
        note = truncate(note, LENGTH_OF_AVATAR_TOOLTIP);
      }

      return `${noteData.author.name}: ${note}`;
    },
  },
};
</script>

<template>
  <div class="diff-comment-avatar-holders">
    <button
      v-if="discussionsExpanded"
      @click="toggleDiscussions"
      type="button"
      aria-label="Show comments"
      class="diff-notes-collapse js-diff-comment-avatar"
    >
      <icon
        name="collapse"
        :size="12"
      />
    </button>

Isler nasil yuruyor?

Herkes ama herkes katkida bulunabilir. Acik kaynak 😍

Isler nasil yuruyor?

Herkes ama herkes katkida bulunabilir. Acik kaynak 😍
Herkes kod review yapabilir.
Sadece belirli kisiler merge edebilir.

Isler nasil yuruyor?

Herkes ama herkes katkida bulunabilir. Acik kaynak 😍
Herkes kod review yapabilir.
Sadece belirli kisiler merge edebilir.
Her gun yarim saatlik toplantilar yapiliyor.
Her hafta Sali gunu Frontend Takim toplantisi yapiliyor.
Frontend ve UI/UX takimi her ayin beraber toplanti yapiyor.
Lead ile her hafta bire bir toplanti yapiliyor.

Isler nasil yuruyor?

Herkes ama herkes katkida bulunabilir. Acik kaynak 😍
Herkes kod review yapabilir.
Sadece belirli kisiler merge edebilir.
Her gun yarim saatlik toplantilar yapiliyor.
Her hafta Sali gunu Frontend Takim toplantisi yapiliyor.
Frontend ve UI/UX takimi her ayin beraber toplanti yapiyor.
Her ayin 22'sinde yeni version deploy ediliyor.
Ayni ayin 7'si code freeze ediliyor.
Release'den sonra Retrospective toplantisi yapiliyor.
Yeni release baslamadan Kick off toplantisi yapiliyor.

Isler nasil yuruyor?

Herkes ama herkes katkida bulunabilir. Acik kaynak 😍
Herkes kod review yapabilir.
Sadece belirli kisiler merge edebilir.
Her gun yarim saatlik toplantilar yapiliyor.
Her hafta Sali gunu Frontend Takim toplantisi yapiliyor.
Frontend ve UI/UX takimi her ayin beraber toplanti yapiyor.
Her ayin 22'sinde yeni version deploy edilir.
Ayni ayin 7'si code freeze edilir.
Release'den sonra Retrospective toplantisi yapiliyor.
Yeni release baslamadan Kick off toplantisi yapiliyor.
Yeni gelistirilecek ozellikler icin kick off toplantilari yapiliyor.
Yeni gelistirilecek ozellikler icin ufak bir takim toplaniyor.

SORU & CEVAP

TESEKKURLER

❤️

GitLab Frontend

By Fatih Acet

GitLab Frontend

1,040

Fatih Acet

Sr. Frontend Engineer at GitLab

GitLab Frontend

GitLab Frontend

More from Fatih Acet