Conheça o Ember.js

De acordo com os autores do Ember, o framework foi concebido para “criar aplicações ambiciosas na web”. Não só as aplicações web de uma única página (SPAs), mas também aplicativos de desktop e móveis. A Apple Music é um dos exemplos mais notáveis ​​de um aplicativo criado com o Ember, um serviço de transmissão de música capaz de suportar milhões de usuários.

O Núcleo do Ember foi criado pensando em um aspecto do desenvolvimento web que irritava seus fundadores. Olhando para o cenário de framework JavaScript, os autores do Ember queriam solucionar algumas falhas que percebem em outros frameworks. Eles sentiram que a capacidade de marcar e compartilhar URLs na web tornou-se mais um recurso de estrutura secundária. O roteamento está sendo visto como em segundo plano, por isso eles o tornaram prioridade no Ember.js.

Além disso, a abordagem popular do model-view-controller (MVC) para frameworks back-end como Rails e .NET não agradava a equipe do Ember. Outras estruturas de MVC JavaScript tendem a se concentrar na View, com os aspectos do Model e do Controller (ferramentas de dados e back-end) mais como segundo plano. A equipe do Ember queria abordar essas questões no Front-End e fornecer uma sensação mais semelhante a uma área de trabalho e que fosse mais fácil de trabalhar.

Embora possa não ter tanta visibilidade quanto o AngularJS ou BackboneJS, o Ember provou seu valor e tem sido usado por desenvolvedores em empresas como Zendesk, LivingSocial, Yahoo !, Timbuk2 e Square.


Do ponto de vista de um desenvolvedor, aqui estão algumas razões para amar a estrutura do Ember.

  1. Com a ajuda do transpiler de JavaScript Babel, o Ember permite que os desenvolvedores usem os futuros padrões de JavaScript e os transpilam para uso nos navegadores de hoje.
  2. “Convenção acima da configuração”. O Ember tem boas práticas bem definidas sobre como é estruturado. Isso significa que os desenvolvedores podem se concentrar mais na funcionalidade de suas aplicações e recursos únicos, e menos em reinventar a roda com código tedioso. Há mais construções e menos técnicas. Simplificando, Ember.js é construído para produtividade e suas convenções são o núcleo disso. É projetado com os desenvolvedores em mente, com muitas APIs incríveis para ajudá-los a obter aplicativos construídos de forma rápida.
  3. Ember é o WordPress do JavaScript. Enquanto o Ember é mais novo e menor em termos de base de usuários, a equipe principal está absolutamente comprometida com a compatibilidade com versões anteriores. A compatibilidade com versões anteriores é uma filosofia de fazer alterações em um software através de novas versões, mas nenhuma alteração que faria com que as versões mais antigas parem de funcionar – o sistema de gerenciamento de conteúdo do WordPress permanece e é extremamente bom. As principais atualizações de versão no Ember removem as depreciações, mas não adicionam novos recursos com alterações que quebrarão aplicativos usando versões mais antigas do framework.
  4. Modelos Ember. Construído naquela linda UI são os modelos do Ember, que são escritos com a linguagem de modelos do Handlebars. Handlebars é nomeado pelo uso de suportes de duas chaves “{ }” e permite que os desenvolvedores usem menos código. Os modelos criam muitos recursos possíveis no Ember, como componentes, tomadas e expressões. As placas também são atualizadas automaticamente se alguma coisa mudar nos dados subjacentes. Isso ocorre porque dentro da arquitetura MVC do Ember, seus modelos são suportados por modelos (o M do MVC ou a camada de dados) e eles suportam a ligação de dados. As atualizações para o modelo são imediatamente refletidas no modelo, sem trabalho extra.
  5. com. Este é o repositório de plugins do Ember, contribuído pela comunidade de desenvolvedores Ember.js. Tem tudo que você precisa. Precisa de um módulo de autenticação? Basta executar “$ ember install ember-simple-auth” e você está fazendo 90%. Outros plugins na biblioteca addons incluem ferramentas para APIs JSON, cache, solicitações AJAX e funcionalidades de preenchimento automático.
  6. Ember-CLI. Ember e Ember-CLI são duas coisas diferentes inteiramente, mas nenhuma delas seria totalmente total sem a outra. O Ember-CLI é um utilitário de linha de comando que acompanha a pilha de software da estruturo Ember. Para o não desenvolvedor, uma CLI ou uma interface de linha de comando, é uma interface visual simples que permite aos humanos interagir com o sistema operacional de um computador. O Ember-CLI é um foguete de produtividade, com suporte para ferramentas como o CoffeeScript, Handlebars, MENOS e Sass. O Ember também vem com a opção de usar outros componentes de sua pilha de software, incluindo o Ember Data, uma biblioteca de dados e o Ember Inspector, uma extensão de teste para depurar aplicativos.

