I have started a new project in which I would like to use React and Rails. This project is on the small side and will require some basic interactive UI, hence React. As far as I know there are two ways I could get started with this:
Using the react-rails gem and use the built in view helper
Create a Rails API and React/Flux frontend app
I have a few questions however. In no particular order:
React-rails seems like the simpler solution, but what drawbacks would I be facing?
I come from a Rails and Ember background so the Rails API + React FE solution makes architectural sense to me. But with the react-rails gem I'm confused on how some things should be done. Primarily, how do I handle routing? I suppose I won't have access to any react route helpers and will need to pass paths into the react components as props?
Thanks in advance!
For a small project React-Rails, https://github.com/reactjs/react-rails, is great I have used it in production the last year on 2 sites that get about hundred thousand visitors a month and I haven't had any issues.
That said if you want to use Redux, React-Router or Flux don't use React-Rails go the API route.
My rule is if you are just using React components then use React-Rails.
If you are doing a Redux, Flux app then just make a frontend app.
It depends on how much your server is doing and also your team. If you have a lot of business logic that you want to keep in Rails, then you may want to have that logic running on a dedicated Rails server and expose as APIs.
You can then have a NodeJS server that does nothing but fetch data from APIs and render React to send to the users. The only interaction between react and rails is via the APIs as JSON. This basic setup will scale really well and is a pretty simple mental model.
If the project gets bigger, this means you can have JS-only devs work in JS only and Rails devs work in Rails only. Plus if you want to move away from Rails or React later, there's no added complexity there.
OR
If all your devs are React+Rails and the project is a bit small for multiple servers, then I think using react-rails to serve up your pages is a fine solution.
Related
I'm building a Single Page (Web) Application. I'm quite smitten by Rails v5.0, especially its built-in API capabilities.
In the past I've built JavaScript frontends using Vue.js, usually with the templates provided by the Vue-CLI project. This allows deployment of Vue component-based static sites basically anywhere. It's great.
Now, Rails 5.1 has some built-in Webpack and Yarn features which look pretty compelling too. I'm not sure how to proceed with my new application.
My questions:
What are the pros/cons of integrating Webpack and Vue into Rails itself, using the Webpacker extensions available in Rails v5.1? I
intend to deploy to Heroku.
On the other hand, what are the pros/cons of using the Rails API-only mode for the backend, and maintaning the Vue/Webpack-based
frontend in its own directory? I'd keep everything in the same
repository, deploy the backend via Heroku, and the frontend via a
static host like Netlify.
Which approach would have more cognitive overhead or technical complexity?
Over the past few days, I've been looking around, and I've not found much concise information on the web about this. People seem interested in the auto-reloading features of the Rails development environment, but I get that for free already with Vue-CLI.
As far as I can discern, these are reasons for keeping them separate:
Deployment of the frontend is pretty darn simple to anywhere.
The Webpacker mode for Rails is very new, and not many tutorials or guides exist yet, especially regarding integration testing. Keeping
things separate means that my existing testing apparatus should still
apply.
Here are some pros for integrating the two parts together:
The possibility of using static assets both for the frontend and possibly for server-generated pages in the future, should that be
necessary.
Buy-in to "the Rails way", with implied future maintenance by the Rails team.
the JS Frontend would not need to be hosted separately.
Don't need to worry about CORS (?)
What other concrete benefits exist for either approach?
When i started i went the webpacker way, somewhow because that's what it looked like it was "supposed" to be. As you say, very little guidance.
Webpacker (with it's reliance on the latest node) seems a moving target, making deployment and even development more complex. For what benefit i asked and got rid of it.
Now i use vue from the cdn. Benefits:
cached close to user
almost zero installation
easy to have dev/production versions
The i write app code into the rails templates. Using haml, and in fact ruby2js, but you can use javascript just fine. That's how i started, but i like ruby, and the ruby code is almost half the size than the generated js, but i'm getting off track.
So templates are your "vue annoted" rails templates.
Small code also goes into the rails template.
More code can be defined in the assets and referred to from the app.
Even components can be written into template using the x-template syntax.
And last but not least: Data can be transferred by to_json, directly into the templates. And in the same render. Much faster than an additional query. When to_json is not enough one can use rabl to get exactly what is needed.
I hope i made that clear. I am in the process of writing some vue-rails stuff up, as there is so little to be found. Look out here (and i'll comment when the post is ready)
We have our web application built completely on Ruby on Rails. The front end is tightly coupled with the backend. We are in a stage where we want to gradually start separating our frontend from the backend. We want to go ReactJS way with the UI part and we want to follow the waterfall model for the transition.
We have two options:
Use gem called react-rails, and build new components in React. Slowly start converting existing components into React components. Once we have all components converted into React components, take out every React component, separate complete frontend and host it somewhere else.
Host ReactJS somewhere else. Gradually start converting each component to React component, move it to new hosted place and remove them from Rails. The only catch is, React components will be located at a different location than where Rails is. While navigating within the app, it could give a feel of navigating to a different website.
Please share your experience and guide us on which way should we proceed. Our end goal is to have the complete front end in ReactJS and backend on Rails. They communicate via APIs, completely removing coupling between frontend and backend.
Thanks
Use #1 only if you plan on keeping rails in the server rendering mix (not recommended). If not then #2 is your best option to just start from scratch with a complete js solution. It doesn't have to feel like a different site if you create a decoupled react component library and a rendering pipeline to the existing rails app when it needs the new views. Then when you have converted all the view components you can wrap up the app logic and make the switch over entirely.
Another option is you don't even need to host the new react components seperately, the react components can go through a separate build cycle, then cached on the existing server and rendered as needed from rails.
I would actually NOT recommend going away from your Ruby centered system. You can use http://ruby-hyperloop.io to build your react.js components in Ruby. Hyperloop includes a Ruby DSL (HyperReact) for react, and HyperMesh which will give you complete access to your ActiveRecord models in your React components.
The huge advantages are you will deal with one language throughout, you do not need to build APIs just to access your data down at the client, and you can use the existing rails tool chain including test tools.
There is a huge library of React.js components which interoperate fine with HyperReact.
If for whatever reason you feel that it would be better to go the JS route then I would recommend react-rails. It works, is well supported, and handles prerendering (a very important concept.) You can easily integrate with NPM and webpack as well.
I'm about to start a new project and I am unsure if using AngularJS for my front end would be a good idea not. I've read about people saying this isn't the smartest way of doing a project. And even if I did, Is there a way to get AngularJS to interact with the controllers? This question may be redundant but I am actually curious of how to effectively do this without it being a waste of time.
I've never completely done it, but I believe the way to go is to build a Rails api and then have a separate Angular project use said api. The api could also be used to build a mobile app. I think the Angular project would still need to be served from a Node.js server in production, but I don't think that would be a big deal.
This is what I used to learn how to build a Rails api: http://apionrails.icalialabs.com/book/chapter_one
You can do it within an existing project and share the models from it.
There are several different approaches to accomplish that. I tried about 5 different guides out there, the best I found (and I finally sticked to) was https://thinkster.io/angular-rails - This guide should help you build a basic CRUD app with angular connected to rails.
You use Rails as an JSON RESTful API which responds to Ajax-Requests (Get, Post, Put, Delete). Angular will handle the frontend stuff - sending those Ajax requests to the routes/methods defined in your rails controllers. So yes, of course your AngularJS app can interact with your rails controllers.
This also helped me to understand the setup in the beginning: Instead of the Rails View, you will be using AngularJS as your view:
I really love using angular with rails, because setting up the JSON responses (especially with Active Model Serializer Gem) is very easy and quickly done. i deffinitely can recommend it, and I have not encountered any unsolvable problems - so far.
Just go trough this guide I linked and you will see if this setup fits your needs.
The short answer is that your Rails application will have to present some kind of a public API for your AngularJS application to consume. Angular (and it's brethren, like React and Ember) runs client-side, on the browser, and it needs "something" to make AJAX calls against. That "something", i.e. your backend, can be Firebase, Parse, AWS Lambdas, Rails API, etc. Since you already have a Rails application, it probably makes the most sense to add some RESTful API endpoints that use the existing models (and possibly controllers) to consume/produce JSON payloads from/for the client.
I've been using Ruby on Rails since a little more than one year now and I've always do it in a casual way, I mean, everything in one place (front & back), using the standard .html.erb file populated by the associated controller method.
Otherwise, today in our project, I have the need to separate the front and the back end for multiples reasons (code maintainability / clarity, better architecture, more reactivity, etc...).
I've done plenty of researches, watch some conferences (1, 2, 3), but didn't find my solution yet. It looks like to be a question that comes often, but what is the best practice/tools to separate the backend and the frontend of a Ruby on Rails app?
I don't feel we need (yet) a huge JS framework like React/EmberJS/Angular/etc...
First I was thinking about something like Middleman/Jekyll and make the communication via JSON and API calls, but it seems like that it's not a good solution for dynamic website.
So is there a frontend framework that works well with a Rails API and which is easily maintainable and upgradable (add feature/extension to it like gems)?
Thanks for your insights.
A friend of mine wrote this great article/tutorial on Rails as a backend API.
http://blog.launchacademy.com/the-basics-of-building-an-api-in-ruby-on-rails/
As well as this tutorial on Rails/Ember.js
https://github.com/diegodesouza/Project-Planner-EmberJS
You can get an idea of how it's done and implement your preferred front end framework.
Hope it sheds some light on this question.
I have a similar setup as one of the commenters on the question.
I'm using Rails mainly for just the project structure, to define some page layouts, and for ActiveRecord.
I then have my JSON APIs defined using the Grape API framework.
I have a SPA, written on AngularJS that lives in the public/ folder. It doubles as my mobile app, made possible by phonegap. If my Angular app didn't double as my mobile app, I could've possibly just used the asset pipeline to serve up the SPA. To compensate for that, I have a separate build task written in Grunt to minify/uglify my JS/CSS assets before I deploy them out to production.
I also use Comfortable Mexican Sofa for my static content pages.
It took some trial and error to get things right, but overall I find that this setup serves me pretty well.
I need some guidance to figure out how to incorporate Angular inside rails.
Reason for choosing Rails : I like their opionated approach to do things right. Also migrations, gems are really cool.
Reason for angular : I was researching and looking for framework best suited for SPA. Backbone seem too abstract. I had choice to make between Angular & Ember. I started reading Angular first and it made sense to me. So i never went to read about ember.
Reason for Angular & Rails: I researched and tried using small scale framework like grape, slim ( Yes i use php too ). But i feel need to stick to rails for long term scope of project. And personally i like doing things rails way.
So here is where i need help,
I have rails project in Rails 4.
Sign-in , sign-up everything is created as followed in Michael Hartl tutorial. Have tweaked stuff based on my requirement.
So post-sign-in or post-sign-up steps a view from show action of users controller is rendered.
I figured i'll need different layout files so i created same for outer pages and inner pages, respectively.
I don't know how to proceed i want to make use of the angular templates and routes for my single page app ( which resides post sign-in ). I am flexible if there is another way. I just need a guide how to use angular seemlessly with rails making use of rails controller to handle my rest request and using routing provided by angular to navigate around in SPA.
Hope i am clear. Feel free to edit this.
here is a great railscasts from ryan bates: http://railscasts.com/episodes/405-angularjs
also here is the source for that railscasts you can get ideas from there:
https://github.com/railscasts/405-angularjs
I'm not familiar with SPA, but I have been working on a tutorial for integrating rails and angularjs, which I'm refining over time. It may provide some answers here - in particular I am using the angular routing to provide a single-page app as you describe: http://technpol.wordpress.com/2013/09/03/angularjs-and-rails-tutorial-index/
I would suggest you to not mix angular into your rails app. Keep both of them separate.
So you could either place the whole of your angular app in the public folder of your rails app or keep it completely away from the rails app. This is more like a service oriented architecture, where your rails app serves as a back end serving as an api and the front end(Angular app) consuming that api.
There are many many nice articles the covers how to handle the authentication/authorization
in angularjs with REST APIs.Authentication with AngularJS and a Node.js REST api
Coming to the rails side for building REST API, Grape is a nice choice. Here is a nice series explaining some best practices about grape.
HTH!
I'd suggest taking a look at this tutorial: How to Wire Up Ruby on Rails and AngularJS as a Single-Page Application. I have used it for a few personal projects, so I am sure that it is up to date as of late 2014. If you want to view it in action you can head to http://goodmatches.herokuapp.com, and you can view the repo.
Try half-pipe gem which makes using bower for managing javascripts assets much easier.