JavaScript vs JSP – Client-side Rendering vs JSP for Spring MVC Front End Development

angularjsjavascriptjspspring

Firstly, a note on the app I'm about to discuss: It's quite large, on the order of magnitude of a service app like Airbnb — i.e., it's not just a static web page, it is a full web application. It's in the early stages of development.

Here's the question:

I'm about to begin a rigorous dive into front-end dev and want to make sure I'm setting myself down the right track. The back-end is built with Spring MVC design, and the limited front-end work I've done so far uses Twitter Bootstrap in JSP's and some simple JavaScript. I haven't had any issues per se with that stack, but I have the following concerns:

Ease and/or Standardization of Development

The JSTL syntax required to make highly-interactive pages via JSP's is getting awfully unwieldy. I'm worried that, when we expand our project and bring on more engineers, there will be a steep-ish initial learning curve, followed by a persistent slow-down in the dev process due to verbosity of JSTL.

Using JSP's also seems like a less contemporary approach to front-end dev, in light of how many JS frameworks are popular. I'm imagining it'd be tougher to field a team of front-end or full-stack engineers if we build with JSP's.

Should I not worry so much about these issues? Are there pros of server-side rendering with JSP's that outweigh dev concerns? Can you offer a sense of how wide-spread familiarity with JSP dev is?

Performance

Server-side rendering has been great for my testing, so far — but what happens when our app is a massive, historic, global success and downright phenomenon? Will the server get bogged down with all the rendering, if done in JSP's? Or are traffic concerns better addressed by load-balancing requests to the server and leaving the server-side rendering in place?

Maintenance Costs for Server-Side Rendering from a Cloud-hosted Server

Along the lines of the performance concerns above, if the app gets a lot of traffic and is rendering views server-side, won't our bandwidth usage go way up? We'll be deploying on AWS, which is semi-unfamiliar territory for me, but I'm presuming we'll pay according to how much bandwidth we consume. Pushing view rendering duties onto client browsers seems like a cost-effective strategy for a cloud-hosted app such as ours. Am I mistaken in that thinking?

Cross Browser Compatibility

Our app will be marketed to clients who are unfamiliar with technology. I think it's reasonable to assume that such clients will be disproportionately likely to have out-of-date browsers. Old browsers may have compatibility issues with JavaScript rendering — and ever worse issues with the most modern JS frameworks.

Are there enough compatibility solutions in modern JS frameworks to resolve this concern? Or is server-side rendering the best-bet, in light of the likelihood of running on outdated browsers?


After doing some research on these issues, I've got four strategies in mind, for going forward:

  1. Avoid client-side rendering. Learn to love the JSTL chunkiness, stay with all JSP's.

  2. Mark up all static HTML elements in the JSP's, then populate dynamically generated values/properties/elements according to user interaction (lots of JS, AJAX).

  3. Make a minimal HTML markup in the JSP's, then populate everything in the view with appends to the DOM when the page loads.

  4. Completely migrate away from JSP's, use something like AngularJs.

Basically, all options represent varying degrees of moving away from server-side rendering and towards client-side rendering. Which of these sounds like the best course of action? Is there an option I've overlooked?

It's still early enough in the front-end dev process to integrate completely novel techs, and I'm new enough to web dev that any of the strategies will involve considerable self-teaching, so nothing should be considered off the table. I'm leaning towards solution strategy #2, so far, as this model would be the least drastic change from the current approach. But, in the interest of building in a way that'll make future builds easier, and be the most accessible for collaboration, #4 is also looking good.

Best Answer

The JSTL syntax required to make highly-interactive pages via JSP's is getting awfully unwieldy. I'm worried that, when we expand our project and bring on more engineers, there will be a steep-ish initial learning curve, followed by a persistent slow-down in the dev process due to verbosity of JSTL.

That is a legitimate concern.

Using JSP's also seems like a less contemporary approach to front-end dev, in light of how many JS frameworks are popular. I'm imagining it'd be tougher to field a team of front-end or full-stack engineers if we build with JSP's.

If you choose technologies that are suitable for your particular task in areas like ease of use, maintainability, sensible management of complexity, flexibility, and appropriateness for your application's specific functional and non-functional requirements, you will find people who know how to develop and maintain software using them.

Server-side rendering has been great for my testing, so far -- but what happens when our app is a massive, historic, global success and downright phenomenon?

If, and when, that happens, it will be a good problem, because then you'll have the money to fix it. Every large company has had to do this; they built their product on a platform that got them to market quickly, and re-built it (in some cases, from the ground-up) when the number of users became enormous.

That said, I think you can make some sensible choices early on. Unless your system requirements demand large, overblown architectures (they don't), avoiding them and choosing more nimble and flexible technologies will generally give you better overall performance and better adaptability.

Pushing view rendering duties onto client browsers seems like a cost-effective strategy for a cloud-hosted app such as ours. Am I mistaken in that thinking?

No. However, have a look at this Basecamp article.

Our app will be marketed to clients who are unfamiliar with technology. I think it's reasonable to assume that such clients will be disproportionately likely to have out-of-date browsers. Old browsers may have compatibility issues with JavaScript rendering -- and ever worse issues with the most modern JS frameworks.

There's just no excuse for this anymore. If your clients want to use computers in the 21st century, they need a modern browser, and it's easier than it's ever been to get one and allow it to maintain and update itself automatically and indefinitely.

After doing some research on these issues, I've got four strategies in mind...

The way of the future is so-called microservices and client-side UI such as Angular. And no, I don't think this just a fad. Users demand high interactivity with their software applications, and this arrangement can give it to them. Your back-end JSON web services can be built with anything you like; Node.JS, ASP.NET Web API, whatever. Maintaining this sort of modularity will make it possible to change out one component without affecting the others.