GitLab / Frontend group

The first in a series of workshops dedicated to monitoring, analyzing, and improving the performance of GitLab.

Jannik Lehman: introduction into what and why we measure and monitor
Denys Mishunov: deeper dive into Grafana and Sitespeed reports

January 24th, 2022.
The links mentioned in the video:

- The Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/349635
- The PoC #1: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/78579
- The PoC #2: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/79013

No description provided.

Create::Editor session on discussing the Web IDE integration tests and potential ways of improving the testing environment for Web IDE

The pair programming session from 11/01/2021 on provide/inject pattern in Source Editor extensions architecture

A walkthrough of converting Storybook examples to the CSF format in support of https://gitlab.com/groups/gitlab-org/-/epics/5651.

An experiment with running UI parts of the Source Editor extensions externally in the Vue compoenents.

Discussing the 3 possible ways of rendering the code blocks/snippets using the frontend instead of Rouge on the backend

Demonstration of an important aspect in refactoring the Bootstrap CSS utilities into gitlab-ui utility classes.

SPOILER: We can never assume 16px as the default font size on the users' computers

Discussing the PoC for the Inversion of Control architecture for the extensions in Source Editor.

Group level conversation about Source Editor and its architecture

The group discussion about the current and future architecture for the extensions of Source Editor.

In this session, we address adding additional contexts which we'll want to be included during our Startup CSS generation process.

The walk-through of the Markdown Live-Preview feature coming to GitLab in 14.2

Discussed the issues that the usage of Source Editor for viewing the blobs might bring, potential solutions, and the way forward in the effort.

In this session we pair program on a preexisting MR around improving MutationObserver's in our Jest test environment. We then pair on fixing a bug around usernames with special characters in MR assignees.

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/67250

On July 29, 2021 we had a discussion about the recent developments.


Discussed REST/GraphQL endpoints still in use and the reasons for it.


Adding tracking to sitespeed at the earliest moment possible.


Discussed a spike detected in recent days and possible causes.


And discussed a progressive enhancement tweak we're exploring for the Blame page that could prove useful in other contexts.

On July 15, 2021 we had a discussion about the recent improvements shipped and the upcoming work.


Namely a simple CSS improvement for LCP that Denys is hoping to generalize for other parts of the application. Worth a watch!



Agenda:
https://docs.google.com/document/d/18qidhvZksXJ7TxdgmJQEJB1IVISr-aSki00bONhbAf4/edit

In this session we pair up on creating a Danger rule for a recently added job with a quirk. Here's the MR we worked on https://gitlab.com/gitlab-org/gitlab/-/merge_requests/63234

In this pairing session we push this MR forward a bit:

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/61635

You may notice your big pipeline looks a little different on Gitlab and has a callout about feedback! If you’re into learning more about how we got to this new pipeline graph — in 50+ MRs with contributions from 6+ engineers and at least three UXers and two PMs — this is the video for you.
If you are interested in: project planning, deleting code, modernizing in place, GraphQL, observability, or failures, there will be something here for you.

Learn more at https://gitlab.com/gitlab-org/gitlab/-/issues/328538

Thomas goes over the recently released Lit 2.0 and the covering highlights of the launch.

Slides: https://docs.google.com/presentation/u/1/d/1VQzyDWoFu6JLEOJAKYG62duu5fP5oUYfxjTMrYBeqgc/edit

On April 22, 2021 we had a discussion to align the path forward of using the Source Editor in read-only mode to improve performance on the overall user flow of using the repository browser and viewing blobs (file content).

Agenda
https://docs.google.com/document/d/18qidhvZksXJ7TxdgmJQEJB1IVISr-aSki00bONhbAf4/edit#

In this session we pick up on an old effort and flesh out a helper that adapts graphql-mock-factory. This helper will enable us to remove a lot of duplication caused by creating mock data **and** improve the strength of our tests since it's all based on the schema.

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/57629/
graphql-mock-factory: https://www.npmjs.com/package/graphql-mock-factory

