Commit Graph

19 Commits

Author SHA1 Message Date
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