templating

class overview

  • Homework Questions
  • DRY & Refactoring
  • String.replace()
  • Function chaining
  • Templating Principles
  • Debugging
  • Homework Questions

DRY (DON'T REPEAT YOURSELF)

  • Code quality principle
  • States that every piece of logic should have one representation.
  • In JavaScript usage, functions should do on thing. Combine multiple function to achieve usage.
  • Allows you to modify on function without affecting the program at large.
  • I don't go crazy over this stuff, but it's always good to have in the back of your head when programming.
  • Antithesis is WET, or "we enjoy typing", "write everything twice"
 

REFACTORING YOUR CODE

  • Reorganizing your code to reduce duplication, increase readability, or adhere to the DRY principle.
  • Should not change functionality (may change performance).
  • Normally happens once you achieve MVP functionality.
  • Can happen while you're still in development.
  • Essential if you want to come back and understand your code.
 



What is Refactoring?

STRING.REPLACE()

  • First argument is a String or RegExp to match.
  • Second argument is a string to insert in its place.
  • Returns the full, modified string.
  • Does not modify the original string.
  • Only finds and replaces the first instance of the argument. (Except when using special RegExp)
"this is a dog".replace("dog","cat");// > "this is a cat""this is a cat".replace(/cat/, "unicorn");// > this is a unicorn"i'm a dog, i'm a dog, i'm a dog".replace(/dog/, "bird");// > i'm a bird, i'm a dog, i'm a dog"i'm a bird, i'm a bird, i'm a bird".replace(/bird/g, "dog");// > i'm a dog, i'm a dog, i'm a dog
String.replace() documentation

FUNCTION CHAINING

  • Certain JavaScript functions lend themselves to chaining.
  • Only works when the next function can be called on the returned object of the first.
  • jQuery functions are usually always able to be chained.
  • This can make code difficult to read.
  • Best practice to put each function on a new line.
 
 "I have a dog, cat, and mouse".replace("dog","stick").                               replace("cat","rock").                               replace("mouse","dirt");//I have a stick, rock, and dirt. :-(

Method Chaining in JavaScript

templating principles

  • Create a reusable piece of HTML that is easily modifiable
  • Place tokens where data should be
  • Replace the tokens with the actual data before inserting
  • Token style should be abnormal. Something that would not normally appear in code/text
  • Mustache syntax: {{value}}
  • Example template string:
 var template = '<label>{{label}}<input      placeholder="{{placeholder}}"></input>   </label>';
Mustache Manual

debugging

  • Essential for development
  • The more complicated your code, the more useful debugging becomes.
  • Chrome & Firefox developer tools allow breakpoints in code.
  • Use errors in the console and breakpoints to identify problems in your code.


Developer Tools Tutorial

cool js thing for the day

Phonegap
Create native apps for iOS, Android, Windows, Blackberry, etc.. using only HTML, CSS, and JavaScript.
Made with Slides.com