Skip to content

Commit

Permalink
Initial commit.
Browse files Browse the repository at this point in the history
  • Loading branch information
cmeiklejohn committed Sep 5, 2011
0 parents commit ae41f41
Show file tree
Hide file tree
Showing 3 changed files with 208 additions and 0 deletions.
3 changes: 3 additions & 0 deletions Gemfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
source :rubygems

gem "slidedown"
17 changes: 17 additions & 0 deletions Gemfile.lock
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
GEM
remote: http://rubygems.org/
specs:
bluecloth (2.1.0)
makers-mark (0.1.1)
bluecloth (>= 2.0.0)
nokogiri
nokogiri (1.5.0)
slidedown (0.2.0)
makers-mark
nokogiri

PLATFORMS
ruby

DEPENDENCIES
slidedown
188 changes: 188 additions & 0 deletions slides.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,188 @@
!SLIDE

# The Future of Front End

Christopher Meiklejohn
(cmeiklejohn@swipely.com)

!SLIDE

## Technologies

* coffeescript
* backbone.js
* ejs
* sass
* execjs
* rails 3.1 asset pipeline
* jasmine

!SLIDE

## Consider this a survey talk.

!SLIDE

## Do not use them because I said so.

!SLIDE

## Awareness.
## Make informed decisions.

!SLIDE

## Dive right in!

!SLIDE

## Application

* Rails 3.1 with asset pipeline
* Developed with BDD using cucumber/rspec
* No assets

!SLIDE

## So, what are the specific goals?

* Use jasmine to BDD the front end
* Write code in *both* coffeescript and javascript
* Convert app to backbone.js application
* Have a way to run the tests effectively during development

!SLIDE

## Brief overview of the technologies.
## Then look at the code for real world examples.

!SLIDE

## Pipeline, Sprockets, EJS

* Brief overview
* Replaces jammit
* Setup manifest files

!SLIDE

## Asset Pipeline

* Reference only as /assets
* Precompile for prod
* Recompile per hit in dev
* Reside in /public/assets, one per manifest compiled
* Compresses and stores unique asset version by SHA

!SLIDE

## Asset Pipeline

@@@ ruby

(app|lib|vendor)/
assets/
javascripts
stylesheets
images
templates

@@@

!SLIDE

## Figure 1: Asset Pipeline Example

!SLIDE

## Sprockets

@@@ js

// application.js

//= require jquery
//= require jquery_ujs
//= require_tree .

@@@

!SLIDE

## Figure 2: Sprockets Manifest

!SLIDE

## EJS

* Embedded javascript templates.
* app/assets/templates/index.jst.ejs
* Compiled and available as window.JST

!SLIDE

## Figure 3: EJS File

!SLIDE

## Backbone

* MVC javascript framework
* Rich front-end single page applications

!SLIDE

## No Example; Future Talk!

!SLIDE

## Coffeescript

* Language that compiles to javascript
* Syntatic sugar inspired by Haskell, Python and Ruby
* More specifically Ruby 1.9

!SLIDE

## Figure 4: Coffeescript Example

!SLIDE

## Jasmine

* Javascript BDD framework
* Developed by Pivotal Labs to replace JsUnit
* Inspired by Rspec
* Results display in browser
* Continuous integration mode

!SLIDE

## Figure 5: Jasmine Example

!SLIDE

## How do we make this all work? (Specs)

* Write specs in javascript/coffeescript for jasmine
* Use guard to compile coffeescript specs down to javascript

!SLIDE

## How do we make this all work? (Application)

* Write my application in javascript/coffeescript
* Use guard to recompile assets when there is a change to an asset in the pipeline
* Dev: concatenation/Prod: uglified

!SLIDE

## How do we make this all work? (Testing)

* Use the jasmine headless webkit driver to run the specs and parse the output
* Run specs against newest compiled assets in the pipeline
* Required due to external/vendored deps, such as backbone (inefficient)

!SLIDE

## MOAR EXAMPLES!

0 comments on commit ae41f41

Please sign in to comment.