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

Moletom com capuz é uma nova biblioteca progressiva para desenvolvedores front-end que adota algumas novas filosofias notáveis ​​que provavelmente transformarão tanto o desenvolvimento de aplicativos quanto a experiência do usuário. Hoodie coloca o controle sobre pilha completa , o desenvolvimento de aplicativos front-end totalmente nas mãos dos desenvolvedores front-end e gurus da experiência do usuário, libertando-os das objeções técnicas às vezes inescrutáveis ​​de suas contrapartes de back-end. Além disso, os aplicativos Hoodie libertam os usuários das amarras da conectividade ininterrupta, permitindo que eles usem seu aplicativo em trânsito, 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 estar à frente do 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 muito mais .

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

O que é Hoodie?

Em primeiro lugar, o que é Hoodie? O que há de tão bom nisso? Hoodie é uma API e plataforma 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 entre esses conceitos são os movimentos “noBackend” e “Offline First”, junto com um forte processo dirigido pela comunidade conhecido como “Dreamcode” para construir a API.

noBackend

Hoodie acredita que a chave para desenvolvimento de aplicativos front-end está nas mãos de especialistas em experiência do usuário e desenvolvedores que sabem como fazer com que um aplicativo tenha uma ótima aparência e seja um prazer de usar, mas que muitas vezes são restringidos por tecnicalidades de back-end sobre as quais 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 a exigir implementações personalizadas demoradas para cada novo aplicativo, forçando o desenvolvedor front-end a aprender e codificar para um novo back- acabar com peculiaridades a cada vez.

noBackend significa que você não precisa de um desenvolvedor back-end!

Hoodie devolve o controle ao designer e desenvolvedor do front-end, abstraindo o back-end completamente. 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 é a API front-end simples, fácil de aprender e implementar integrada 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);

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

Hoodie é escrito inteiramente em JavaScript. Seu back-end independente usa Node.JS com Apache CouchDB como seu banco de dados. No momento em que este livro foi escrito, os principais recursos que Hoodie já implementou incluem inscrição e administração do usuário, carregamento de dados, armazenamento e e-mails. Esse recurso principal pode ser facilmente estendido com a adição de plug-ins Node.js.

Dreamcode

Hoodie é antes de mais nada uma API - é 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ê não 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 voltada para a comunidade para projetar a API chamada Dreamcode . Essencialmente, você sonha com o código que gostar para escrever, e se conseguir apoio suficiente da comunidade, Hoodie fará isso acontecer.

Esta abordagem de crowdsourced API-first para projetar a API Hoodie significa que o código Hoodie é muito fácil de escrever e ler. É o código dos seus sonhos!

Offline Primeiro

O Hoodie resolve muitos problemas para desenvolvedores de aplicativos front-end com sua API noBackend baseada em Dreamcode. Mas um dos objetivos principais 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 baseada em desktop de conectividade contínua permaneceu inalterada. 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, fechando a capacidade dos usuários de fazer qualquer coisa até que estejam online novamente. Mas, como todos sabemos, a rede de telecomunicações falhou em cumprir essa promessa. A conectividade sai pela janela nos aviões, no metrô, nas estradas rurais e em inúmeras outras situações. E isso está nas partes desenvolvidas do mundo! Em grandes áreas do planeta, o acesso estável à Internet é o rara exceção à regra .

o Offline Primeiro o movimento busca uma harmoniosa harmonia com esse simples fato da vida. Com o Offline First, a falta de conectividade é apenas outro estado normal do aplicativo. Na verdade, é o estado padrão! Hoodie adota entusiasticamente esta filosofia. Por trás da API está uma implementação de front-end completa de armazenamento local temporário e sincronização automática e elegante sempre que uma conexão estiver disponível.

Com Hoodie, você pode postar comentários, enviar e-mails, editar contas e realizar quase todas as outras atividades do dia a dia, 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, este modelo vem com seu próprio conjunto de desafios e abordagens de design únicos , mas a equipe da Hoodie é pioneira nas técnicas para resolver esses desafios.

