em Atualizações

Luanda: substituindo HTML, CSS e JS por Lua no Cordova

Atualização em 20/03/2018: Progressos em Luanda

Enquanto Red matura, estou usando Lua e adorando. Tenho desenvolvido pequenos aplicativos para mineração de artigos científicos no Scielo (divulgarei em breve), scripts para organizar rotinas (imaginem arquivos batch com esteróides), testes da biblioteca de jogos LÖVE2D e me divertindo horrores com Pico-8.

Meu deslumbramento com Lua tem relação com a facilidade de aprender, com o potencial da estrutura de dados da linguagem (tables são amor) e com a leveza do interpretador, seja embedado ou stand alone (~500kb).

Comprei o livro oficial, escrito pelo Prof. Roberto Ierusalimschy da PUC-Rio, cujas vendas ajudam na manutenção do projeto. Vale cada centavo: não é um livro sobre a linguagem (sintaxe, API etc.), mas sobre pensar e resolver problemas utilizando Lua. É meu estilo preferido de texto, na linha de Kernighan e Ritchie ou Squeak by Example. O fato de poder utilizar a API em C é outro motivo de entusiasmo. Sinto muita falta de programar em ANSI C, sem o bloatware gigabáitico do Visual Studio Community (4gb para “começar”), direto no prompt e com editores de código minimalistas.

Não me entendam mal. Visual Studio, Code::Blocks e Eclipse são super ferramentas. O problema é precisar instalar gigabytes para imprimir um “eaê” na tela, sem contar o sequestro da memória RAM da máquina. No século passado, aprendi a programar em C num 386 DX 40 com 2mb de memória RAM e HD com capacidade de armazenar 40mb. Antes disso, programei em Basic no MSX1.1 (fitas K7?) e depois no MSX2.0+ (pilhas de disquetes). Memória era preciosidade, processamento idem. Na era do Javascript, o V8 assalta sua RAM com a desculpa de tornar essa linguagem (sem vergonha) onipresente.

V8 <3 sua memória RAM

Hoje, MinGW (versão para Windows das ferramentas GNU) é suficiente para o que preciso. Há emulação de terminal POSIX (MSYS) para compilar sem transtornos a maior parte das bibliotecas em C. A instalação é simples, você baixa apenas o que “acha” que precisa e terá algo entre 20mb e 1gb na sua máquina.

Usar (esses gigabytes) para… ?

Em 2012-2013, quando desenvolvi o Pen-C, utilizei basicamente o MinGW, GTK+ (biblioteca de interface gráfica com o usuário) e o Tiny C Compiler (TCC) como interpretador de código. A ideia era simples: oferecer um ambiente minimalista para aprendizagem dos princípios do pensamento computacional usando a linguagem C, em vez de dialetos de Java (Processing), Javascript (ProcessingJS), Python (Drawbot) ou Lisp (Racket).

Interface do Pen-C (2012-2013)

O TCC é impressionante: tudo (compilador, linker, assembler) em cerca de 100kb, com código-fonte capaz de ser compilado em praticamente qualquer lugar (Windows, Linux, Mac…). Considerando que C é uma linguagem para programação de sistemas, é possível escrever do “eaê” na linha de comando a sistemas operacionais inteiros (com um pouco de Assembly aqui e ali, claro). O Pen-C foi minha primeira experiência de inserir uma linguagem de programação como script em aplicações. Além da programação do aplicativo (janelas, salvamento de arquivos, geração das imagens e animações), havia a programação dos programas que gerariam as animações e imagens. Usei o TCC como biblioteca que interpretava os scripts em C e criava as animações. Nunca tinha feito nada parecido – deu um trabalho descomunal, aprendi bastante e achei que nunca mais faria nada com aquilo… Até que em 2016, comecei a treinar a equipe do Loop para desenvolver sites e aplicativos híbridos (Cordova, Adobe Phonegap, o finado Intel XDK e recentemente Nativescript).

A dieta foi composta principalmente por HTML, CSS e pitadas de Javascript. De lá para cá, fizemos cinco aplicativos com objetivos e públicos bem distintos, sempre com o mesmo dilema: quando se tratam de apps de conteúdo (textos, imagens, navegação simples), os estudantes de Design com conhecimentos medianos de HTML e CSS dão conta. Quando a complexidade aumenta, especialmente na interação com o usuário, Javascript se faz cada vez mais presente e fica cada vez mais difícil para o designer que não conhece lógica de programação.

