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.
 



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

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. :-(

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>';

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.


cool js thing for the day

Create native apps for iOS, Android, Windows, Blackberry, etc.. using only HTML, CSS, and JavaScript.

AJS Lecture 5: Templating

By Ryan Lewis

AJS Lecture 5: Templating

  • 571