Apresentando Hoodie: Desenvolvimento de pilha completa para desenvolvedores front-end

Se você ainda não ouviu falar sobre Hoodie, você deve dar uma olhada.

Hoodie é uma nova biblioteca progressiva para desenvolvedores front-end que adota algumas novas filosofias notáveis ​​que provavelmente transformarão o desenvolvimento de aplicativos e a experiência do usuário. O Hoodie coloca o controle sobre o desenvolvimento de aplicativos front-end de pilha completa completamente nas mãos dos desenvolvedores front-end e gurus da experiência do usuário, liberando-os das objeções técnicas às vezes inescrutáveis ​​de seus colegas de back-end. Além disso, os aplicativos Hoodie liberam os usuários dos grilhões da conectividade ininterrupta, permitindo que eles usem seu aplicativo em movimento, no ar ou no mar, sem nenhum cuidado.

Embora a plataforma ainda esteja em sua infância, ela já oferece algumas novas ferramentas poderosas que valem a pena experimentar para qualquer desenvolvedor front-end que queira se antecipar ao jogo. A equipe por trás do Hoodie tem experiência comprovada, tendo trabalhado em outros projetos de grande sucesso, como CouchDB, Async, Mustache.js e muitos outros.

Depois de aprender sobre o que a biblioteca de desenvolvimento full stack Hoodie tem em andamento e ficar muito empolgado com o projeto, decidi experimentá-lo por mim mesmo. Deixe-me falar um pouco mais sobre o Hoodie e mostrar um pouco do potencial que ele tem para desenvolver ótimos aplicativos.

O que é Hoodie?

Antes de mais nada, o que é Hoodie? O que há de tão bom nisso? Hoodie é uma plataforma e API de código aberto totalmente JavaScript que combina vários novos paradigmas poderosos em um pacote de desenvolvimento de pilha completa, para o benefício dos desenvolvedores que criam aplicativos Hoodie e dos usuários finais que interagem com eles. O principal desses conceitos são os movimentos “noBackend” e “Offline First”, juntamente com um forte processo orientado pela comunidade conhecido como “Dreamcode” para construir a API.

sem Backend

Hoodie acredita que a chave para um ótimo desenvolvimento de aplicativos front-end está nas mãos de especialistas em experiência do usuário e desenvolvedores que sabem como fazer um aplicativo parecer ótimo e ser um prazer de usar, mas que muitas vezes são restringidos por tecnicalidades de back-end que eles não têm controle. As interações fundamentais do servidor que existem desde sempre, como inscrição/login do usuário, armazenamento de dados ou envio de e-mail, continuam exigindo implementações personalizadas demoradas para cada novo aplicativo, forçando o desenvolvedor front-end a aprender e codificar para novos back-ends. acabar com as peculiaridades de cada vez.

Hoodie coloca o controle de volta nas mãos do designer e desenvolvedor de front-end, abstraindo completamente o back-end. Com o desenvolvimento de aplicativos front-end Hoodie, em vez de se preocupar com o lado do servidor, tudo o que você precisa se preocupar é com a API front-end simples e fácil de aprender e implementar incorporada ao Hoodie. Por exemplo, deseja inscrever um novo usuário? Isso pode ser feito em uma linha de código:

 hoodie.account.signUp(username, password);

Essa é a ideia por trás da iniciativa noBackend, com a qual a Hoodie está totalmente comprometida. noBackend significa que você não precisa de um desenvolvedor de back-end! Basta implantar o back-end do Hoodie em seu servidor e esquecê-lo .

Hoodie é escrito inteiramente em JavaScript. Seu back-end independente usa Node.JS com Apache CouchDB como seu banco de dados. Até o momento, os principais recursos que o Hoodie já implementou incluem inscrição e administração de usuários, carregamento de dados, armazenamento e e-mails. Esses recursos principais podem ser facilmente estendidos adicionando plug-ins adicionais do Node.js.

Código dos sonhos

Hoodie é uma API em primeiro lugar - é isso que torna o noBackend possível. A implementação do Hoodie pode mudar e melhorar com o tempo, mas a interface fornecida aos desenvolvedores permanecerá a mesma, para que você nunca precise se preocupar com isso.

