thorsteneckel / rails-javascript-integrations

Progressive integration strategies for JavaScript-heavy Rails apps

Rails JavaScript Integration Strategies

NOTE: This is more up-to-date than the last commit date would indicate, as most of the interesting work is not on the master branch.

Why this?

Componentized views make UI development orders of magnitude simpler. Unfortunately, scaling UI development and integrating a modern JavaScript workflow into a new or existing Rails app can be tricky.

What is this?

This project builds a simple todo list component with 4 different JavaScript integration strategies:

• scoped-jquery: I wouldn't actually recommend this for anyone. But, if your team is currently using jQuery and adopting a new framework is a tough sell right now, here's a relatively simple pattern that may help.
• vue-simple: A fantastic strategy for existing projects, as Vue plays well with jQuery and other DOM-manipulating libraries. This integration strategy also requires less than 1 minute of setup! As for learning curve, becoming very productive in Vue takes less than a day.
• vue-browserify: Recommended strategy for most new projects. It takes about a half hour to set up, offers a UMD module system, very nice workflow with hot module reloading, and best of all - the configuration is simple enough that it's actually possible for mere mortals to understand everything that's happening!
• vue-webpack: Recommended for people who want to be on the cutting edge and are willing to dive into the guts of build tools. It offers the best possible workflow and tooling possible for any framework at the time of writing.

How do I use this?

There are two recommended ways of browsing this project. The first is to read the diffs between branches in order of rising complexity. The current branch (master) is just a newly generated Rails app.

1. master..scoped-jquery: Adds the todo model and API, with a single JavaScript file.
2. scoped-jquery..vue-simple: Converts the scoped jQuery to a much simpler Vue component.
3. vue-simple..vue-browserify: Moves all JavaScript to a new frontend folder managed by Browserify. Components are also organized into more advanced components in .vue files.
4. vue-browserify..vue-webpack: Bypasses sprockets and all view-related Rails features, now managing the entire UI in the frontend folder through Webpack.

If there's a specific setup you're interested in and you want to see all work done from the point of a newly generated Rails app, just diff with master:

• master..scoped-jquery
• master..vue-simple
• master..vue-browserify
• master..vue-webpack

FAQ

What about examples using React instead of Vue?

I've used React pretty heavily for over 2 years. I still do sometimes. Many companies and individual developers I work with still think of me as "the React guy". I'm grateful for React. It was instrumental in helping me understand the value of component-based UI development.

Please consider this when I say Vue makes me happier and more productive in every scenario. Try it - it might do the same for you. The docs are so good that you can learn the essentials and be building non-trivial applications in less than a day.

What about examples using Angular 2? They use components, right?

The way Angular 2 is engineered, even the simplest possible integration would be more complex than all but the most advanced one currently included here. I've also never met anyone who's worked with both Vue 2 and Angular 2, then preferred Angular.

If you're just a TypeScript fan though, there's good news! Vue offers officially supported type definitions and a component decorator.

Contributing

If you notice a mistake, room for improvement, or have questions, issues and pull requests are very welcome. 😄