Offline First é uma nova abordagem empolgante sobre o 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 com capuz

Para demonstrar o uso do Hoodie como uma ferramenta de desenvolvimento de 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 navegar e adicionar à sua programação. 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 GitHub .

Nos bastidores, o Hoodie é essencialmente a combinação de um servidor integrado em NodeJS e uma biblioteca de cliente JavaScript. Além do processo simples de instalação e implantação, o desenvolvedor que trabalha no aplicativo trabalhará apenas no código do lado do cliente. A biblioteca integrada pode se comunicar com o 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 plug-ins Hoodie. Aqui estão mais algumas informações sobre plugins .

Primeiros passos do seu aplicativo com capuz

A primeira etapa 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á tem algum código no lugar e já podemos executar nosso aplicativo! Se digitarmos

cd toptalCommunity hoodie start

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

Eu fiz algumas tarefas domésticas neste momento. Aplicativos Hoodie atualmente vêm com Bootstrap e Prism, mas eu tirei 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 em main.css ao construir o aplicativo, para dar a ele seu próprio estilo e permitir meu modelo de bootstrap simples. Usei apenas o jQuery para manipulação e eventos DOM. Hoodie cuida de todo o resto.

Hoodie e Dreamcode

Enquanto estava trabalhando na criação deste aplicativo de amostra, 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 existiam. 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 de conta Hoodie é a resposta. Como devemos armazenar nossos dados no back-end? A API de armazenamento extremamente simples do Hoodie lida com isso para nós, dando-nos a funcionalidade Offline First de graça! Nenhum esforço foi necessário para fazer este aplicativo Hoodie 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. Oh, espere e como nossa IU vai reagir a tudo isso? Hoodie tem eventos reservados para você

Reaja conforme o usuário faz 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 sincroniza com o servidor até que o usuário tenha feito login. O Hoodie também garantirá que apenas esse usuário seja capaz de obter esses dados.

Então, é assim que 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, isso nos ajudaria a criar um evento, como vamos compartilhá-lo com outras pessoas? É aqui que o global share plugin vai nos ajudar. Temos que instalá-lo, pois não é um plugin padrão:

hoodie install global-share

Agora que temos o plugin, vamos usá-lo! Temos que publicar os dados que já adicionamos à nossa loja de usuários na loja 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, portanto, agora qualquer usuário pode ver os eventos criados na página Eventos.

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

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 em execução simultaneamente. No primeiro navegador, o usuário está conectado como usuário [email protegido] quem se candidatou ao Um evento . No segundo, o usuário [email protegido] está conectado e se inscreveu em Evento B .

Long Polling

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

Isso é realmente fácil de fazer. Em nosso aplicativo de amostra, uma única linha resolveu o problema:

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

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

Algumas preocupações

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

O 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, o que claramente tem implicações importantes de segurança e integridade de dados.

A biblioteca também está faltando muitas coisas essenciais que você precisa 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 este último ) Para usar o Hoodie na 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 temos o código JavaScript estruturado de maneira adequada e sustentável para nossos projetos de Front-End. Como essas estruturas estão se aproximando da complexidade das tecnologias de back-end nos dias de hoje, essa solução derrotaria em grande parte o propósito do Hoodie.

O Futuro do Hoodie

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

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

Se a equipe da Hoodie continuar com o trabalho duro, a API deve estar pronta para o horário nobre em nenhum momento. Se você quiser acompanhar o progresso da equipe Hoodie, basta dar uma olhada em seus rastreador de marcos .

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

Vá para o Página inicial do Hoodie para seguir o progresso do Hoodie e se tornar parte das novas mudanças emocionantes que ele está se preparando para inaugurar.

---

Agradecimentos especiais para a equipe Hoodie. Logotipo do Hoodie usado com permissão do Hoodie Open Source Project