How to deal with js templates duplication of server code? - javascript

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.

Related

Is there any viewengine exists for PHP so my asp.net mvc site has PHP as language for my VIEWS?

Now I'm working with asp.net mvc, it's good framework. But, in future, I want to work with php or ruby to develop views for my asp.net MVC site.
I am not sure what this concept is called but I know something exists.
I think, I must generate pages with clear html, javascript and use json for transfer data. What patterns I can use and how implement navigation?
Any other thing exists to do this?
Well in case if you wish to create your VIEWS for asp.net MVC site using PHP code you can opt for PHP View Engine.
It allows you to write ASP.NET MVC views in the PHP language.
http://phpviewengine.codeplex.com/ is link you can follow.
This way all your ASP.NET code for Controller And Model will be intact and you can create your views in PHP.
I hope this is what you would be looking for.
Another view engine for php is sharpy I hope this also could be one for you. On top of that I am not sure anything is there for ruby.
I want maximum unbounded from C# for quick implement on server-side
php or ruby.
Based on this comment, your only option to have server-side code return data in a standard format (like JSON) and rely heavily on client side templating to turn data into HTML.
LinkedIn had a similar problem. They had three different server side technologies and had a hard time re-using components. There is a good write-up about their experience here and a pretty through comparison of different templating technologies here.
Consider using Mustache (http://mustache.github.com/) as your view engine. It will allow both PHP, .NET and JS to consume the views and render with server-generated content. Nustache has a library for ASP.NET MVC as well to make the transition easy.

Alternatives to RJS for Rails

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.

java script website best practice

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.

Does this exist: HTML Template Renderer Written in JavaScript?

What of instead of the standard Django template rendering model which is server side, there were a library that allowed something that looked like a Django template to be rendered with JavaScript in the client's browser? The variables could be filled in by getting a JSON blob from the server and rendering the template would be done entirely on the client side.
Does a library like this already exist?
As I understand it, GWT sort of does this, but behind the scenes and with a ton of programmer overhead.
I think you may be thinking of the recently announced jQuery template plugins. There are of course other solutions out there, this has gotten the most press lately, with a similar syntax to what you describe.
Google Closure has a template library, there is TrimPath, and there is a long list of answers over here.
you probably think of mustache, but you can also check pure templates

best practice for dealing with common "structural" elements of pages?

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.

Categories