My primary day job is making HTML applications. With that I mean internally used CRUD-type applications with lots of editable gridviews, textboxes, dropdowns, etc. We're currently using ASP.NET webforms, which do get the job done, but the performance is mostly dismal, and quite often you have to jump through hoops to get what you need. Hoops which are hung from the ceiling and set aflame.
So I'm wondering if it perhaps would be a good idea to move all UI to the JavaScript side. Develop a strong set of reusable controls which are tailored specifically to our needs, and only exchange data with the server. Yes, I like the "control" (aka "widget") paradigm, its quite well suited to such applications. So on the server side we would still have a basic layout simliar to our current ASPX markup, but that then would get sent to the client only once, and the Javascript part would take care of all the subsequent UI updates.
The problem is I've never done this before, and I've never seen anyone doing this either, so I don't know what the problems would be. In particular, I'm worried about:
- Performance still. Benchmarking shows that currently the main delay is on the client side, when the browser tries to re-render most of the page after an AJAX update. ASP.NET webforms generated markup gives a new meaning to the word "web", and the rich Devexpress controls add their own layer of Javascript complexity on top of that. But would it be faster to recalculate all the necessary changes on Javascript side and then update only what needs to be updated? Note that I'm talking about forms that have several editable gridviews, lots of textboxes, many dropdowns each with half-a-zillion filterable items in them, etc.
- Ease of development. There would be a lot more Javascript now, and it would probably mix with the HTML markup of the page. That or some kind of new view engine would have to be produced. Intellisense for Javascript is also a lot worse than for C# code, and due to the dynamic nature of Javascript it can't be expected to get a lot better. Coding practices can improve it a bit, but not by much. Also, most of our developers are primarily C# developers so there will be some learning curve and initial mistakes.
- Security. A lot of security checks will have to be done twice (server-side and UI-side), and the data-processing server side will have to include a lot more of them. Currently, if you set a textbox to be read-only on server side, you can depend on its value not changing through the client roundtrip. The framework already has enough code to ensure that (through viewstate encryption). With the data-only approach, it gets harder, because you have to manually check everything. On the other hand, maybe security holes will be easier to spot, because you will have only data to worry about.
All in all, will this solve our problems, or make them worse? Has anyone ever attempted this, and what were the results? Are there any frameworks out there that help in this sort of endeavor (jQuery and moral equivalents aside)?
Best Answer
Linkedin do this for their mobile site (see http://engineering.linkedin.com/nodejs/blazing-fast-nodejs-10-performance-tips-linkedin-mobile part 4), and it's apparently been very beneficial for them from a performance standpoint.
However, I'd suggest you avoid doing the same, for various reasons.
The first is maintainability: C#/ASP.net is, due to it being a server-side framework, client-independent, whereas Javascript is not (even with a framework like jQuery you're not going to get 100% cross-browser compatibility, not future-proofing). I'd say it's also easier to verify the functionality of a statically-typed application than an dynamic one, which is something you absolutely must consider if you're building large-scale sites.
The second is that you're going to find it difficult to find other people who are capable (and willing) to build a pure-javascript application of the kind of complexity needed to run your entire website (compared to the relative ease of finding .NET programmers). This might not be a concern of yours directly, but it certainly is something to think about from a long-term perspective.
The third issue is client-compatibility; if you're building public-facing websites then remember that a reasonable portion of the net still does not have JS enabled (for various reasons), so you'll need to be absolutely sure that you're not going to exclude a large portion of your userbase by switching to a JS-driven website.
As for your bulleted concerns:
I wouldn't worry too much about the security aspect, there's no reason why you could not mix paradigms and do some server-side processing when you require security (you're going o have some view-rendering code in there somewhere that returns HTML, there's no reason you can't have this just fire off an AJAX call instead, when required).
Ease of development isn't really a concern too, in my opinion, there are very good tools available for JS development, don't just box yourself into VisualStudio because you're used to it! (try JetBrains WebStorm, for example).
Performance of JS view engines is absolutely fine in most cases (again, in my experience), I use them heavily on a day-to-day basis. What I would suggest is avoiding the more heavyweight frameworks like knockout.js etc., and head instead for something like Jon Resig's micro template engine. This way you can plug in the supporting code in ways you're confident are fast and reliable.
What I'd do, if I were you, is really examine the reasons behind this switch; It could well be that you're just not leveraging .NET effectively and need to up your game, WebForms isn't a particularly slow framework out-of-the-box, so perhaps some of the 3rd-party libraries you're using are slowing down your rendering.
Try doing a performance profile of the application using a load test and profiling tool, and see where your bottlenecks are before you sink a large amount of time and effort into a more radical solution, you'll probably be surprised at what you find as the culprit for your slowness!