Execute javascript template to produce HTML by ruby server? - javascript

I have JST template (tpl javascript to create HTML). It's normaly used by the client (in JS). But I want my sever ruby be abble to produce himself the views.
I don't want remake the JST template, converted to ruby because:
1) twice the same code in 2 languages => more maintain/debug
2) twice more work, for same result is waste my time
You will tell me: "just make a ruby template", but I don't want to. I want client auto-generate his HTML. But, for referencement, I need sometimes the ruby server rendering directly HTML and not just JSON, so my question is:
how can I execute JS template with ruby server? Others solutions?

There are multiple ways to tackle this problem:-
1)Use Node Server -Common JS Templates in client and server- HTML rendering as a service from JS template
In your server you can call node service with template name and parameters like to render datepicker you can call http:\localhost/datepicker/date/month/year, since your templates are in JS , Node server will also be able to render those.See dust.js ,it works almost on similar lines.
2)Just maintain 1 server side templates with variable name prefilled
Lets say you template is
<div>My name is ${name}</div>
With this template you can render on server side by providing correct name as "abc" or "def", etc.
When ever client needs template you can send the same template with name parameter as "$$name", and in client js you can replace $$name to the correct name.
Thus maintaining same template on server as well as client.
3)Use some solution similar to google closure
If you were asking the same thing in JSP this was straight forward solution, but you can look for similar thing in ruby world.

Related

Best way to use C#-Ressources (ResX Files) in Typescript?

our current project is in ASP.Net MVC with Razor.
We use ResX Files for a few thousend translations.
In C# and Asp.net Razor this is pretty easy with HTML:
<div>#Ressources.Local.Test</div>
Now when I wrote JavaScript I normaly did this within the cshtml files with razor like this:
<script>alert('#Ressources.Local.Test');</script>
Which works but seems a bit ugly...
A few weeks ago we starded with Typescript, and, of course excluding (nearly) all javascript code to ts-files.
The only solution we found here, to get the ressources from C# to Typescript is through a "hack":
We made a ressources.cshtml file in which we just include javascript variables:
var ressourceTest = "#Ressource.Local.Test";
We load this ressource.cshtml at first in our _layout.cshtml.
Additional, we have a self need a selfmade declarion for this variable to jump from javascript to typescript in our projectDeclarions.d.ts:
var ressourceTest:string;
And now we can use the ressource in our typescript file test.ts:
alert(ressourceTest);
As you can see it is a working "hack" or "workaround" but it seems to likly kill us for a few thousend ressources... It's handmade, the maintain duration and work is high...
Any better ideas?
I have seen a few good ideas around this.
You could supply an JSON endpoint in your MVC application to give you chunks of translations. You would decide how granular you want to make it, but you would essentially JSON serialize a translation, or set of translations and send it back. This would avoid stuffing a big view with hundreds of the things.
Another alternative is to place translations in the view to make them available, but contextually. So if you had a button that you are using to trigger some AJAX call to the server and you need to say "Update Worked" or "Update Failed" you could put the attributes inline...
<button ... data-msg-success="Saved OK" data-msg-failed="A problem occurred" />
And you could populate these attributes with your resources.

Call JavaScript function from Ruby on Rails model

I have built a Rails app that has an API that returns a JSON object. I want to allow users to write their own scripts and store them. These scripts will then be executed when the user makes an API call to the app and injected as part of the response.
An example would be when a user calls my API, their javascript would be called and whatever is returned from their script would be saved as a string and used by one of my models and used as part of the JSON object - not the full response.
I want to know how to call a javascript function from a rails model, save the output of the javascript as a string in Ruby, and then be able to process whatever is returned before making the API response.
The current answers seem to only be related to the controllers and rendering as JS, but I would like to execute the script from the model.
It should be something like:
string = execute_javascript("return 'hello world';")
This is more related to pure Ruby than Rails as I am just wanting to call it from a standard Ruby class and save the output as a string. I also need to consider the security implications of doing this, but first would like to know how to do it
The simplest solution to execute most common Javascript code is using ExecJS gem. If you are using the Rails standard gem bundle then ExecJS is already included with Rails Coffeescript. A short example:
require "execjs"
ExecJS.eval "'red yellow blue'.split(' ')"
# => ["red", "yellow", "blue"]
The above solution is only good if you are running a prototype. In production, you would want to somehow run the user code in sandbox and preferably on the whole different server. You would also need to ensure the code won't take 100% resource of your server while executing and screen the code to ensure it won't do anything malicious.
You can call javascript function in Helper class and then include that helper inside your model where you need it.

How to access freemarker objects in angular js or can i use angular instead of Freemarker