Hoodie ainda está crescendo rapidamente, e novos recursos estão sendo adicionados o tempo todo. Hoodie, como outros projetos noBackend, usa uma abordagem orientada pela comunidade para projetar a API chamada Dreamcode. Essencialmente, você sonha com o código que gostaria de escrever e, se obtiver apoio suficiente da comunidade, o Hoodie o fará acontecer.

Essa abordagem de colaboração coletiva para projetar a API do Hoodie significa que o código do Hoodie é muito fácil de escrever e muito fácil de ler. É o código dos seus sonhos!

Off-line primeiro

Hoodie resolve muitos problemas para desenvolvedores de aplicativos front-end com sua API noBackend, orientada por Dreamcode. Mas um dos principais objetivos do Hoodie é resolver um grande problema para os usuários também - sua dependência muitas vezes incapacitante da conectividade.

À medida que a mudança para dispositivos móveis com aplicativos móveis continua, a antiga suposição de conectividade contínua baseada em desktop permaneceu inalterada. Durante todo esse tempo, a promessa foi de que onde quer que você vá, a internet estará lá. Até hoje, a perda de conectividade é tratada como uma anomalia, desligando a capacidade dos usuários de fazer qualquer coisa até que estejam online novamente. Mas, como todos sabemos, a rede de telecomunicações não cumpriu essa promessa. A conectividade sai pela janela em aviões, metrôs, estradas rurais e em inúmeras outras situações. E isso nas partes desenvolvidas do mundo! Em grandes áreas do planeta, o acesso estável à Internet é a rara exceção à regra.

O movimento Offline First busca uma harmonização graciosa com esse simples fato da vida. Com o Offline First, a não conectividade é apenas outro estado normal do aplicativo. Na verdade, é o estado padrão! Hoodie adota com entusiasmo essa filosofia. Por trás da API está uma implementação completa de front-end de armazenamento local temporário e sincronização automática e suave sempre que uma conexão se torna disponível.

Com o Hoodie, você pode postar comentários, enviar e-mails, editar contas e fazer praticamente qualquer outra atividade cotidiana, sem se preocupar em ter uma conexão. Todo o sistema de armazenamento e sincronização pode ser interrompido a qualquer momento, sem medo de perder dados.

É claro que esse modelo vem com seu próprio conjunto de desafios e abordagens de design exclusivos, mas a equipe da Hoodie é pioneira nas técnicas para resolver esses desafios.

Offline First é uma nova e empolgante abordagem ao desenvolvimento de aplicativos, em seus estágios iniciais de adoção. Ainda há muito a ser feito para desenvolver as técnicas necessárias. Dê uma olhada aqui para ver como Hoodie faz isso.

Um aplicativo simples usando capuz

Para demonstrar o uso do Hoodie como uma ferramenta de desenvolvimento front-end, decidi escrever um aplicativo simples que permitiria aos membros da nossa comunidade criar seus próprios eventos e publicá-los para outros engenheiros navegarem e adicionarem à sua agenda. Tenha em mente que o objetivo aqui é demonstrar o Hoodie e não fornecer um aplicativo pronto para produção. Você pode encontrar o código na minha página do GitHub.

Nos bastidores, o Hoodie é essencialmente a combinação de um lado do servidor construído em NodeJS e uma biblioteca JavaScript do lado do cliente. Além do processo simples de instalação e implantação, o desenvolvedor trabalhando no aplicativo trabalhará apenas no código do lado do cliente. A biblioteca integrada pode se comunicar com o lado do servidor sem que o desenvolvedor saiba nada sobre como ela funciona.

E se nosso aplicativo exigir que façamos algo personalizado no servidor? Sempre podemos criar plugins com capuz. Aqui estão mais algumas informações sobre plugins.

Começando seu aplicativo com capuz

O primeiro passo com o desenvolvimento de pilha completa de qualquer aplicativo Hoodie é usar a ferramenta de linha de comando Hoodie para nos tirar do chão:

 hoodie new toptalCommunity

Isso criará um aplicativo Hoodie inicializado que já possui algum código e já podemos executar nosso aplicativo! Se digitarmos

 cd toptalCommunity hoodie start