In this pairing session we look at simplifying some observable creation used for a new spam capturing apollo link!

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/56190

In this video we write a unit test for an ApolloLink we've written to interface with rails action cable.

00:00 - Start!
05:00 - Paul starts sharing his screen :|

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/43333#note_523177396

Right after the end of FY21-Q4 we had a call to discuss and share tips on dealing with Availability in Lovable Stages — or to be more exact, Lovable product categories: https://about.gitlab.com/direction/maturity/

In this call we had Frontend Engineers from the groups:
* Create: Source Code
* Create: Code Review
* Verify: Continuous Integration
* Verify: Pipeline Authoring
* Verify: Testing

This video captured that call and the following document the agenda:
https://docs.google.com/document/d/1_yyaaMatg0et4OigNGsjJPZDnV0I4sB8xy9MHoVPg78/edit

In this pairing session we work through some strange behavior that appeared when writing tests for a Vue component using a custom resolver.

Related issue: https://gitlab.com/gitlab-org/gitlab/-/issues/282440
Related docs: https://www.apollographql.com/docs/react/local-state/local-resolvers/
Related upstream issue: https://github.com/vuejs/vue-apollo/issues/636

In late FY21Q3 we had a call to discuss and share tips on efficient shipping of work.

This video captured that call and the following document the agenda:
https://docs.google.com/document/d/e/2PACX-1vR0JtQDIA8C0wjH9J2AvEDmOqBB05ddIISNs6UNDcRO6xSmOO_H7VQkI2TifHc87BK0KmAQegKaNssQ/pub

In this video we move some the merge conflict specific styles out of the main CSS to a page specific CSS.


https://gitlab.com/gitlab-org/gitlab/-/merge_requests/44168

Result MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/42885

In this video we pair on grokking some unusual API requests that also return JavaScript. We also discuss the best approach of unraveling this complexity.

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/41800

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/241970 – MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/41122

We continued working on: https://gitlab.com/gitlab-org/frontend/jest-speed-reporter

In this session we start looking into a GitLab CI solution to generate a report for slow Jest tests.

Part 2: https://youtu.be/BgFLT4oOwa8
Result: https://gitlab.com/gitlab-org/frontend/playground/jest-speed-reporter/

In this impromptu pairing session, we walk through writing a component unit test from scratch using a common approach and techniques.

In this pair session we talked about what to do with the remaining karma specs, and also started working on moving a [`tooltip_on_truncate`][1] component to [`gitlab-ui`][2].

0:00:00 - Intro to the problem
0:00:30 - What to do with balsamiq_viewer_browser_spec.js?
0:02:05 - What to do with lib/utils/browser_spec.js?
0:19:10 - What to do with dashboard_resize_browser_spec.js?
0:29:20 - What to do with tooltip_on_truncate_browser_spec.js?
0:31:50 - Let's start moving tooltip_on_truncate component!

[1]: https://gitlab.com/gitlab-org/gitlab/blob/c43156cd927a0010edc1f68e87cf75d73cb8ab89/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue#L1
[2]: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1614/

In this frontend pairs session, we investigate why writing tests that use the Toast UI dependency fail in jest. We discovered that we could remove some DOM API stubs because JSDOM already provides those APIs in the currrent version. We also had to stub others like some methods in the DOMRange class.

Result: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/33189#note_377446537

No description provided.

In this meeting, we talk about Vue components testing best practices.

We had a discussion on how we could realize page bundles.

Here's the issue we looked into https://gitlab.com/groups/gitlab-org/-/epics/3694

Here's the resulting MR of this https://gitlab.com/gitlab-org/gitlab/-/merge_requests/35436


