How to structure a modern web application

Question

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!)

Answer 1

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.

Answer 2

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.