Templating language for both Ruby and client-side JS - ruby-on-rails

Is there a templating language that has both server-side ruby (pref. rails) and JS renderer?
Here is why this would be useful: Consider you want to display a big list of songs. You render the first 50 and a "show more" button.
"Show more" would link to the next 50 songs or would load those with AJAX if JavaScript is enabled.
The simple solution is to return a rendered piece of HTML from the server, but consider how nice would it be songs were returned as JSON and then were rendered using the same template on the client side.

Mustache.
It is Ruby based but there are several different implementations, including JS.

hamlc supports both sides...
slim has a client side version too it is called skim.

Node.js offers the appeal of using javascript on both the server and client side. If you are looking for something more ruby-on-rails like, then check out express.js which is a web-framework built on Node.js. Both of these are server-side frameworks but they offer libraries which can be used on the client side.
Something to keep in mind is that if you are rendering views from JSON data on the client side then you will need to have the client load the javascript libraries to perform these operations and then render the views - which may be a costlier operation. That said, if your view is simple enough, you can always write a simple javascript function of your own to render your JSON data rather than relying on an entirely new framework and view renderer.

Related

Rails Render Partial with information vs Javascript and JSON information

Should I render a Partial with the information of the current data I have, or send a JSON and let javascript create the elements, with the information found in the JSON?
What's safer and more efficient?
This is really a matter of personal preference. There's no simple single answer as to whether you should use a javascript framework (or even roll your own) on the front end, or to use various rails templates to send the data.
I think if you're buiding the entire front end in a javascript framework then stay consistent with that. If you're building most of the site with erb or haml templates then stick with that. I'd avoid mixing the two too much, personally.

Can JQuery do all this functionality?

As I am newbie to JQuery. I have certain questions in mind regarding JQuery.
Can I make complete website with Jquery?
Means in ASP.Net website we use Server Controls to design page, Can we make all this functionality on .ASPX page using JQuery?
If yes, then how to handle server side events?
For designing .ASPX pages, what we prefer to use? JQuery standard controls or Plugin?
No. JQuery is not a server-side framework. It's a client side DOM Manipulation domain specific language and API that enables client-side code to work cross-browser, and includes a variety of utility and helper functions for AJAX, deferred callback resolution, and generic functional programming.
In short, it is not meant to replace your server-side code.
The jQuery framework is only a javascript library which means it can only handle events or actions on the client-side. It doesn't matter what backend you are using for your website (PHP, ASP.Net, Python), javascript only works once the page has been rendered and sent to the browser. Try reading up on the docs for jQuery here: http://docs.jquery.com/
If you have any questions specifically about jQuery programming, we would be more than happy to answer them.

Pros and Cons of Isotope templates (Rails)

Isotope lets you write templates in javascript. These templates can then be rendered by either the client (using plain-old javascript) or on the server (using Johnson).
The benefit is DRYer code. When updating the DOM on an ajax or web socket update, you can don't have to write a new partial...just point it to the one you already wrote.
Has anyone used this?
Interesting, I would have to try it, however , and I know not a lot of people do it, but I actually use HAML to template .js files. Although there is still that problem the author mentions , of each request being templated on the server and sending back html, unless you are sending loads of kb, or you have really, really high load site I don't think it's such a big deal.
Also ideally you shouldn't be even sending html data back and force, just JSON objects, which are rendered on the page by your ajax request. The only legitimate use I can see for this is if you have heavily ajax website, such as where you load a page once, and the you just keeping doing ajax requests for all interaction and javascript to manipulate view.
So it would help if you would clarify the final goal. Is this for some internal app where you control user environment ( you know for sure which browsers they will use, and that they will have fast enough computers to manipulate all this javascript?) Or is it going to be an app targeted towards 3rd world, where people don't have yet resources available to use all that fancy javascript.
All that said, it's an interesting concept, and I will try it our myself, to see how well it works.
This uses Johnson, which last I checked did not work on Ruby 1.9. So that might hint at some of the immaturity of this particular solution. Eventually the community will come up with something that works really well.
One approach I have used is to make 2 completely separate templates, but try to make them as similar as possible so that it is easy to port changes from one to the other.
This seems like a bad idea. In an Ajax application, I believe that the server should be responsible for rendering all display text. This makes i18n easier, and concentrates everything in one place. The JavaScript should simply receive data from the server, with all display text already rendered, and put it in the appropriate DOM object.
In other words, I believe that in an Ajax application, the need for a JS template engine is itself a design smell.
The situation is different in exclusively client-side JS applications, of course.

Is it possible to integrate Vaadin with Rails??? If so, how?

As i see Vaadin is a Java based UI framework. But it has some really nice set of widgets and a very good layout engine. Is it possible to integrate Rails and Vaadin? JSON perhaps??
It sounds like that'd take a lot of work creating an interface between them which will likely only slow things down. By the time you had everything working the way you wanted you could've finished what you wanted in Rails or Vaadin separately.
If you did make an interface, JSON is the way to go. Lightweight and almost everything supports it with little overhead.
is there any alternative to javascript based frameworks?? other than the usual ones (jquery, prototype, sproutcore
Just pointing out, that all rich UI frameworks that run in the browser are JavaScript in the end (not including any plugins like Flash), even Vaadin, which is built on top of GWT on the client side.
I guess you'll have to consider integrating with the Rails backend either on the server side (e.g. with a Vaadin Java servlet) or on the client side with a custom data exchange over HTTP (using JSON) and using some client side framework like GWT, SproutCore, Cappuccino etc.

Create web application with ajax from the beginning or add ajax later?

I'm working on my first Ruby on Rails aplication and it's quite big (at least for me ;) - database has about 25 tables). I'm still learning Ruby and Rails and I never wrote anything in Javascript nor Ajax.
Should I add Ajax to my application from the beginning? Or maybe it will be better to add it latter?
Or in the other words: is it (relatively) easy to add ajax to existing web application?
Jeremy Keith has written a great article on this topic, which he refers to as Hijax
In short:
Plan for Ajax from the start.
Implement Ajax at the end.
Depends on how important Ajax is for the application. Since you are probably going to use Ajax for progressive usability enhancements only, I would say it is best to start with a traditional non-Ajax software, and add Ajax features only when you have the first features working. You can do this feature by feature, or write the whole software first, and then start ajaxing it.
Adding Ajax may be easier if you familiarize yourself with unobtrusive JavaScript techniques. Use jQuery instead of Prototype.js, or LowPro in addition to Prototype.js. For the latter, see e.g. Jarkko Laine's PDF book Unobtrusive Prototype.js.
If you are planning to do AJAX, I would do it from the beginning. It will help you structure your controller actions and views, especially with respect to generating some data in partial views, correctly from the very beginning. Knowing that some actions need to be able to render just parts of the page will change your design. This isn't to say that you can't go back and retrofit the design, but I think it's easier to get the design right if you design with this in mind up-front. You should also consider how to make it work without AJAX (or javascript at all), too so that your design is as fail-safe as possible. That doesn't mean that all functionality has to be available, but that important functionality works in the absence of javascript. For example, action links that use AJAX should have a default url that will invoke the correct action via a GET request if the javascript isn't enabled. Forms that post via AJAX should also work if posted normally. Dynamic behavior (like an image gallery) should have a usable, alternative view that works, etc.

Resources