A primeira coisa que pensamos quando falamos em uma apresentação (seja para um evento, meetup, colégio/faculdade, empresa, etc) é a ferramenta da Microsoft, o Power Point. Esse produto se popularizou e se tornou o padrão internacional para apresentações. Mas por mais que a ferramenta seja bacana e utilizada ao redor do globo, ela pode tornar sua palestra bastante monótona (exatamente pelo fato de todo mundo usar ela).

É por essa razão que muita gente busca alternativas na hora de estruturar o seu material. Algumas ferramentas bastante usadas são o Google Slides (eu particularmente troquei o Power Point por ela há muito tempo!), Prezi, Slides, PowToon e afins. Neste artigo quero mostrar uma alternativa que está bem próxima do nosso dia o dia, ou seja, que envolve código. Estou falando do mdx-deck.

Apresentações com código

O MDX-Deck é um projeto open source hospedado no GitHub que nos permite montar apresentações incríveis usando a estrutura de MDX. O MDX, por sua vez, é a tecnologia que nos deixa usar JSX no Markdown (para mais detalhes, dê uma conferida neste link). O projeto já conta com mais de 5.000 estrelas no GitHub e nos oferece algumas funcionalidades bem interessantes, tais como:

• Escrever apresentações em Markdown
• Importar e usar componentes React
• Customizar temas e componentes
• Sem configurações de CLI
• Modo de apresentação
• Anotações de apresentador

Podemos ver uma apresentação demo neste link. Além disso, podemos ter uma visão geral do que é possível fazer na animação abaixo:

Instalação e utilização

O primeiro passo para utilizar a ferramenta é instalar ela na sua máquina. Para isso, utilizamos o bom e velho npm (note que aqui nada te impede de utilizar o Yarn também – fica a seu critério). Primeiro, crie um projeto e o inicie com o comando:

npm init

Feito isso, basta executar o seguinte comando no seu terminal para trazer o mdx-deck como dependência:

npm install --save mdx-deck

Muito bem. Agora precisamos utilizar a ferramenta do mdx-deck para subir a nossa apresentação. Para isso, vamos adicionar uma linha nos scripts dentro do package.json:

"scripts": {
  "start": "mdx-deck deck.mdx"
}

Note que neste comando estamos apontando para um arquivo chamado deck.mdx. Este será o arquivo que conterá toda a nossa apresentação. Como eu citei que podemos usar componentes React na apresentação, vamos fazer isso. Crie um arquivo chamado HelloWorld.js e insira o seguinte conteúdo:

import React from 'react';

const HelloWorld = () => {
  return (
    <div>Olá mundo! Meu primeiro slide!</div>
  )
}

export default HelloWorld;

Show de bola. Agora vamos inserir ele dentro do nosso arquivo deck.mdx.

Apresentação teste
---
import HelloWorld from './HelloWorld'

<div>
  <HelloWorld />
</div>

Para ver o resultado, basta executarmos o seguinte comando no terminal:

npm start

Se tudo estiver correto, um servidor de desenvolvimento subirá na porta 8080 com a sua apresentação:

Bem bacana, não é? O legal dessa abordagem é que tudo o que você já está acostumado a fazer no React é possível fazer aqui também. Desde estilos, propriedades e estados!

Conclusão

Existem muitas ferramentas gratuitas disponíveis na internet que podemos utilizar para montar apresentações diferenciadas. O mdx-deck se destaca por nos dar a possibilidade de usar React dentro do Markdown para montar os slides – tecnologias que já fazem parte do dia a dia de muitos desenvolvedores. Mas caso você não goste muito de React mas lhe agrada a ideia de usar código para fazer os slides, recomendo a leitura deste artigo. Nele, falo sobre outra ferramenta muito bacana, o Reveal.js.

Referências

• https://github.com/jxnblk/mdx-deck
• https://egghead.io/lessons/react-build-a-slide-deck-with-mdx-deck-using-markdown-react