Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Client Side on Ruby

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.

5d75f8af878f069a3b5939894c2e57ab?s=128

mulderp

June 14, 2013
Tweet

Transcript

  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

  12. 2013

  13. None
  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>!
  29. None
  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

  35. None
  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