O que é Aurelia?

Aurelia é uma coleção de módulos de JavaScript modernos, que, quando usados ​​em conjunto, funcionam como uma poderosa plataforma para criar aplicativos de navegador, desktop e móveis, todos de código aberto e construídos em padrões de web aberto.

Ao invés de ser uma estrutura monolítica, o framework é dividido em uma coleção de módulos orientados a recursos. Exemplos de módulos de recursos incluem metadados, injeção de dependência, binding, templating, roteador e muito mais. Cada módulo é escrito usando ECMAScript (aka JavaScript) ou TypeScript (um superconjunto estrito de JavaScript que adiciona verificação de tipo de compilação). Muitos desses módulos podem ser usados ​​individualmente em qualquer tipo de projeto de JavaScript, incluindo Node.js.

Criação de aplicativos

Os módulos de Aurelia podem ser usados ​​para muitas finalidades, mas seu verdadeiro poder reside em usá-los juntos como uma plataforma de aplicativos de front-end. Se o seu objetivo final é criar experiências ricas e envolventes para seus clientes, encontrando ou excedendo o que é encontrado em aplicações nativas modernas, a Aurelia oferece os meios.

Através de seu rico modelo de componentes, composição dinâmica de UI, roteamento e extenso conjunto de plugins, a Aurelia fornece um conjunto abrangente de recursos e ferramentas para criar qualquer experiência de front-end que você possa imaginar, seja você visando o navegador, celular ou desktop.

Você pode achar que o Aurelia tenha um modelo de licenciamento caro ou seja de origem fechada, mas isso não é verdade. Ele é grátis e seu código é Open Source sob a licença MIT, uma licença muito permissiva usada por muitos projetos populares da web hoje.

Tanto os kits de inicialização e documentação do Aurelia estão disponíveis sob a licença Creative Commons. Também possui um Contrato de Licença de Colaborador (CLA) para aqueles que desejam se juntar à equipe principal trabalhando na Aurelia. Em última análise, isso significa que você pode usar Aurelia sem medo de repercussões legais e podemos construí-lo com a mesma confiança.

Benefícios técnicos

Existem muitas vantagens técnicas para usar a Aurelia. Neste artigo, você encontrará uma lista de pontos que pensamos serem interessantes. Em conjunto, hoje não existe outra estrutura de SPA que possa combinar Aurelia.

JavaScript moderno:

  • Totalmente escrito em ES2015 + baseado em padrões e TypeScript.
  • Compatível com a tecnologia JavaScript que virão nas futuras especificações do ECMAScript.
  • Suporte total tanto para Babel como para TypeScript.

DOM moderno

  • Aproveita as mais modernas API de DOM.
  • Bare “ao uso de metal” do DOM; nenhum invólucro de DOM para garantir o máximo desempenho e eficiência de memória.
  • Polvilhe automaticamente o DOM, quando apropriado, para suportar navegadores mais antigos.

Ferramentas modernas

  • Suporta ferramentas de construção modernas através da Aurelia CLI e Webpack, out-of-the-box.
  • Funciona bem com poderosas ferramentas de teste como Karma e Protractor.
  • Fornece um painel de depuração personalizado do Chrome, bem como um plugin do Código VS.

Qualidade do código

  • O código-fonte é coberto por um extenso conjunto de testes unitários.
  • Toda a fonte é totalmente equipada para o estilo e a consistência do uso de recursos em todas as partes.
  • Os arquivos d.ts do TypeScript e a documentação completa da API são fornecidos para todas as bibliotecas.

 

Veja mais no site deles: http://aurelia.io/

E para exemplos: http://aurelia.io/docs/overview/technical-benefits

Conheça o Handlebars.js

[download id=”233″]

O Handlebars fornece as funcionalidades necessárias para permitir que você crie modelos semânticos de forma eficaz sem frustração. Ele é amplamente compatível com os templates Mustache e na maioria dos casos, é possível alternar entre os dois sem demais problemas.

Vou falar um pouco sobre o sistema, mas caso você queira saber mais, confira o site oficial do Handlebars no linkhttp://www.handlebarsjs.com e a demonstração ao vivo em http://tryhandlebarsjs.com/ para saber tudo o que o ele pode fazer por você.

Uso

Em geral, a sintaxe dos modelos Handlebars.js é um superset do Mustache. Depois de ter um modelo, use o método Handlebars.compile para compilar o modelo em uma função JavaScript. Esta função gerada leva um argumento de contexto que será usado para renderizar o modelo.

Segue abaixo um exemplo simples, para executa-lo

