JavaScript Presentation Frameworks and Libraries

JavaScript Presentation
Frameworks and Libraries
_by Oleksii Prohonnyi

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: 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

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
 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

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
 Theming
 Speaker mode
 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/

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

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
 PDF export
 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

Comparison
ENGINE NAME CSS
TRANSITIONS
BROWSER
SUPPORT
EXTENSIONS PDF EXPORT
Reveal.js + + + +
Impress.js + + - -
GST - + - -
Deck.js - ? + +
Shower - + - +

Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi

JavaScript Presentation Frameworks and Libraries

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to JavaScript Presentation Frameworks and Libraries (20)

More from Oleksii Prohonnyi (20)

Recently uploaded (20)

JavaScript Presentation Frameworks and Libraries