I'm trying to integrate backbone.js as the frontend framework for my rails app. I have a lists model (among others) in rails.
When setting up my backbone frontend, I'm using history pushState as opposed to hashtags. I want backbone/js to handle a lot of the front end (users logged in affects the header, etc.) and have the app have the 'app like feel'.
However, when accessing /lists it forwards to the rails controller, and not backbone. Is there a solution around this so I can use the built in sessions with rails and backbone, when the urls for rails and the front end have the same name?
To anybody looking for an answer: the solution we used was just let Backbone control everything except login/register forms using API calls our iOS app also uses
Related
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.
In the process of learning Rails, I read about how we could combine it with some front-end MV* JavaScript frameworks — such as Backbone.js, Angular.js, or Ember.js — to improve the UX.
This introduced (to me) the concept of using Rails as an API, instead of a web app.
So, now, I am pretty confused: what is the difference between a regular Rails app and a Rails API?
According to the official rails website, there are three main differences between a rails web application and a rails api:
1 - The api app is configured to start with a more limited set of middlewares than normal. Specifically, it will not include any middleware primarily useful for browser applications (like cookies support) by default
2 - In the api app, ApplicationController inherits from ActionController::API instead of ActionController::Base. As with middlewares, this will leave out any Action Controller modules that provide functionalities primarily used by browser applications.
3 - The api app is configures the generators to skip generating views, helpers and assets when you generate a new resource.
You can always convert your rails app from either one of these to the other one. To do so, follow the steps in the reference I mentioned above.
A regular Rails app will use the rails views (erb or haml) to render pages directly. That is to say, it will process the data AND render this data in views, answering directly the client request with a HTML page.
A Rails API will just process your action, and assume someone else is doing the job of rendering the view for the client. Therefore, a Rails API is expected to return data in an appropriate format, like JSON, XML, or just a JS piece of code to execute. It is then the job of frontend frameworks like AngularJS to receive, parse, and do something with the data (like update some HTML, etc.)
In a nutshell,
Classic Rails application are all-in-one applications, where the processing and rendering are both handled by Rails. The apps may lack or responsiveness however, as full pages are rendered, but it's usually much faster to code this way.
Rails API are just serving intermediate results. It will focus on just delivering the data. This can be better if you have strong requirements for the design/responsiveness, as you are more flexible with the frontend libraries you can use. Usually only the data is transferred, so in addition it can be faster. There are some problems with APIs. For example with one-page apps + full AJAX, it may be harder to set up a forward/back behavior on the user browser. Also, using APIs will require more work, but if you have many devs, you can agree on the interfaces, and parallelize the work server/frontend.
Now, it's not a black or white answer I'm giving. You can totally have a Rails app mainly built as a Web app, but with some API actions that give more responsiveness to some pages. An exemple of this, is to have an autocomplete form, that is pulling the data via AJAX calls.
I found a pretty clear answer in Yoni Weisbrod's Rails API Mini Guide:
The fundamental difference between an API and a regular Rails app is
that an API returns data for further processing, rather than data that
is meant to be viewed directly. Therefore, rather than producing an
HTML document (with CSS and/or Javascript) that looks pretty, APIs
produce simple information structures that can be further processed by
whatever will be consuming our API.
There are tons of tutorials out there for creating single page applications using Rails and Angular. They usually pass all the routing to Angular and leave Rails for the activerecord stuff. I find this frustrating because there are times when I just want a plain HTML page with minimal client side bells and whistles.
What is the best practice for a multi-page application, where I can use both Rails routes and Angular UI-router?
I would use the Angular router so all of your routes are in one place. The best part about angular is you can add as much or as little as you want. So you can have static pages handled by the angular router.
js and I want to create a rails app with backbone. The only problem is, I cant seem to figure out what goes in the backend and what goes in the frontend. The approach I am using is to use rails essentially as an API.
I am looking at various different approaches and I cant seem to quite understand why you route in backbone as well as using normal rails routing.
My theory is:
You use rails to display initial html pages, and you use backbone routing to route the javascript files to that html pages so you can perform DOM manipulation there.
Here is the part of my code where I got that idea from. (NOTE: this is all mainly taken from Ryan Bates railcast on backbone.js)
backbone router
class Poster.Routers.Posts extends Backbone.Router
routes:
'':'index'
'posts/:id': 'show'
initialize: ->
#collection = new Poster.Collections.Posts()
#collection.fetch({reset: true})
index: ->
view = new Poster.Views.PostsIndex(collection: #collection)
$('#index_container').html(view.render().el)
views/main/index.html.erb
<div id="index_container"></div>
So does this backbone routing essential do the equivalent of just loading the javascript in the index: method at the top of the views/main/index.html.erb? (i know actually copying those javascript lines into the index.html.erb file wont work, its just a conceptual question)
Backbone is designed to be used in single-page applications, therefore it has a little to do with Rails routing. All Rails has to do is land a .html page, and everything else is client's concern.
If you intend to use Rails as an API, then its routing does not matter at all. You can even keep Rails application and frontend on different servers. In this case all what Rails has to do is process requests from the client.
For example, you can build your client-side without any hard ties to a backend, they can be absolutely separated. You just make AJAX calls from a client, then server processes them and responds with JSON.
Also, Backbone does not "route the javascript files to that html pages". It just executes functions according to a hash "route: action". These are just plain JavaScript functions which already can "see" JavaScript working within the document.
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.