Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

Background

I recently developed, for two different projects, two web applications. The two followed quite different approaches. The first one was a classic inventory application (lists of stuff to view, select, edit.. very CRUD) and was developed with Razor and ASP.NET MVC: controller accepting requests, getting a model through a Repository, building different Viewmodels out of it for view and editing, pass the Viewmodel to the view engine and render of the page.

Very direct stuff (you can almost build such an application with wizards only using ASP.NET MVC), with very little Javascript "magic" (only the minimal offered out of the box by the MVC framework, mainly for validation).

The second one was quite different: this application is basically a bunch of screens (views) through which the user can navigate back and forth, which appearance change as users input data in different places - it is basically a hub in which the user views and reviews information linked to his account(s). I built this second application as a REST service (built with ServiceStack, and therefore following the design patterns it enforces - like Data Transfer Object) and a SPA application implemented using AngularJS. The angular application uses its (excellent) http service to get the JSON objects from the rest service, and then populate its (client side) Viewmodel (the scope). Very neat and clean; it is easy to navigate back and forth the various account information (which is visualized in many different ways: lists, graphs, ...)

It is maybe a little more difficult to code at times (authentication/authorization is a bit more difficult (you have to be careful to mimic control on client and server, for example).

Now, I am starting a third project. It is something in between: it is still a CRUD application, but it needs to be very responsive. For example, in a page, we have a complex information to enter (combo of form and list); in the list the user need to select a item from another list, but if the item is not there we want to open the "edit list items" view, let him/her insert the item, and go back to the original page... all without refresh/pushback/... You got the idea.

The question

Which is the best way to accomplish this, to develop a modern, quick, responsive web application? I have seen too many different approaches:

  • "control based" (jQuery) approach: build the page using your MVC framework (which will produce html, a table for example), use jQuery to "enrich" the html and make it ajax
  • "data based" (Angular): build the page as an html page with data bindings, a JS application, and structure the server side as a REST service, that the JS app uses to get/post data
  • the mix #1: part of the app is built using your MVC framework (which spits out html), part using a data-based framework (like angular). Angular scope/model is initialized using jQuery to extract the initial data out of the html DOM.
  • the mix #2: part of the app is built using your MVC framework (which spits out html), part using a data-based framework (like angular). In addition to html, the server writes a "script", which is JSON data, and embeds it into the page. Angular then uses it as its model to render the data visualization (client side)
  • the mix #3: same, but this time no embedded JSON: the server exposes a REST service that is used by Angular to retrieve the data it needs. It is essentially part generated on the server, part on the client through a secon call to get e JSON object
  • (more...?)

I personally find the mix #1 and #2 ugly, but I am too "new" to modern Javascript development to judge. Are they common? I see for example that one advantage of mix #1 is that you get the initial view immediately, you do not need to wait for JS to render it. And both mix #1 and #2 do only one call to the server.

So, which one is the best practice? Or which one(s) should I really avoid? I (personally) am more comfortable with a mix of server-side generated pages and client-side JS; making a SPA completely using services was not that easy, more than one time I wished to have something generated using server-side logic, but I may be doing it wrong (that is why I am asking!)

share|improve this question
    
Using jQuery to 'enrich' HTML does not separate concerns at all. Separation of concerns in GUI is huge. I've seen this approach turn out as a huge problem multiple times creating huge, hard to maintain sphaghetti code bases. jQuery is just a library that does easy DOM manipulation and an AJAX facade - that's all it should be used for. Angular is not the only choice for an MV* framework - however it is a fair one. It enforces separation of concerns. Mix #3 sounds like the de-facto standard approach for web apps. –  Benjamin Gruenbaum Aug 8 '13 at 8:26
1  
Also, consider reading stackoverflow.com/questions/14994391/… –  Benjamin Gruenbaum Aug 8 '13 at 8:31
    
Yes, I should made more clear that Angular is just used as an example of client-side MVVM/templating framework.. I have read that (excellent) Q&A when I built my Angular application, it was indeed a very good read! –  Lorenzo Dematté Aug 8 '13 at 8:34
    
In that case the answer is crystal clear. You should not even consider "control based", "the mix #1" and "the mix #2". "the mix #3" is the only one that makes any sense - it's how you'd structure an application in any other environment - be that Qt, WPF or pretty much anything. Server side HTML is useful when your data is loading from the server and in order to serve a quick response, after the initial phase a web app should behave like an application sould. MV* is a tried and tested approach for building GUI, not separating concerns can really hurt you. Still, test both and see for yourself. –  Benjamin Gruenbaum Aug 8 '13 at 8:39
1  
I saw WPF in your profile so I gave it as an example. If you like WPF you should check KnockoutJS. it has a similar notion of observables. It's a lot smaller than Angular (MVVM with just data binding) and assumes much much less about your code structure, it has a similar notion of reusable view components too. There is plenty of bad jQuery code in the world - no doubt about that, this is because jQuery is often the door to programming in general and in the web to many. We asked Resig about this in the JS room - I agree with his answer. –  Benjamin Gruenbaum Aug 8 '13 at 8:56
show 2 more comments

2 Answers

Your Question is going to return some very opinion based answers. So I am trying to answer as neutral as possible regarding which Framework or option to use.

I think every thing you pointed out is fairly modern as are all your listed technologies. jQuery and AngularJs aren't that old I guess.

Also I believe that you have already answered your own question. Let me explain my utterrance in detail :

Out of 3 mentioned practises you don't like 2, so only one mix really remains.

I personally find the mix #1 and #2 ugly

Why not just go with what you are comfortable with for now instead of relying on the opinion of other people. You seem to know what you are doing and have an open mind to new developments in your field so why worry about what other people think for now. Your question helped me discover something new. Thx for that. Hope that helped.

Originally a comment was just too long for it to be one.

share|improve this answer
    
I tried to write it in the most neutral way possible, not asking for frameworks (ASP.NET MVC, jQuery and Angular are the ones I am planning to use, but it may be Scala Play and Knockout...). Best practices are "opinions" after all, but... In areas in which I am more expert, I can immediately see an approach and tell "oh, you do not want to do that because is bad" where bad is supported by facts learned through experience. Here I am not that experienced so.. I ask the experts! I have gut feelings, but I need expert "confirmation" :) –  Lorenzo Dematté Aug 8 '13 at 8:14
    
