Wakanday JS201 Best Practices

2,196
-1

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,196
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Form follows function is a principle associated with modern architecture and industrial design in the 20th century. The principle is that the shape of a building or object should be primarily based upon its intended function or purpose.
  • Imagine you have to come back to your code in a month and you don’t know what the hell you were doing just by reading your code
  • You should always prefer block quotes instead of using one liners
  • Use K&R style braces `}` at the end of a structural block, because it matters! Modifying the previous code to use Allman style braces would look like this. The code on the right is broken
  • What is Git?
  • Because setup wraps the returned function, it creates a closure, and you can use that closure to store some private data, which is only accessible by the private function but not to the outside code.
  • http://howtonode.org/why-use-closure
  • http://howtonode.org/why-use-closure
  • An example from the underscore library
  • Wakanday JS201 Best Practices

    1. JavaScript 201 Best Practices Juergen FesslmeierWakanda Product Manager @chinshr
    2. Styling and Naming
    3. Form Follows Function
    4. “There are only two hardthings in Computer Science: cache invalidation and naming things.” Tim Bray (quoting Phil Karlton)
    5. Naming thingsVariable names should be nounsFunction names should begin with a verb,E.g. isValid(), hasItems(),getProduct()Avoid difficult to understand names,E.g. arrUqFolders
    6. Logical namesRequires commentingvar resBackup = function(loc) { …});Improve your function and variables namesvar restoreBackupTo =function(destination) { …});
    7. Add style to your code• Indent your code correctly• Comment your code only if it adds value/** * @method getList * @param {Object} options * @return {Object} **/var getList = function(options) {}
    8. Use blocks instead of one-linersWhen Becomesif a() if a() b(); b(); c();It looks like But really meansif a() { if a() { b(); b(); c(); }} c();
    9. Use of spacesNice Less readableif (found) { if(found) { // good // bad} }function a() {…} function a () {…}app.config.folder; app. config. folder;
    10. Semicolon insertionGood Badvar good = function() { var bad = function ( ) return { { sum: 12 return }; {} sum: 12 }; }> good(); > bad();{ sum: 12 } undefined
    11. Eval twins == and != == 0 // false0 == // true0 == 0 // truefalse == false // falsefalse == 0 // truefalse == undefined // falsefalse == null // falsenull == undefined // true
    12. Faithful triplets === and !==Always use `===` for equals and `!==` fornot-equals when you do comparisonsif (a === 5 && b !== 10) { // feeling much better}
    13. Friendly parametersInstead of large parameter listsvar address = build(f, l, c, s);Use objectsvar address = build({ first: f, last: l, city: c, state: s});
    14. Augmenting TypesString.prototype.pluralize = function() { return this + "s";};> "car".pluralize() // "cars"You don’t own Object, Array, RegExp,String, Number, Boolean, Date, Function
    15. Scopes and Closures
    16. Global Scopevar message = “Wakanda”;function greet() { console.log(message + “ is great!”);}> message“Wakanda”> greet()“Wakanda is great!”
    17. Local Scopefunction greet(what) { var message = what; console.log(message + “ is great!”);}> messageundefined> greet(“Wakanda”)“Wakanda is great!”> messageundefined
    18. Mixing scopevar outer = function() { var a = 4, b = 5; var inner = function() { var b = 7, c = 11; a = b + c; }; console.log(a); inner(); console.log(a);};
    19. Returning functionsvar setup = function() { var count = 0; return function() { return (count += 1); }}// usagevar next = setup();next(); // 1next(); // 2count // undefined
    20. “A closure is a functiondefined within another scope that has access to all the variables within the outer scope.” Tim Caswell
    21. Consider this example…/* * jsfiddle.net/TnaMW */var div = document.getElementById(div);for (var i = 0; i < 10; i++) { var link = document.createElement(a); link.setAttribute(href, #); link.innerHTML = i + ; link.onclick = function() { alert(i); }; div.appendChild(link);}// 0 1 2 3 4 5 6 7 8 9
    22. …works with a Closure/* * jsfiddle.net/kxy5t */var div = document.getElementById(div);for (var i = 0; i < 10; i++) { var link = document.createElement(a); link.setAttribute(href, #); link.innerHTML = i + ; link.onclick = function(k) { return function() { alert(k); } }(i); div.appendChild(link);}// 0 1 2 3 4 5 6 7 8 9
    23. Self-invoking functionsvar person = function() { // private var name = "Juergen"; // public return { getName : function() {return name;}, setName : function(newName) {name = newName;} };}();> person.name // undefined> person.getName(); // ”Juergen"> person.setName("Dan");> person.getName(); // ”Dan"
    24. Immediate functions(function() { var number = 5; alert("number is " + number);}())> "number is 5"> number // undefined
    25. Immediate functions w/ parameters(function(input) { var number = input; alert("number is " + number);}(5))> "number is 5”> number // undefined
    26. Improving Object helpers(function(root, String) { root._ = root._ || {}; root._ = { pluralize: function(str) { return str + "s"; } };})(this, String);> _.pluralize("car")"cars"
    27. Class like structuresvar Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function() { return "Hello " + this.greeting + ”!"; }; return Greeter;})();> var greeter = new Greeter(”world");> greeter.greet();"Hello world!"
    28. Dataclass structures in Wakandamodel = new DataStoreCatalog();model.create("Greeter", {extends: "Base"}, function() { attribute("name", "string") method("greet", function() { return "Hello " + this.name + "!"; });});> var greeter = new Greeter({name: "Juergen"});> greeter.greet(); // Hello Juergen!
    29. JavaScript 201 Best Practices Juergen FesslmeierWakanda Product Manager @chinshr
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×