0:00 - Jean introduces the issue that GitLab places all page specific styles in the application.scss
3:50 - Do we have anything set up to actually load page specific styles?
5:40 - Nope. It's just one big file.
8:00 - Laying out options and planning next steps
11:50 - Let's start doing this in Webpack with scss-loader
18:20 - We start adding the webpack rule after installing the loader packages
23:20 - Nico starts trying to test it out but the GDK fails for him
32:24 - Jose gracefully takes over and applies Nico's patch
36:20 - Jose creates the missing test.scss and tests it out in local gdk
40:00 - We run into a webpack error and fix it by fixing the regex in another rule
42:00 - Paul tries to sell parcel while we're waiting for webpack
43:00 - It works! Now what is webpack actually doing?
46:45 - We realize how webpack is doing this by inlining styles and there's some problems, and plan on using a mini-css-extract-plugin
53:00 - We look at webpack_helper.rb which is where we load page specific javascript
57:30 - Paul hops off for a second and we load the css extract plugin
1:01:30 - We try to ping the webpack development folder to see what the plugin did
1:07:30 - We talk about Jose's 32 GB of memory
1:12:50 - `webpack-prod` finally finishes and we check out the results

In this meeting we talk about some git tricks with reviewing MR's locally. We also talk about the maintainer approval process.

**Result:**
- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/33973


**Highlights:**
- 0:00 Eipi explains the problem and current debugging approaches
- 7:45 Eipi shows how he's been investigating memory issues
- 25:00 Eipi has to hop off but we were so close to seeing what was blowing up
- 30:00 Paul starts saving a memory snapshot locally and praises Demoscene while ranting about JavaScript
- 36:00 We start looking at the snapshot and aren't sure what "shallow size" vs. "retained size"
- 37:50 After researching we summarize what it means for us to have a huge gap between "shallow size" and "retained size"
- 53:30 Start on the fix with 5 minutes before Nico has to hop off
- 1:06:20 Summarizing our effort

On this call, we discuss guidelines to review GitLab UI Merge Requests.

- https://gitlab.com/groups/gitlab-org/-/epics/895
- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/32869

**Result:**
- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/32086
- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/32336


**Highlights:**
- 3:00 Debugging differences between Karma environment and Jest environment
- 28:10 Lets keep this spec in Karma since it seems dependent on browser environment
- 33:20 We start on a new task of finishing up migrating lib/utils directory

**Result:**
- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/31481
- https://gitlab.com/gitlab-org/gitlab/-/issues/217140


**Highlights:**
- 1:38 Where does this 5000ms timeout come from?
- 6:00 Start running the spec.
- 13:10 Considering if something like debounce is the issue, we review what debounce actually means.
- 16:00 Some discussion on integration vs. unit tests
- 25:50 Summarizing options discussed
- 29:10 What do we think of ad-hoc bumping the test timeout
- 30:30 We start slicing away to discover what's taking a long time
- 38:20 We start to see some improvement!
- 44:38 Summarizing the problem and approach again
- 45:30 We finalize our solution to fix the spec, but mounting lots of epics is still slow
- 49:00 We start exploring what parts of the component are slow
- 54:30 We talk about profiling in production as opposed to the test environment
- 57:57 We summarize some key takeaways

**Result:**
Here's the resulting MR from the first part of the session https://gitlab.com/gitlab-org/gitlab/-/merge_requests/30859


**Highlights:**
00:20 - We start on a spec which is in the middle of being migrated to Jest
17:30 - We talk about the challenges of the codemod to replace setImmediate with setTimeout.
27:00 - We start on migrating `ide/actions_spec`
27:45 - Migrating `spyOnDependency` calls from Karma to Jest
33:30 - We run into a really wild issue where actions passed to the Vuex store are null
47:50 - We are still trying to debug this issue...
52:45 - We are getting pretty close and realize there is a circular dependency between the Vuex store modules and the router
53:50 - We find another piece of the puzzle that the router won't work because we mocked the entire utility module in the spec
59:10 - We retro the problem and discuss the better pattern of exporting store options vs. an actually built store

