Development of a static site on Meteor

Original author: Arunoda Susiripala
  • Transfer
Hello! I met an article on how meteor.com provides work for high loads. That sounds pretty interesting. (per.)

First, go to meteor.com and see how it works.

We all know that meteor.com is made on Meteor. You may notice that it loads very fast. Also, it does not have a loading process - after the HTML is built, the page is immediately displayed on the screen.

But how is this possible? Usually, this takes some time - connecting to the server, receiving data and displaying information on the screen. Maybe Meteor uses some kind of magic with Galaxy?

Hm. Not. Nothing like this. They cheated a little and meteor.com does not receive data from the server through DDP. I will show you what they did.



The image shows a list of templates that meteor.com contains. For each page there is a corresponding template that provides HTML output. So, we do not need to get anything from the server, everything is already here. Although not suitable for thousands of pages, this clever trick shows how they solved the high-load problem on meteor.com.

There are no subscriptions, no methods that access the server. So, this solution will perfectly cope even with a huge number of customers. If they added a caching proxy to meteor.com, then, technically, there is no load on the meteor.com server at all.

How does Meteor do this?



I'm not sure that meteor.com did the exact same thing, but I will show how you can do this very simply and without hacks.

  • First, install the package showdownwith meteor add showdown.
  • Secondly, install iron-routerone that will help us with routing.


So we create blogPost using the template.

<templatename="does_meteor_scale">
{{#markdown}}
# Does Meteor Scale?
Most people who consider Meteor for a production deployment spend time wondering if Meteor can scale. Some say Meteor is a good framework for prototyping, but not for production. After you read this article, you will be able to decide for yourself.
...
{{#markdown}}
</template>


Now we have a template with a name does_meteor_scalethat will be used to generate HTML using Template.does_meteor_scale();

Now we will add a simple path as shown below.

Router.map(function() {
  this.route('blog', {
    path: '/blog/:slug',
    template: 'blog'
  });
});


It's time to create a template for the blog.

<templatename="blog"><divid='blog'>
    {{{content}}}
  </div></template>


It’s clear that we are going to display the blog post inside content. Let's see exactly how we are going to do this.

if (Meteor.isClient) {
  Template.blog.content = function() {
    var slug = Router.current().params.slug;
    var templateFunc = Template[slug];
    if(typeof templateFunc == 'function') {
      return templateFunc();
    } else {
      return"404";
    }
  };
}


Be sure to run your Meteor application with the following environment variable. Then your server will not receive DDP requests at all.

export DDP_DEFAULT_CONNECTION_URL=http://non-existing-url.com


With this trick, we can make a very simple blog using Meteor templates. I made one.

You can watch it here: http://static-blog.meteor.com



If you like delving into code, then it is available on GitHub .

This method is neither the best nor the easiest way to create a blog. But I want to show that this is possible with Meteor. If we are lucky, someone will find an easy way to link some of the things that I showed in some package.

In conclusion, I want to add that scaling is as much an art as science. You need to know where and when to apply the right tactics to get the most elegant and effective solution.

Also popular now: