jcreamer898

var hljs=new function(){function m(p){return p.replace(/&/gm,"&amp;").replace(/</gm,"&lt;")}function c(r){for(var p=0;p<r.childNodes.length;p++){var q=r.childNodes[p];if(q.nodeName=="CODE"){return q}if(!(q.nodeType==3&&q.nodeValue.match(/\s+/))){break}}}var b=(typeof navigator!=="undefined"&&/MSIE [678]/.test(navigator.userAgent));function i(t,s){var p="";for(var r=0;r<t.childNodes.length;r++){if(t.childNodes[r].nodeType==3){var q=t.childNodes[r].nodeValue;if(s){q=q.replace(/\n/g,"")}p+=q}else{if(t.childNodes[r].nodeName=="BR"){p+="\n"}else{p+=i(t.childNodes[r])}}}if(b){p=p.replace(/\r/g,"\n")}return p}function a(s){var r=s.className.split(/\s+/);r=r.concat(s.parentNode.className.split(/\s+/));for(var q=0;q<r.length;q++){var p=r[q].replace(/^language-/,"");if(f[p]||p=="no-highlight"){return p}}}function d(r){var p=[];(function q(t,u){for(var s=0;s<t.childNodes.length;s++){if(t.childNodes[s].nodeType==3){u+=t.childNodes[s].nodeValue.length}else{if(t.childNodes[s].nodeName=="BR"){u+=1}else{if(t.childNodes[s].no

jcreamer898

JavaScript Architecture for the 23rd Century

Centuries ago when JavaScript was a browser toy to flash things around on the page, the need for architecture in JavaScript was non existent. You could simply throw some jQuery into a file, or even just in an embeded script tag on the page and you'd have what you need.

Centuries later in the 23rd century, Stardate 1312.4, the need for architecture is critical in creating long term JavaScript Applications that will survive a 5 year mission into deep space.

First we will step back in time to talk about the constructor pattern, and move forward through time into other useful patterns such as modules, and namespacing. Then move into talking about organizational strategies as well as AMD and Browserify.

Finally we'll talk more about JavaScript in the 24th century with ES6 classes and how we can utilize them today with Traceur. Cadets who attend this session will learn:

jcreamer898

Trigger

Instead of n number of arguments, use the "envelope" pattern to pass an object instead.

define(function(require)
  var LPE = require("LPE")
  
  LPE.on("card.render", function(data) {
 // use data

jcreamer898

// app.js
React.render(App({
	initialData: window.initialData
}));

// app.jsx
var App = React.createClass({

jcreamer898

<div class="parent">
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
</div>

jcreamer898

{
  "clusters": {
    "destinations": {
      "version": "0.90.10",
      "config": {
        "cluster": {
          "name": "destinations_development"
        },
        "path": {
          "data": "tmp/elasticsearch",

jcreamer898

From Javascript Web Applications by Alex MacCaw,

"The secret to making large JavaScript applications is not to make large JavaScript applications. Instead, you should decouple your application into a series of fairly independent components. The mistake developers often make is creating applications with a lot of interdepenency, with huge linear JavaScript files generating a slew of HTML tags. These sorts of applications are difficult to maintain and extend, so they should be avoided at all costs. Paying a bit of attention to an applications structure when you start building it can make a big difference to the end result. Ignore any preconceived notions you have about JavaScript and treat it like the object-oriented language that it is. Use classes, ineritance, objects, and patterns in the same way you would if you were building an application in another language such as Python or Ruby. Architecture is critical to server-side applications, so why shouldn't the same apply to client-side apps."

Our applic

jcreamer898

1. Download Python 2.7 http://www.python.org/download/releases/
2. Download the setup tools http://pypi.python.org/pypi/setuptools
3. Add python path to PYTHON_PATH environment variable
4. Add %PYTHON_PATH% to PATH environment variable
5. Add %PYTHON_PATH%\Scripts to PATH environment variable
6. Install NodeJs http://nodejs.org
7. Open a Command Window
8. Run npm install -g coffee-script
9. Run easy_install pygments
10. Run npm install -g pygments

jcreamer898

;(function ($, window, document, undefined) {
    // Define the jQuery plugin name and some default options
    var pluginName = 'slugify',
        defaults = {
            on: "blur",
            prefix: ''
        };

    // The actual plugin constructor
    function Slugify(element, options) {

jcreamer898

#MVC3

• An architectural pattern invented in the late 70's early 80's.
• Promotes separation of concerns and eases unit testing
• MVC is great for web apps because of HTTP
  • HTTP requests
  • Retrieve data
  • Return views
• It is stateless, just like HTTP
  • No postbacks and view state