Sessions is temporarily moving to YouTube, check out all our new videos here.


Ken Wheeler speaking at Reactivate London in March, 2016
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

Spectacle is a JavaScript library for building presentations in React. In this talk, Ken Wheeler, the creator, gives us the low down on Spectacle. Enjoy!


[00:00] All right, shit... Hey, everybody. I'm Ken Wheeler. I came here from America yesterday, having a good time. You guys might know me from being drunk on Twitter. If you don't, they'll be drunk here, and later, you know, but having a good time. I'm here today to give a presentation about making presentations with the library that I wrote for giving presentations. It's called Spectacle. [00:00:31] And...whoo. It's a presentation library written in React where you actually write your presentations in React. And yes, that's right, you write them in React. Yeah, so I was... I had to get ready for a presentation once, and I went to use Keynote and I got very frustrated with it. I was working with JSX all day long and then I had to go use Keynote click around the UI and got really, really angry, and then wrote this. Most of my open source that is successful is a result of anger. So, anytime I'm like super pissed off, I'm like, it worked out pretty well. [00:01:12] So, Spectacle is not new. It's been out for a little while. I was more concerned with some of the cooler features where if you're giving presentations on React, a lot of time you want it, you want React in your presentation. A lot of time with Keynote, you can't really show off what you're doing. So, one of the newest features that we just built in that... Previously, I had added to Slides, and, you know, that's what having a React-based presentation library lets you do, is this component playground view. You guys can see up here. So sometimes when you're showing off, like, a new library or something like that, it's super cool to show people on stage, like, how it actually works. [00:01:56] And if you've ever live coded on stage, it goes bad like 90% of the time, easily. But this kind of contains that a little bit, so it only goes badly 50% of the time. I was at React Europe, and I was like, "Ah, this can't go wrong. I have this all set up." When I get there and the keyboard's in fucking German, I'm like, are you serious? I'm sitting there like live coding, and it's saying... I'm like... But yeah, this one's clearly in English, so that'll do. What did you do to this trackpad? It's, like, stuck on right-click. Do you see what I mean? [00:02:48] Yeah, so we can just bump this up to like a billion.:Yeah. That works out great. Dude, what did you do to this trackpad? You need to wipe this off with some rubbing alcohol or something, man. Yeah, this is one of the newest features in Spectacle, and it's really nice. Yeah, it's going to go. So, one thing that's fun that I wanted to build in was when you add backgrounds to your slides, a lot of the time, like, the contrast is a little off, so when people are looking at it from far away they can't read the words. So we added in a thing that allows you to dim the background image, so you can either dim or brighten it to increase the contrast so people can see what your talk is all about. We have a layout system, but that's been there. Wonderfully formatted quotes. Inline markdown has been there. But here's a new feature that's super-duper fun. Creating multiple slides in Markdown, right? So, previously you could create like one Markdown slide, but you're still writing a bunch of JSX, sort of different slides. And I don't know, whoever's giving a talk, how your talk process goes, but usually what I'll do is wait until like three days before I'm scheduled to talk, and I'll be like, "Ah, I've got to make these slides." And then, you know, write like an essay-style thing, and then I'll put into like a Markdown- style thing. And then like the day prior I've got to make the slides, and somehow magically it works out most of the time. [00:04:23] But now you can create multiple slides in Markdown just by doing dot, dot, dot or dash, dash, dash rather. I don't know if...Yeah. Yeah, it's not going to actually show it, because the code's over here. You just want to have a look over here. You use three dashes to separate slides. So you can write just a big thing of Markdown, like you're writing dots or something, and it, you know, magically becomes slides. We have super cool transitions. Full theming systems, so if you want to make different style decks. PDF export, if you actually print things. Apparently, some people do. They wanted it. This is an example here of interactive... This trackpad, bro... Interactive presentations. You can click, you know, you can just have stuff. So, like I gave a talk about, like, charting, and it was cool to have the charts actually there, and they're like, yeah, this is like the legit charts, the real deal. So, that was fun. Yeah, and that's most of the new features there. One thing I wanted to talk about was actually styled components. [00:05:38] Audience member: Woo! [00:05:39] Ken: Yeah. I think styled components are great, right? So, the first iteration of Spectacle, styled components didn't exist. So, you know, I kind of just made my own little styled components that had, you know, you'd have like a heading tag or a text tag, and it had the theme-based or context-based theming. But then styled components came out, and even though Max doesn't use Spectacle for his slides, I use styled components on everything. And that hurt me a little bit, deeply. So I'm just going to pull this up here and we can just go ahead and pull up here. Yeah, here's a PR to switch Spectacle over to styled components. [00:06:23] Audience member: Woo! [00:06:24] Ken: I'm just going to go ahead, and merge that shit. [00:06:26] Unknown: Woo! [clapping] [00:06:27] Ken: Yeah, it's merged. Are you going to use it now? [00:06:32] Unknown: Yeah. [00:06:32] Ken: Okay, good. [00:06:33] Unknown: Is master broken? [00:06:35] Ken: Huh? [00:06:36] Unknown: Is master broken, though. [00:06:37] Ken: Yeah, so, dude, don't fucking use it, dude. I have to update the boilerplate. [00:06:44] Yeah, I merged it, I didn't fucking NPM publish it. All right, that's all I got. Thank you guys so much.