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