HTML, CSS e Javascript são tecnologias utilizadas, em certa medida, de forma emburrecedora. A facilidade de estruturar interfaces “bonitas” utilizando bibliotecas e frameworks novos que aparecem todo dia (todo dia, mesmo!), em paralelo à enxurrada crescente de ferramentas de prototipagem, afastam estudantes de Design da possibilidade darem um passo atrás e compreenderem princípios computacionais mais gerais, aplicáveis a qualquer linguagem, ambiente ou framework.

Flash MX ActionScript Bible, de 2002 – 1272 páginas

Usando Cordova ou Phonegap, o estudante pode construir aplicativos de conteúdo inteiros sem lidar com um só dilema de lógica, de estruturas de dados, ou de paradigmas de programação. Tornam-se marcadores, em vez de programadores. Diferente do flasheiro dos anos 2000, que começou animando no Macromedia Flash usando mouse e keyframes e terminou fazendo miséria interativa com ActionScript, o HTML, CSS e Javascript necessários para colocar apps no mundo não provocam o salto para explorar questões computacionais mais ricas. Não defendo que linguagens de programação devam ter bíblias de milhares de páginas (as de Javascript escoram portas), e sim que o processo deve começar nas interfaces (zona de conforto) e caminhar continuamente em direção aos temas que citei.

Sou parcialmente responsável por reforçar este processo de poucos horizontes. Motivado pela necessidade de treinar estudantes, criei duas ferramentas para ensinar HTML, CSS e Javascript – CodeLoop e Codesign. Ambas são ambientes de livecoding, onde o aprendiz vê imediatamente o resultado de suas ações, sem precisar compilar nada; as duas rodam no browser, dispensando downloads e instalações; as duas têm Javascript na camada mais baixa; nenhuma é um exemplo de engenharia de software, pelo contrário; materializam minha abordagem pedagógica de ensinar iniciantes a programar colocando a mão na massa desde cedo, aumentando a espiral da complexidade gradualmente.

A espiral de aprendizagem da computação criativa, de Mitch Resnick, criador do Scratch.

Na prática, CodeLoop e Codesign são demonstrações para meus estudantes sobre o que eles poderiam criar usando as mesmas ferramentas, aplicando os tais “princípios”. Minha responsabilidade começa exatamente neste ponto: muitas vezes, não consegui dar conta, em sala de aula ou no laboratório, de incentivar o “salto”. HTML, CSS e Javascript são um trio muito rico para as aplicações web (ou perversões criativas deste modelo, como o Cordova), ponto.

É perfeitamente possível discutir temas como laços, condicionais, variáveis, operadores, estruturas de dados, paralelismo e mesmo depuração de código usando Javascript no browser. Porém, minha experiência pedagógica sugere que o custo é muito alto. A linguagem entra gritando na sala, feito elefante branco, senta na frente do aluno e empaca (Scratch ensina muito mais com muito menos, mas é muito “brinquedo” para universitários). HTML e CSS desaparecem do contexto, evidenciando a concepção apartada dos padrões web (estrutura cá, aparência lá e eventos acolá, cada com sua sintaxe e semântica próprias). E o estudante precisa aprender a lidar (e resolver) questões que não compreende – orientação a objetos (de funções e dados), tipagem dinâmica, a máquina virtual, onde o script “vive” (browser? VM? Node…)? Na maioria das vezes, a turma desiste de discutir esses temas, ignora o elefante branco e se concentra no foco “tradicional” dos cursos de Design – a interface (e tome HTML, CSS e jQuery). Processign falha por motivos semelhantes.

Alternativas e a ideia de Luanda

Esta é a quarta tentativa como docente (a quinta da vida, se o phpTurtle contar) de elaborar um ambiente pedagógico para discutir princípios do pensamento computacional. Como as anteriores, a ideia parte da minha própria experiência como docente de linguagens de programação no curso de Design da Ufes e no cotidiano do meu laboratório de pesquisa.