o navegador será aberto com um aplicativo de exemplo da equipe do Hoodie:

Eu fiz uma pequena arrumação neste momento. Os aplicativos de capuz atualmente vêm com Bootstrap e Prism, mas retirei as versões fornecidas. Eu não precisava do Prism e queria usar minha própria versão do Bootstrap para poder usar as fontes e JS que eu queria usar. Também fiz algumas alterações no main.css enquanto construía o aplicativo, para dar a ele seu próprio estilo e permitir meu modelo de bootstrap simples. Eu só usei jQuery para manipulação de DOM e eventos. Hoodie cuida de todo o resto.

Hoodie e Dreamcode

Enquanto eu estava trabalhando na criação deste aplicativo de exemplo, percebi rapidamente todos os benefícios de trabalhar com o Hoodie. Muitas das perguntas regulares que precisam ser respondidas ao iniciar um projeto simplesmente não estavam lá. Hoodie me permitiu apenas escrever código e ver o aplicativo ao vivo e funcionando.

Que estratégia devemos usar para o gerenciamento de contas de usuários? O plugin da conta Hoodie é a resposta. Como devemos armazenar nossos dados no back-end? A API de armazenamento simples do Hoodie lida com isso para nós, dando-nos a funcionalidade Offline First gratuitamente! Nenhum esforço foi necessário para fazer este aplicativo com capuz funcionar offline, ele simplesmente funciona.

Vamos mergulhar um pouco mais fundo em algumas das implementações:.

Gerenciamento de conta de usuário

Hoodie tem um plugin que cuida do gerenciamento de contas para nós chamado hoodie-plugin-users . A API não poderia ser mais simples.

