Arquitetura de um aplicativo da web JavaScript de página única?

Como um aplicativo da web JS de página única complexo deve ser estruturado no lado do cliente? Especificamente, estou curioso sobre como estruturar de forma limpa o aplicativo em termos de seus objetos de modelo, componentes de IU, quaisquer controladores e objetos que tratam da persistência do servidor.

MVC parecia um ajuste no início. Mas com componentes de IU aninhados em várias profundidades (cada um com sua própria maneira de agir / reagir aos dados do modelo e cada um gerando eventos que eles próprios podem ou não manipular diretamente), não parece que o MVC pode ser aplicado de forma limpa. (Mas, por favor, corrija-me se esse não for o caso.)

-

( Esta pergunta resultou em duas sugestões de uso de ajax, que obviamente é necessário para qualquer coisa diferente do aplicativo de uma página mais trivial.)

A arquitetura MVC do PureMVC / JS é o IMO mais elegante. Eu aprendi muito com isso. Eu também achei a Arquitetura de Aplicativo JavaScript Escalável de Nicholas Zakas útil na pesquisa de opções de arquitetura do lado do cliente.

Duas outras dicas

1. Descobri que gerenciamento de visualização, foco e entrada são áreas que precisam de atenção especial em aplicativos da web de página única
2. Também achei útil abstrair a biblioteca JS, deixando a porta aberta para mudar de ideia sobre o que você usa ou mixar e combinar, se necessário.

A apresentação de Nicholas Zakas, compartilhada por Dean, é um bom lugar para começar. Eu também estava lutando para responder à mesma pergunta por um tempo. Depois de fazer alguns produtos Javascript em grande escala, pensei em compartilhar os aprendizados como uma arquitetura de referência, caso alguém precise. Dê uma olhada em:

http://boilerplatejs.org/

Ele aborda questões comuns de desenvolvimento de Javascript, como:

• Estruturação da solução
• Criação de hierarquia de módulo complexa
• Componentes de IU independentes
• Comunicação entre módulos baseada em eventos
• Roteamento, histórico, favoritos
• Teste de Unidade
• Localização
• Geração de Documentos

etc.

A maneira como eu crio aplicativos:

• Estrutura ExtJS, aplicativo de página única, cada componente definido em um arquivo JS separado, carregado sob demanda
• Cada componente contata seu próprio serviço web dedicado (às vezes mais de um), buscando dados em armazenamentos ExtJS ou estruturas de dados de propósito especial
• A renderização usa componentes ExtJS padrão, então posso vincular armazenamentos a grades, carregar formulários de registros, ...

Basta escolher uma estrutura javascript e seguir suas melhores práticas. Meus favoritos são ExtJS e GWT, mas YMMV.

NÃO role sua própria solução para isso. O esforço necessário para duplicar o que os frameworks javascript modernos fazem é muito grande. É sempre mais rápido adaptar algo existente do que construir tudo do zero.

Question - What makes an application complex ? 

Resposta - O uso da palavra 'complexo' na própria pergunta. Portanto, uma tendência comum será buscar uma solução complexa desde o início.

Question - What does the word complex means ?

Resposta - Qualquer coisa que seja desconhecida ou parcialmente compreendida. Exemplo: A teoria da gravidade ainda hoje é COMPLEXA para mim, mas não para Sir Isaac Newton, que a descobriu em 1655.

Question - What tools can I use to deal with complexity ?

Resposta - Compreensão e simplicidade.

Question - But I understand my application . Its still complex ?

Resposta - Pense duas vezes, porque compreensão e complexidade não coexistem. Se você entende um aplicativo enorme e enorme, tenho certeza de que concordará que nada mais é do que uma integração de unidades pequenas e simples.

Question - Why all of the above philosophical discussion for a question on 
           Single Page Application (SAP)?

Resposta - Porque,

-> SPA não é algum tipo de tecnologia de núcleo recém-inventada para a qual precisamos reinventar a roda de muitas coisas que estamos fazendo no desenvolvimento de aplicativos.

-> É um conceito impulsionado pela necessidade de melhor desempenho, disponibilidade, escalabilidade e capacidade de manutenção das aplicações web.

