<feed xmlns='http://www.w3.org/2005/Atom'>
<title>delta/gitlab/gitlab-ce.git/doc/development/frontend.md, branch fix-include-description-commit-message</title>
<subtitle>gitlab.com: gitlab-org/gitlab-ce.git
</subtitle>
<link rel='alternate' type='text/html' href='http://git.baserock.org/cgit/delta/gitlab/gitlab-ce.git/'/>
<entry>
<title>Merge branch 'patch-9' into 'master'</title>
<updated>2017-01-20T09:00:23+00:00</updated>
<author>
<name>Fatih Acet</name>
<email>acetfatih@gmail.com</email>
</author>
<published>2017-01-19T14:27:33+00:00</published>
<link rel='alternate' type='text/html' href='http://git.baserock.org/cgit/delta/gitlab/gitlab-ce.git/commit/?id=c834d41abe926b5f91d11ca7229e0949dc4feea8'/>
<id>c834d41abe926b5f91d11ca7229e0949dc4feea8</id>
<content type='text'>

Add documentation for possible causes of JS-related test failures.

See merge request !8214</content>
<content type='xhtml'>
<div xmlns='http://www.w3.org/1999/xhtml'>
<pre>

Add documentation for possible causes of JS-related test failures.

See merge request !8214</pre>
</div>
</content>
</entry>
<entry>
<title>Merge branch 'google-singletons-are' into 'master'</title>
<updated>2016-11-17T19:48:46+00:00</updated>
<author>
<name>Jacob Schatz</name>
<email>jschatz@gitlab.com</email>
</author>
<published>2016-11-17T19:48:46+00:00</published>
<link rel='alternate' type='text/html' href='http://git.baserock.org/cgit/delta/gitlab/gitlab-ce.git/commit/?id=da57eb39cd2e5d8dd92b05d16f49681f1677f3e8'/>
<id>da57eb39cd2e5d8dd92b05d16f49681f1677f3e8</id>
<content type='text'>

Decide on and document a convention for singletons

