Commits

Rich Manalang [Atlassian] committed e549cd8

reordered

Comments (0)

Files changed (2)

public/brace/index.html

 <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Brace yourself.
 </title><meta name="description" content="A 15 minute overview of Backbone Brace --  a simple extension to support your Backbone projects"><meta name="author" content="Rich Manalang"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet" type="text/css"><link href="./css/themes/blackboard.css" rel="stylesheet"><link href="./css/impress-demo.css" rel="stylesheet"></head><body><div id="impress"><div id="title" data-x="1000" data-y="0" class="step"><img src="./img/brace.png"></div><div data-x="2000" data-y="0" class="step centered"><h1>Backbone Brace</h1><h3>pragmatic support for your Backbone projects</h3></div><div data-x="3000" data-y="0" class="step profile"><img src="./img/manalang.jpg"><div class="col span120"><h4>Rich Manalang &rarr; @rmanalan</h4><h5 class="black normal">Atlassian
 </h5></div></div><div data-x="4000" data-y="0" class="step"><img src="./img/donttreadonme.jpg" width="920"></div><div data-x="5000" data-y="0" class="step"><h1>Fact:</h1><p style="font-size:1.3em;">Large front-end dev teams tread on each other
-</p></div><div data-x="6000" data-y="0" class="step"><h1>Backbone is awesome, but...</h1></div><div data-x="7000" data-y="0" class="step"><pre><code data-language="javascript">var PersonView = Backbone.View.extend({
+</p></div><div data-x="6000" data-y="0" class="step"><h1>Backbone is awesome, but...</h1></div><div data-x="7000" data-y="0" class="step"><pre><code data-language="javascript" style="font-size:35px">// javascript
+model.set("name","Rich");
+model.get("name");
+</code></pre></div><div data-x="8000" data-y="0" class="step"><pre><code data-language="javascript" style="font-size:35px">// java!!!
+model.set("name","Rich");
+model.get("name");
+</code></pre></div><div data-x="9000" data-y="0" class="step centered"><h1>WAT?!</h1></div><div data-x="10000" data-y="0" class="step centered"><h1>Named Attributes</h1></div><div data-x="11000" data-y="0" class="step"><h1>Silent fail</h1><pre><code data-language="javascript">// Traditional Backbone model
+var Person = Backbone.Model.extend({});
+var person = new Person({name: "Rich"});
+
+person.get("name"); // Ok
+
+person.get("firstName"); // Undefined. Silent fail!
+</code></pre></div><div data-x="12000" data-y="0" class="step"><h1>Fail loudly&trade;</h1><pre><code data-language="javascript">// Brace extended Backbone model
+var Person = Brace.Model.extend({
+  namedAttributes: [ "name" ]
+});
+var person = new Person();
+person.setName("Rich");
+person.getName(); // Rich
+person.getFirstName() // throws exception!
+
+person.set("name", "Rich"); // Ok
+person.get("name"); // Ok
+
+person.get("lost"); // throws exception!
+person.set("lost", "in space"); // throws exception!
+person.set({
+  lost: "in space"
+}); // throws exception!
+</code></pre></div><div data-x="13000" data-y="0" class="step"><h1>Named events</h1><pre><code data-language="javascript">var Person = Brace.Model.extend({
+  namedEvents [ "sleep" ]
+});
+
+// on[Event] and trigger[Event] methods are auto created
+person.onSleep(function(dream) { 
+  console.log("Dreaming about " + dream); 
+});
+person.triggerSleep("Unicorns");
+</code></pre></div><div data-x="14000" data-y="0" class="step centered"><h1>DRY</h1></div><div data-x="15000" data-y="0" class="step"><pre><code data-language="javascript">var PersonView = Backbone.View.extend({
   initialize: function() {
     this.log("Initialized");
   },
     console.log(msg);
   }
 });
-</code></pre></div><div data-x="8000" data-y="0" class="step"><h1>Smelly</h1><pre><code data-language="javascript">function log(msg) {
+</code></pre></div><div data-x="16000" data-y="0" class="step"><h1>Smelly</h1><pre><code data-language="javascript">function log(msg) {
   console.log(msg)
 }
 
   },
   log:log //<- This stinks!
 });
-</code></pre></div><div data-x="9000" data-y="0" class="step"><h1>Mixins!</h1><pre><code data-language="javascript">var Loggable = {
+</code></pre></div><div data-x="17000" data-y="0" class="step"><h1>[Em]Brace Mixins!</h1><pre><code data-language="javascript">var Loggable = {
   log: function(msg) {
     console.log(msg);
   }
     this.log("Initialized");
   }
 });
