Mavo e seus recursos para desenvolvimento de aplicações web

PorReinaldo Silotto em 18/09/2017 no site iMasters

Mês passado, falei aqui no iMasters do Mavo, uma biblioteca capaz de ampliar e estender os recursos do HTML para ajudar no desenvolvimento de aplicações web reativas.

Nas últimas semanas venho estudando todos os recursos desta nova tecnologia e comecei a criar algumas Webapps apenas para testar seus recursos e principalmente entender como posso trabalhar profissionalmente.

Gravei, inclusive, um vídeo mostrando como criar uma página dinâmica integrada ao Github bem simples, mas que já consegue dar uma ideia de como tudo funciona:

Tudo parece tão simples no Mavo, que até chegamos a acreditar que seus recursos são limitados e pouco úteis, mas com o uso frequente, acabamos notando que não é nada disso. Basta deixa a mente aberta e as possibilidades irão brotar feito mágica.

Neste novo artigo, vou falar um pouco sobre os plugins disponíveis que podem transformar qualquer tipo de página estática numa Webapp repleta de interações e funcionalidades que irão a experiência do usuários muito mais rica.

Indo além com os plugins Mavo

Por si só, o Mavo já é incrível por deixar o HTML mais inteligente, mas com o uso de plugins, tudo fica ainda mais interessante. Existem poucos complementos por enquanto, mas com o amadurecimento do Mavo, tudo deve mudar e novas extensões surgirão naturalmente.

Você notará que os plugins estão todos em estágio inicial de desenvolvimento, mas já podem ser utilizados e melhorados. Tudo dependerá de como pretende utilizá-los.

Separei três plugins que considero indispensáveis para quem pretende desenvolver aplicações Mavo. Espero que gostem.

TinyMCE

Toda aplicação precisa de um editor de textos com recursos avançados para usuários e administradores. Por este motivo, o TinyMCE é um dos mais importantes. Este plugin disponibiliza uma área de edição completa para edição de textos. Sabe o que é mais legal? Basta uma linha de código para ativá-lo.

Mavo Firebase

O que mais dizer do Firebase? Ativando este recurso, é possível armazenar todas as informações da aplicação no Firebase. Vale lembrar que este complemento ainda está sendo desenvolvido, por isso alguns recursos ainda estão desabilitados ou até inativos.

PHP Backend

A ideia deste plugin é que o desenvolvedor utilize códigos criados anteriormente em novas aplicações Mavo, tudo isso para facilitar ainda mais a vida do programador.

Conclusão

Como falei ainda são poucos os plugins disponíveis, mas eles já são suficientes para notar como podem ser úteis e até dar uma ideia de como utilizar o Mavo em projetos grandes.

Pretendo falar mais desta nova forma de desenvolvimento web aqui no iMasters, mas preciso saber se consideram este conteúdo interessante, por isso deixem seus comentários para que possamos avançar.

Obrigado pelos peixes e até o próximo artigo!

Conheça o Mavo e descubra um jeito diferente de criar aplicações web

PorReinaldo Silotto em 28/08/2017 no site iMasters

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:

1

<html>

2

<head>

3	<title>Minha primeira APP Mavo</title>

4	<script src="https://get.mavo.io/mavo.js"></script>

5	<link rel="stylesheet" href="https://get.mavo.io/mavo.css">

6

</head>

7

<body>

8	<main mv-app="TarefasSilotto" mv-storage="local" mv-mode="edit">

9

<header>

10	<h1>Tarefas</h1>

11	<p>[count(done)] feito de [count(task)] totais</p>

12

</header>

13

<ul>

14	<li property="task" mv-multiple>

15

<label>

16	<input property="done" type="checkbox" />

17	<span property="taskTitle">Criar uma WebApp Mavo</span>

18

</label>

19

</li>

20

</ul>

21

</main>

22

</body>

23

</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.