Book Image

Meteor Design Patterns

By : Reyna
Book Image

Meteor Design Patterns

By: Reyna

Overview of this book

With the increasing interest in NodeJS web applications, a new framework, Meteor, has joined the ranks to simplify developer workflows. Meteor is one of the few open source frameworks that has received funding since its early development stages. It builds on ideas from existing frameworks and libraries, offering developers an easy way to develop a prototype app. At the same time, it gives them the tools and flexibility to build a fully fledged production app. Meteor is the weapon of choice for start-ups in today’s world. Meteor Design Patterns cuts through the jargon that most websites play with and gets to the point with simple solutions that will boost your development skills. We start off with a refresher on the basics of JavaScript programming such as templates, CoffeeScript, the Event Loop, and the Merge Box, amongst others. You then learn how to map real-world data and optimize the data’s publishers to output data with the least amount of work done by the server with some subscribe and publish patterns. Next, using front-end patterns, you will learn how to create maintainable and trackable forms, and make our site crawlable by any search engine. Following this, you will see how to optimize and secure the web application and maintain applications without breaking other features. Finally, you will learn how to deploy a secure production-ready application while learning to set up modulus, compose with Oplog tracking and SSL certificates, as well as error tracking with Kadira. Throughout the book, you will put your skills to practice and build an online shop from scratch. By the end of the book, you will have built a feature-rich online shop.
Table of Contents (8 chapters)

Stylus for Meteor

Stylus works much like CoffeeScript and Jade but it is for CSS. I recommend that you install mquandalle:stylus. This package is preinstalled with useful tools such as Jeet and Rupture. All Stylus files are saved with a .styl extension. There are only three things that we need to learn about Stylus: CSS tags, variables, and functions.

CSS tags

Stylus is a language that does away with the need for semicolons (;) and curly braces ({}) in exchange for making good use of tabbing. Let's look at an example:

// STYLUS
// Let's make a vertical positioning class
.vertical-align-middle
  //PART 1
  position:absolute
  width:100%
  height:100%
  display:table
  overflow-x:hidden

  .special
    background:black

We can see in PART 1 how properties are defined for a class by tabbing those properties in .special is used to select an HTML tag with the special class that is a child of the vertical-align-middle class. Let's look at how PART 1 compiles:

/* CSS – OUTPUT PART 1 */
.vertical-align-middle {
  position:absolute;
  width:100%;
  height:100%;
  display:table;
  overflow-x:hidden;
}
.vertical-align-middle .special {
  background:black;
}

Now let's add a more complex selector:

// STYLUS
// Let's make a vertical positioning class
.vertical-align-middle
  //PART 1
  ...

  //PART 2
  > *
    display:table-cell
    vertical-align:middle

PART 2 has a combination of special CSS2 selectors: specific parent (>) and all elements (*). In this particular order, the CSS2 selectors are picking the "any first sibling" element only and applying the rules. Let's look at how PART 2 compiles:

/* CSS – OUTPUT PART 2 */
.vertical-align-middle > * {
  display:table-cell;
  vertical-align:middle;
}

Let's add a new class to the current class that aligns the object to the top:

// STYLUS
// Let's make a vertical positioning class
.vertical-align-middle
  //PART 1
  ...
  //PART 2
  ...
  //PART 3
  &.whole-page
    top:0

PART 3 uses an ampersand (&) to describe an element that is not a child but instead is concatenated with the extra class. Let's look at how PART 3 compiles:

/* CSS – OUTPUT PART 3 */
.vertical-align-middle.whole-page {
  top:0;
}

Variables

Unlike CSS, Stylus supports variables. This keeps a lot of things manageable when we want to make major changes to the look of our site. Suppose we have two colors that we want to use throughout our site, but we know that these colors are going to change. Let's define them as variables so that we can easily modify them later:

// STYLUS
primary-color = #ffffff
$secondary-color = #333333

.text-default
  color:primary-color
  background:$secondary-color

.text-inverted
  color:$secondary-color
  background:primary-color

Easy right? In this example, both primary-color and $secondary-color are variables. Stylus optionally supports the use of the money sign ($) to indicate a variable. This can make it easier to spot variables.

Functions/mixins

Unlike CSS, Stylus supports functions too. LESS, Stylus, and Sassy CSS (SCSS) refer to functions as mixins. Functions will make your CSS concoctions much easier to share across a project. We will cover the two types of mixins in Stylus: mixins and transparent mixins.

Mixins are functions that take a defined set of parameters. Let's take a look at how we can write a mixin:

// STYLUS
animation(duration,delay,timing)
  -webkit-animation-duration:duration
  animation-duration:duration
  -webkit-animation-delay:delay
  animation-delay:delay
  -webkit-animation-timing-function:timing
  animation-timing-function:timing

button
  animation(500ms,0,ease-out)

/* CSS – OUTPUT */
button {
  -webkit-animation-duration:500ms;
  animation-duration:500ms;
  -webkit-animation-delay:0;
  animation-delay:0;
  -webkit-animation-timing-function:ease-out;
  animation-timing-function:ease-out;
}

In this example, we first define the animation mixin, and then we apply the mixin to the button HTML tag. However, there is a much easier and effective way of doing this via a transparent mixin.

A transparent mixin, basically, takes all the parameters and saves them in an arguments variable without you having to define anything. Let's have a look:

// STYLUS
animation()
  -webkit-animation:arguments
  animation:arguments

button
  animation(pulse 3s ease infinite)

/* CSS – OUTPUT */
button {
  -webkit-animation:pulse 3s ease infinite;
  animation:pulse 3s ease infinite;
}

Notice how we did not have to define every single parameter in the mixin, and the arguments variable simply passed all the arguments that it could find. This is especially useful for keeping the code flexible.

Stylus essentially upgrades CSS in such a way that it makes the code much easier to manage and therefore, ends up saving us a lot of development time.

Go to stylus-lang.com and learnboost.github.io/stylus to learn more about Stylus.