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.
Related
I'm using .NET MVC for all my serverside logic and serving out initial pages, but my application is very heavy on the client-side so I have adopted Backbone.JS which is proving to be very useful.
I'm unsure how to architect my system to incorporate both technologies though. The way I see it I have two options
Scrap the 'V' from MVC on the server-side, return JSON Data to the
client on pageload and use backbone clientside templates to build up
the GUI from the base JSON/Backbone Models.
Return the initial pages from the server fully rendered in .NET MVC.
Also return the data that was used to render them and call the
collection.reset({silent: true}) method to link up the
returned data to the view. Am I right in thinking that this will
allow me to subsequently make changes to using the add/remove/change
handlers on the views?
1 Troubles me as I'm afraid of letting go of any part of server-side MVC, its where my core skill lies.
2 Troubles me as I'm concerned I might be introducing risk and work by having two different rendering methods on client server.
Whats the correct way to combine Server-side MVC with backbone.js 1 or 2 or some other way?
You are not really scrapping the V, you're just changing it's representation from HTML to JSON. You are troubled because you feel more comfortable with the server side stuff, and that's not really a valid concern... you'll get done what needs to be done, and learn/create the Javascript patterns as you go.
This is one way to do it, and it really helps if you need a javascript disabled fallback or you're bound by accessibility guidelines. The part you're missing is that you will have to re-render the page once it's loaded to attach your models up to the DOM elements. Alternatively you could use a tool that handles this mapping for you, but that's added complexity you'll have to weigh out yourself.
In the Careers usage of backbone, we are not bound to support javascript-less scenarios, and we so we just load the templates + js on the initial load, then let the router take over and use something more like your first idea. Since it sounds like you're just getting started, the biggest thing that helped us really get moving was realizing that it's way easier to make changes to your model and then let your views subscribe to model change events (instead of the other way around).
I don't know what the Accepted Way is, but I've found it problematic to combine V from the server side and then weaving Backbone (etc) in. In very controlled situations it can work out, but if your app is going to be extremely heavy on the client side, my suggestion would be to forget about rendering on the server side and just return JSON and let Backbone handle the rendering of your content through some sort of templating (Mustache, etc).
Yes, you have full control over the Backbone events, so you will have a handle on them to do what you wish.
I hear you about giving up part of your skill set on the server side. I was the same way but if this is what your project calls for, I think you'll find it easier to let the server side rendering go for this.
Good luck!
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 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.
I am sorry for possible misleading about the title, but I have no idea for a proper title.
Feel free to edit.
Anyway, I am using ASP.NET Web Forms, and maybe this isn't how web forms is intended to be used, but I like to construct and populate HTML elements manually. It gives me more control.
I don't use DataBinding and that kind of stuff. I use SqlConnection, SqlCommand and SqlDataReader, set SQL string etc. and read the data from the DataReader.
Old school if you like. :)
I do create WebControls so that I don't have to copy-paste every time I need some control, but mostly, I need WebControls to render as HTML so I can append that HTML into some other function that renders the final output with the control inside.
I know I can render a control with control.RenderControl(writer), but this can only be done in (pre)Render or RenderContents overrides.
For example.
I have a dal.cs file where is stored all static functions and voids that communicate with the database.
Functions mostly return string so that it can be appended into some other function to render the final result.
The reason I am doing like this is that I want to separate the coding from the HTML as much as I can so that I don't do <% while (dataReader.Read()) %> in HTML and display the data. I moved this into a CodeBehind.
I also use this functions to render in the HttpHandler for AJAX response.
That works perfectly, but when I want to add a control (ASP.NET Server control (.cs extension, not .ascx)) I don't know how to do that, so I see my self writing the same control as function that returns string or another function inside that control that returns string and replaces a job that would RenderContents do, so that I can call that function when I need control to be appended into a another string.
I know this may not be a very good practice.
As I see all the tutorials/videos about the ASP.NET MVC, I think it suite my needs as with the MVC you have to construct everything (or most of it) by your self, which I am already doing right now with web forms.
After this long intro, I want to ask how can I build my controls so I can use them as I mentioned (return string) or I have to forget about server controls and build the controls as functions and used them that way?
Is that even possible with ASP.NET Server Controls (.cs extension) or am I right when I said that I am not using it right.
To be clear, I am talking about how to properly use a web forms, but to avoid data binders because I want to construct everything by my self (render HTML in Code Behind).
Someone might think that I am appending strings like "some " + "string", which I am not. I am using StringBuilder for that so there's no slowness.
Every opinion is welcome.
You need to stop thinking in terms of "controls" and webforms. MVC is a completely different way of constructing applications.
I also hate the automatic renderers in WebForms, they produce horrible html that never makes any sense. However, you dont want to be writing your html in your codebehind and passing it around as strings, thats just nasty. Your presentation code is mixed in with your logic, AND youre writing HTML in c# strings!!!
So, MVC... Instead of "widgets" that do interacty things with codebehinds and postbacks, yours view ONLY display data and contain forms to allow you to post to the controllers.
Because of this, you can strongly type your views to a Type, and then access the data you pass to it from a controller via the Model property. The equivalent to UserControls are Partial Views (ViewUserControl) which can be used to modularise your rendering code for types. For example, you might make an Address partial to which you pass your Person's Address property every time you need it rendered. This way you aren't repeating html all over the place.
P.S. A single file for all your DAL?
I hope I never ever have to work on an app you wrote in this manner. If your application is string-heavy then something is wrong.
Agree with #sliderhouserules, the way you are using MVC framework is awful. You must forgot all your "old school" techniques.
You should never use SqlCommands, SqlReaders, etc. in the code of the pages. You should pass to the view only a model (e.g. View(bar)) and it will be better if you avoid usage of
ViewData["some magic string"] = bar
Every time when you will use "old school" technique 2 mans and 2 cats will be killed :).
Also it's better to use some ORM (Object-Relational Mapper) like Linq2sql, NHibernate, SubSonic, etc.
If you need in samples of good application design please look at SharpArchitecture. It has a very good architecture and implementation and may help a lot. It has one sample (with Northwind db) and one more sample will be added soon.
Also look at CodeCampServer. It has very good architecture too.
It's better to look at the code of these projects instead of looking videos because existing videos can't demonstrate good sample of architecture, just a simple usage of functionality.
About server controls, you may use them if they can be used without 'runat="server"', like PlaceHolder. And you may create them too, but you shouldn't load any data in them directly. If you don't want to copy-paste html you should review your code and you should refactor it. Every duplicated code should be moved to MasterPages of UserControls (ascx ones).
And once more, please spend some time to look at these samples. You'll save your nerves and time in the future when you'll need to update the app or fix something. At the first look they can be hard to understand but this is only at the first look.
Hope this helps.
#lopkiju, I think that the MVC pattern would serve you much better than your current WebForms solution if you want that much control over the output HTML.
You can use Web Forms this way as you already do, but it is not designed to be used this way, so it will be a pain.
More detail
In my opinion, read some articles about the Separation of Concerns (also known as SoC) principle. If you apply it correctly, it can save you many-many headaches when you'll debug your app, and also for those people who you work with (eg. those who may have to read or modify your source code).
My other tip for you is this:
You are right that you shouldn't do things like <% while (dataReader.Read()) %> in your View code. But perhaps there are better ways to make it more elegant than your current way.
I think you should consider using some sort of ORM for these purposes. (LINQ to SQL, or even NHibernate.) If you get it, it will be much simpler. So much that you may not want to use DataReaders directly again. :-)
What I recommend for you
Simply, read the NerdDinner tutorial, and build the samle app by yourself step-by-step.
After that, try to build a similar app that serves a different purpose by yourself while applying the same rules and design that you applied to the tutorial.
I'm pretty sure you have the expertise to do it, and after actually doing something with it, you can pretty much get the feel of it.
The tutorial also explains and includes the principles I mentioned above, which will be very much use to you.
If you want the ASP.NET MVC path, you can set up controls as ASCX and they will simply be tags filled by the controller. It may not be old school enough for you, however.
You can create your full UI in code behind, if you so desire. This can include creating the HTML in routines.
But, I would recommend, if you are sticking with ASP.NET, reconsidering the bind model over the DataReader.Read() and output + loop. It is not only old style, it is highly inefficient and hard to maintain.
ASP.NET MVC does create a much looser ASPX, as it is just a view. And there is a much greater separation of code and UI. But it will not fit with the old school model either.
Have you considered using micro-templates? Dave Ward has a good example of of a client side data repeater that is uses micro-templates for layout after making a call to a page method. This sounds like this is more in the spirit of what you are trying to accomplish and can still be integrated nicely with WebForms.
The side effect will be that you will not rely on passing around HTML and can isolate your presentation from your logic.
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.