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

08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 

Recently uploaded (20)

08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.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