Nesta série, estamos revivendo alguns dos melhores artigos publicados no Portal iMasters durante o ano de 2017. A ideia é que o material não se perca e você possa relembrá-lo, entrando em 2018 preparado para receber mais conteúdos tão bons quanto esse!
***
Nas últimas duas semanas, venho falando como utilizar o Visual Studio Code como IDE e editor de códigos, mas neste artigo vou falar de um outro assunto, o Mavo.
Conheci o Mavo no início de agosto e comecei a realizar alguns testes para entender como ele funciona e como posso utilizá-lo em projetos reais. A ideia por trás desta biblioteca é, no mínimo incrível, pois ajuda no desenvolvimento de aplicações dinâmicas utilizando basicamente HTML e a curva de aprendizado é ridiculamente pequena.
Consegui, em poucos dias, construir alguns Webapps bem simples, mas totalmente dinâmicos, trabalhando apenas com as ferramentas básicas disponíveis no Mavo.
E depois de testar e gostar do Mavo, resolvi produzir este texto de apresentação para todos os Devs que visitam diariamente o iMasters.
Mas, o que é o Mavo afinal?
O conceito do Mavo é bem simples de entender. Ele é uma biblioteca que ajuda a transformar páginas HTML simples em aplicativos web reativos sem a necessidade de um servidor com tecnologias proprietárias.
A ideia principal é ampliar a sintaxe padrão do HTML para construir aplicativos com gerenciamento, armazenagem e edição de dados.
Abaixo, um pequeno exemplo baseado na documentação oficial:
<html> <head> <title>Minha primeira APP Mavo</title> <script src="https://get.mavo.io/mavo.js"></script> <link rel="stylesheet" href="https://get.mavo.io/mavo.css"> </head> <body> <main mv-app="TarefasSilotto" mv-storage="local" mv-mode="edit"> <header> <h1>Tarefas</h1> <p>[count(done)] feito de [count(task)] totais</p> </header> <ul> <li property="task" mv-multiple> <label> <input property="done" type="checkbox" /> <span property="taskTitle">Criar uma WebApp Mavo</span> </label> </li> </ul> </main> </body> </html>
O código acima é bem simples e pequeno e, basicamente, é a construção simples de um gerenciador de tarefas que salva localmente as informações digitadas pelo usuário.
Lembre-se: você deve prestar bastante atenção para as duas chamadas obrigatórias do JS e CSS do Mavo no head da página.
Podemos, ainda, modificar este mesmo código para salvar as tarefas no Dropbox alterando apenas o “mv-storage”.
Incrivelmente simples, não?!
Personalização total
Você deve ter notado que todas as aplicações criadas com Mavo possuem uma barra superior com alguns botões.
Esta barra, assim, como tudo no Mavo, pode ser alterada e até desabilitada totalmente e pretendo falar sobre isso no próximo artigo, caso gostem deste. Por este motivo, quero saber o que acharam desta novidade e se gostariam de ver algo mais completo. Participem deixando seus comentários.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?