How to build Modern front-end with non-Node.js backend?

Question

Generally I am backend and fullstack developer and a tech-lead. I am choosing dev tools over the years.

For back-end, I've chosen Typesafe Stack. It makes apps reactive and relatively easy to scale and maintain. And it's fun to code in Scala.

For front-end, I use Angular.js, previously it was knockout.js, YUI, Mootools, jquery, vanilla.

But with Angular.js I am really confused. Problem is not in a tool itself, but in the way the Web evolves.

The aim is to fasten application, make it more responsive, reactive, interactive. It leads us to single-page apps. Angular.js is good for it.

But.

For a modern app, it is extremely important to render first page ASAP. For single-page app, it cannot happen before resolving main template, then loading all the scripts, then launching app, routing request, then asking server for some REST resources, binding it into templates, and then showing it to the user.

A lot of network latency to wait for! A lot of sequential requests coming one after another.

So it takes looong time to see the content. Also it makes it hard to be indexed via search engines, and limits accessibility (Reader mode in Safari usually doesn't respect markup generated by angular.js).

Well, one can solve the problem of searchability by tools like prerender.io. Ok, even if it looks ugly, but what's about the first page load?

I've heard that Twitter finally became to render content on back-end, and then wrap it with scripts. How?

I've seen some projects on node.js with the same purpose. They renders content with the same javascript that client actually gets, and fed it the result html. Then wraps it with, say, React.js triggers and codes, or even angular.js. But what if Node.js backend is not our choice?

So the requirements are very natural:

• Ability to (pre)render content on back-end
• Wire scripts on the page after it was loaded
• Do not replace page content with something generated by scripts
• Use html5 routing for all other page views
• Avoid node.js, at least don't use it as the main back-end technology

Am I alone against this problem? How do you think of it?

Answer 1

Here are the options for you: - Use a node.js middle server, that relies on a server technology of your choice for the actual data and stuff. Pro, you can test it slowly before moving to it completely. - Two Write all your template logic twice, once for your server and again for the client. Using node.js lets you just re-use the logic from the front-end but Angular.js isn't exactly node friendly due to it's reliance on the DOM.

If you do want the best first page-load experience possible, you should look at this answer I gave today: AngularJS SEO for static webpages (S3 CDN)

It'll let you bootstrap a static app that works with styling AND routes with only CSS while your angular app loads up. Hope that helps.