Vanilla JS Components in Ruby on Rails applications

On the whys on how to use Vanilla JavaScript - i.e. without a framework - to build modular components in a Ruby on Rails application. This proposes a way to structure JavaScript files using ES6 imports and using widely accepted standards in the JavaScript community.

Transcript

1. Vanilla JS Components in Ruby on Rails applications Olivier Robert February 14th, 2018
2. Intro • jQuery is less and less used ◦ Removed from Ruby on Rails (RoR) since 5.1 ◦ Removed from Bootstrap JS components since 4.x • Vanilla JS (ES5 and ES6) has been safe to use in all browsers for a while ◦ querySelector and querySelectorAll saved us all ◦ Babel is generally used to transpile JS assets providing shims and polyfills
3. Intro We are JS framework -less / agnostic ◦ Webpacker is part of our Rails project template but without any JS framework ◦ React JS or Vue JS are only brought if it makes sense JS frameworks have massively influenced the JS ecosystem ◦ Webpacker enforces a directory structure packs/application.js ◦ … but nothing to manage JS components or the rest of the JS code ⇒ Propose an architecture to structure JS code in a RoR application
4. JS component • ES6 class based • jQuery free
5. React JS and Ruby on Rails inspired at the same time Decouple components definition (left) from their usage (right)
6. Initializers: JavaScript meets Ruby on Rails Bind components used application-wide on page load
7. Screens: React JS meets Javascript / Ruby on Rails Bind components on a screen/page-basis on page load
8. Screens: React JS meets Javascript / Ruby on Rails Host complex JS logic on a screen/page-basis
9. Pack / manifest files Import initializers and screens
10. Thanks! Contact Nimbl3 hello@nimbl3.com 399 Sukhumvit Road, Interchange 21 Klongtoey nua, Wattana Bangkok 10110 20th Floor, Central Tower 28 Queen's Road Central, Hong Kong nimbl3.com