How can i access values in freemarker using angularjs.i have a map like this in freemarker which has bean .how can I use it in angular js?
Ex:<#list dataMap["TRIGGER-JOBS"]["RE3"]["statusKey"] as espBean>
How can I get values in this dataMap using angular js? or is there way I can use only angular js instead of freemarker.if so how? I am new to angular js guide me.
Thanks in Advance.
The key is to realize, where and when each code is executed - Freemarker on the server when the page is requested and rendered (i.e. before the response is send to the browser) and Javascript (i.e. Angular) in the browser, after the browser receives the already generated response.
So if you want to combine these two together, you have to use Freemarker to generate valid Angular (HTML + Angular markup) code, which then will be processed browser-side. I.e. browser (Angular) knows nothing about how the page has been generated, and has no access to Freemarker variables - unless you have parsed them into HTML/JS code delivered in the response.
As for is there way I can use only angular js instead of freemarker - yes, there is. But the exact way depends on what you want to achieve. Usually, even in a full single-page application, you need some way to load/persist the data you work with, i.e. some kind of server back-end. This is usually done using some kind of (REST) web-services, so you shouldn't need Freemarker for that, but you would need some server code.
If you are new to Angular and want to get started, I would suggest you use Angular Typescript. It's pretty simple to start up with. See the link
https://cli.angular.io/

How many ways are there to maintain handlebars template in client side

In my application we are templating handlebars from client side(we are not templating from server side).So till now we used maintaining all templated inside of the html file using script tag like in the following way.
<script id="selectdropdownTpl_mobile" type="text/x-handlebars-template">
<option value="{{optValue}}" label="{{name}}">{{name}}</option>
</script>
Whenever I want template, I am just compiling and appending compiled result to dom just like following way
var alertCompilation= Handlebars.compile(document.getElementById("selectdropdownTpl_mobile").innerHTML)
alertCompilation({"optValue":"test","name":"firstApp});
Working fine,but what we are thinking to separate all handlebar templates into another file.so it's easy to maintain html file.
Regarding this,I thinking to move all the templates into .js file inside of the file just creating global variable,it is object in the following way.
//fileName test.js
var templates={
"selectdropdownTpl_mobile":"template code"
}
whenever I want, I can access template code like in the following way.
var alertCompilation= Handlebars.compile(templates["selectdropdownTpl_mobile"]);
alertCompilation({"optValue":"test","name":"firstApp});
This way also working fine,What I want to know is this good way or not.If it is not good way How shell do this.
I heard about .hbs file, basically it contains pre-compiler template.It's usefull If I template from server side but in my case templating happening in client side itself.
can anyone suggest me,which way is better.

Returning HTML to AJAX Rails calls

After reading David Heinemeier Hansson's blog post about server-generated javascript I decided to review the way I approach making AJAX calls in my Rails applications. What David suggests is to create a .js.erb template, which is just javascript embedded with ruby code generated on the server, and not to do any DOM manipulation in the client-side javascript.
Another approach is of course to simply do everything on the client-side, and (for example) return a JSON object representing the updated object from the server and use javascript to do all DOM manipulation.
I dislike the first approach for two reasons:
1) I use HAML and Coffeescript in my application, and feel that by using vanilla javascript and ERB would uncecessarily bloat my code-base with code of a different language (maybe it's possible to create .coffee.haml templates rather than js.erb, I don't know)
2) I really don't like the idea of 'littering' my view folder with what is essentially javascript files, with a little bit of ruby embedded.
The second approach, as David talks about in his blog post, relies very heavily on client-side javascript, which could lead to bloated client-side javascript code, and possibly the need for client-side templates, which in worst case scenarios could mean almost doubling the number of templates.
The approach I decided to go for (and want to ask whether or not is completely stupid way to go about this) is the following:
1) Set the remote: true flag to make links and forms utilize AJAX to post to the server.
2) In my controller, handle everything as html, and simply render without layout should the request be an AJAX request: render partial: '<partial-name>', layout: false if request.xhr?. This simply returns the HTML of the partial, with the ruby code evaluated.
3) In an asset javascript file (for instance <partial-name>.js.coffee) listen to ajax:success and append the HTML from the response.
I like this approach because (in my rather simple application) this allows me to keep all my code in HAML/Coffeescript, and avoids any javascript templates.
I realize this problem might take on a different character should the complexity of the application grow, but I still feel that it's a valid question: is this a bad way to go about implementing an AJAX-based architecture for a Rails application (and if so, why? i.e. is there a reason why returning HTML instead of JSON from an AJAX call is a bad idea?) or is this something I should continue to utilize?
Thank you :-)
Your approach seems to me quite accurate. However I would change 1 pt. Instead of using remote: true, I would use jQuery ajax call directly.
$(function(){
$('#some_link').click(function() {
$.ajax({
// some parameters here
})
.done(function(data){
$('div').html(data);
});
});
});
if you use remote: true it sends a js request instead of html request.
then when the controller method is executed, it looks for the js.erb or js.haml file which has the same name as the controller action that just finished executing.
in this file you can write 'js' code to perform any action that needs to be done after the controller action has completed executing like changing a partial or updating view, etc.
if you have a function in javascript asset file, you can call that function as well.

Categories

Resources