#wen development

How Does Meteor Framework work on Meteor.com?

In a most recently posted blog, I had pointed out some reasons why you should choose Meteor for your future web and mobile apps. Meteor is now widely used by developers due to its enormous advantages. Nowadays, there are tons of web and mobile apps built with Meteor such as Telescope, Luminpdf.com, Crowdr.tv, and of course, Meteor.com, which is the official website ofMeteor Development Group.

Renovated by Designveloper team, Meteor.com is a typical example of how Meteor works in practice. The website now has an eye-catching design with well-organized elements that highlight Meteor’s products, services and other important information.

Single-page web application

A single-page application is known as a web application or a website that fits on a single web page. It is developed with an aim of improving the user experience by delivering all the functionality for an application without taking time to reload the whole page. Among web browser JavaScript frameworks, including AngularJS, Ember.js and React, Meteor is the one designed exclusively for developing single-page applications. As a main part of its capacities, Meteor made it easier for us to create a single-page web app of Meteor.com.

Now you are at Meteor home page and want to explore Developers tab and other tabs on menu bar. Then, with a single mouse click, you don’t have to wait any longer for the content to display because it immediately appears without refreshing the page. This video illustrates the way it does actually.

How can Meteor do that?

As a client-server framework, Meteor ensures that all layers, from the database to the templates, update themselves whenever necessary. Using the Distributed Data Protocol (DDP) and a publish-subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronize code. Along with that, Meteor’s Blaze, which is a powerful reactive rendering library of Meteor, makes it easier to create live-updating or real-time user interfaces. To have a deeper understanding about this part, carefully read comprehensive guides at http://docs.meteor.com.

Fluid Responsive Web

Responsive web design allows you to use different devices to view a website, including desktop monitors, laptops, tablets and mobile phones without creating compatible versions for each of them. Meteor.com is designed based on the concept of theresponsive web design method, specifically a fluid one which uses percentages of the total available width for the columns. You can find more about different types of responsive web design at http://www.profoundgrid.com. Thanks to Meteor, the team created a brand new look for Meteor.com using CSS, which decides the layout of webpage, instead of building an isolated site and corresponding codebase for each device. Although Meteor (or MeteorJS) is not the only framework used for building responsive web app, it provides amazing responsive packages. Let’s see how it looks on such devices.

                                                Laptop/Desktop

                                                      Tablet

                                           Content in 3 columns

Obviously, the interface of the web changes in different viewports, resulting in the rearrangement of page elements. Here you can see that the menu bar reshuffles to the right side of the page. Elements in three and two columns now reshuffles to one column to fit with the size of devices.

Experience yourself by taking a tour around Meteor.com. You want to have such a single-page and responsive web as Meteor.com, don’t you? If yes, take your first steps right away. Guides are available for you and in case you can’t wait to build one, get Meteor tutorials for developing your own app at once.