Dentro do mundo do desenvolvimento de software, é dito comicamente que: “Com a linguagem de programação JavaScript, é possível fazer de tudo.”. E sim, é uma realidade não só para a linguagem JavaScript, quanto para todas as outras que seguem o paradigma de programação multi-paradigma.
Neste artigo, comentarei sobre um caso curioso com o qual me deparei: uma gama de bibliotecas construído usando a linguagem de programação JavaScript, visando criar um vídeo profissional com apenas linhas de código. Escolhi uma das bibliotecas para criar os vídeos utilizados no processo seletivo do projeto Nosso Olhar Solidário (NÓS).
O que é o projeto NÓS?
Nosso Olhar Solidário (NÓS) é um projeto sem fins lucrativos que visa ajudar o próximo. Para facilitar a conexão entre quem precisa de ajuda e quem deseja ajudar, foi desenvolvido primeiramente um aplicativo móvel que permite localizar facilmente oportunidades de doação e voluntários próximos. Seja para ajudar instituições ou pessoas, o objetivo do projeto é simplificar essa conexão.
Quer saber mais sobre o projeto? Veja o artigo escrito detalhando a minha experiência dos primeiros meses dentro do projeto:
O processo seletivo do NÓS
O processo seletivo dentro do projeto é um evento organizado com o principal objetivo de orientar futuros desenvolvedores voluntariados a aprenderem ferramentas frequentemente utilizadas pelo time de desenvolvimento. Os candidatos são guiados por meio de apresentações e seções de mentoria, visando orientação, ensino e esclarecimento de dúvidas.
Esse evento tem uma duração média de um mês, e os selecionados são aqueles que obtiverem as pontuações mais altas na avaliação, em que o maior peso recai sobre o projeto final descrito na plataforma do processo.
Na edição anterior, realizado no primeiro semestre do ano de 2023, as apresentações foram feitas ao vivo. No entanto, isso talvez tenha limitado tanto os candidatos quanto os membros do projeto. Além de precisarem se ajustar aos horários definidos na agenda pessoal, havia a sensibilidade a problemas pessoais e técnicos, o que poderia comprometer a qualidade da apresentação e, por consequência, a aprendizagem dos candidatos.
Dito isso, os membros da equipe de desenvolvimento decidiram que, para o processo seletivo do segundo semestre de 2023, as apresentações serão no formato de vídeos pré-gravados.
O problema
Diante disso, foi decidido que todos gravariam vídeos sobre seus respectivos temas, com ou sem pequenas edições. A minha responsabilidade ficou com a última edição, verificação e o envio do arquivo para a plataforma do YouTube, a fim de disponibilizá-lo para os candidatos.
No entanto, não possuo habilidades em edição de vídeo e desconheço softwares que possam auxiliar iniciantes a criar efeitos profissionais sem muito esforço. Além disso, o tempo disponibilizado não era suficientemente extenso para aprender a utilizar softwares de edição de vídeo do zero. Foi então que busquei ferramentas, utilizando o que eu mais dominava: programação.
O mundo estranho do JavaScript
Desde que entrei no mundo do desenvolvimento de software, venho observando as bibliotecas que surgem e os problemas que elas visam solucionar. A maioria das bibliotecas que observei pertence ao nicho da linguagem JavaScript. O que é interessante é a diversidade de soluções que são construídas utilizando essa linguagem. Já vi bibliotecas para criação de aplicativos nativos para desktops, dispositivos móveis, servidores, micro-serviços, soluções em nuvem, gerenciamento de bancos de dados e até mesmo vídeos.
Assim, decidi buscar bibliotecas que possibilitassem a criação de vídeos utilizando apenas linhas de código. A primeira biblioteca com a qual me deparei foi o Remotion. Essa biblioteca oferece a flexibilidade de extrair dados diretamente de APIs externas, renderizá-los dinamicamente usando a sintaxe JSX e CSS, por fim, exportá-los como arquivos de vídeo no formato .mp4.
Entretanto, a biblioteca possuía características que solucionavam vários problemas dinâmicos. Isso exigia um tempo e dedicação significativos para criar o que eu estava buscando. Visto que eu buscava flexibilidade nas animações e também economia de tempo, então, optei por procurar uma solução mais simples, focando apenas nas partes essenciais. Foi então que me deparei com o Motioncanvas.
A biblioteca Motioncanvas possui uma abordagem distinta em relação ao Remotion. Seu principal propósito é a criação de vídeos animados visando aprimorar a visualização, utilizando vetores e representações geométricas já declaradas dentro da biblioteca, em vez de componentes de marcação provenientes do HTML5 conforme feito dentro do Remotion.
Portanto, optei pelo Motioncanvas para solucionar a questão das animações.
Brincando com a biblioteca
Ao criar uma nova pasta em sua máquina, é possível iniciar a elaboração de animações utilizando o comando npm init @motion-canvas@latest para criar um projeto local.
Uma das vantagens notáveis desta biblioteca é a sua alta flexibilidade na modificação de elementos como a duração, o tempo, a posição e a função temporal (linear, cúbica, etc.).
Não entrarei nos detalhes de como o código em si funciona. Em vez disso, vou destacar os resultados que podem ser obtidos por meio dessa ferramenta. Por exemplo, o vídeo abaixo demonstra um trecho em que um membro é introduzido no vídeo. Todo esse processo foi realizado em 30 minutos, com menos de 100 linhas de código, utilizando a linguagem superset TypeScript.
Além de oferecer flexibilidade nas animações, a biblioteca também possui suporte nativo para a inclusão de áudios, vídeos e imagens na edição, permitindo a exportação no formato de vídeo no padrão .mp4.
Conclusão
Ao utilizar em conjunto com um software de edição de vídeos, consegui alcançar as expectativas que tinha desde o início. Embora se trate apenas de alguns segundos de animação, acredito que isso concede uma atmosfera totalmente distinta em comparação à ausência de uma introdução ao vídeo, apresentação dos membros e entre outros.
O aspecto mais importante de tudo isso é entender que as ferramentas são criadas para resolver problemas específicos. Saber utilizá-las com sabedoria é uma habilidade valorizada em qualquer indivíduo, especialmente entre os desenvolvedores. Além disso, é essencial considerar o custo total, que engloba fatores como tempo, esforço exigido, curva de aprendizado, suporte da comunidade e outros elementos ao introduzir uma nova tecnologia para uma equipe, por exemplo.
