O AngularJS é apenas para aplicativos de página única (SPAs)?

201

Estamos analisando opções para criar o front end de um aplicativo que estamos criando e tentando avaliar uma ferramenta que funcionará para nós e nos fornecerá a melhor plataforma para avançar.

Este é um projeto do Node.js. Nosso plano inicial era usar o Express e seguir esse caminho, mas decidimos que, antes de iniciarmos este estágio, seria melhor revisar o que está lá fora. Nosso aplicativo possui várias áreas que, acreditamos, não se enquadram no modelo de página única, pois são relacionados da perspectiva do aplicativo, mas não da visualização.

Vimos algumas das estruturas que poderíamos usar para criar o cliente como Backbone.js , Meteor , etc. e também o AngularJS.

Essa pode ser uma pergunta bastante óbvia, mas parece que não conseguimos decifrar se o AngularJS é apenas para aplicativos de página única ou se pode ser usado para aplicativos de várias páginas como o Express, por exemplo.


ATUALIZAÇÃO 17 de julho de 2013 Apenas para manter as pessoas informadas, atualizarei esta pergunta à medida que avançamos no processo. Vamos construir tudo juntos por enquanto e veremos o desempenho. Entramos em contato com algumas pessoas que são mais qualificadas com o AngularJS do que nós e levantamos a questão de dividir aplicativos maiores que compartilham contexto, mas que podem ser muito grandes trabalhando em uma única página.

O consenso era que poderíamos servir várias páginas estáticas e criar aplicativos AngularJS que funcionassem apenas com essas páginas, criando efetivamente uma coleção de SPA e vinculando esses aplicativos usando o link padrão. Agora, nosso caso de uso é muito específico, pois nossa solução possui vários aplicativos e, como eu disse, vamos tentar primeiro a base de código única e otimizar a partir daí.

ATUALIZAÇÃO 18 de junho de 2016 O projeto caiu de um penhasco, por isso nunca chegamos a fazer muito. Recolhemos novamente recentemente, mas não usamos mais angular e, em vez disso, usamos React. Ainda estamos usando a arquitetura descrita na atualização anterior, em que usamos aplicativos expressos e autocontidos. Por exemplo, temos uma /chatrota expressa que serve nosso aplicativo de bate-papo React, temos outra rota /projectsque serve o aplicativo de projetos e em breve. A maneira como olhamos para ele é que cada aplicativo é uma raiz agregada em termos de seu conjunto de recursos, ele precisa poder ser autônomo para ser considerado um aplicativo em si. Tecnicamente, todas as informações estão disponíveis, é apenas o expresso básico e qualquer que seja o sabor do aplicativo do lado do cliente que você deseja usar.

Modika
fonte
5
Então, como foi? Estou tentando descobrir como mover um aplicativo ASP.NET com mais de 50 páginas para um aplicativo HTML + Javascript + REST puro e realmente não entendo como isso funcionaria como um SPA.
22413 Greg
1
Tivemos que mudar para outra coisa. A partir das discussões que tivemos e teremos novamente, já que isso começa novamente, é que o SPA pode ser uma engrenagem muito concentrada em uma máquina muito maior. Portanto, traduzindo nossa instância para a sua (estávamos usando o nó puro com express) se você quisesse permanecer em uma pilha familiar (.Net), poderia usar o MVC como seu andaime e usar angular nas visualizações para adicionar itens dinâmicos (cada recurso) . a menos que você possa condensar seu aplicativo, a implementação de 50 páginas de lógica em uma única página pode sufocar.
Modika
1
O que isso faz é tornar cada seção (ou seja, usuários, notícias, produtos etc.) um SPA por si só, mas coletivamente eles formam seu aplicativo.
Modika
1
Ótimo, obrigado. Existe alguma codificação específica que precisa ser feita para unir os diferentes SPAs? Ou apenas links regulares?
Greg
1
@Greg, de nosso conhecimento limitado até o momento, como eles são essencialmente aplicativos em seus próprios links padrão, funcionaria, obviamente, provavelmente não será um avanço, pois isso e alguma forma de persistência (cookies, armazenamento local) serão necessárias para persistir informações compartilhadas, como talvez, identidade ou perfil, se o aplicativo estiver protegido por alguma forma de login. Nossos aplicativos estarão intimamente vinculados à nossa API e, como estamos construindo um aplicativo confiável, estamos usando oauth para proteger cada solicitação, acho que o Trello faz algo semelhante, mas posso estar errado.
Modika

Respostas:

216

De modo nenhum. Você pode usar o Angular para criar uma variedade de aplicativos. O roteamento do cliente é apenas uma pequena parte disso.

Você tem uma grande lista de recursos que o beneficiarão fora do roteamento do cliente:

  • ligação bidirecional
  • modelo
  • formatação de moeda
  • pluralização
  • controles reutilizáveis
  • Manipulação de API RESTful
  • Manipulação de AJAX
  • modularização
  • Injeção de dependência

É uma loucura pensar que tudo isso "só poderia ser usado em um aplicativo de página única". Claro que não ... é como dizer "Jquery é apenas para projetos com animações".

Se ele se encaixa no seu projeto, use-o.

