Skip to content

startup.js Concept

At the moment we have the problem that our main.js bundle and also our css are still quite big. So parsing and initializing until the Vue App is started takes already sometime. Which leads to the fact that we have a big timespan until we even send off the API requests which means that our overall execution is very sequential.

The concept here is a minimal vanilla js script (startup.js) which executes immediately after page load to send off the needed API requests (which would be defined in HAML or through a rails helper into the meta tags). Then the main js and css would be parsed and initialized and if we are lucky we would then already have the needed data loaded for our Vue application. Which could significantly increase the overall timing as we parallelize the execution of different tasks and already give the server the work until the FE is ready to work.

Example of the filetree

Locally timed:

  • BE takes for the page itself 766ms
  • First API request is sent of at 1.3, so the CSS + JS execution gap in between is 644ms (which would in this example mean that the API could would be done until the Vue app is loaded)
  • Last API request takes 2.4 sec to even start (which leads then also to the longer time until all is rendered)

Bildschirmfoto_2020-06-05_um_15.17.50

Goals

  • Very easy configuration in the actual HAML templates to initialize requests
  • Send REST calls early
  • Send GraphQL calls early
  • Event system that either returns the data if call is already done in the meantime

How does it work

Generic

The idea is simply to start any REST calls (hopefully soon also GraphQL) as soon as the page is loaded to parallelize it while the JS is parsed and initialized and reduce overall rendering time. Clear goal to make it as easy as possible to define calls.

  1. You define any REST endpoint URL's that should be loaded right away next to your Vue application (In this first implementation in app/views/projects/_files.html.haml). By using a new helper method add_page_startup_api_call which adds the URL to a new object
  2. In the head Rails template we check if any startup URLS were defined !34713 (diffs)
  3. The ruby object is converted in a script tag to JSON and initialized into a new global gl attribute named startup_calls - !34713 (diffs)
  4. Those URL's are called and the specific URL startup_calls attribute is converted to an object to hold the fetch promise and the actual response to check later. !34713 (diffs)

Specific to the File Tree View

  1. In the initialization of the Vue App we check if a startup call with our needed URL was defined and maybe has either a response or is still a promise
  2. For the Commit Infos of the current tree - !34713 (diffs)
  3. If the Readme was maybe already loaded - !34713 (diffs)
Edited by Tim Zallmann