SlideShare a Scribd company logo
1 of 12
JAVASCRIPT APPLICATIONS
    ON TOP OF RAILS
     Mathias Schäfer (9elements)

      Ruby User Group Berlin
CHAPLIN
https://github.com/moviepilot/chaplin
CHAPLIN

 A JavaScript Application Architecture
        on top of Backbone.js

 MVC, Mediator & Publish/Subscribe

Convention over Configuration & DRY

          RequireJS / AMD
MOVIEPILOT.COM
  Discover Movies First
MOVIEPILOT.COM

A spin-off targeting the international (English-speaking) market

Whole new concept compared to Moviepilot.de

Single-Page-Application

HTML templating, login etc. on the client

Fat Client, Slim Application Server
SINGLE-PAGE APPS

Look & Feel of an App

Snappy user interface

Much client-side interaction

Ajax polling and Websockets pushing

Alternatives: read DHH on Basecamp (bit.ly/xGADFJ)
moviepilot.com JavaScript App


  moviepilot.com
    Rails app


           Edward
       Rails JSON API


                 Sheldon
 MySQL
              Neo4J on jRuby
RAILS FOR JAVASCRIPT APPS


Rails is an excellent platform to deliver JavaScript applications

Rails Asset Pipeline: “Fast by default”

Compilation & Packaging of CoffeeScript, Sass/Compass
DUAL-USE APIS

Rails is an excellent choice for JSON APIs

Query them from other (Rails) components
or directly from the client

Proper URLs and search-engine accessibility

Render a minimal page on the server,
then load the JavaScript app on top
LEARNING FROM RUBY
         FRAMEWORKS
Building a proper MVC architecture on top of Backbone.js

Backbone.js is minimalistic and its MVC approach is… funky

Learn from Rails Routing (routes.rb) and Controllers (actions,
params)

Of course client-side MVC ist not the same, e.g. REST/CRUD
works differently

Duplicate stack: MVC on server – MVC on client
RB + JS = <3

Rails has made tremendous efforts to support JavaScript
application development (Rails Asset Pipeline, CoffeeScript…)

ECMAScript 6 will borrow several ideas of the Ruby language

Ruby developers, embrace JavaScript!

JavaScript developers, embrace Ruby!
THANKS!

@molily on Twitter and Github

http://molily.de/

http://9elements.com/

http://moviepilot.com/

https://github.com/moviepilot/chaplin

More Related Content

Viewers also liked

Introduction to The VR Web
Introduction to The VR WebIntroduction to The VR Web
Introduction to The VR WebLiv Erickson
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingHoat Le
 
WebRTC: A front-end perspective
WebRTC: A front-end perspectiveWebRTC: A front-end perspective
WebRTC: A front-end perspectiveshwetank
 
JavaScript and Web Standards Sitting in a Tree
JavaScript and Web Standards Sitting in a TreeJavaScript and Web Standards Sitting in a Tree
JavaScript and Web Standards Sitting in a TreeJenn Lukas
 
Web Front End - (HTML5, CSS3, JavaScript) ++
Web Front End - (HTML5, CSS3, JavaScript) ++Web Front End - (HTML5, CSS3, JavaScript) ++
Web Front End - (HTML5, CSS3, JavaScript) ++ubshreenath
 
WebRTC Reborn - Cloud Expo / WebRTC Summit
WebRTC Reborn - Cloud Expo / WebRTC SummitWebRTC Reborn - Cloud Expo / WebRTC Summit
WebRTC Reborn - Cloud Expo / WebRTC SummitDan Jenkins
 
Introduction to WebGL and WebVR
Introduction to WebGL and WebVRIntroduction to WebGL and WebVR
Introduction to WebGL and WebVRDaosheng Mu
 
The next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRThe next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRCodemotion
 
WebRTC on Mobile Devices: Challenges and Opportunities
WebRTC on Mobile Devices: Challenges and OpportunitiesWebRTC on Mobile Devices: Challenges and Opportunities
WebRTC on Mobile Devices: Challenges and OpportunitiesVladimir Beloborodov
 
WebVR - MobileTechCon Berlin 2016
WebVR - MobileTechCon Berlin 2016WebVR - MobileTechCon Berlin 2016
WebVR - MobileTechCon Berlin 2016Carsten Sandtner
 
An Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 secondsAn Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 secondsGeilDanke
 
TDC2016POA | Trilha Web - Realidade Virtual com WebVR
TDC2016POA | Trilha Web -  Realidade Virtual com WebVRTDC2016POA | Trilha Web -  Realidade Virtual com WebVR
TDC2016POA | Trilha Web - Realidade Virtual com WebVRtdc-globalcode
 
How to create 360 Image/panorama & share with WebVR?
How to create  360 Image/panorama & share with WebVR?How to create  360 Image/panorama & share with WebVR?
How to create 360 Image/panorama & share with WebVR?Fred Lin
 
Baby Steps: A WebRTC Tutorial
Baby Steps: A WebRTC TutorialBaby Steps: A WebRTC Tutorial
Baby Steps: A WebRTC TutorialTsahi Levent-levi
 
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!FITC
 
WebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseWebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseTony Parisi
 

Viewers also liked (20)

Javascript the New Parts
Javascript the New PartsJavascript the New Parts
Javascript the New Parts
 
