The Client Side on Ruby

the client side http://thinkingonthinking.com ! Patrick Mulder ! @mulpat! on
Ruby!

we.love Ruby!

Designed for Happiness

$ rails new palmedor!

CLIENT! USER EXPERIENCE HTML SERVER! HTTP
DATABASE

DOM Document Object Model

The Language of the Browser $(document).ready(function() {! $("#menu”).click(function() {! !
$.get('templates/movies.html', function(data) {! $(“#movies”).html(data);! }); ! ! }); ! }); !

2005! DOM plumbing

h9p://w3techs.com/technologies/history_overview/javascript_library/all/y javascript usage

_.each(movies, show); ! _.map(movies, function(movie) {! return movie.title;! });! var
MenuView = Backbone.View.extend({! initialize: function() {! this.on("menu:update", function(name) {! // do the view update! }! }) ! Backbone.js Underscore.js

Origins http://github.com/documentcloud/documentcloud

CULTURAL FIT

Opinions var MovieListView = Backbone.View.extend({! ! initialize: function() {! this.collection
= new Movies();! ! this.collection.bind("reset",function() {! ! that.render();! }! this.fetch();! }) ! + REST

MOVIE A Client Side ApplicaOon Filters and Search
Results StaOc HTML

$("#enter”).click(function() {! $.get('templates/movies.html', function(data) {! $(“#movies”).html(data);! }); ! }); !
UNDERSCORE! ! ! ! ! ! JQUERY! ! ! ! ! ! BACKBONE! ! ! ! ! ! VIEWS! ! ! ! ! ! MODELS! ! ! ! ! ! COLLECTIONS! ! ! ! ! ! TEMPLATES! ! ! ! ! ! ADMIN! ! ! ! ! ! Modernizr! ! ! ! ! !

HOW TO USE JS WITH RUBY?

PREPROCESSING CONCATENATION MINIFICATION

BUILD PROCESS

sprockets app.routes.prepend do!
mount app.assets => config.assets.prefix! end!

rake-pipeline! output 'public/scripts‘! ! input assets.scripts do! match '**/*.hbs' do!
travis_handlebars :precompile => false # assets.production?! concat 'templates.js'! end! ! match '**/*.coffee' do! coffee_script! end! ! match 'vendor/**/*.js' do! safe_concat assets.vendor_order, 'vendor.js'! end! end! https://github.com/travis-ci/travis-web/blob/master/Assetfile!

requirejs Asynchronicity + modularity

! gem 'sprockets', :git => 'git://github.com/sstephenson/ sprockets.git‘ # to build
and serve assets! ! gem 'handlebars_assets‘ # for templates! ! gem 'sprockets-commonjs', :git => 'git://github.com/ maccman/sprockets-commonjs.git‘ # for modularity! ! gem 'quiet_assets‘ # for nicer output! ! ! gemfile

gem 'handlebars_assets'! <div class="title">! {{ title }}! </div>! {{#if editable
}}! <select class="add-rating">! <option>5 stars</option>! <option>4 stars</option>! <option>3 stars</option>! <option>2 stars</option>! <select/>! {{/if}}! <div class="stars">! {{#liststars stars }}{{/liststars}}! </div>! <div class="label label-{{ category }}">! {{ category }}! </div>! <div class="description" style="display:none">! {{ description }}! </div>!

commonjs CommonJS modules are a way of encapsulaOng and
packaging up JavaScript ﬁles to ensure they're name-‐spaced and loosely coupled, a crucial aspect to ensuring JavaScript code quality and maintainability.

<%= javascript_tag do %>! $(document).ready(function(){! Backbone.history.start({pushState: true});! ! var App
= require('./modules/app');! var app = new App();! app.start();! });! <% end %>!

https://github.com/maccman/stylo! Sinatra + Sprockets + Commonjs

PACKAGING ? „I will not support packaging the library
as Ruby Gem“

NODE TO THE RESCUE

bower.json {! "name" : ”libs",! "version": "0.1",! "dependencies" : {!
"jquery" : "latest",! "underscore" : "latest",! "backbone" : ”latest”,! “jquery-ui”: “latest”,! “jquery-fileupload”: “latest”,! “masonry”: “latest! },! "install" : {! "path" : "./vendor/assets/javascripts/libs"! }! }!

$ bower install! $ bower list! ! bower discover Please
wait while newer package versions are being discovered! palmdor! ├── backbone#1.0.0! ├── jquery#2.0.2! ├─┬ jquery-masonry#2.1.08! │ └── jquery#2.0.2! └── underscore#1.4.4! ! $ bower-installer! !

commit 5dad425ed66eeb94223c266cbd2b1a1086d8252a! Author: Joshua Peek <[email protected]>! Date: Fri May 24
12:08:19 2013 -0500! ! Support bower.json configuration file! ! diff --git a/README.md b/README.md! index 1bd5094..fd79c90 100644! --- a/README.md! +++ b/README.md! @@ -361,6 +361,10 @@ submit a pull request.! ! ## Version History ##! ! +**2.10.0**! +! +* Support for `bower.json`! +! sprockets integration

I am wriOng a book

Let‘s discuss http://github.com/mulderp/palmdor!

THANK YOU

The Client Side on Ruby

The Client Side on Ruby

More Decks by mulderp

Other Decks in Programming

Featured

Transcript