Ghost Themes
SimpleChat.Support - Open Source Live Chat App
Fast development with Meteor.js
words - read.

Fast development with Meteor.js

I want to show you an example of how fast you can produce a ready to use app working with Meteor. If you want to build a small but very functional app and you want it now you should definitely try doing it with Meteor.

Not long ago we had the Meteor Day meetups all over the world. It was a great opportunity to meet other Meteor developers and see what they have built with Meteor. I was able to work on the 'slide deck tool' for our presentations at Vazco company in Wrocław. This tool is now called Vazco Slide Deck and you can find it on GitHub. It is made with Meteor and Jeet Grid System on the Front-End.

We need to achieve a cool feature. This feature was a very good example of main Meteor strengths – data reactivity. Every person in the room was able to go to the special URL address and they saw all presentation on their laptops, tablets or cellphones in realtime. So when the presenter was changing the slides all devices got the update and the slides were changed too. It is also very comfortable for the presenter because he is able to use his cellphone like a slide switcher remote control if he is logged in the slide deck service website. He has the access to simply swipe slides and all connected watchers can see the changes. It also appears in main presentation screen.

Let’s see how we have built it.

First of all we have used some of the packages

  • standard-app-packages
  • accounts-password
  • iron:router
  • juliancwirko:s-jeet
  • percolate:momentum
  • markdown
  • simple:highlight.js

As we see there is a Markdown package and Jeet package for Meteor, but the coolest thing here is the Percolite Studio's Momentum package. It is very useful when you want to achieve slides animations when changing. You can extend it by adding new animation plugins. This is a very flexible and cool package.

Ok, but how does this realtime thing work?

First of all we need some knowledge about data reactivity in the Meteor framework. I will not cover all that stuff, you can read about it in many places on the Internet. (or maybe here too someday as one of the articles).
What is most important is the usage of collections on the server side and client (browser) side.
There is server MongoDB collection and browser client MiniMongo collection which is synchronized with server side MongoDB collection.
All clients (presentation watchers here) are connected to one app which serves reactive data to all client browsers, so when the presenter changes slides, the data in the collection changes as well. There is an 'active' flag set on the actual slide and only this one slide is presented at the moment. Because this is reactive data all clients browsers collections will get that actual slide updated from the server side MongoDB collection and all clients browsers will show the actual slide too.
This is Meteor magic without any additional work.
We also need a static individual slide preview when the presentation is over. (This is enabled now on the demo website). When the presenter enables this option all watchers can go and view all slides without waiting for the presenter to switch the slide. This is achieved simply by copying the server collection onto another client side (MiniMongo) collection. So when you go to the static private slideshow you get your unique browser only set of slides which you can switch by yourself. This is cool because it is automatic and you don't need to do anything more than just add your slides.

You can see how all collections are configured in this file:

Yes, but how can I add all those slides and how are the collections populated?

As you can see in the file mentioned above there is this magic startup function with some operations and it’s called 'populate' method by'populate', templatesArr); What is done here is simple iteration through all special Meteor templates which are in fact our presentation slides.
So all that needs to be done is to add Meteor templates with specific names wherever you want (but on the client side of course). It could be one file with all templates or many files with one template in one file. You can see our demo slides here:
For now it is very important to name all your slide templates like 'vslide1', 'vslide2' etc. Because this name is used by 'regular expression find' script.

Ok, these slides should be done in html, right?

Yes, you can write standard html, like it is in normal Meteor templating, but with the help of Markdown core package you can also write it in Markdown like in the slide6 from the demo presentation here: It can be mixed with html or 100% written by Markdown. You can choose. We also use Stylus here with help of Jeet Grid System, but of course you can write standard css too. I strongly encourage you to check out Jeet with Stylus

How can I setup Admin/Presenter access rights?

For now there is only one admin account and one logged in user available at the moment. There will be an auto configurated admin account based on login and password passed in a special Meteor settings.json file. So when you run your app locally or you deploy it just remember to prepare your settings.json file. You can find the example and more about it here:

Ok, that’s it. This app was written in a couple of hours and is extremely useful right now. I hope we will improve it soon. If you have any questions about it don't hesitate to write to me. You can of course use it for your own needs. Check out Vazco company too : Cool Meteor guys from Poland :)


comments powered by Disqus