JavaScript Presentation Frameworks and Libraries

JavaScript Presentation Frameworks and Libraries

_by Oleksii Prohonnyi

MOTIVATION

Pros

It’s quicker to add a few HTML tags than use a WYSIWYG interface.

You can update a presentation using a basic text editor on any device.

Files can be hosted on the web; you need never lose a PPT again.

You can easily distribute a presentation without viewing software.

It’s not PowerPoint and your audience will be amazed by your technical prowess.

Cons

You require web coding skills.

Positioning, effects and transitions are more limited.

Few systems offer slide notes (it’s a little awkward to show them separately).

It’s more difficult to print handouts.

REVEAL.JS

Reveal.js: About

reveal.js comes with a broad range of features including nested slides, Markdown contents, PDF export, speaker notes and a JavaScript API. It's best viewed in a modern browser but fallbacks are available to make sure your presentation can still be viewed elsewhere.

Website: http://lab.hakim.se/reveal-js/#/

Online editor: http://slides.com/

See more: https://github.com/hakimel/reveal.js

Reveal.js: Installation

The basic setup is for authoring presentations only. The full setup gives you access to all reveal.js features and plugins such as speaker notes as well as the development tasks needed to make changes to the source.

1. Download the latest version of reveal.js from https://github.com/hakimel/reveal.js/releases.

2. Unzip and replace the example contents in index.html with your own.

3. Open index.html in a browser to view it.

See more: https://github.com/hakimel/reveal.js#installation

Reveal.js: Features

Markup/Markdown syntax

Configuration

JS events

Auto-sliding

Keyboard/Touch navigation

Assets lazy loading

API

Parallax background

Transitions and fragments

PDF export

Code highlighting

Theming

Speakers notes

Multiplex plugin

MathJax plugin

Reveal.js: Browser support

1st tier: Chrome, Safari, Firefox, Opera and IE10-11.

2nd tier: IE9, Firefox 3.6.

3rd tier: IE8.

See more: https://github.com/hakimel/reveal.js/wiki/Browser-Support

Reveal.js demo

IMPRESS.JS

Impress.js: About

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Website: http://impress.github.io/impress.js/#/

Tutorials: https://github.com/impress/impress.js/wiki/impress.js-tutorials-and-other-learning-resources

See more: https://github.com/impress/impress.js/

Impress.js: Installation

1. Create your own HTML page.

2. Include impress.js library before the end of the body.

3. Create wrapper for slideshow (#impress).

4. Create slides.

See more: http://www.cubewebsites.com/blog/guides/how-to-use-impress-js/

Impress.js: Features

Markup syntax

Canvas visualization

3D visualization

Elements positioning

Keyboard/Touch navigation

CSS3 transitions and transforms

Impress.js: Browser support

1st tier: Chrome/Chromium, Safari 5.1 and Firefox 10.

2nd tier (polyfills): Internet Explorer 10, 11 and Edge.

See more: https://github.com/impress/impress.js/#browser-support

Impress.js demo

GOOGLE SLIDES TEMPLATE

GST: About

Google’s presentation engines which is used for presentations in Google Docs.

Website: https://code.google.com/archive/p/io-2012-slides/

Readme: http://io-2012-slides.googlecode.com/git/README.html

GST: Installation

1. Get this template: https://code.google.com/archive/p/io-2012-slides/downloads and copy/paste it to a new file on your local computer.

2. Install Compass.

3. Update slide_config.js.

4. Edit at will. Copy the code for the sample slides and fill it out with the content you want.

See more: http://io-2012-slides.googlecode.com/git/README.html

GST: Features

Markup/Markdown syntax

Canvas visualization

Code highlighting

Theming

Speaker mode

Keyboard/Touch navigation

CSS3 transitions and animations

GST: Browser support

Chrome

Firefox

Safari 5.1+

iOS 4.3+

Chrome for Android

See more: https://code.google.com/archive/p/io-2012-slides/

GST demo

DECK.JS

Deck.js: About

A JavaScript library for building modern HTML presentations. deck.js is flexible enough to let advanced CSS and JavaScript authors craft highly customized decks, but also provides templates and themes for the HTML novice to build a standard slideshow.

Dependencies: jQuery, Modernizr

Website: http://imakewebthings.com/deck.js/

See more: https://github.com/imakewebthings/deck.js

Deck.js: Installation

When you download deck.js, it will include a file named boilerplate.html. You can immediately start editing slides in this page and viewing them in your web browser.

1. Write slides.

2. Choose themes.

3. Include extensions.

See more: http://imakewebthings.com/deck.js/introduction/

Deck.js: Features

Markup syntax

Configuration

Keyboard navigation

API

Fragments

PDF export

Theming

Extensions

Deck.js demo

SHOWER

Shower: About

Shower Presentation Template.

Shower ['ʃəuə] noun. A person or thing that shows.

Website: http://shwr.me/#

See more: https://github.com/shower/shower

Shower: Installation

Download and unzip template archive.

Open index.html and start creating your presentation.

If you’re familiar with npm you can install Shower’s core and themes manually: npm install shower-core shower-ribbon. The same packages available in bower.

See more: https://github.com/shower/shower#quick-start

Shower: Features

Markup syntax

Theming

Keyboard/Touch navigation

PDF export

Code highlighting

Fragments

Animations

Shower: Browser support

Latest stable versions of Chrome, Internet Explorer, Firefox, Opera and Safari are supported.

See more: https://github.com/shower/shower#browser-support

Shower demo

SUMMARY

Comparison

ENGINE NAME CSS TRANSITIONS

BROWSER SUPPORT

EXTENSIONS PDF EXPORT

Reveal.js + + + +

Impress.js + + - -

GST - + - -

Deck.js - ? + +

Shower - + - +

THANK YOUFOR ATTENTION

Oleksii Prohonnyi

facebook.com/oprohonnyi

linkedin.com/in/oprohonnyi