<html>
<head></head>
<body>
  <script src="handlebars.js"></script>
  <script>
    let exemplo = "<p>Olá, meu nome é {{nome}}. Eu sou de {{cidadeNatal}}. Eu tenho "
        + "{{filhos.length}} filhos:</p>"
        + "<ul> {{#filhos}}<li>{{nome}} tem {{idade}} anos</li>{{/filhos}}</ul>";
    let template = Handlebars.compile(exemplo);
    let dados = {
        "nome": "Paulo",
        "cidadeNatal": "Cidade, RS",
        "filhos": [{
        "nome": "João", "idade": "12"
        }, {
        "nome": "Maria", "idade": "4"
        }]
    };
    let resultado = template(dados); document.writeln(resultado);
  </script>
</body>
</html>

Templates pré-compilados

O handlebars permite que os templates sejam pré-compilados e incluídos como código JavaScript ao invés de templates handlebars, permitindo que as aplicações carreguem mais rápido. Para mais detalhes veja esse LINK

Principais diferenças entre o Handlebars.js e o Mustache

O Handlebars.js incrementa algumas funcionalidades adicionais para fazer o desenvolvimento de templates mais fácil e também muda alguns detalhes de como o “partials” funciona. Segue abaixo alguns itens que mudam entre os dois.

  • Caminhos aninhados
  • Helpers
  • Expressões de bloco
  • Valores literais
  • Comentários delimitados

As expressões de bloco têm a mesma sintaxe que as sessões do Mustache, mas não devem ser confundidas umas com as outras. Sessões são similares com o “each” implícito ou com “statement” dependendo dos dados inseridos e os “helpers” são pedaços de código explícitos que podem implementar qualquer comportamento que quiserem. A documentação do Mustache define o comportamento exato das sessões. No caso de haverem conflitos com os nomes, os “helpers” recebem prioridade.

Performance

Em um teste de performance bruta, o templates pré-compilados do Handlebars.js (na versão original do Handlebars.js) renderiza na metade do tempo dos templates do Mustache. Seria uma pena se fosse de qualquer outra forma, pois eles foram pré-compilados, mas a diferença na arquitetura tem diversas vantagens de performance. A nova versão do Handlebars é mais rápida que a original a ponto de que diversos testes de performance independentes registraram uma diferença de 5 a 7 vezes mais rápido que o equivalente em Mustache.

Nota

Este é um resumo traduzido diretamente do site do handlebars. Para mais detalhes, acesse o site http://handlebarsjs.com/ e tambémhttps://github.com/wycats/handlebars.js

Veja qual a diferença entre Framework e Biblioteca

Está pergunta é muito comum as vezes é a causadora de discussões em círculos de desenvolvedores pois framework e bibliotecas podem ter significados diferentes para pessoas diferentes e em momentos diferentes. No entanto existe uma definição geral que tentarei descrever aqui com a finalidade de simplificar e esclarecer cada um.

Biblioteca

Uma biblioteca é uma coleção organizada de funcionalidade uteis. Um exemplo de biblioteca padrão poderá incluir funcionalidades para manipular string, datas, eventos, animações, etc… Cada uma destas funções retornará valores para a aplicação que a está invocando que então poderá ser manipulada de acordo com a necessidade.

Bibliotecas normalmente fornecem um nível mais alto de abstração que serve para facilitar implementações que sofrem inconsistências devido a variáveis externas. Por exemplo, uma chamada AJAX normalmente depende da API XMLHttpRequest mas a mesma precisa de várias linhas de código para lidar com as inconsistências entre os navegadores. Por isso uma biblioteca pode fornecer um método ajax() que lidará com essas mudanças, deixando você livre para se preocupar com a implementação da lógica de negócio.

Uma biblioteca pode reduzir o tempo de desenvolvimento de pois não a necessidade de se preocupar com detalhes. Por outro lado, um bug dentro da biblioteca pode se tornar difícil de descobrir e corrigir, não há garantias que os responsáveis pela biblioteca irão corrigi-lo em tempo hábil e uma atualização pode mudar a API de forma a causar mudanças em seu código.

Frameworks

Um framework é o esqueleto de uma aplicação que requer que você utilize um design de software especifico e insira sua própria lógica em certos momentos. As funcionalidades como eventos, armazenamento e ligação de dados são fornecidas prontas para o desenvolvedor.

Comparado com uma biblioteca, o nível de abstração é mais alto e somado as diversas funcionalidades prontas, o desenvolvimento dos primeiros 80% será incrivelmente rápido. Por outro lado, os 20% restantes podem ser mais difíceis que a primeira parte se eles saírem das limitações do framework, atualizações são muito difíceis de serem implementadas e ao mesmo tempo o código se torna obsoletos relativamente rápido.