Como adicionamos um novo usuário?

 function signUp() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signUp(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

Como logamos um usuário?

 function signIn() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signIn(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

Temos um usuário logado?

 if(hoodie.account.username) { // modify the page accordingly setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); }

Isso realmente não poderia ser mais simples. Ah, espere e como nossa interface do usuário reagirá a tudo isso? Hoodie tem eventos reservados para você

Reaja quando o usuário fizer login:

 hoodie.account.on('signin', function (user) { showMyEvents(); setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); });

Armazenamento de dados

Nosso aplicativo de exemplo permitirá que os usuários criem seus próprios eventos (dados privados) e os publiquem se quiserem (tornando os dados públicos), para que outros usuários possam participar do evento.

O Hoodie nos permite adicionar dados à sua loja local sem fazer login, então como ele sabe a qual usuário esses dados pertencem? Bem, ele o mantém local e não será sincronizado com o servidor até que o usuário tenha entrado. O Hoodie também garantirá que apenas esse usuário seja capaz de acessar esses dados.

Então aqui está como funciona:

 hoodie.account.signIn(email, password); //Let's sign in hoodie.store.add('myevent',event); //Store the data, hoodie takes care of using the session to make sure this data belongs to our user

É simples assim! Ok, então isso nos ajudaria a criar um evento, como vamos compartilhá-lo com outras pessoas? É aqui que o global share plugin nos ajudará. Temos que instalá-lo, pois não é um plugin padrão:

 hoodie install global-share

Agora que temos o plugin no lugar, vamos usá-lo! Temos que publicar os dados que já adicionamos ao nosso repositório de usuários no repositório global.

 hoodie.store.findAll('event').publish();

Isso sinalizará todos os eventos salvos para este usuário como públicos para que, quando consultarmos o armazenamento global, obtenhamos esses dados como resultado.

 hoodie.global.findAll('event'); //This is read-only

Na página Meus Eventos, o usuário pode criar eventos que são publicados diretamente na loja global.

 var event = {}; event.name = $('#txtName').val(); event.date = $('#txtDate').val(); event.time = $('#txtTime').val(); hoodie.store.add('event',event).publish(); 

Os eventos publicados são visíveis para todos, então agora qualquer usuário pode ver os eventos criados na página Eventos.

E os dados que não deveriam ser públicos? Armazenamos os eventos aos quais nosso usuário se inscreveu e os mostramos na página Eventos. Conforme o usuário clica no botão aplicar, é isso que é executado:

 var id = $(this).parent().parent().data('id'); hoodie.global.find('event',id) .done(function(event){ hoodie.store.add('myevent',event); });

As duas capturas de tela abaixo mostram duas janelas do navegador sendo executadas simultaneamente. No primeiro navegador, o usuário está conectado como usuário a@aa que se inscreveu no Evento A . Na segunda, o usuário b@bb está logado e se inscreveu no B Event .

Sondagem longa

Ao se inscrever em alguns eventos fornecidos pelo Hoodie, podemos usar de forma transparente técnicas como sondagem longa, o que dá ao nosso aplicativo um recurso interessante, pois diferentes usuários estão usando e colaborando nele.

Isso é realmente fácil de fazer. Em nosso aplicativo de exemplo, uma única linha fez o truque:

 hoodie.global.on('add:event', loadEvent);

Essa linha simples cuidará de uma longa pesquisa no servidor para verificar novos eventos que possam ter sido adicionados por outros usuários e adicioná-los à página Meus eventos.

Algumas preocupações

Depois de criar este aplicativo de exemplo para brincar com o Hoodie e seus recursos de desenvolvimento de aplicativos front-end, estou muito empolgado com o que ele tem a oferecer. No entanto, algumas questões claras se destacaram para mim.

Hoodie torna tão fácil para o desenvolvedor se comunicar com o servidor que qualquer desenvolvedor seria capaz de adicionar coisas ao nosso banco de dados apenas usando o console, que claramente tem grandes implicações de segurança e integridade de dados.

A biblioteca também ainda está faltando muitas coisas essenciais que você precisaria em qualquer aplicativo de produção, como validação de dados, URLs vinculáveis, uma estrutura de teste e compartilhamento privado de dados (embora eles já estejam fazendo um bom progresso neste último). Para usar o Hoodie em produção agora, teríamos que emparelhá-lo com outra solução como AngularJS, Ember ou qualquer uma das muitas outras soluções que nos ajudam a garantir que tenhamos um código JavaScript adequadamente estruturado e sustentável para nossos projetos Front-End. Como essas estruturas estão se aproximando da complexidade das tecnologias de back-end nos dias de hoje, essa solução anularia amplamente o propósito do Hoodie.

O futuro do moletom

Hoodie ainda está passando por um desenvolvimento pesado para resolver todos esses problemas. A equipe está trabalhando duro para implementar novos recursos e melhorar os existentes, a fim de deixar a plataforma pronta para o consumo em massa e, claro, esse processo leva tempo. Se você está planejando um novo aplicativo em grande escala agora, talvez queira encontrar uma plataforma diferente para construí-lo desta vez.

Enquanto isso, no entanto, certamente não é cedo demais para começar a mexer no desenvolvimento de aplicativos front-end usando o Hoodie, como espero ter demonstrado. Existem muitas ideias novas e poderosas já incorporadas ao Hoodie, que eu acho que provavelmente se tornarão muito populares. Ficar à frente do jogo com essas coisas provavelmente não é uma má ideia.

Se a equipe da Hoodie mantiver o trabalho duro, a API deve estar pronta para o horário nobre em pouco tempo. Se você quiser acompanhar o progresso da equipe do Hoodie, basta dar uma olhada no rastreador de marcos.

O Hoodie promete facilitar o desenvolvimento de ótimos aplicativos para movimentadores e agitadores. Se as ideias que o Hoodie incorpora, podemos ver a necessidade de uma equipe de desenvolvedores de back-end para cada novo projeto se tornar uma coisa do passado. Com projetos como esse, é fácil imaginar uma era de ouro para desenvolvedores front-end em um futuro não muito distante. Da mesma forma, os benefícios oferecidos aos usuários pelo Offline First ideal são um grande passo para a acessibilidade, estendendo o alcance do nosso estilo de vida móvel e conectado àqueles lugares onde a própria internet não chega.

Vá até o Hoodie para acompanhar o progresso do Hoodie e se tornar parte das novas e emocionantes mudanças que ele está se preparando para inaugurar.

Agradecimentos especiais à equipe do Hoodie. Logo Hoodie usado com permissão do Projeto de código aberto Hoodie