I know there is a lot of similar information out there, but I couldn't find anything specific to my use-case...
I'm on rails 5.2 using webpack and react is installed (and functioning). I'm trying to update a semi-complicated filter page I have, which functions as a very large multi-select checkbox filter (using form_for with remote=true). When the user checks a box, an AJAX call is made to rails and new data is displayed. The form is created dynamically based on data in my postgres db.
I have a basic react filter component already created using static data and it is updating my state fine (still working on creating the actual query). I just need some direction with the BEST (as in 'the most correct that you would do for the company you work for even if it is more complex and takes more time') way to pass in data to my react component and render it with the dynamic data.
I've seen main types of ways to do this. The first (which seems like a terrible idea) is to render a dummy div element with data attributes and then read that into the react component. The second is to 'do it in the controller' or 'use an api'. Does this mean setting up your rails project with an api endpoint and calling it via the react component? Does it mean using your existing controller routes and making the call that way?
edit: I've also seen several gems being used like webpacker-react, react_on_rails
I ended up going the API route. However, with Rails server-side rendering, I was getting two get requests, once via HTML and when the component mounted and made the API call, once again. I ended up switching the entire front-end to React because of this...
There must be an easier way to work this...
Related
I have some background questions, because the more I think about it, the more confused I get.
What I want to make is a very simple reviewsite where people can leave a review/comment with a rating (no signin function). The frontend will have to be in React and it will also need an average rating component.
So far I set up a rails API and in the model I included a title, description and rating. But I'm thinking that it might be better to make a separate model for the ratings?? I'm not sure when it's better to create a separate model.
My second questions is; How would I test a React component using Rspec? Would I need a gem for that?? I don't understand how that even works when the Rspec file is in the Rails API, and you want to test a component inside the React app...
Maybe someone could explain this or send me a good link where I can find this information?? Of course I tried google, but it just left me even more confused.
Actually you can't build a SPA application just by using React. React is not a framework it's a library so you have to include React into a framework like AngularJS. Then, you can't test React or AngularJS with Rspec because Rspec is not meant for UI testing. You should use something like Protractor. Also, I recommend you look at Grape API to build the service layer of your application. Finally you should add a separate model for ratings if you build the application on a RDBMS because there could number of ratings. Otherwise for something like mongodb you can embed the ratings into the post table.
I have this simple Rails app that connects to a MySQL database locally.
I have separate Ruby application that runs on its own (the Rails app does not know of the Ruby app's existence) and makes changes to that same database.
Currently, the home page of the Rails app displays the contents of a single table statically. Is there a way to display the contents dynamically? Where as the Ruby application is doing its own thing and Rails just sits there displaying everything that is currently happening within the database without refreshing or clicking any button.
Edit: My intent for the Rails app is to create a custom Web Interface for the database. If possible, I am trying to avoid SSEs since I've read that SSEs are not compatible with IE.
You can build the dynamic portion of the display as an Ajax-oriented display, and then in javascript use a timer to regularly kick off an Ajax-based update to the form information.
How to do this is highly dependent on what you're displaying and how your data is structured. You will want to have a way to identify time-based changes to the data, in order to tell when the last update happened, so that you don't send all of the form data when nothing has changed.
A complete solution is fairly complicated, and far beyond the scope of what can be covered in a SO answer. If you're learning, it's a good exercise for design and developing some great Rails skills. However, if it's a pressing need for an existing system, you might want to consider finding a freelancer to help develop it.
I'm working on a web app with the client side made in Angular and the backend made in Ruby on Rails. The app will need to show a list of articles (dynamically generated data).
Here’s what I’m pondering about.
Online tutorials on building Angular apps coupled with Ruby on Rails are based on the following model of interactions between the client and the server. First, the client sends a request to the server, in response to which the server will send all the building blocks required to start up Angular, and then Angular will request all the missing data from the server. In my case, first Angular starts up then it requests a list of articles.
That's two request-response cycles, as illustrated by the following diagram.
What if, on the other hand, the server will during the very first response send the data necessary to display the initial view? Like, in my case, what if the first response also contained the first batch of articles to be somehow imported into Angular? Then there will be only one request-response cycle as shown on the following schematic:
Is this a good idea or a terrible one? And if it is not absolutely terrible, what is the way to import Rails’ instance variables (e.g. the first batch of articles sent as #articles) into Angular while it starts up?
(I found similar questions discussed — though very briefly and without any consensus reached — here and here.)
=======================
UPDATE:
OK, here is another StackOverflow discussion about this:
How to bootstrap data as it it were fetched by a $resource service in Angular.js
Is this a good idea or a terrible one?
I'd argue it's a Good Idea. It will improve your app's performance and requires minimally invasive changes. You could even configure your Angular app to conditionally make the requests in case the data isn't available on page load for some reason.
The Gon gem makes it trivial to use your controller instance vars in your views (as JS).
I have a existing project in Ruby on Rails.
What is the best way to use AngularJS in Ruby on Rails app?
I want to use AngularJs for only specified modules, not for create SPA. This is good way?
What I have seen colleagues do in order to achieve this sort of integration with an existing rails app is:
Include angular.js and relevant dependencies in the specific app pages that are to be 'angularized'
Interpolate whatever data is needed to bootstrap the angular controller into the html template which contains the angular app. This might include data about the resource being operated on. I've seen this done by rendering a RABL template inside of a haml/erb template.
Using that interpolated data, call whatever API methods you need to get additional data on the fly. This is usually just a matter of implementing json handlers for routes you've already created.
I can't say whether this is best practice, but its an easy way to get started fast.
Best of luck, angular is a very enjoyable tool to work with once you get used to it.
I'm trying to submit input to the form, and parse the results in a RoR app. I've tried using mechanize, but it has some trouble with the way the page dynamically updates the results. It doesn't help that most fields are hidden.
Is there anyway to get mechanize to do what I'm looking for, or are there any alternatives to mechanize which I can use?
So whenever I want to do something like this, I go with the gem selenium-webdriver. It spawns a real browser (supports all major brands) and lets you control it with ruby code. You can do almost everything a real user could do. In addition, you have access to the (rendered) dom, so javascript generated content is not a problem.
Performance is much slower than with pure library clients, so its not a good fit for use in a web request cycle.
http://rubygems.org/gems/selenium-webdriver