Estruturas de JavaScript para construir aplicativos de página única [fechado]

101

Meu objetivo é migrar um aplicativo da web existente para um aplicativo de página única (SPA) RESTful . Atualmente, estou avaliando vários frameworks de aplicativos da web Javascript.


Meus requisitos são os seguintes:

  • Camada de dados RESTful (como dados ember)
  • Estrutura MV *
  • Rotas dinâmicas
  • Suporte de teste
  • Codificação por convenção
  • Suporte para SEO
  • Suporte de histórico do navegador
  • Boa documentação (API-)
  • Pronto para produção
  • Comunidade viva

Espinha dorsal

O aplicativo atual está usando backbone.js. No geral, backbone.jsé um bom projeto, mas estou perdendo estruturas bem definidas que determinam onde o que deve acontecer e como as coisas devem ser implementadas. Trabalhar em uma equipe maior com desenvolvedores em constante mudança leva a algum tipo de código não estruturado, difícil de manter e difícil de entender. É por isso que estou procurando agora por um framework, que já defina tudo isso.

Brasa

Eu olhei para ember.jsos últimos dias. A abordagem parece muito promissora para mim. Mas, infelizmente, o código muda quase diariamente. Portanto, não vou chamá-lo de pronto para produção. E, infelizmente, não podemos esperar que seja a versão 1.0. Mas eu realmente gosto da ideia por trás dessa estrutura.

Angular

Angular.jstambém é uma estrutura amplamente difundida mantida pelo Google. Mas não consegui me familiarizar com o angular. Para mim, a estrutura parece um tanto obscura, faltam explicações sobre as responsabilidades gerais de cada parte da estrutura e as implementações parecem tortuosas. Só para ver se entendi: esta é apenas minha impressão pessoal e pode ser baseada na falta de conhecimento.

Batman e Meteor

Pelo que entendi, as duas estruturas também precisam de uma parte do servidor. E como queremos apenas um back-end RESTful - não importa o idioma, técnica ou software, não é isso que queremos. Além disso, a API de back-end já existe (RoR).

Knockout , CanJS e Spine

Não me aprofundei nesses três candidatos. Talvez este seja meu próximo passo.


Então, minhas perguntas agora:

  • Estou perdendo alguma boa estrutura de SPA?
  • Qual estrutura você sugeriria / recomendaria?
  • Você evitaria qualquer uma das estruturas mencionadas?
  • Qual é a sua experiência em aplicações de SP maiores?

PS: Eu gostaria de recomendar uma ótima postagem no blog de Steven Anderson (desenvolvedor principal da Knockout.js) sobre a conferência "Throne of JS" (de 2012) e estruturas javascript em geral.

PS: Sim, eu sei que já há algumas dúvidas sobre o SO. Mas como o desenvolvimento é tão rápido e rápido para SPAs, a maioria deles já está desatualizada.

Christopher Will
fonte
Verifique a
onlyurei

Respostas:

81

Recentemente, tive que decidir sobre uma estrutura JavaScript SPA em um projeto também.

  • Brasa

    Observei o Ember no início e tive pensamentos semelhantes aos seus sobre ele - eu realmente gostei, mas parecia que ainda era muito cedo para usar ... cerca de metade dos tutoriais que li não funcionaram com a versão atual porque algo havia recentemente mudou em como os modelos funcionam.

  • Espinha dorsal

    Backbone foi o primeiro framework que consideramos seriamente. Não tenho certeza se entendi porque você acha que não tem "estruturas bem definidas"? O Backbone é bastante claro sobre como dividir o código de Model e View. Talvez você queira dizer que não existe algum tipo de modelo de aplicativo? De qualquer forma, o Backbone parece realmente focado na parte de vinculação de modelo / REST, mas realmente não prescreve nada para vinculação de visualização. Se model binding é importante para você e você está usando Rails, deve ser muito fácil fazer isso. Infelizmente, os serviços da web para meu aplicativo realmente não combinavam, e eu tive que escrever meus próprios métodos .synce .parsepara tudo. A separação do código Model e View foi legal, mas como teríamos que escrever todas as nossas ligações do zero, não valeu a pena.

  • Nocaute

    Knockout é como o Yang do Yin para a espinha dorsal. Onde o Backbone está focado no Modelo, Knockout é uma estrutura MVVM e está focado na Visualização. Ele possui observablewrappers para propriedades de objeto JavaScript e usa um data-bindatributo para vincular propriedades ao seu HTML. No final, optamos pelo Knockout, já que a vinculação de visualização era principalmente o que precisávamos para nosso aplicativo. (... além de outros, conforme discutido mais tarde ...) Se você gosta da associação de visão do Knockout e das associações de modelo do Backbone, há também o KnockBack que combina os dois frameworks.

  • Angular

    Olhei para isso depois de Knockout - infelizmente todos parecemos muito felizes com a forma como Knockout viu a ligação. Parecia muito mais complexo e difícil de entrar do que Knockout. E ele usa um monte de atributos HTML personalizados para fazer associações, que não tenho certeza se gosto ... Posso dar uma olhada no Angular mais tarde, porque já encontrei várias pessoas que realmente gostam do framework - talvez nós apenas olhei para isso tarde demais para este projeto.

  • Batman , Meteor , CanJS , Spine

    Realmente não olhei muito de perto para nenhum desses. Embora eu saiba que o Spine é uma estrutura semelhante ao Backbone com objetos Controller explícitos e é escrito em CoffeeScript.

  • Posfácio

    Como mencionei, acabamos usando o Knockout porque, para nosso projeto, focar na vinculação de visualizações era mais importante. Também acabamos usando RequireJS para modularização, crossroads e Hasher para lidar com roteamento e histórico, Jasmine para testes, bem como JQuery , Twitter Bootstrap e Underscore.js (e provavelmente mais bibliotecas que estou esquecendo no momento).

    O desenvolvimento de aplicativos Javascript é mais parecido com o ecossistema Java do que com o ecossistema Rails. O Rails fornece um núcleo sólido de coisas que você usará para cada aplicativo (framework Rails), e a comunidade fornece muitas personalizações além disso (gems). Java fornece ... uma linguagem. E então você pode escolher Java EE ou Spring ou Play ou Struts ou Tapestry. E escolha JDBC ou Hibernate ou TopLink ou Ibatis para falar com o banco de dados. E então você pode usar Ant, Maven ou Gradle para construí-lo. E escolha Tomcat ou Jetty ou JBoss ou WebLogin para executá-lo. Portanto, há mais ênfase em escolher o que você precisa e o que funciona junto do que escolher A estrutura a ser usada.

