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?

Nasil kullaniyoruz?

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

  • 325
Loading comments...

More from Fatih Acet