Does AngularJS make Turbolinks pointless? - ruby-on-rails

From Turbolinks page:
Turbolinks makes following links in your web application faster.
Instead of letting the browser recompile the JavaScript and CSS
between each page change, it keeps the current page instance alive and
replaces only the body and the title in the head
If I want to build a rich client-side application with AngularJS, does that framework make pointless Turbolinks?

The answer is NO. They both work differently and and their main goal is different.
Turbolinks work on a Rails webapp that responds with HTML.
Angular JS or any other JS frameworks makes use of a JSON API backend.
There is not extra coding required to use turbolinks. Turbolinks is just a way of making pages to load faster by minimizing the content that is being transferred. Only replacing the HTML body tag
With JS framework, you have to build the entire front-end application. This is particularly useful as the same backend can be used to develop mobile apps

Related

Rails 5 Turbolinks appears to reload page

I am still new to Turbolinks and unsure whether it is working correctly. I have a new rails app that I've created with Turbolinks enabled by default. I am using the link_to rails helper to build some links. When I click on one of the links the page reloads in the browser. I was under the impression that this should not occur as only the body should be swapped using AJAX. Is there any additional attributes I need to add to my link or additional configuration I need to set up?
Make sure that you have the Turbolinks js loaded in the page. If you are using webpacker and removed the default application js that used the asset pipeline you will probably need to use Turbolinks from npm, import it and then call Turbolinks.start() in your entry file.

react router server side rendering with rails

I am using React Js with rails 5.0
Important Gems are
gem 'rails', '~> 5.0.2'
gem 'react-rails'
gem 'react-router-rails'
gem 'slim-rails'
my layout and page template is in slim and I am using coffee everywhere.
I am facing lots of problem when I am using react router.
List of questions are:
I want to get a clean approach like angular where I can use module + controller + views in react. Can be it possible?
As now I am using react-router but the thing is that when it send request to the server so request comes to my action controller, action view and layout but does not load react components.
I am not able to use new packages like react-validation( https://www.npmjs.com/package/react-validation). How can I use react packages.
In react routing I want to send request on server and then it loads components which is exist on that action view.
Suggest me for the best approach of using react js + rails
Let's start with the basics, and I apologize if it sounds too basic.
'React' can be viewed as the Facebook JavaScript libraries, the set of JavaScript libraries put out by a community of React users, or the base design philosophy of nested component rendering and tag based caching.
JavaScript is inherent to React libraries, but not to its philosophy.
React on Ruby can be viewed as copying the philosophy or of cross-compiling to or generating JavaScript, or possibly emulating JavaScript in Ruby.
React is inherently a 'View' component, with additional libraries use a component and JSX approach to other capabilities. React-router is such a library.
React is not Angular. Angular is more of an MVC framework.
You probably want to go down these paths:
* Acquire the ability to code in JavaScript. Running on the browser implies code in JavaScript.
* Use Rails only as a server side REST or GraphQL endpoint. Alternately, use Rails to emit JavaScript and then use as REST or GraphQL endpoint.
* Non JavaScript code will not be able to use the latest JavaScript libraries.
It's good to think of the possibilities of what can be done, and this question suggests you are exploring.

What is turbolinks in rails 5.0?

I see in my application.js file //= require turbolinks. I was wondering what turbolinks does in rails 5.0 because it is somehow getting in the way of my bootstrap buttons. Can someone please explain what turbolinks is and how i can fix my bootstrap problem?
Turbolinks is a gem that speeds up your app and makes it behave like a SPA (Single Page App), it does this by loading only the content between your body tags (using javascript) basically by making and AJAX request to the server, waiting the answer, deleting the old content and replacing it with the new content, handling the URL and browsing history.
For more info check https://github.com/turbolinks/turbolinks
Simple Explanation By Analagy:
Imagine you have a yellow page directory (a physical book directory). Every now and then, one or two phone numbers require updating. Rather than simply ordering an entirely new directory, you simply edit, within the directory itself, the phone numbers that need to be edited.
It's a LOT faster, and less expensive.
How do you know what numbers need to be edited? Well you'd make a phone call (AJAX request) and the yellow pages people will simply tell you that what certain few numbers need changing.
In other words, only the parts of the page which need changing will be changed with turbolinks. The problem with turbolinks is that it might not always be compatible with other javascript libraries out there.

Rails needs page refresh to render correctly bootstrap markdown

I am developing an app using Ruby on Rails. In a specific view I have a textarea that uses Bootstrap Markdown.
The problem is that each time I visit that view, the textarea is rendered completely plain, without the Markdown functionality. Hitting F5 (refresh) renders the form correctly.
I tried to clear my browsers cache etc, but no luck. I always have to hit refresh to see the page correctly.
What may cause that?
Edit:
I am using this Markdown Plugin
I have also included the js files as stated in this question.
The turbolinks gem has been known to interfere with other javascript files and it's recommended that you remove it completely unless you really need it.
As Mohammad AbuShady said in his comment, you'll need to edit the part of the javascript files for your markdown that tells the page to start rendering. In your case this involves adding
$("#some-textarea").markdown({autofocus:false,savable:false})
inside page:load on the relevant pages.
In case you need turbolinks still, I found this very helpful: JQuery gets loaded only on page refresh in Rails 4 application
I had the same issue and adding jquery-turbolinks gem allowed the bootstrap-markdown editor to load perfectly for me.

Can't get pjax to work on Rails

I'm trying to get pjax to work on a Rails app but none of the links are being annotated with pjax. I think pjax isn't really being loaded. I'm using pjax_rails and am basically following the railscast instructions but using //= require jquery.pjax instead of just pjax. I'm also using it with bootstrap which may cause an issue but I'm not sure. My other thought is that is that the pjax javascript isn't being loaded and I need to run something like $('a').pjax('[data-pjax-container]')
To be clear the main problem is that pjax isn't being loaded client side and thus when I make requests the X-PJAX header is not being set.
Finally got it working. First problem was that the unbeknownst to me the assests pipeline was turned off so the pjax javascript file wasn't being included. Instead I went with the pjax rack gem and dumped it into the public directory. Then I created a new javascript file with $('a').pjax('[data-pjax-container]') and it works! Although I'm not sure why I need to manually call that javascript when all the documentation seems to point to the fact that it should be already there.

Resources