6

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?

Dmitry Kurinskiy
  • 533
  • 1
  • 3
  • 16
  • 2
    Load the first page from the server, do all the updates with Angular. What am I missing? – Evan Davis Apr 22 '14 at 13:44
  • "I want nodejs features but I don't wanna use nodejs" ... dude just use nodejs – rafaelcastrocouto Apr 22 '14 at 14:37
  • @Mathletics it means doubling templates both in server-side and client-side environments. Do you know angularjs routing solution to not route only the first page? – Dmitry Kurinskiy Apr 23 '14 at 07:34
  • @rafaelcastrocouto it's such a mess of techs. To have Feature1 on Front-end I need Tool1 on Back-end. To have Feature2 on Back-end I need Tool2 on Back-end. To combine Tool1 and Tool2 I need Tool3 and DesignPattern4... That's how complexity grows. Well, now we're not ready to switch ONLY to node.js on back-end. – Dmitry Kurinskiy Apr 23 '14 at 07:36
  • All your templates are client-side, except the first page, which is rendered serverside. Load the Angular libs async, and don't initialize them until after the page is rendered. The routing for the homepage should do nothing, so no updates are made until the user navigates/takes some action. I don't actually know Angular, but a team at my previous job was doing precisely this for one of their apps. – Evan Davis Apr 23 '14 at 13:17
  • @Mathletics any page might be the first one. Client can get on the site with a link or from search engine. So it requires all public pages to be prepared on server-side anyway. – Dmitry Kurinskiy Apr 24 '14 at 12:11
  • If you're just worried about sharing templates, there are a few that work for both client- and server-side (dust, handlebars, probably others.) The other thing to look at would be jQuery Mobile's page injection. It's designed to have everything rendered on the server but to then handle all navigation with AJAX/history. That's probably the closest thing to what you're asking for. – Evan Davis Apr 24 '14 at 14:38

1 Answers1

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.

Community
  • 1
  • 1
Naman Goel
  • 1,525
  • 11
  • 16
  • Thanks for your answer. Right now I implement templating twice, as a scala template and an angular template. It leads to double data downloading (html + then json, when the route starts) and page blinks before load. I've just found that there's Mustache and Mustache.java -- used in Twitter. Looks good, and really why angular? I'm searching hard for some lighter and modular solutions, maybe less dom-dependent. – Dmitry Kurinskiy May 12 '14 at 11:57