Du JavaScript propre

Compilation personnelle de quelques bonnes pratiques de codage en JavaScript.

Transcript

1. Du JavaScript propre
   ce que j'ai retenu
   

   View Slide

2. Promis, j'arrête
   

   View Slide

3. Inline
   
   
   News
   
   
   

   View Slide

4. Point-virgule, où es-tu ?
   var foo = function() {
   } // parse error, semicolon expected
   test()
   

   View Slide

5. Espace de nommage pollué
   // global scope
   var foo = 42;
   function test() {
   // local scope
   foo = 21;
   }
   test();
   foo; // 21
   

   View Slide

6. Eval c'est le mal
   var foo = 1;
   function test() {
   var foo = 2;
   var bar = eval;
   bar('foo = 3');
   return foo;
   }
   test(); // 2
   foo; // 3
   

   View Slide

7. Le changement c'est maintenant
   

   View Slide

8. Couverture de tests et CI
   

   View Slide

9. QUnit
   test("prettydate.format", function() {
   function date(then, expected) {
   equal(prettyDate.format("2008/01/28 22:25:00", then),
   expected);
   }
   date("2008/01/28 22:24:30", "just now");
   date("2008/01/28 22:23:30", "1 minute ago");
   date("2008/01/28 21:23:30", "1 hour ago");
   date("2008/01/27 22:23:30", "Yesterday");
   date("2008/01/26 22:23:30", "2 days ago");
   date("2007/01/26 22:23:30", undefined);
   });
   

   View Slide

10. Mocha
    test('display received results', function () {
    var sr = new SearchResults(ul);
    sr.setResults(data);
    assert.equal(ul.find('.no-results').length, 0);
    assert.equal(ul.find('li.result').length, data.length);
    assert.equal(
    ul.find('li.result').first().attr('data-name'),
    data[0].name
    );
    });
    

    View Slide

11. Module
    var counter = (function() {
    var privateValue = 0;
    var publicMethod = function() {
    privateValue++;
    return privateValue;
    };
    return {
    increment: publicMethod
    };
    })();
    // On passe à l'utilisation du compteur :
    counter.increment(); // 1
    counter.privateValue; // undefined
    counter.privateValue = 0;
    counter.increment(); // 2
    

    View Slide

12. Classe
    // A car "class"
    function Car( model ) {
    this.model = model;
    this.color = "silver";
    this.year = "2012";
    this.getInfo = function () {
    return this.model + " " + this.year;
    };
    }
    var myCar = new Car("ford");
    myCar.year = "2010";
    console.log( myCar.getInfo() );
    

    View Slide

13. Package
    var myapp = {
    subpackage: {
    counter: (function() {
    // ...
    })()
    }
    }
    // Et son utilisation :
    myapp.subpackage.counter.increment(); // 1
    

    View Slide

14. Design patterns
    Singleton
    Decorator
    Observer
    Prototype
    Factory
    MVC
    ...
    

    View Slide

15. Style guide
    

    View Slide

16. Webographie
    http://linsolas.github.io/blog/2013/04/03/devoxx-france-2013-du-javascript-propre-challenge-accepted/
    http://coding.smashingmagazine.com/2012/06/27/introduction-to-javascript-unit-testing/
    http://alistapart.com/article/writing-testable-javascript
    http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/
    http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
    http://contribute.jquery.org/style-guide/js/
    https://github.com/styleguide/javascript
    http://addyosmani.com/blog/javascript-style-guides-and-beautifiers/
    http://javascript.crockford.com/code.html
    http://addyosmani.com/resources/essentialjsdesignpatterns/book/
    http://bonsaiden.github.io/JavaScript-Garden/
    http://ejohn.org/apps/learn/
    http://www.eriwen.com/tools/perfect-front-end-build/
    http://500px.com/photo/15306253
    http://www.danescobar.com/albums/people/BRAWNY-20GIRLS_web.jpg
    

    View Slide