Commit Graph

20 Commits

Author SHA1 Message Date
Filipa Lacerda dd4cf31ce2 First draft of "how to use vue.js in gitlab" documentation
Puts back trailing whitespace

Changes after review

Changes after review

Adds Changelog entry

Follow documentation styleguide
2017-01-30 10:59:52 +00:00
Bryce Johnson ec5c12ce77 Fix markdown errors. 2016-12-21 15:11:22 +00:00
Bryce Johnson 2c9ee1bb42 Add documentation for possible causes of JS-related test failures. 2016-12-21 10:58:00 +00:00
Jacob Schatz da57eb39cd Merge branch 'google-singletons-are' into 'master'
Decide on and document a convention for singletons

> The singleton pattern is a design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system. 

The simplest implementation uses an object literal to contain the logic.

```javascript
gl.MyThing = {
  prop1: 'hello',
  method1: () => {}
};
```
A live example of this is [GfmAutoComplete](172aab108b/app/assets/javascripts/gfm_auto_complete.js.es6)

Another approach makes use of ES6 `class` syntax.
```javascript
let singleton;

class MyThing {
  constructor() {
    if (!singleton) {
       singleton = this;
       singleton.init();
     }
      return singleton;
  }

  init() {
    this.prop1 = 'hello';
  }

  method1() {}
}

gl.MyThing = MyThing;
```
A live example of this is [Sidebar](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/sidebar.js.es6)

Another functional approach to define Singleton using `Javascript Revealing Module Pattern` is like below
```javascript
/**
  *  1. It instantiates only a single object
  *  2. It is safe – it keeps the reference to the singleton inside a variable, which lives inside a lexical closure, so it is not accessible by the outside world
  *  3. It allows privacy – you can define all private methods of your singleton inside the lexical closure of the first module pattern
  *  4. No this keyword trap (no wrong context referring)
  *  5. No use of new keyword
  *  6. Easy to write test code
  */
//
const Singleton = (function () {
  // Instance stores a reference to the Singleton
  var instance;
  function init() {
    // Singleton
    // Private methods and variables
    function privateMethod(){
        console.log( "I am private" );
    }
    var privateVariable = "Im also private";
    var privateRandomNumber = Math.random();
    return {
      // Public methods and variables
      publicMethod: function () {
        console.log( "The public can see me!" );
      },
      publicProperty: "I am also public",
      getRandomNumber: function() {
        return privateRandomNumber;
      }
    };
  };
  return {
    // Get the Singleton instance if one exists
    // or create one if it doesn't
    getInstance: function () {
      if ( !instance ) {
        instance = init();
      }
      return instance;
    }
  };
})();

const singletonObj = Singleton.getInstance()

```

## Are there points in the code the reviewer needs to double check?

## What does this MR do? 

Creates a space for discussion and contribution for interested devs.

## Why was this MR needed?

## Screenshots (if relevant)

## Does this MR meet the acceptance criteria?

- [x] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [x] All builds are passing
(http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

See merge request !6620
2016-11-17 19:48:46 +00:00
Sam Rose 0c36b810ab Fix broken link to observatory cli on Frontend Dev Guide 2016-11-06 22:43:16 -05:00
Bryce Johnson 06dcb0776e Add tip for using Chrome to run and debug teaspoon tests. 2016-11-03 22:59:46 -05:00
Bryce Johnson 2159c8792b Fix spacing in code sample. 2016-11-01 20:40:01 +01:00
Fatih Acet 75d15be9b2 Merge branch 'patch-8' into 'master'
Add ES array methods as cause of Phantom.js errors.

## What does this MR do?

Adds another example of something that causes a common error in JavaScript testing to the frontend dev docs.

See merge request !7102
2016-10-31 22:33:34 +00:00
Bryce Johnson 7f0ac04db5 Document convention for singleton use in front-end code. 2016-10-31 19:28:15 +01:00
Winnie cd3c8e9b12 Document how to run frontend tests 2016-10-28 14:02:17 +02:00
Bryce Johnson f285f4790f Add ES array methods as cause of Phantom.js errors. 2016-10-26 19:12:34 +02:00
Bryce Johnson abfb4f6e32 Document Capybara errors from es6 in es5 file. 2016-10-12 19:00:38 +02:00
Connor Shea fc94c637b1 Update Frontend Docs based on feedback. 2016-09-21 19:21:38 -06:00
Connor Shea 059656ad21 Add a section on vue and one on supported browsers. 2016-09-21 19:02:19 -06:00
Connor Shea 7730ec2d1c Add Overview section detailing our frontend stack. [ci skip] 2016-09-21 19:02:18 -06:00
Connor Shea d4e2c4eff5 Add short Testing section, minor fixes. 2016-09-21 19:02:18 -06:00
Connor Shea 3b3e9d17b9 Add CSP and SRI information [ci skip] 2016-09-21 19:02:18 -06:00
Connor Shea 79c2f60e91 Further revisions/additions [ci skip] 2016-09-21 19:02:18 -06:00
Connor Shea ccbaed208b Add more information on page-specific JS.
[ci skip]
2016-09-21 19:02:18 -06:00
Connor Shea 182bcc977a Initial incomplete draft of the Frontend Development Guidelines.
[ci skip]
2016-09-21 19:02:18 -06:00