-> É um padrão de design identificado recentemente, portanto, entender o SPA como um padrão de design ajuda muito na tomada de decisões informadas sobre a arquitetura de um SPA.

-> No nível raiz, nenhum SPA é complexo, porque depois de entender as necessidades de um aplicativo e o padrão do SPA, você perceberá que ainda está criando um aplicativo, praticamente da mesma forma que fazia antes, com algumas modificações e reorganizações na abordagem de desenvolvimento.

Question - What about the use of Frameworks ?

Resposta - Frameworks são código / solução padrão para alguns padrões comumente identificados e genéricos, portanto, podem retirar x% (variável, com base no aplicativo) da carga do desenvolvimento do aplicativo, mas não se deve esperar muito deles, especialmente para heavy e aplicações crescentes. É sempre um bom caso ter controle total da estrutura e do fluxo do aplicativo, mas o mais importante é o código para ele. Não deve haver nenhuma área cinza ou preta no código do aplicativo.

Question - Can you suggest one of the many approaches to SPA architecture ?

Resposta - Pense em sua própria estrutura com base na natureza de sua aplicação. Categorize os componentes do aplicativo. Procure uma estrutura existente que seja próxima à sua estrutura derivada, se você a encontrar, use-a; se não a encontrar, sugiro que prossiga com a sua própria. A criação da estrutura é um grande esforço inicial, mas produz melhores resultados a longo prazo. Alguns componentes básicos em minha estrutura de SPA serão:

• Fonte de dados: modelos / coleções de modelos

• Marcar para apresentar dados: Modelos

• Interação com o aplicativo: Eventos

• Captura de estado e navegação: roteamento

• Utilitários, widgets e plug-ins: bibliotecas

Me diga se isso ajudou de alguma forma e boa sorte com sua arquitetura de SPA !!

A melhor coisa a fazer é examinar exemplos de uso de outras estruturas:

TodoMVC apresenta muitos frameworks SPA.

Você pode usar o framework javascript MVC http://javascriptmvc.com/

O aplicativo da web em que estou trabalhando atualmente usa JQuery e eu não o recomendaria para nenhum aplicativo da web grande de página única. A maioria dos frameworks, ou seja, Dojo, yahoo, google e outros usam namespaces em suas bibliotecas, mas JQuery não, e esta é uma desvantagem significativa.

Se o seu site pretende ser pequeno, o JQuery está ok, mas se você pretende construir um grande site, eu recomendo olhar todos os frameworks Javascript disponíveis e decidir qual deles mais atende às suas necessidades.

E eu recomendaria aplicar o padrão MVC ao seu javascript / html e provavelmente a maior parte do seu modelo de objeto para o javascript poderia ser feito como o json que você realmente retorna do servidor por meio de ajax e o javascirpt usa o json para renderizar html.

Eu recomendaria a leitura do livro Ajax em ação, pois ele cobre a maioria das coisas que você precisa saber.

Estou usando Samm.js em vários aplicativos de uma página com grande sucesso

Eu iria com jQuery MVC

Confira http://bennadel.com/projects/cormvc-jquery-framework.htm Ben é muito esperto e se você pesquisar em seu blog, ele tem alguns posts interessantes sobre como o CorMVC é montado e por quê.

Alternativa: dê uma olhada no ItsNat

Pense em JavaScript, mas codifique da mesma forma em Java no servidor com as mesmas APIs DOM, no servidor é muito mais fácil gerenciar seu aplicativo sem cliente / pontes customizadas porque a IU e os dados estão juntos.

Ou dê uma olhada em https://github.com/flosse/scaleApp

NikaFramework permite criar aplicativos de página única. Também permite que você escreva HTML , CSS ( SASS ), JavaScript em arquivos separados e agrupe-os em apenas um arquivo de saída no final.

Eu recomendaria explorar Yeoman . Ele permite que você use as "melhores práticas" existentes para seu novo projeto.

Por exemplo:

se você decidir usar Angular.js, existe um gerador Yeoman , que fornece uma estrutura para roteamento, visualizações, serviços, etc. Também permite que você teste, diminua seu código, etc.

Se você decidir usar o Backbone, verifique este gerador