By "confirmation" I do not intend "approval". I do not want to know what other think of my design, I would like to know if there are some fundamental design issues that I am not seeing. Hope it is more clear now.. :) –  Lorenzo Dematté Aug 8 '13 at 8:20
    
Okay, I edited that bit out was too much any how. too early here for answers. –  Ben McDougall Aug 8 '13 at 8:22
1  
No problem! Thank you for bringing up the issue and letting me clarify why I am asking, and what I am looking for –  Lorenzo Dematté Aug 8 '13 at 8:25
add comment

This is a question I thought about once, and since then I've had a chance to work on many, if not all, frameworks and combinations out there. Today, when I think again about how should I plan my next application, I can only think of one thing to keep in mind and that is to "keep the algorithm simple". No matter what you develop, and in whatever you code, you are, most basically, implementing some logic, some algorithm. And in my experience, application will have less bugs if your logic is very simple.

Now, in your context of web applications, understanding the nature of these kind of application, the features what you want to develop and time that you have in hand will help. So for web applications, the nature is that it has to be a client/server application. Most probably, it is storing data on server and being manipulated by a user on the other part of the world. That can be done using any framework on the server. It has to be quick and reliable at the same time. So you should add some javascript and ajax to make the commonly used functions more accessible. Then comes the question, what features do you need? Is there going to be a lot of user data, like emails/messages/user's list and so on, then you better create a web service that is used by a javascript application (angular?) to provide nice usability. Or is it just going to be a website with company data and a little bit of user data like order history in which case, server should handle most of the logic and javascript should only provide minimal features like animation or ajax or ... (jquery?)

In the end, it's also important to keep in mind how much time you have got to invest in this application. For lesser time, you can use a content management system which will be quick to finish deploy, but for finer control on your application's features you can use a framework which will take longer time to develop and test.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.