The Client Side on Ruby

A talk on developing a Ruby-on-Rails application with a JavaScript frontend, discussing some JavaScript basics, influences from Ruby on Underscore and Backbone, the Asset Pipeline, and dealing with JavaScript dependencies.

1. the client side http://thinkingonthinking.com ! Patrick Mulder ! @mulpat! on Ruby!
2. we.love Ruby!
3. Designed for Happiness
4. $ rails new palmedor!
5. |-app! |! |---models! |-----concerns! |! |---views! |-----layouts! |! |---controllers! |-----concerns! |! |---assets! |-----javascripts! |-----stylesheets   HTML   HTTP   DATABASE   USER   EXPERIENCE  
6. CLIENT! USER   EXPERIENCE   HTML   SERVER! HTTP   DATABASE  
7. DOM Document  Object  Model  
8. <html> + <script> + <style> <script>
9. The Language of the Browser $(document).ready(function() {! $("#menu”).click(function() {! ! $.get('templates/movies.html', function(data) {! $(“#movies”).html(data);! }); ! ! }); ! }); !
10. 2005! DOM plumbing
11. h9p://w3techs.com/technologies/history_overview/javascript_library/all/y   javascript usage
14. _.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  
15. Origins http://github.com/documentcloud/documentcloud  
16. CULTURAL FIT
17. Opinions var MovieListView = Backbone.View.extend({! ! initialize: function() {! this.collection = new Movies();! ! this.collection.bind("reset",function() {! ! that.render();! }! this.fetch();! }) ! +  REST  
18. MOVIE   A  Client  Side  ApplicaOon   Filters  and  Search   Results   StaOc   HTML  
19. $("#enter”).click(function() {! $.get('templates/movies.html', function(data) {! $(“#movies”).html(data);! }); ! }); ! UNDERSCORE! ! ! ! ! ! JQUERY! ! ! ! ! ! BACKBONE! ! ! ! ! ! VIEWS! ! ! ! ! ! MODELS! ! ! ! ! ! COLLECTIONS! ! ! ! ! ! TEMPLATES! ! ! ! ! ! ADMIN! ! ! ! ! ! Modernizr! ! ! ! ! !
20. HOW TO USE JS WITH RUBY?
21. transport |-js! |! |---libs! |-----backbone! |-----impress! |-----masonry! |-----jquery! |-----jquery-fileupload! |-----jquery-ui! |-----require! |-----underscore! |! |---modules! |! |! |-templates! |---dashboard! |---directory! |---shared! development   producOon   HTTP  
22. PREPROCESSING   CONCATENATION   MINIFICATION  
23. BUILD PROCESS
24. sprockets               app.routes.prepend do! mount app.assets => config.assets.prefix! end!
25. 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!
26. requirejs Asynchronicity   +    modularity  
27. ! 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
28. 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>!
30. commonjs CommonJS  modules  are  a  way  of   encapsulaOng  and  packaging  up   JavaScript  files  to  ensure  they're   name-­‐spaced  and  loosely  coupled,  a   crucial  aspect  to  ensuring  JavaScript   code  quality  and  maintainability.  
31. <%= javascript_tag do %>! $(document).ready(function(){! Backbone.history.start({pushState: true});! ! var App = require('./modules/app');! var app = new App();! app.start();! });! <% end %>!
32. https://github.com/maccman/stylo! Sinatra + Sprockets + Commonjs  
33. PACKAGING ? „I  will  not  support  packaging  the  library    as  Ruby  Gem“  
34. NODE TO THE RESCUE
36. 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"! }! }!
37. $ 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! !
38. commit 5dad425ed66eeb94223c266cbd2b1a1086d8252a! Author: Joshua Peek <josh@joshpeek.com>! 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
39. I  am  wriOng  a  book  
40. Let‘s  discuss     http://github.com/mulderp/palmdor!
41. THANK YOU