Generating awesome slideshows using JS and Vue

Home / Generating awesome slideshows using JS and Vue

Example of Slideshow preview

Share on LinkedIn
Pocket

I have been recently using several JS frameworks to produce slideshows and ultimately programmatic videos. Here is my feedback about two frameworks Reveal.js and Eagle.js.

Introduction

Example of Slideshow preview
Example of Slideshow preview

As I wrote before, at Faveeo, we are working hard to produce original content from curated articles. One idea, the team had, is to produce videos from written articles, to maximize the reader engagement and produce fresh, easy to catch new materials.

I had to explore solutions to produce programmatically videos and one solution I came up with, is to build attractive slideshows. The slideshows have to be sexy enough to deceive the reader and make him thinking he is watching a video.

With the team, we explored several solutions :

  • generate slideshows using JS and record them
  • build programmatically videos using and imagemagick ;
  • explore the available Saas platform to program our videos
  • generates an Adobe Premiere compatible format

Long story made short, all solutions turned as a nightmare but the first one.

I have been using two frameworks to build my slideshows and I retained

.js

Reveal.js is a cool (https://revealjs.com), that allows the user to build its own slideshows using only HTML / CSS an a bit of . To help the beginner, it exists an online editor available on https://slides.com/.

This article is not a tutorial therefore here is my feedback concerning my use-case :

Ohhh so many examples

Well, Reveal.js is quite popular and it’s easy to find many examples on the web.

WTF : how do we start

Well, it has been my reaction using Reveal.js the first time until I understand that I had to clone a GIT Project to create my first (eyes rolling one). The second issue I had was, IS THE CODE, until I discover that a single HTML page contains the whole code of the show.

Plenty of features and great documentation

Yes, Reveal.js has an impressive set of features, autoplay, record, audio etc etc and it’s perfect for most need but MINE.

The documentation is also great and you will find plenty of examples.

Drawback of the solution

Reveal.js has two draw backs : it’s pure vanilla JS and while I have been able to make it friend with , it has always been very hacky.

  • I could not trigger text animations WHEN a slide appear
  • I had to restart the component after my new slides have been generated because I don’t have control on Reveal.js lifecycle
    Slideshow code using Reveal.js
    Slideshow code using Reveal.js

flaws

Reveal.JS comes with a rather clever system to position your slide items properly and compute their size.

HOWEVER it’s a pure nightmare if you want to produce an absolute design for your slides ie. a element at the bottom, a picture in the left upper corner etc.

I have been struggling a lot for my first video prototype with the CSS choices of Reveal.js and the way we can customize a template.

Eagle.js

Eagle.js is a rather recent JS framework powered by Vue.js allowing the developer to write Slides as Vue components.

I have been interested by this framework since it allows me a native integration of my slides with Vue and an probable easier automatic .

Here is my feedback about Eagle.js.

Slideshow using Eagle.js
Slideshow using Eagle.js

Yeahh Vue..

I have been a big practtionner of Vue.js and to use a library based on it made things really easy. I ported the Reveal.js slideshow to Eagle.js in some hours.

Poor documentation

Yes, the documentation is poor, evenif Zulko has provided several great examples. But all the logic and the dirty things are hidden into the code. The good news ? There is only two small code files.

No feature

The components are de facto working but a huge set of features are missing like the auto play.

CSS Friendly

The framework comes with a theme but everything can be easily overridden.

Easy to extend

I have extended the framework to allow me some tweaks and design choices. (https://github.com/faveeo/eagle.js)

Conclusion

I have retained Eagle.s while the framework has much less features and a poorer documentation, the ease to extend either the design or the features allowed to create better slideshows and videos.

Here are the two examples produced with the frameworks.

For more article about Vue, check here and here.

With Reveal.js

With Eagle.js

 

 

 

 

Share on LinkedIn
Pocket

, , , , , , , , , , , , , , , , ,

About Author

about author

Sylvain Leroy

Senior Software Quality Manager and Solution Architect in Switzerland, I have previously created my own company, Tocea, in Software Quality Assurance. Now I am offering my knowledges and services in a small IT Consulting company : Byoskill and a website www.byoskill.com

Currently living in Lausanne (CH)

Optimization WordPress Plugins & Solutions by W3 EDGE