-</code></pre><p style="font-size:.6em">You can do this with models, collections, views, and routers</p></div><div data-x="10000" data-y="0" class="step centered"><h1>Named Attributes</h1></div><div data-x="11000" data-y="0" class="step"><h1>Silent fail</h1><pre><code data-language="javascript">// Traditional Backbone model
-var Person = Backbone.Model.extend({});
-var person = new Person({name: "Rich"});
-
-person.get("name"); // Ok
-
-person.get("firstName"); // Undefined. Silent fail!
-</code></pre></div><div data-x="12000" data-y="0" class="step"><h1>Fail loudly&trade;</h1><pre><code data-language="javascript">// Brace extended Backbone model
-var Person = Brace.Model.extend({
-  namedAttributes: [ "name" ]
-});
-var person = new Person();
-person.setName("Rich");
-person.getName(); // Rich
-person.getFirstName() // throws exception!
-
-person.set("name", "Rich"); // Ok
-person.get("name"); // Ok
-
-person.get("lost"); // throws exception!
-person.set("lost", "in space"); // throws exception!
-person.set({
-  lost: "in space"
-}); // throws exception!
-</code></pre></div><div data-x="13000" data-y="0" class="step"><h1>Named events</h1><pre><code data-language="javascript">var Person = Brace.Model.extend({
-  namedEvents [ "sleep" ]
-});
-
-// on[Event] and trigger[Event] methods are auto created
-person.onSleep(function(dream) { 
-  console.log("Dreaming about " + dream); 
-});
-person.triggerSleep("Unicorns");
-</code></pre></div><div data-x="14000" data-y="0" class="step"><h1>Mix and match</h1><pre><code data-language="javascript" style="font-size:20px">// Mixin
+</code></pre><p style="font-size:.6em">You can do this with models, collections, views, and routers</p></div><div data-x="18000" data-y="0" class="step"><h1>Mix and match</h1><pre><code data-language="javascript" style="font-size:20px">// Mixin with named attrs and events
 var Selectable = {
   namedAttributes: ["selected"],
   namedEvents: ["select"],
 person.setSelected(true);
 person.getSelected();
 person.triggerSelect();
-</code></pre></div><div data-x="15000" data-y="0" class="step"><h1>Fail loudly&trade;</h1><pre><code data-language="javascript">var Runnable = {
+</code></pre></div><div data-x="19000" data-y="0" class="step"><h1>Fail loudly&trade;</h1><pre><code data-language="javascript">var Runnable = {
   run: function() {}
 };
 
     run: function() {}
 }); // throws "Mixin error: class already has property 'run' defined"
 
-</code></pre></div><div data-x="16000" data-y="0" class="step centered"><h1 style="font-size:8em;line-height:100%;">3k</h1><a href="https://bitbucket.org/atlassian/backbone-brace" style="font-size:1em">bitbucket.org/atlassian/backbone-brace</a></div><div data-x="17000" data-y="0" class="step centered"><h1 style="font-size:1.3em">Atlassian are hiring JS devs!</h1><p><a href="http://bit.ly/js-hire" style="font-size:3.2em">bit.ly/js-hire</a></p></div></div><div class="hint"><p>Use a spacebar or arrow keys to navigate</p></div><script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script><script src="./js/backbone.brace.js"></script><script src="./js/impress.js"></script><script src="./js/rainbow.min.js"></script><script src="./js/language/generic.js"></script><script src="./js/language/javascript.js"></script><script>impress().init();
+</code></pre></div><div data-x="20000" data-y="0" class="step centered"><h1 style="font-size:8em;line-height:100%;">1k</h1><a href="https://bitbucket.org/atlassian/backbone-brace" style="font-size:1em">bitbucket.org/atlassian/backbone-brace</a></div><div data-x="21000" data-y="0" class="step centered"><h1 style="font-size:1.3em">Atlassian are hiring JS devs!</h1><p><a href="http://bit.ly/js-hire" style="font-size:3.2em">bit.ly/js-hire</a></p></div></div><div class="hint"><p>Use a spacebar or arrow keys to navigate</p></div><script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script><script src="./js/backbone.brace.js"></script><script src="./js/impress.js"></script><script src="./js/rainbow.min.js"></script><script src="./js/language/generic.js"></script><script src="./js/language/javascript.js"></script><script>impress().init();
 document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')
 </script></body></html>

