Skip to content

Instantly share code, notes, and snippets.

@grahamjenson

grahamjenson/README.md

Last active August 29, 2015 13:57
Show Gist options
  • Save grahamjenson/9458975 to your computer and use it in GitHub Desktop.
Save grahamjenson/9458975 to your computer and use it in GitHub Desktop.
Download ZIP
Third lecture 159.707
Raw
README.md

Third lecture 159.707

Raw
index.html
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" media="screen" href="https://rawgithub.com/imakewebthings/deck.js/master/extensions/goto/deck.goto.css">
<link rel="stylesheet" media="screen" href="https://rawgithub.com/imakewebthings/deck.js/master/extensions/menu/deck.menu.css">
<link rel="stylesheet" media="screen" href="https://rawgithub.com/imakewebthings/deck.js/master/extensions/navigation/deck.navigation.css">
<link rel="stylesheet" media="screen" href="https://rawgithub.com/imakewebthings/deck.js/master/extensions/status/deck.status.css">
<link rel="stylesheet" media="screen" href="https://rawgithub.com/imakewebthings/deck.js/master/extensions/scale/deck.scale.css">
<link rel="stylesheet" media="screen" href="https://rawgithub.com/imakewebthings/deck.js/master/themes/style/swiss.css">
<link rel="stylesheet" media="screen" href="https://rawgithub.com/isagalaev/highlight.js/master/src/styles/monokai_sublime.css">
<link rel="stylesheet" href="https://rawgithub.com/imakewebthings/deck.js/master/core/deck.core.css">
<link rel="stylesheet" media="screen" href="https://rawgithub.com/imakewebthings/deck.js/master/themes/transition/horizontal-slide.css">
<script src='http://code.jquery.com/jquery-2.0.3.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src="https://rawgithub.com/imakewebthings/deck.js/master/modernizr.custom.js"></script>
<script src="https://rawgithub.com/imakewebthings/deck.js/master/core/deck.core.js"></script>
<script src="https://rawgithub.com/imakewebthings/deck.js/master/extensions/menu/deck.menu.js"></script>
<script src="https://rawgithub.com/imakewebthings/deck.js/master/extensions/goto/deck.goto.js"></script>
<script src="https://rawgithub.com/imakewebthings/deck.js/master/extensions/status/deck.status.js"></script>
<script src="https://rawgithub.com/imakewebthings/deck.js/master/extensions/navigation/deck.navigation.js"></script>
<script src="https://rawgithub.com/imakewebthings/deck.js/master/extensions/scale/deck.scale.js"></script>
<script src="http://coffeescript.org/extras/coffee-script.js"></script>
<script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
<script src="https://rawgithub.com/coreyti/showdown/master/src/showdown.js"></script>
<script src="https://rawgithub.com/coreyti/showdown/master/src/extensions/github.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css' />
<style>
pre {
border: 0px;
}
pre code {
font-size: .6em;
}
p {
font-size: 1.2em;
}
blockquote {
font-size: 1.2em;
}
.body {
font-family: "Lato", sans-serif;
color: #5d5d5d; }
.pull-right {
float: right;
margin: 10px; }
.pull-left {
float: left;
margin: 10px; }
</style>
</head>
<body>
<div class="deck-container">
<!-- Begin slides. Just make elements with a class of slide. -->
<section class='slide no-md'>
<h1>
159.707
<br>
<span style="font-size: .2em; color: #c00;">Design Patterns in Modern Web Applications (coffeescript, backbone, node.js) </span>
</h1>
</section>
<section class='slide no-md'>
<h2>159.707 Advanced Software Design and Construction</h2>
<ul>
<li><strike>25 Feb: Component Evolution (Graham’s thesis) and recent industry experience </strike></li>
<li><strike>4 March: Dynamic typing case study (Ruby), Convention over Configuration (RubyOnRails)</strike></li>
<li>11 March: Design Patterns in Modern Web Applications (coffeescript, backbone, node.js)</li>
<li>18 March: Architecture, refurbishing/replacing legacy systems </li>
<li> 1 April: Agile Methodologies (SCRUM , Kanban) </li>
<li> 8 April: Data visualisation with D3 </li>
</ul>
</section>
<section class='slide no-md'>
<h2>Today</h2>
<ul>
<li>CoffeeScript</li>
<li>Backbone.js</li>
<li>Node.js</li>
<li>Promises (if we have time)</li>
</ul>
</section>
<section class='slide'>
#But First
</section>
<section class='slide'>
##Assignment
1. rails app
2. deployed to heroku
3. services layer (JSON API)
4. some backbone.js frontend (does not have to be entirely backbone)
Code must be available on Github, (if you ask github will let students have private repositories).
A basic non-trivial site will get you a decent mark (there are loads of "Rails Blog in 10 minutes" tutorials out there)
Bonus points for
1. interesting
2. useful
3. Google Analytics Integration showing more than 1000 unique visitors
</section>
<section class='slide'>
#AKA Why we should thank Jeremy Ashkenas
</section>
<section class='slide'>
##CoffeeScript
> Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way. -- *coffeescript.org*
</section>
<section class='slide'>
##CoffeeScript
Created by [Jeremy Ashkenas](http://en.wikipedia.org/wiki/Jeremy_Ashkenas) (creator of underscore.js and backbone.js) in 2009, to make Javascript simplier and more readable. It takes inspiration from [Ruby](http://maori.geek.nz/post/what_is_ruby_it_is_fun_and_makes_you_happy), Python and Haskell.
</section>
<section class='slide'>
##CoffeeScript
* Massive uptake, in part because of its inclusion in Ruby on Rails since version 3.1.
* It has also had upstream affects on Javascript, where [Brendan Eich](http://en.wikipedia.org/wiki/Brendan_Eich) (creator of Javascript) has proposed CoffeeScript-like changes for future JavaScript versions ([here](https://brendaneich.com/2011/05/my-jsconf-us-presentation/)).
</section>
<section class='slide'>
#Philosophy
</section>
<section class='slide'>
##Philosophy
> The golden rule of CoffeeScript is: "It's just JavaScript" -- *coffeescript.org*
* CoffeeScript is just a prettier JavaScript.
* What you get from CoffeeScript is smaller (up to 1/3) more readable JavaScript code.
* It takes the core elements of JavaScript and finds a better way of writing it.
</section>
<section class='slide'>
##Philosophy
![](http://i.imgur.com/7aOxVn2.jpg)
</section>
<section class='slide'>
##Philosophy
> I don't want to write in CoffeeScript and debug in JavaScript
</section>
<section class='slide'>
##Getting Started
1. Going to [http://coffeescript.org/](http://coffeescript.org/) and clicking **Try CoffeeScript** at the top.
2. Include CoffeeScript in the browser with `<script src="https://rawgithub.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script>` then wrap code in `<script type="text/coffeescript"></script>` tags.
3. Install the CoffeeScript console with Node.js and npm with `npm -g install coffee-script` then run it with `coffee`.
</section>
<section class='slide'>
##Syntax
1. *functions*
2. *whitespace*
3. *classes*.
</section>
<section class='slide'>
##Syntax - Functions
```
times_two = (x) -> x*2
```
</section>
<section class='slide'>
##Syntax - Functions
```
times_two = (x) -> x*2
```
1. no default global scope
2. move input `x` to output `x*2`
3. auto returns last value
</section>
<section class='slide'>
##Syntax - Functions
```
times_two = (x) -> x*2
```
```
var times_two;
times_two = function(x) {
return x * 2;
};
```
</section>
<section class='slide'>
##Syntax - Functions
```
log = -> console.log arguments
```
will compile to the JavaScript:
```
var log;
log = function() {
return console.log(arguments);
};
```
</section>
<section class='slide'>
##Syntax - Whitespace
```
fn = (x) ->
x += 2
x *= 4
```
</section>
<section class='slide'>
##Syntax - Whitespace
```
for num in [1..10]
if num % 2 == 0
console.log "#{num} is even"
else
console.log "#{num} is odd"
```
```
var num, _i;
for (num = _i = 1; _i <= 10; num = ++_i) {
if (num % 2 === 0) {
console.log("" + num + " is even");
} else {
console.log("" + num + " is odd");
}
}
```
</section>
<section class='slide'>
##Syntax - Classes
*'[What's the best way to define a class in JavaScript?](http://stackoverflow.com/questions/387707/whats-the-best-way-to-define-a-class-in-javascript)'*
> likely solicit debate, arguments, polling, or extended discussion
Ruby, Java, C#, PHP ... have a `class` keyword, JavaScript doesn't but CoffeeScript does
</section>
<section class='slide'>
##Syntax - Classes
```
class Person
constructor: (@name) ->
hello: ->
console.log "Hello #{@name}"
```
*Note: `@` is short for `this.`, and `(@name) ->` is short for `(name) -> @name = name`.*
</section>
<section class='slide'>
##Syntax - Classes
```
var Person;
Person = (function() {
function Person(name) {
this.name = name;
}
Person.prototype.hello = function() {
return console.log("Hello " + this.name);
};
return Person;
})();
```
</section>
<section class='slide'>
#CoffeeScript *Live Demo*
</section>
<section class='slide'>
##Rest
There is a bunch of other cool things
1. list comprehensions
2. readable `for` loops
3. array slicing
4. splats...
But you just need to start writing it!
</section>
<section class='slide'>
##Humour
![](http://i.imgur.com/YOmDuDV.jpg)
</section>
<section class='slide'>
#Backbone.js
</section>
<section class='slide'>
##Backbone.js
Backbone.js is a lightweight Model View Controller (**MVC**) JavaScript library.
> You call a libraries code, a framework calls your code
</section>
<section class='slide'>
##MVC Pattern
1. Model (What it is)
2. View (how you see it)
3. Router, ummm... Controller (the interaction between views and models)
</section>
<section class='slide'>
##What problem does it solve?
Organises code (which is typically JQuery soup) into layers
**Let me tell you about JQuery soup and on document load...**
</section>
<section class='slide'>
#Competition
</section>
<section class='slide'>
##Angular.js
Heavy weight Framework -- maintained by google
Uses custom HTML tags to define views
Tries to entirely remove DOM manipulation by declaritivly binding variables to HTML elements
</section>
<section class='slide'>
##Ember.js
Middle weight Framework -- created by Yehuda Katz (Rails Committer)
Opinionated (like Rails) using best conventions
DOM manipulation through Handlebars.js templates
</section>
<section class='slide'>
##Backbone.js
featherweight library -- created by Jeremy Ashkenas (CoffeeScript)
Pick a piece (I typically use views) use it independently of other pieces
Very Basic with many extensions to help
</section>
<section class='slide'>
##Views
The best thing about Backbone Views **EVENTS**
</section>
<section class='slide'>
##Views
```
class ListView extends Backbone.View
el: 'body'
events:
'click li' : 'clicked'
clicked: ->
console.log 'Hi, View!'
initialize: ->
@render()
render: ->
$(@el).html '<ul><li>Hello, Backbone!</li></ul>'
lv = new ListView()
```
</section>
<section class='slide'>
##Models
The best thing about Backbone Models **EVENTS**
</section>
<section class='slide'>
##Models
```
class TestObject extends Backbone.Model
urlRoot: "/models"
```
```
to = new TestObject({id: 1})
to.fetch()
to.get('content')
to.on('change:content', -> update_view())
```
</section>
<section class='slide'>
##Collections
The best thing about Backbone Collections **EVENTS**
</section>
<section class='slide'>
##Collections
```
class TestCollection extends Backbone.Collection
url: -> "/models"
model: TestObject
```
```
tc = new TestCollection()
tc.fetch()
tc.on('add', -> update_views())
to = tc.get(1)
to.get('content')
```
</section>
<section class='slide'>
##Routers
The best thing about Backbone Routers: **ROUTING EVENTS**
</section>
<section class='slide'>
##Routers
```
class TestRouter extends Backbone.Router
routes:
'' : 'render_index_views'
'blog' : 'render_blog_views'
'post/:id' : 'render_post_view'
render_index_views: ->
render_blog_views: ->
render_post_view: (id) ->
```
</section>
<section class='slide'>
##Extensions
1. Marionette.js : The best thing since Backbone, helps remove many of the boilerplate View code
2. Backbone-relational.js : Helps define relationships between models
</section>
<section class='slide'>
#Node.js
</section>
<section class='slide'>
##Node.js
Created in 2011 by Ryan Dahl ()
1. Server side Javascript
2. non-blocking IO -- using Javascript callbacks
3. Google V8 for speed
4. Includes HTTP server, so no fuss
</section>
<section class='slide'>
#Live Node.js Demo [http://expressjs.com/guide.html](http://expressjs.com/guide.html)
</section>
<section class="slide">
<h2>Graham Jenson</h2>
<ul>
<li>Twitter: <strong>@grahamjenson</strong> </li>
<li><strong>Blog:</strong> http://maori.geek.nz/blog</li>
</ul>
</div>
</section>
<!-- deck.navigation snippet -->
<div aria-role="navigation">
<a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
<a href="#" class="deck-next-link" title="Next">&#8594;</a>
</div>
<!-- deck.status snippet -->
<p class="deck-status" aria-role="status">
<span class="deck-status-current"></span>
/
<span class="deck-status-total"></span>
</p>
<!-- deck.goto snippet -->
<form action="." method="get" class="goto-form">
<label for="goto-slide">Go to slide:</label>
<input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
<datalist id="goto-datalist"></datalist>
<input type="submit" value="Go">
</form>
<!-- End extension snippets. -->
</div>
<script>
$(function() {
hljs.initHighlightingOnLoad();
$.deck('.slide');
});
(function($, deck, undefined) {
var $d = $(document);
var converter = new Showdown.converter({ extensions: ['github'] });
$d.bind('deck.init', function() {
$.each($.deck("getSlides"), function(index, value) {
var cssClass = value.attr('class');
// Prevent slides marked with no-md css class to be interpreted as markdown
if (!cssClass || cssClass.indexOf('no-md') < 0) {
value.html(converter.makeHtml(value.text()));
}
});
});
})(jQuery, 'deck');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment