• Like
  • Save
Wakanday JS201 Best Practices
Upcoming SlideShare
Loading in...5
×
 

Wakanday JS201 Best Practices

on

  • 2,282 views

 

Statistics

Views

Total Views
2,282
Views on SlideShare
2,257
Embed Views
25

Actions

Likes
2
Downloads
21
Comments
0

3 Embeds 25

http://lanyrd.com 12
https://twitter.com 10
http://www.scoop.it 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Wakanday JS201 Best Practices Presentation Transcript

  • JavaScript 201 Best Practices Juergen FesslmeierWakanda Product Manager @chinshr
  • Styling and Naming
  • Form Follows Function
  • “There are only two hardthings in Computer Science: cache invalidation and naming things.” Tim Bray (quoting Phil Karlton)
  • 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
  • Logical namesRequires commentingvar resBackup = function(loc) { …});Improve your function and variables namesvar restoreBackupTo =function(destination) { …});
  • 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) {}
  • 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();
  • Use of spacesNice Less readableif (found) { if(found) { // good // bad} }function a() {…} function a () {…}app.config.folder; app. config. folder;
  • Semicolon insertionGood Badvar good = function() { var bad = function ( ) return { { sum: 12 return }; {} sum: 12 }; }> good(); > bad();{ sum: 12 } undefined
  • Eval twins == and != == 0 // false0 == // true0 == 0 // truefalse == false // falsefalse == 0 // truefalse == undefined // falsefalse == null // falsenull == undefined // true
  • Faithful triplets === and !==Always use `===` for equals and `!==` fornot-equals when you do comparisonsif (a === 5 && b !== 10) { // feeling much better}
  • Friendly parametersInstead of large parameter listsvar address = build(f, l, c, s);Use objectsvar address = build({ first: f, last: l, city: c, state: s});
  • Augmenting TypesString.prototype.pluralize = function() { return this + "s";};> "car".pluralize() // "cars"You don’t own Object, Array, RegExp,String, Number, Boolean, Date, Function
  • Scopes and Closures
  • Global Scopevar message = “Wakanda”;function greet() { console.log(message + “ is great!”);}> message“Wakanda”> greet()“Wakanda is great!”
  • Local Scopefunction greet(what) { var message = what; console.log(message + “ is great!”);}> messageundefined> greet(“Wakanda”)“Wakanda is great!”> messageundefined
  • 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);};
  • Returning functionsvar setup = function() { var count = 0; return function() { return (count += 1); }}// usagevar next = setup();next(); // 1next(); // 2count // undefined
  • “A closure is a functiondefined within another scope that has access to all the variables within the outer scope.” Tim Caswell
  • 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
  • …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
  • 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"
  • Immediate functions(function() { var number = 5; alert("number is " + number);}())> "number is 5"> number // undefined
  • Immediate functions w/ parameters(function(input) { var number = input; alert("number is " + number);}(5))> "number is 5”> number // undefined
  • Improving Object helpers(function(root, String) { root._ = root._ || {}; root._ = { pluralize: function(str) { return str + "s"; } };})(this, String);> _.pluralize("car")"cars"
  • 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!"
  • 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!
  • JavaScript 201 Best Practices Juergen FesslmeierWakanda Product Manager @chinshr