public/brace/index.jade

 
       .step(data-x="#{row1X()}", data-y="#{row1.y}")
         pre
-          code(data-language="javascript").
-            var PersonView = Backbone.View.extend({
-              initialize: function() {
-                this.log("Initialized");
-              },
-              log: function(msg) {
-                console.log(msg);
-              }
-            });
+          code(data-language="javascript",style="font-size:35px").
+            // javascript
+            model.set("name","Rich");
+            model.get("name");
       .step(data-x="#{row1X()}", data-y="#{row1.y}")
-        h1 Smelly
         pre
-          code(data-language="javascript").
-            function log(msg) {
-              console.log(msg)
-            }
-
-            var PersonView = Backbone.View.extend({
-              initialize: function() {
-                this.log("Initialized");
-              },
-              log:log //<- WAT?!
-            });
-
-            var EventView = Backbone.View.extend({
-              initialize: function() {
-                this.log("Initialized");
-              },
-              log:log //<- This stinks!
-            });
-      .step(data-x="#{row1X()}", data-y="#{row1.y}")
-        h1 Mixins!
-        pre
-          code(data-language="javascript").
-            var Loggable = {
-              log: function(msg) {
-                console.log(msg);
-              }
-            };
-
-            var PersonView = Brace.View.extend({
-              mixins: [Loggable], // <- Much nicer!
-              initialize: function() {
-                this.log("Initialized");
-              }
-            });
-        p(style="font-size:.6em") You can do this with models, collections, views, and routers
-
+          code(data-language="javascript",style="font-size:35px").
+            // java!!!
+            model.set("name","Rich");
+            model.get("name");
+      .step.centered(data-x="#{row1X()}", data-y="#{row1.y}")
+        h1 WAT?!
       .step.centered(data-x="#{row1X()}", data-y="#{row1.y}")
         h1 Named Attributes
 
               console.log("Dreaming about " + dream); 
             });
             person.triggerSleep("Unicorns");
+       .step.centered(data-x="#{row1X()}", data-y="#{row1.y}")
+         h1 DRY
+       .step(data-x="#{row1X()}", data-y="#{row1.y}")
+        pre
+          code(data-language="javascript").
+            var PersonView = Backbone.View.extend({
+              initialize: function() {
+                this.log("Initialized");
+              },
+              log: function(msg) {
+                console.log(msg);
+              }
+            });
+      .step(data-x="#{row1X()}", data-y="#{row1.y}")
+        h1 Smelly
+        pre
+          code(data-language="javascript").
+            function log(msg) {
+              console.log(msg)
+            }
+
+            var PersonView = Backbone.View.extend({
+              initialize: function() {
+                this.log("Initialized");
+              },
+              log:log //<- WAT?!
+            });
+
+            var EventView = Backbone.View.extend({
+              initialize: function() {
+                this.log("Initialized");
+              },
+              log:log //<- This stinks!
+            });
+      .step(data-x="#{row1X()}", data-y="#{row1.y}")
+        h1 [Em]Brace Mixins!
+        pre
+          code(data-language="javascript").
+            var Loggable = {
+              log: function(msg) {
+                console.log(msg);
+              }
+            };
+
+            var PersonView = Brace.View.extend({
+              mixins: [Loggable], // <- Much nicer!
+              initialize: function() {
+                this.log("Initialized");
+              }
+            });
+        p(style="font-size:.6em") You can do this with models, collections, views, and routers
       .step(data-x="#{row1X()}", data-y="#{row1.y}")
         h1 Mix and match
         pre
           code(data-language="javascript", style="font-size:20px").
-            // Mixin
+            // Mixin with named attrs and events
             var Selectable = {
               namedAttributes: ["selected"],
               namedEvents: ["select"],
             }); // throws "Mixin error: class already has property 'run' defined"
 
       .step.centered(data-x="#{row1X()}", data-y="#{row1.y}")
-        h1(style="font-size:8em;line-height:100%;") 3k
+        h1(style="font-size:8em;line-height:100%;") 1k
         a(href="https://bitbucket.org/atlassian/backbone-brace", style="font-size:1em") bitbucket.org/atlassian/backbone-brace
       .step.centered(data-x="#{row1X()}", data-y="#{row1.y}")
         h1(style="font-size:1.3em") Atlassian are hiring JS devs!