Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

we.love Ruby!

Slide 3

Slide 3 text

Designed for Happiness

Slide 4

Slide 4 text

$ rails new palmedor!

Slide 5

Slide 5 text

|-app! |! |---models! |-----concerns! |! |---views! |-----layouts! |! |---controllers! |-----concerns! |! |---assets! |-----javascripts! |-----stylesheets   HTML   HTTP   DATABASE   USER   EXPERIENCE  

Slide 6

Slide 6 text

CLIENT! USER   EXPERIENCE   HTML   SERVER! HTTP   DATABASE  

Slide 7

Slide 7 text

DOM Document  Object  Model  

Slide 8

Slide 8 text

+ + <style> <script>

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

2005! DOM plumbing

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

2013

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

_.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  

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

CULTURAL FIT

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

MOVIE   A  Client  Side  ApplicaOon   Filters  and  Search   Results   StaOc   HTML  

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

HOW TO USE JS WITH RUBY?

Slide 21

Slide 21 text

transport |-js! |! |---libs! |-----backbone! |-----impress! |-----masonry! |-----jquery! |-----jquery-fileupload! |-----jquery-ui! |-----require! |-----underscore! |! |---modules! |! |! |-templates! |---dashboard! |---directory! |---shared! development   producOon   HTTP  

Slide 22

Slide 22 text

PREPROCESSING   CONCATENATION   MINIFICATION  

Slide 23

Slide 23 text

BUILD PROCESS

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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!

Slide 26

Slide 26 text

requirejs Asynchronicity   +    modularity  

Slide 27

Slide 27 text

! 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

Slide 28

Slide 28 text

gem 'handlebars_assets'!
! {{ title }}!
! {{#if editable }}! ! 5 stars! 4 stars! 3 stars! 2 stars! ! {{/if}}!
! {{#liststars stars }}{{/liststars}}!
!
! {{ category }}!
!
! {{ description }}!
!

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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.  

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

NODE TO THE RESCUE

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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"! }! }!

Slide 37

Slide 37 text

$ 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! !

Slide 38

Slide 38 text

commit 5dad425ed66eeb94223c266cbd2b1a1086d8252a! Author: Joshua Peek ! 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

Slide 39

Slide 39 text

I  am  wriOng  a  book  

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

THANK YOU