Nate
fonte
Muito obrigado por sua resposta detalhada. Algumas perguntas sobre knockout.js: 1) Fornece algum tipo de camada de dados para manter o modelo no front-end / back-end em sincronia? 2) Como é o suporte para incluir um template em outro (provavelmente junto com requireJS)? 3) É fácil colocar todos os arquivos (modelos, visualizações, controladores, auxiliar, etc.) separadamente e em pastas diferentes? Ao lado dessas perguntas, defini sua resposta como aceita, pois você forneceu muitas informações.
Christopher Will
@ChristopherWill Obrigado! 1.) Assim como o Backbone deixa para você a vinculação de visualização, o Knockout deixa para você para a vinculação REST-> Model. Existem alguns exemplos na documentação - knockoutjs.com/documentation/json-data.html ou você pode usar o KnockBack para combinar a população REST-> Model do Backbone.
Nate de
2.) Depende do que você quer dizer - Knockout tem uma vinculação de dados embutida que permite pegar uma coleção do modelo, vincular a uma tag de lista ou tag de tabela e para cada uma renderizar um modelo especificado. Para coisas de grande escala, como como você constrói suas visualizações gerais e as troca - isso ainda é um tanto manual (pelo menos como estou fazendo, ainda aprendendo) - RequireJS com o plug-in de texto torna um pouco mais fácil fazer isso, mas você ainda precisa especificar a lógica e trocar divs - eu apenas faço isso nos métodos que respondem às minhas rotas. Você pode conseguir conectar eventos Knockout para fazer isso.
Nate de
3.) RequireJS é o que permite que você faça isso.
Nate de
Obrigado Nate. Acho que vou dar uma chance ao KnockBack .. parece meio promissor. E, é claro, com as bibliotecas mencionadas também (requireJS, encruzilhada etc)
Christopher Will
8

já faz um ano que começamos o desenvolvimento de nosso projeto de serviços em nuvem com vários SPAs, então foi uma grande decisão, qual framework javascript usar para nossa IU para satisfazer nossas necessidades de arquitetura RESTful. e depois de muitas pesquisas acabamos usando a estrutura Dojo .

principais recursos que você vai adorar:

  1. comunidade educada e uma equipe que criou um padrão de design perfeito. ótimas convenções e arquitetura modular / orientada a objetos. com atitudes de programação CrossBrowser :)
  2. Estrutura MV *. construir widgets de interface do usuário com modelos externos .htm e para produção, construir todos os seus javascript e modelos em um único .js reduzido e pequeno
  3. construir classes com herança. configuradores de propriedade, muitas ferramentas de função.
  4. mecanismo pub / sub (tópicos nomeados no dojo)
  5. muitos controles de IU, desde controle de formulário de validação, diálogos / dicas de ferramentas até uma solução de gráfico e grade de dados com muitos recursos e altamente personalizável (mas leve).
  6. um bom sistema de teste de unidade denominado DOH. também possui um robô para reproduzir as ações do mouse / teclado.
  7. uma ferramenta de consulta (como JQuery) chamada NodeList com todos os recursos do jquery e até mesmo muitos de seus plug-ins.
  8. e a parte boa, mas não tão completa. ele tem um módulo JsonRest para usar com seus serviços REST. é uma ferramenta útil, mas carece de muitos recursos.

para superar esses problemas, desenvolvemos um poller AJAX, tratamento de erros e solução universal de carregamento e notificações. fizemos isso muito facilmente usando as convenções e estruturas da estrutura do dojo. se você não quiser fazer isso, talvez precise usar outra estrutura para esta parte.

olhando para grandes SPAs pela web, você descobrirá que todos eles são personalizados e usam várias estruturas. mas nossa experiência com o Dojo sozinha foi fantástica. e, portanto, sugiro que você não pense em nenhuma outra estrutura, uma vez que todas elas estão incompletas para um SPA. mas, em última análise, você também tem outra opção (que não recomendo e não tenho informações detalhadas sobre). vá com uma estrutura JAVA que é capaz de construir SPAs, gerando automaticamente UI e javascript.

Unicornista
fonte
Olá! Você usa o Dojo agora? Você tem um blog sobre Dojo?
Dunaevsky Maxim de
Oi! Sim, ainda o usamos para o mesmo produto e fazemos a manutenção. Nossa estrutura interna é escrita no topo do dojo, e estamos adicionando a ela todos os dias ... não, eu não tenho um blog para isso. se você vai começar com ele, hoje em dia é considerado uma ferramenta antiga. Eles ainda estão trabalhando no Dojo 2.0, mas por enquanto, pode ser melhor usar outras opções. temos React / Angular no topo da lista.
Unicornista de