Estamos publicando a segunda parte da tradução do material dedicado às cinco melhores ferramentas JavaScript para o desenvolvimento de partes de projetos da Web do lado do cliente. A
primeira parte tratou da biblioteca React e da estrutura Angular. Aqui discutimos Vue, Ember e Backbone.
3. Vue
As idéias por trás do Vue vêm de Angular e React, mas o Vue é, em muitos aspectos, melhor do que essas duas ferramentas de desenvolvimento front-end. O Vue foi baixado mais de 40 milhões de vezes este ano. Um relatório recente do Snyk JavaScript Frameworks Security foi lançado. Destina-se principalmente a pesquisar a segurança do React e do Angular, mas havia um lugar para estudar outros projetos. No Vue, neste relatório, você pode descobrir o que se sabe apenas sobre quatro das
vulnerabilidades imediatas que foram corrigidas.
Se você não conhece o Vue, veja alguns fatos importantes sobre essa estrutura.
Ao trabalhar com o Vue, a lógica do componente, seu layout e estilos são armazenados em um arquivo. Exceto pelos estilos, os materiais do projeto também são armazenados no React. A interação dos componentes no Vue é fornecida por meio de objetos que armazenam as propriedades e o estado dos componentes. Também essa abordagem, antes de aparecer no Vue, foi usada no React.
O Vue, que o torna semelhante ao Angular, permite combinar a marcação HTML e o código JavaScript. Para integrar dados de componentes em um modelo, você precisa usar as diretivas do Vue. Como
v-bind ou
v-if .
Uma das razões pelas quais o Vue deve ser considerado uma alternativa válida para o React é por causa de como o estado do aplicativo é organizado aqui. Nos projetos React, ao usar o pacote configurável React + Redux, à medida que o aplicativo aumenta de tamanho, os procedimentos necessários para gerenciar seu estado se tornam mais complicados. Isso pode se dever ao fato de que o programador, em vez de trabalhar no próprio aplicativo, precisa gastar muito tempo configurando mecanismos Redux. O Vue usa a biblioteca Vuex para gerenciar o estado. É semelhante ao Flux e criado especificamente para o Vue. Trabalhar com isso é muito mais conveniente do que com o Redux.
Se você está tentando fazer uma escolha entre o Vue e o Angular, as razões pelas quais você pode preferir o Vue podem ser reduzidas ao fato de o Angular, em comparação com o Vue, parecer um projeto de larga escala super complicado, cuja natureza é o desejo de limitar o desenvolvedor. O Vue é muito mais simples que o Angular e não limita tanto os programadores.
Outra vantagem do Vue sobre o Angular e o React é que você não precisa aprender um novo idioma para trabalhar com essa estrutura.
▍ Elementos do ecossistema Vue
Vamos dar uma breve descrição do ecossistema em que aquele que escolhe Vue cai:
- Para controlar o estado dos aplicativos Vue, é usada a biblioteca Vuex, baseada em conceitos relacionados ao Flux.
- Existem ferramentas de desenvolvedor para Chrome e Firefox que facilitam a criação de projetos Vue.
- O ecossistema do Vue possui um
vue-loader para webpack, permitindo que você use componentes do Vue como componentes de arquivo único. - Para trabalhar com APIs do servidor, você pode usar o cliente HTTP
vue-resource e a biblioteca Axios. - O Vue suporta a estrutura Nuxt.js, que inclui suporte para aplicativos que são renderizados no servidor. O Nuxt.js pode ser considerado um concorrente da Angular Universal.
- Você pode usar a biblioteca Weex para desenvolver aplicativos móveis baseados no Vue.
O Vue é um ótimo framework que supera os outros em termos de usabilidade. Talvez eu mesmo mude para o Vue no futuro próximo. Essa estrutura não é tão complexa quanto React e Angular e também é adequada para o desenvolvimento de aplicativos de vários tamanhos.
4. Brasa
O Ember 3.13 foi lançado este ano. Muitas coisas novas apareceram nesta versão do framework. A brasa é semelhante à espinha dorsal e angular. É também uma das estruturas JavaScript mais antigas. Mas, apesar disso, em termos de oportunidades, ele não fica atrás de seus concorrentes mais jovens. Por exemplo, ele suporta a tecnologia de alteração de propriedade rastreável, o que facilita o monitoramento de alterações no estado do aplicativo e a visualização dessas alterações.
O Ember possui uma arquitetura bastante sofisticada que permite criar rapidamente grandes aplicativos clientes. Ele implementa idéias típicas do MVC. Os aplicativos Ember são criados a partir de adaptadores, componentes, controladores, objetos auxiliares, modelos, rotas, serviços, modelos, utilitários, complementos.
Um dos recursos mais interessantes do Ember são as ferramentas de linha de comando (Ember CLI). Essas ferramentas ajudam os desenvolvedores front-end a trabalhar produtivamente. Usando a Ember CLI, você pode criar não apenas modelos de projeto, mas também predefinições para controladores, componentes e outras entidades a partir das quais os aplicativos são criados.
Elements Elementos do ecossistema de brasa
O desenvolvedor front-end que usa o Ember tem à sua disposição os seguintes recursos principais:
- O Ember CLI é uma ferramenta de linha de comando para prototipagem rápida de aplicativos e gerenciamento de dependências.
- Servidor de Desenvolvedor Ember Padrão.
- Dados da brasa - uma biblioteca para trabalhar com dados.
- O guidão é um mecanismo de modelo usado em aplicativos Ember.
- QUnit é uma estrutura para testar projetos Ember.
- Inspetor de brasas - Ferramentas de desenvolvedor para Chrome e Firefox.
- Ember Observer - catálogo de complementos para o Ember CLI.
Talvez o Ember possa ser chamado de uma estrutura subestimada, mas, apesar disso, é ótimo para criar projetos complexos da Web.
5. Backbone.js
Backbone é uma estrutura JavaScript baseada em uma arquitetura semelhante ao MVC. Digamos que no MVC seja chamado de "controlador" em um Backbone seja chamado de "Visualização". As visualizações de backbone podem usar vários sistemas de modelos. Por exemplo - Bigode, Guidão, jQuery-tmpl. Nos projetos Backbone, você pode usar bibliotecas de terceiros. Observe que a única dependência rígida do Backbone é a biblioteca Underscore.js.
O backbone é uma estrutura fácil de usar que permite desenvolver rapidamente aplicativos de página única. Entre as ferramentas auxiliares usadas em conjunto com o Backbone.js, podemos citar como Chaplin, Marionette, Thorax.
Se você precisar desenvolver um aplicativo com o qual usuários pertencentes a grupos diferentes trabalharão, poderá usar coleções de backbone (matrizes) para separar modelos. Nos modelos, coleções, rotas e visualizações do Backbone, você pode usar eventos.
Elements Elementos do ecossistema da coluna vertebral
Entre os recursos do ecossistema Backbone estão os seguintes:
- A biblioteca Backbone inclui eventos, modelos, coleções, visualizações e um roteador.
- A biblioteca Underscore.js, da qual depende o Backbone, contém um conjunto de funções auxiliares que ajudam a escrever código JS em vários navegadores.
- Ao desenvolver aplicativos Backbone, você pode usar vários sistemas de modelos.
- A ferramenta de linha de comando da CLI Backbone simplifica o desenvolvimento de aplicativos.
- As bibliotecas Marionette, Thorax e Chaplin ajudam a criar aplicativos com soluções arquitetônicas específicas.
Talvez o Backbone não possa ser chamado de um concorrente sério das outras ferramentas de desenvolvimento front-end discutidas neste material. No entanto, essa estrutura é muito popular entre os desenvolvedores. Portanto, pode ser que o Backbone seja exatamente o que você precisa.
Sumário
Este artigo forneceu uma breve visão geral das estruturas da Web, que foram reconhecidas como as melhores de acordo com uma pesquisa realizada entre desenvolvedores da
ValueCoders . Esperamos que esta revisão ajude a fazer a escolha certa para quem está ocupado escolhendo uma estrutura para seu próximo projeto na web.
Caros leitores! Em que você escreve projetos web front-end?