&gt; 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: () =&gt; {}
};
```
A live example of this is [GfmAutoComplete](https://gitlab.com/gitlab-org/gitlab-ce/blob/172aab108b875e8dc9a5f1d3c2d53018eff76ea1/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</content>
<content type='xhtml'>
<div xmlns='http://www.w3.org/1999/xhtml'>
<pre>

Decide on and document a convention for singletons

&gt; 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: () =&gt; {}
};
```
A live example of this is [GfmAutoComplete](https://gitlab.com/gitlab-org/gitlab-ce/blob/172aab108b875e8dc9a5f1d3c2d53018eff76ea1/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</pre>
</div>
</content>
</entry>
<entry>
<title>Fix broken link to observatory cli on Frontend Dev Guide</title>
<updated>2016-11-07T03:43:16+00:00</updated>
<author>
<name>Sam Rose</name>
<email>samrose3@gmail.com</email>
</author>
<published>2016-11-06T18:26:44+00:00</published>
<link rel='alternate' type='text/html' href='http://git.baserock.org/cgit/delta/gitlab/gitlab-ce.git/commit/?id=0c36b810abede73b3cf59f951e7467dbac54ec98'/>
<id>0c36b810abede73b3cf59f951e7467dbac54ec98</id>
<content type='text'>
</content>
<content type='xhtml'>
<div xmlns='http://www.w3.org/1999/xhtml'>
<pre>
</pre>
</div>
</content>
</entry>
<entry>
<title>Add tip for using Chrome to run and debug teaspoon tests.</title>
<updated>2016-11-04T03:59:46+00:00</updated>
<author>
<name>Bryce Johnson</name>
<email>bryce@gitlab.com</email>
</author>
<published>2016-11-03T09:57:30+00:00</published>
<link rel='alternate' type='text/html' href='http://git.baserock.org/cgit/delta/gitlab/gitlab-ce.git/commit/?id=06dcb0776eb2160ecff4910b9459f31ca6368507'/>
<id>06dcb0776eb2160ecff4910b9459f31ca6368507</id>
<content type='text'>
</content>
<content type='xhtml'>
<div xmlns='http://www.w3.org/1999/xhtml'>
<pre>
</pre>
</div>
</content>
</entry>
<entry>
<title>Fix spacing in code sample.</title>
<updated>2016-11-01T19:40:01+00:00</updated>
<author>
<name>Bryce Johnson</name>
<email>bryce@gitlab.com</email>
</author>
<published>2016-11-01T19:40:01+00:00</published>
<link rel='alternate' type='text/html' href='http://git.baserock.org/cgit/delta/gitlab/gitlab-ce.git/commit/?id=2159c8792b289bb27f9947fb834fbd497efeeb28'/>
<id>2159c8792b289bb27f9947fb834fbd497efeeb28</id>
<content type='text'>
</content>
<content type='xhtml'>
<div xmlns='http://www.w3.org/1999/xhtml'>
<pre>
</pre>
</div>
</content>
</entry>
<entry>
<title>Merge branch 'patch-8' into 'master'</title>
<updated>2016-10-31T22:33:34+00:00</updated>
<author>
<name>Fatih Acet</name>
<email>acetfatih@gmail.com</email>
</author>
<published>2016-10-31T22:33:34+00:00</published>
<link rel='alternate' type='text/html' href='http://git.baserock.org/cgit/delta/gitlab/gitlab-ce.git/commit/?id=75d15be9b2a83ed53b752b9860dc4f0c2f1aba8d'/>
<id>75d15be9b2a83ed53b752b9860dc4f0c2f1aba8d</id>
<content type='text'>

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</content>
<content type='xhtml'>
<div xmlns='http://www.w3.org/1999/xhtml'>
<pre>

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</pre>
</div>
</content>
</entry>
<entry>
<title>Document convention for singleton use in front-end code.</title>
<updated>2016-10-31T18:28:15+00:00</updated>
<author>
<name>Bryce Johnson</name>
<email>bryce@gitlab.com</email>
</author>
<published>2016-09-30T15:30:21+00:00</published>
<link rel='alternate' type='text/html' href='http://git.baserock.org/cgit/delta/gitlab/gitlab-ce.git/commit/?id=7f0ac04db59cb290961bd77a4e0d18cffd248151'/>
<id>7f0ac04db59cb290961bd77a4e0d18cffd248151</id>
<content type='text'>
</content>
<content type='xhtml'>
<div xmlns='http://www.w3.org/1999/xhtml'>
<pre>
</pre>
</div>
</content>
</entry>
<entry>
<title>Document how to run frontend tests</title>
<updated>2016-10-28T12:02:17+00:00</updated>
<author>
<name>Winnie</name>
<email>gitlab@winniehell.de</email>
</author>
<published>2016-10-27T13:15:54+00:00</published>
<link rel='alternate' type='text/html' href='http://git.baserock.org/cgit/delta/gitlab/gitlab-ce.git/commit/?id=cd3c8e9b1279dce29c5283b54d9b3305be73110f'/>
<id>cd3c8e9b1279dce29c5283b54d9b3305be73110f</id>
<content type='text'>
</content>
<content type='xhtml'>
<div xmlns='http://www.w3.org/1999/xhtml'>
<pre>
</pre>
</div>
</content>
</entry>
<entry>
<title>Add ES array methods as cause of Phantom.js errors.</title>
<updated>2016-10-26T17:12:34+00:00</updated>
<author>
<name>Bryce Johnson</name>
<email>bryce@gitlab.com</email>
</author>
<published>2016-10-25T16:30:14+00:00</published>
<link rel='alternate' type='text/html' href='http://git.baserock.org/cgit/delta/gitlab/gitlab-ce.git/commit/?id=f285f4790ff4a2188fbac75fc4a70b7f31c740bb'/>
<id>f285f4790ff4a2188fbac75fc4a70b7f31c740bb</id>
<content type='text'>
</content>
<content type='xhtml'>
<div xmlns='http://www.w3.org/1999/xhtml'>
<pre>
</pre>
</div>
</content>
</entry>
<entry>
<title>Document Capybara errors from es6 in es5 file.</title>
<updated>2016-10-12T17:00:38+00:00</updated>
<author>
<name>Bryce Johnson</name>
<email>bryce@gitlab.com</email>
</author>
<published>2016-10-12T17:00:38+00:00</published>
<link rel='alternate' type='text/html' href='http://git.baserock.org/cgit/delta/gitlab/gitlab-ce.git/commit/?id=abfb4f6e32ac13929678039e324307ee3ef2af43'/>
<id>abfb4f6e32ac13929678039e324307ee3ef2af43</id>
<content type='text'>
</content>
<content type='xhtml'>
<div xmlns='http://www.w3.org/1999/xhtml'>
<pre>
</pre>
</div>
</content>
</entry>
</feed>