Ben Lesh
fonte
42
Outro ponto a ser mencionado é que o Angular nem precisa ser usado para páginas inteiras - ele pode ser integrado a um sistema existente para criar componentes, ou seja, um widget ou plug-in complexo dentro de um aplicativo herdado.
Alex Osborn
2
@Blesh, obrigado pela resposta, faz sentido, mas o que estamos lutando para encontrar é "o modo como" o usamos para criar aplicativos de várias páginas e é por isso que a pergunta foi publicada, que é realmente uma pergunta diferente, então sua resposta foi aceito, mas, por exemplo, podemos usar o angular.js com o express.js ou é algo assim, apenas uma perda de tempo e mais complicações.
Modika
Angular com Express é quase ideal! É muito, muito fácil criar uma API RESTful com o Express que você pode consumir do (s) aplicativo (s) Angular (s). API RESTful do Google NodeJS Express e serviços $ angular e $ http da Angular. Depois disso, basta começar a criar um protótipo e brincar com ele. Eu acho que você pode achar que está pensando demais / se preocupando demais com o "COMO" depois de ver como eles funcionam juntos.
Ben Lesh
@Blesh, desculpe por voltar tarde. Já temos uma API REST / Hypermedia criada usando o Restify, acho que precisamos encontrar uma maneira interessante de vincular os "aplicativos" separados criados de alguma forma, analisando isso e provavelmente atualizando a pergunta em algum momento.
Modika
O @Modika conseguiu encontrar bons recursos ou teve boas idéias para aplicativos de várias páginas?
dre
16

Eu lutei com o "como" a princípio também com Angular. Então um dia me dei conta: "Ainda é javascript". Existem vários exemplos dos detalhes do Angular (um dos meus favoritos junto com o livro https://github.com/angular-app/angular-app ). A coisa mais importante a lembrar é carregar os arquivos js como faria em qualquer outro projeto. Tudo o que você precisa fazer é garantir que as páginas diferentes façam referência ao objeto Angular correto (controlador, exibição, etc.) e você esteja em funcionamento. Espero que isso faça sentido, mas a resposta foi tão simples que eu a ignorei.

Ron
fonte
6

Talvez minha experiência seja útil para alguém. Dividimos nosso projeto logicamente. Um SPA que usamos para feed, outro para trabalhar com o mapa, outro para editar um perfil de usuário e etc. Por exemplo, temos três aplicativos: feed, usuário e mapa. Eu uso nos URLs separados, assim:

https://host/feed/#/top/
https://host/user/#/edit/1/
https://host/map/favorites/#/add/

Cada um desses aplicativos possui seus próprios mapeamentos de roteamento local entre estados no aplicativo. Eu acho que é uma boa prática, porque cada aplicativo trabalha apenas com seu próprio contexto e carrega as dependências de que realmente precisa. Além disso, é uma prática muito boa para processos de depuração e integração.

De fato, você pode facilmente fazer uma mistura de aplicativos SPA, por exemplo, o feed será URL com o aplicativo angularjs, o aplicativo do usuário com o reactjs e o mapeamento para o aplicativo backbone.js.

Em resposta à sua pergunta:

Angular, não apenas para SPAs, o Angular é bom e rápido para aplicativos de SPA, mas ninguém se preocupa em criar aplicativos MPA para uma variedade de aplicativos de SPA. Mas, pensando na sua arquitetura de URL, não se esqueça da disponibilidade de SEO de seus aplicativos.

Também apoio a ideia:

Qual é a diferença entre um projeto e um aplicativo? Um aplicativo é um aplicativo da Web que faz alguma coisa - por exemplo, um sistema de blog, um banco de dados de registros públicos ou um aplicativo de pesquisa simples. Um projeto é uma coleção de configurações e aplicativos para um site específico. Um projeto pode conter vários aplicativos. Um aplicativo pode estar em vários projetos.

theodor
fonte
3

Se tudo o que você precisa é de algumas páginas com ligação de dados do cliente, eu usaria Knockout e Javascript.

O nocaute é excelente, especialmente se você precisar de compatibilidade com versões anteriores descomplicada e possuir páginas bastante diretas. Se você estiver usando componentes de terceiros, as ligações personalizadas do Knockout são diretas e fáceis de trabalhar.

O namespace Javascript permite manter seu código separado e gerenciável.

var myCo = myCo || {};
myCo.page = {
    init: function(){ ... },
    ...
}

E em uma tag de script após o carregamento dos outros scripts

<script>
    myCo.init();
</script>

A chave é que você usa a ferramenta que deseja quando precisa. Precisa de ligação de dados? Nocaute (ou o que você quiser). Precisa de roteamento? sammy.js (ou o que você quiser).

O código do cliente pode ser tão simples ou complicado quanto você desejar. Tentei integrar o Angular a um site muito complicado com uma estrutura proprietária existente, e foi um pesadelo. Angular é ótimo se você está começando do zero, mas ele tem uma curva de aprendizado e o bloqueia em um fluxo de trabalho muito apertado. Se você não segui-lo, seu código pode ficar muito emaranhado muito rápido.

Fred
fonte
1

Eu diria que Angular é um exagero se você está apenas procurando desenvolver um SPA. Claro, se você já está à vontade para desenvolver isso, vá em frente. Mas se você é novo na estrutura e só precisa desenvolver um SPA, eu recomendaria algo mais simples com várias vantagens. Eu recomendo olhar para Vue.js ou Aurelia.io .

O Vue.js usa ligação de dados bidirecional, MVVM, componentes reutilizáveis, simples e rápido de pegar, menos código para escrever etc. Ele combina alguns dos melhores recursos do Angular e React.

Aurelia.io , com toda a honestidade, não sei muito sobre. Mas eu dei uma espiada e parece uma alternativa que vale a pena procurar, semelhante à anterior.

Links:
https://vuejs.org/
http://aurelia.io/

Filipb
fonte