20160713 webvr
20160713 webvr20160713 webvr
20160713 webvr
 
Introduction to The VR Web
Introduction to The VR WebIntroduction to The VR Web
Introduction to The VR Web
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
 
WebRTC: A front-end perspective
WebRTC: A front-end perspectiveWebRTC: A front-end perspective
WebRTC: A front-end perspective
 
JavaScript and Web Standards Sitting in a Tree
JavaScript and Web Standards Sitting in a TreeJavaScript and Web Standards Sitting in a Tree
JavaScript and Web Standards Sitting in a Tree
 
Web Front End - (HTML5, CSS3, JavaScript) ++
Web Front End - (HTML5, CSS3, JavaScript) ++Web Front End - (HTML5, CSS3, JavaScript) ++
Web Front End - (HTML5, CSS3, JavaScript) ++
 
Photo and photo
Photo and photoPhoto and photo
Photo and photo
 
WebRTC Reborn - Cloud Expo / WebRTC Summit
WebRTC Reborn - Cloud Expo / WebRTC SummitWebRTC Reborn - Cloud Expo / WebRTC Summit
WebRTC Reborn - Cloud Expo / WebRTC Summit
 
Introduction to WebGL and WebVR
Introduction to WebGL and WebVRIntroduction to WebGL and WebVR
Introduction to WebGL and WebVR
 
The next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRThe next frontier: WebGL and WebVR
The next frontier: WebGL and WebVR
 
WebRTC on Mobile Devices: Challenges and Opportunities
WebRTC on Mobile Devices: Challenges and OpportunitiesWebRTC on Mobile Devices: Challenges and Opportunities
WebRTC on Mobile Devices: Challenges and Opportunities
 
WebVR
WebVRWebVR
WebVR
 
WebVR - MobileTechCon Berlin 2016
WebVR - MobileTechCon Berlin 2016WebVR - MobileTechCon Berlin 2016
WebVR - MobileTechCon Berlin 2016
 
An Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 secondsAn Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 seconds
 
TDC2016POA | Trilha Web - Realidade Virtual com WebVR
TDC2016POA | Trilha Web -  Realidade Virtual com WebVRTDC2016POA | Trilha Web -  Realidade Virtual com WebVR
TDC2016POA | Trilha Web - Realidade Virtual com WebVR
 
How to create 360 Image/panorama & share with WebVR?
How to create  360 Image/panorama & share with WebVR?How to create  360 Image/panorama & share with WebVR?
How to create 360 Image/panorama & share with WebVR?
 
Baby Steps: A WebRTC Tutorial
Baby Steps: A WebRTC TutorialBaby Steps: A WebRTC Tutorial
Baby Steps: A WebRTC Tutorial
 
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
 
WebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseWebGL, WebVR and the Metaverse
WebGL, WebVR and the Metaverse
 

Recently uploaded

Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????blackmambaettijean
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 

Recently uploaded (20)

Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 

JavaScript Applications on top of Ruby on Rails

  • 1. JAVASCRIPT APPLICATIONS ON TOP OF RAILS Mathias Schäfer (9elements) Ruby User Group Berlin
  • 3. CHAPLIN A JavaScript Application Architecture on top of Backbone.js MVC, Mediator & Publish/Subscribe Convention over Configuration & DRY RequireJS / AMD
  • 4. MOVIEPILOT.COM Discover Movies First
  • 5. MOVIEPILOT.COM A spin-off targeting the international (English-speaking) market Whole new concept compared to Moviepilot.de Single-Page-Application HTML templating, login etc. on the client Fat Client, Slim Application Server
  • 6. SINGLE-PAGE APPS Look & Feel of an App Snappy user interface Much client-side interaction Ajax polling and Websockets pushing Alternatives: read DHH on Basecamp (bit.ly/xGADFJ)
  • 7. moviepilot.com JavaScript App moviepilot.com Rails app Edward Rails JSON API Sheldon MySQL Neo4J on jRuby
  • 8. RAILS FOR JAVASCRIPT APPS Rails is an excellent platform to deliver JavaScript applications Rails Asset Pipeline: “Fast by default” Compilation & Packaging of CoffeeScript, Sass/Compass
  • 9. DUAL-USE APIS Rails is an excellent choice for JSON APIs Query them from other (Rails) components or directly from the client Proper URLs and search-engine accessibility Render a minimal page on the server, then load the JavaScript app on top
  • 10. LEARNING FROM RUBY FRAMEWORKS Building a proper MVC architecture on top of Backbone.js Backbone.js is minimalistic and its MVC approach is… funky Learn from Rails Routing (routes.rb) and Controllers (actions, params) Of course client-side MVC ist not the same, e.g. REST/CRUD works differently Duplicate stack: MVC on server – MVC on client
  • 11. RB + JS = <3 Rails has made tremendous efforts to support JavaScript application development (Rails Asset Pipeline, CoffeeScript…) ECMAScript 6 will borrow several ideas of the Ruby language Ruby developers, embrace JavaScript! JavaScript developers, embrace Ruby!
  • 12. THANKS! @molily on Twitter and Github http://molily.de/ http://9elements.com/ http://moviepilot.com/ https://github.com/moviepilot/chaplin

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n