Why Care About Universal Web?


Hello my dear friends. Today we will be talking about Universal Web, and we will be using React and Express and obviously Node.js. My name is Azat Mardan. I am the founder and the lead instructor at Node University. So first of all, why you should care about universal web? Well first of all, the problem of the search engine optimization or SEO. You see, when you're using, when you're building a single page application when you using a lot of browser JavaScript to maybe render to generate that HTML code on the browser, so guess what, you are losing the ability for the search


crawlers to interpret that HTML, to save, to cache that, and to index that HTML properly, because most of them, they're very inable. They're very inadept at interpreting and rendering that browser JavaScript code, and even the websites like... if you go to the Google's official page they claim that they support some browser-side rendering, but in fact on their official web page they say: "Don't you anything fancy. Don't use Angular or don't use Ember." They imply that they won't be able to properly render that type of HTML,


then properly indexed that type of HTML, which is rendered by the browser JavaScript. Then second reason is that your users might be bored because you are showing them unstyled or you're showing them the page which doesn't have any data. This happens because when your single-page application loads the skeleton HTML, the boilerplate HTML, that HTML doesn't have the data, so it must perform certain AJAX, or not we call them HXR requests, to the server to get the data, and only then that data will be inserted into the page and all that time you would see "Loading..."


or you would see a spinner image. It's a GIF that is spinning to show you that something is happening. And then code reuse. Code reuse is that's very important for developer experience. Without having the ability to reuse code, the browser code on the server and vice versa the server code on the browser, you're basically as a developer, you're basically doomed to duplicating your work and then that amount of time doubles, triples and quadruples when you need to maintain. Let let's say, you need to make a change. Now you need to go update the server-side templates and the


browser templates. So you need to maintain two sets of templates and then you need to test for those changes, and for those views as well. So you need to maintain two sets of testing, for those, for that code without having the ability to reuse that code. Also utilities like lo-dash, underscore, or your own in-house utilities. It's very, very nice when you can reuse that code. DRY (Don't repeat yourself). That's one of the main concepts in a good software engineering. And the fourth reason is the performance, so you can actually do very, very, very cool things with the


universal web which allows you to not just increase the perceived performance like with a loading but also increase actual performance. What is universal. What is the definition of universal when in fact it had a lot of other names. For example isomorphic. Isomorphic came a little bit earlier and then people said like "Oh! No, no, no, isomorphisms actually means something else, so let's call it universal." And even before that I always call it full stack, just because it makes sense for me. You have a backend, you have frontend, you have database. If you can use JavaScript for


everything, that's your full stack JavaScript. And then if you want to add DevOps to that, you can also use JavaScript and Node for the deployment scripts and DevOps. OK, so first problem—code reuse: templates between the server and the router. That's the most typical example and how can we solve it. Even before going into React, isomorphism and universal JavaScript, they existed before React. So let's talk about how some of the other approaches of how you can solve them. Let me give an example. At Storify, we had the frontend app, and


there was this library maintained and built by Storify, it's called jade-browser. So Jade, now it's called Pug (P-U-G). It's one of the most popular server-side templates for Node.js. And what this little utility allows you to do. It allows you to basically expose those server-side templates on the browser, hence the name jade-browser. So you can write the templates once and then reuse them on the browser which is brilliant. And back in the day it was very a popular module.