Luanda (chamada assim por remeter a “Lua” e à cidade por onde mais se traficaram negros de Angola para o Brasil no período colonial) aposta na hipótese de integrar os padrões web apartados (HTML, CSS e JS) desaparecendo com eles. Na prática, estou utilizando uma implementação em Javascript do runtime da linguagem Lua (Fengari) e reconstruindo componentes de interface, interação com usuário, acesso a arquivos, rede e todo o resto como se fossem a API de um sistema operacional ou console.

Editor de scripts (online)

Mais na prática ainda, estou criando abstrações sobre o DOM, tags HTML e seletores CSS, permitindo a escrita de programas como aqueles que utilizam bibliotecas encontradas em linguagens de mais baixo nível (ex: C e GTK+, IUP e Lua). O aplicativo pode ser integralmente escrito em Lua, utilizando sintaxe e semântica únicas para as visualizações, controles ou modelo, sem uma linha sequer de HTML, CSS ou Javascript. Como Lua é uma linguagem simples, “sem baterias incluídas”, posso tratar o smartphone como plataforma a ser programada, abstraindo a existência do Cordova (e do browser silencioso exibindo HTML, CSS e JS), permitindo ao estudante construir gradualmente suas próprias abstrações, adotar ou não orientação a objetos, paradigmas de programação A ou B e assim por diante.

App (Android 6.0)

Há inúmeros exemplos de aplicações de Lua com a mesma filosofia (LÖVE2DPico-8 são minhas favoritas), e iniciativas semelhantes em outras linguagens. Também defini como prioridade e já implementei o recurso de live coding, que existe parcialmente no Phonegap (Phonegap Developer) e em soluções de desenvolvimento de apps nativos. A partir do aplicativo instalado no smartphone Android (ou iOS, quando eu resolver pagar a licença da Apple), o estudante pode editar e visualizar os resultados de seus códigos imediatamente, sem precisar reempacotar ou recompilar o projeto. Para quem usa Cordova diariamente, tal recurso recupera duas ou mais horas de compilação diárias e a saúde do PC (menos gigabytes de coisas instaladas, mais RAM livre).

Por enquanto, o projeto a ser transformado em aplicativo ainda depende do Cordova, mas apenas para gerar o primeiro apk a ser instalado no smartphone. Desenvolvi um script em Lua que altera a estrutura dos arquivos no projeto Cordova e injeta as dependências necessárias para que o editor online (sim, online) permita a escrita de código e visualização dos resultados em tempo real no smartphone. Uma vez finalizado, o código pode ser incorporado em definitivo ao pacote do aplicativo ou permanecer atualizável remotamente.

A principal vantagem está em ter apenas um aplicativo instalado e testar infinitas possibilidades de códigos e projetos. Progressos em curso:

  • Construção de biblioteca de interface gráfica com o usuário abstraindo HTML, CSS e JS, imitando a sintaxe de IUP, GTK+ ou wxwidgets.
  • Construção de biblioteca de primitivas gráficas sobre Canvas, permitindo a criação de jogos e animações usando pseudo-framebuffers;
  • Adaptação de plugins da base Cordova e criação das abstrações necessárias para acesso ao hardware via Lua (vibrar, acelerômetro, GPS, sinal de rede…);
  • Elaboração de documentação decente e exemplos para os itens anteriores;
  • Criação editor de código offline minimalista, para a criação dos projetos Cordova/Luanda e edição local dos scripts Lua e incorporação ao aplicativo;
  • Reconstrução, gradual, de Luanda em Lua: a aplicação que injeta códigos nos projetos é feita em Lua; o runtime no smartphone é escrito em JS; o editor e API online são escritos em PHP, HTML, CSS e JS. São muitas linguagens para manter e uma cabeça só para gerir todas elas 😛

Por enquanto, utilizarei Luanda apenas no Loop. Assim que o projeto estiver suficientemente maduro, pretendo lançá-la como produto do laboratório.

Este projeto seria impossível sem contribuições infinitas da comunidade Lua, que apesar de pequena é extremamente envolvida e utiliza licenças extremamente liberais em tudo que produz.

Vamos, 2018! 🙂

Comente

Comentário

Webmentions

  • Progressos em Luanda – Hugo Cristo, Designer

    […] desenvolvimento de Luanda continua (lentamente), nos intervalos das atividades do pós-doutorado. O projeto evoluiu bastante, […]