Create your slide deck using Famo.us and Meteor

Introduction

Yesterday, there was the Paris Famo.us Meetup organized by AdFab and Meetic France. I was presenting the first part, which consists of a live coding or demo showcasing. I intended to demonstrate some basic techniques on Famo.us's physic engine. Live coding is tough. There are always some "demo effect" and time runs out very quickly.

Fortunately, for this demo preparation, I created some slides. As the meetup was about Famo.us, I decided to code my slide deck using... Famo.us and Meteor.

The slides are deployed on Meteor: MeetupFamousSlides.

The core components

If you think about a presentation tool, it only consists of static pages that you present one after the other. This is definitely the job of iron:router.

Creating each slide is easily done when you are using a templating system with emphasis on semantic. Jade and Markdown fit very well in this equation. Therefore, I ended up choosing mquandalle:jade. Each slide is a single Jade file. Thanks to the power of Meteor, you can write additional logic in the template for animating the slide's content.

Speaking of animations, modern slide deck use some of them. Famo.us is really a nice framework for this task. But coupling Meteor and Famo.us is a bit tedious. This is where enters gadiccohen:famous-views. It bridges both worlds with an incredible ease of use. I strongly recommend you to have an eye on it.

Conclusion and code reuse

In less than 2 hours, the presentation engine was ready and I had a basic presentation. Adding slides was a no brainer simply consisting in updating the router and adding a Jade file.

You can find the code of the engine and the slide deck on this Github repository.