DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
What's in store for DevOps in 2023? Hear from the experts in our "DZone 2023 Preview: DevOps Edition" on Fri, Jan 27!
Save your seat
  1. DZone
  2. Coding
  3. JavaScript
  4. Generating Awesome Slideshows Using JavaScript and Vue.js

Generating Awesome Slideshows Using JavaScript and Vue.js

We take a look at two frameworks for programmatically creating slideshows, Reveal.js and Eagle.js, and see how they stack up.

Sylvain Leroy user avatar by
Sylvain Leroy
CORE ·
Jan. 17, 19 · Analysis
Like (3)
Save
Tweet
Share
13.68K Views

Join the DZone community and get the full member experience.

Join For Free

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

Introduction

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 understand materials.

I had to explore solutions to programmatically produce videos and one solution I came up with, is to build attractive slideshows. The slideshows have to be attractive enough to intrigue the reader and give them the impression that they are watching a video.

With the team, we explored several solutions:

  • Generate slideshows using JS and record them.
  • Build programmatically videos using ffmpeg andimagemagick.
  • Explore available SaaS platforms to program our videos.
  • Generate an Adobe Premiere compatible format.

Long story short, all solutions turned out to be a nightmare except for the first one.

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

Reveal.js

Reveal.js is a cool framework that allows the user to build their own slideshows using only HTML/CSS and a bit of JavaScript. 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.

Oh 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?

I've had this reaction while using Reveal.js for the first time, until I understand that I had to clone a git project to create my first template. The second issue I had was that I couldn't find the code, until I discover that a single HTML page contains all the code for the slide 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.

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

Drawback of the Solution

Reveal.js has a few draw backs:

  • It's pure, vanilla JS and while I have been able to make it friendly with Vue.js, it has always been very hacky.
  • I could not trigger text animations when a slide appeared.
  • 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.jsSlideshow code using Reveal.js

Design 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, i.e. an element at the bottom, a picture in the left upper corner, etc.

I have been struggling a lot to get my first video prototype with the CSS choices that come with Reveal.js and the way we can customize a template.

Eagle.js

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

I have been interested in this framework since it allows for the native integration of my slides with Vue and a, probably easier, automatic generation.

Here is my feedback about Eagle.js.

Slideshow using Eagle.jsYeah Vue!

I have been a big supporter 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 a few hours.

Poor Documentation

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

No Feature

The components are de facto, but a huge set of features are missing, such as 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.js. Though the framework has fewer features and a poorer documentation, the ease with which we can extend either the design or the features allowed me to create better slideshows and videos.

For more article about Vue, check here and here. 

Vue.js JavaScript Framework Awesome (window manager)

Published at DZone with permission of Sylvain Leroy. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • A Complete Guide to AngularJS Testing
  • Understanding gRPC Concepts, Use Cases, and Best Practices
  • Java Development Trends 2023
  • Web Application Architecture: The Latest Guide

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: