A New Generation For Spectacle
10 March 2020
At Formidable we spent the last five months working on a rewrite of Spectacle. We started with clear goals to set Spectacle up well for the future: a modern internal architecture that’s easier to contribute to, faster authoring experience, consistent theming system, and the elimination of external boilerplates and scripts. Welcome to Spectacle 6!
Modern Internal Architecture
The previous version of Spectacle used classic React context to manage the control flow of the presentation. While this let users create slides without having to pass control flow props to every slide, it also made it harder for developers to contribute. Finally, future versions of React will remove the old context APIs requiring a rewrite anyway. Spectacle 6 uses the new context APIs introduced in React 16.3 and leverages the provider and consumer patterns also introduced. Unlike prior versions of Spectacle there is not a single 900 line file for control. Multiple contexts are leveraged for deck control, theming, and transition state management. Spectacle 6 also has eight custom hooks with specific logic for features like keyboard controls, url routing, or high auto fill. This makes it easier to separate out logic and test.
Faster Authoring Experience
Consistent Theming System
For Spectacle 6 we decided to use an existing theming system instead of building a custom one with a learning curve that applied only to Spectacle. Spectacle components like
Table, and more all are built from . They use a unified prop set that makes it easy to provide raw CSS values or dynamic ones built from a theme file. Since each component is also built from styled components users can also extend them as well.
In addition to rewriting the internal architecture, Spectacle 6 comes with some new features. The stepper in Code Pane is now built in. It's easier to show step-by-step tutorials of blocks of code with on-screen comments. Spectacle 6 now features Chromecast for presenting slides in addition to the traditional two-browser tab method. The new Spectacle CLI can generate JSX and MDX decks, which eliminates the needs for external scripts and boilerplates.
This is only the beginning for Spectacle 6 and we are excited to finally share it with the community. At Formidable we look forward to seeing what you build with it!