I have heard that the idea in RJS of passing to the client js code instead of json or html disturbs many people and so they avoid RJS. Given that what exactly would be the idiomatic way to do ajax with jquery in the Rails framework with no RJS? Is there maybe a tutorial link someone could point me to?
There are two main ways to achieve AJAX via rails:
The first is using js.erb files, :remote => true option in links and forms and
respond_to do |format|
format.js
end
in the controller. There is a very good explanation of how to implement it here.
The other way is to write plain Javascript (you could certainly use the help of JQuery) to send AJAX requests to the server and handle them in the client side. With this approach the Javascript is written in seperate JS files in the assets folder of your app.
From my experience, for the long term it is better using the second way for three reasons:
It gives you a complete separation of client side and server side code. One programmer can deal solely with one aspect of the code and that's a big advantage.
It is a lot easier to test seperate JS files than js.erb files.
It makes it easier to reuse javascript code, and package it for minification and such when you go to production.
Related
I've noticed that I often duplicate razor code by making javascript templates for ajax loading. And then if I want to change serverside template I have to change js template too, what can I do to minimize such duplication? Thanks for answers, and forgive my english:)
One of the possible solutions is to use the same template engine on the server side and on the client side for the specific purpose of AJAX requests.
Mustache is a good choice - it's available both for .NET platform and for JavaScript.
I am building a website using the below stack. For this question, I think the software stack should not matter. I am more interested to know whether the way I am doing the project seems like a good idea or following the best practice.
- Twitter Bootstrap for the UI
- CherryPy
- jQuery
So the way I approached the project is like the below
- Use the Twitter Bootstrap to create the basic layout
- I have one js file and one css file for my project
- Based upon the requirement, let say for this button I need to do something like ajax call
- go to the js file and write like $("#id").click() and do the necessary stuff
- write the necessary action code in python
- Test
So basically, what I am doing, modifying the html file, adding the necessary code that I need in my single js file and do the python code. Seeing all this java script framework like backbone.js, require.js makes me feel that maybe I am not following the best way to do it.
In a sense, what I want to know is that assuming you have a website with few pages that does not have heavy user interaction how would you do it? Is there anything wrong the way I am approaching it? What would be best way to do it?
Thanks
Client side frameworks like Backbone, Angular, and Ember are built to help bring structure to heavy javascript applications. Don't get confused between a client side language like javascript (although now it can be used as a server side language to) and a server side language like C#, Python Php etc.
Most Single Page Applications consume a REST API. So all your functionality will be on the client side. Your server's primary responsibility is to push data to your client so the user can interact with it. Think of your client (written in js) and server(written in python) as two completely separate entities/apps.
If your application is not javascript heavy, I would not go with a Single Page Application and use your current listed tech stack. I would always recommend keeping your javascript structured, but you dont need a framework for this. Just follow one of the js patterns you feel most comfortable which can be listed here.
We currently have a tool on our website that is created by JavaScript. The JavaScript is generated by Ruby via .js.erb and .html.erb files. The problem is that it's proprietary code and we'd like to at least be able to move it to a separate file so it's not directly viewable when using "View Source" and maybe include it in our bundles like a regular .js file.
Is there some way to intercept the rendering and redirect it elsewhere or something?
The closest I've come was this - Rails Javascript compression/minification on respond_to javascript response?
We did have it working server-side but it was too slow for our clients.
We're using Rails 3.0
Try Javascript Obfuscation . Check this question on Stackoverflow for various ways to Obfuscate Javascript .
How can I obfuscate (protect) JavaScript?
You can try YUI Compressor, Google Closure Compiler or UglifyJS .
The best way to prevent source code from being copied is to have most of the proprietary work done on the server side .
So we didn't find any way to fully hide the Javascript. What we did end up doing was juggling a rather unfortunate number of variables and method stubs created via ruby and passed to more static javscript located in a separate file which gets minified. Not the most elegant of solutions but if you can follow the stub trail then I applaud you.
I'm a little confused as to why this isn't a more commonly addressed problem but here goes.
I have my Rails app which generates my views normally.
I have some dynamic content on the interface.
I want to make an AJAX call, return JSON, and populate the dynamic portions of the application. I would use a JS templating library to do this.
I DON'T want to make an AJAX call, have Rails process the view and send all the HTML back. I want the response to be JSON so cut down on processing and wire time.
The problem is that the HTML I'm generating dynamically is the same HTML I'm generating statically on page load by Rails (think AJAX pagination). The HTML is naturally in my ERB files. But when I generate more content (say, page 2), I obviously can't access the ERB files and need to duplicate the HTML in a JavaScript template file.
Is there a solution out there which allows me to share my views between Rails and JS? (I understand it's a little awkward to try to mix ERB with JS rendering...loops, conditionals, etc)
Do people usually settle for rendering HTML and sending it over the wire? Or, do they awkwardly execute JavaScript upon page load to render using JS templates?
I ran into the same problem in the past. I was able to solve it with Mustache: http://mustache.github.com/ At the time there was no easy way to setup mustache with rails so I had to code something together. It looks like now there is a lib for it here: https://github.com/goodmike/mustache_rails3
Update:
Looks like there is a nice gem now to accomplish it called stache: https://github.com/agoragames/stache
Very basic question: I am coding a web app that has a handful of pages. These pages have the usual shared elements: eg, the site's header/masthead and a side-bar are present on all pages. The HTML is static (not dynamically generated, its "ajaxy-ness" is done client-side).
What is the best way of importing/"including" those common elements into my pages? The solution I am using is to have the HTML files contain empty place-holders
<div id="header"></div>
<div id="leftSideBar"></div>
(...)
and then do in jquery's $(document).ready():
$.get("header.html", function(html) { $("#header").html(html); });
// ....
Is this the best way to do this? I'm new to web development. : )
I guess I could also dig up a "macro-like" code-generation tool that I would run on the HTML files to replace, eg, "#header" with the contents of header.html. That way loading a page would require a single request for a single HTML file, which sounds better.
What is the smart way to achieve this? I am sure this problem has been solved a thousand times.
EDIT: The server-side is coded in Python+cherrypy. (I am assuming it is reasonable to try to keep away from dynamically generating HTML when doing "web 2.0-ish" web apps. Please correct me if I am wrong. As I said, I am very new to this environment.)
Thank you for your insights,
lara
If you want to include files, please consider using some backend language such as PHP or ASP. Javascript is not really meant to do this even if this would work.
<?php include 'other_file.php'; ?>
Using javascript to do this will lead, I think, to a poor SEO and the loading of the page might look weird for the end user. If you really don't want to use a backend language, some IDE have a way to handle templates, you could look into that.
Concerning frameworks, most of them have a way to handle templates. ASP.NET has the master page system, Ruby on Rails has layouts.
Here's an example using Rails :
<html>
...
<div id="content"> <%= yield %> </div>
...
</html>
Here all the content of a subpage will go into the "yield". Here's a link to learn more about that.
Some frameworks can handle multiple place holders.
To some extent, it depends on what you're using on the server side to render the pages. If your using server side scripts to generate the page you should be able to use a web framework (eg. Django or RubyOnRails) or even just a basic templating engine such as Genshi. Basic include functionality may even be built into the language you're using (ie. PHP)
If it's just static HTML you may want to look into setting up some form of server side includes such as Apache SSI or NGINX SSI. You'll need to pick the one that works with whichever server you're using, and you'll need enough access to install and configure the plugin or module.
Alternatively, you might want to look at using a script to generate your pages (edit, generate and deploy). A simple approach using cat / sed / awk / make (additional useful reference - Sed & Awk) may be all you need, or you might want to use a templating engine and a language such as Python or Perl.
I'd have the includes handled server-side, and this will mean fewer requests from the client, and may also have other benefits (easier to debug js, etc).
Having the server process includes really isn't going to put a major strain on it.