The retrospective session dedicated to answering the questions after "Pragmatic Web Performance" workshop at Virtual Contribute 2020

**Result:**
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/30398


**Highlights:**
- 03:20 We get started but run into some issues with merging directories in bash
- 06:30 We decide to move files to `ide_new` to get started on actually converting things to Jest
- 13:20 We fix some web worker stuff by introducing a shared mock
- 23:50 We uncover a spec that was dependent on unrelated Karma specs running first
- 46:20 We write a code mod for converting import aliases
- 53:40 We figure out why our codemod was erroring which wasn't our codemod after all

First iteration of our Frontend Foundation office hours.



Handbook: To be added

Agenda: https://docs.google.com/document/d/1rTkn3ZZEYALgLgrtl8rbMJ0PH2Tw6T2n19t9b3Ebur4

The first of several calls to discuss approach to improve performance and maintainability of the Frontend MR Diffs app.

Epic: https://gitlab.com/groups/gitlab-org/-/epics/2852
Slack: #g_create_source-code-fe

(See Session #1: https://www.youtube.com/watch?v=QaoGn4PkDcU)

MR being reviewed: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28173
Pinning Tests docs MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28330

The first of several calls to discuss approach to improve performance and maintainability of the Frontend MR Diffs app.

Epic: https://gitlab.com/groups/gitlab-org/-/epics/2852
Slack: #g_create_source-code-fe

Result: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28807

Some highlights:

8:10 - We update our global afterEach from runAllTimers to runOnlyPendingTimers
11:54 - We talk about Paul's personal preference against mocking
14:50 - Eipi joins and we summarize the problem
25:30 - We mock debounce for the spec
26:15 - Product placement by Ikea
26:35 - Eipi solves the problem

Here's the resulting MR from this session:
- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28223


Near the end, we run into a really weird issue where a textarea is not updating like we expect. After hopping off the call, this was fixed. It looks like there was an accidental insertion where we returned `$nextTick` *and* used `done` which caused some timing issues 🤷‍♀️

**Result:**
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/27691#pinning-tests

**What's a pinning test?**
https://wiki.c2.com/?PinningTests

It's a "temporary" snapshot test to pin down behavior that gives you confidence in refactoring. The book Working Effectively with Legacy Code explains it best.

**Does GitLab not have good enough test coverage?**
We are committed to good test coverage (at all levels of testing) and improving this every release, but tests can't prove the absence of bugs (only the presence of them). Whether there is or isn't existing test coverage, adding a pinning test (which doesn't take long) can further help us refactor confidently and quickly.

0:00 - We start exploring the problems with [migrating these specs to Jest][1]
11:00 - We realize there's some bigger problems and start migrating [a HAML template][2] to [Vue SFC][3]

[1]: https://gitlab.com/groups/gitlab-org/-/epics/895
[2]: https://gitlab.com/gitlab-org/gitlab/-/blob/83a67aaa4945cef5d45be330b0aeea68fe524bf6/app/views/shared/boards/components/_board.html.haml
[3]: https://vuejs.org/v2/guide/single-file-components.html

No description provided.

Here's the Jestodus epic:
- https://gitlab.com/groups/gitlab-org/-/epics/895

Here's our jestodus-codemod project:
- https://gitlab.com/gitlab-org/frontend/playground/jestodus-codemod


Here's the MR we made :)
- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/27234

Quick convo to discuss frontend needs for milestone 12.9

We walk through using user callouts in order to create user-dismissable banners in the GitLab UI.

AMA doc for questions:
https://docs.google.com/document/d/1NvE6e5e3TveMClgFgj-T8s_A6hWAmGJxzoOpwEXjuec/edit?usp=sharing

AMA docs for questions:
https://docs.google.com/document/d/1rKw8RE1y1Vq5KM402QzTVCriZPPHNabJhkcYLVrrhRE/edit?usp=sharing

Filipa Lacerda and Phil Hughes present the frontend architecture at GitLab

No description provided.