Arquitetura de uma única página web JavaScript aplicação?

Question

Como deve um complexo único-página JS aplicativo web a ser estruturado no lado do cliente?Especificamente, estou curioso sobre como forma limpa estrutura da aplicação em termos do seu modelo de objetos, componentes de INTERFACE do usuário, todos os controladores, e objetos de manipulação de servidor de persistência.

MVC parecia um ajuste em primeiro lugar.Mas com componentes de INTERFACE do usuário aninhada em várias profundidades (cada um com seu próprio modo de agir sobre/reagindo para o modelo de dados, e cada geração de eventos que eles próprios podem, ou não, lidar diretamente), não parece MVC pode ser correctamente aplicadas.(Mas, por favor, me corrija se que não é o caso.)

--

(Esta pergunta o que resultou em dois sugestões de uso do ajax, que é, obviamente, necessária para qualquer outra coisa além do que o mais trivial de uma página do aplicativo.)

Answer 1

Arquitetura de MVC de Puremvc/js é a IMO mais elegante. Eu aprendi muito com isso. Eu também encontrei Arquitetura de aplicativo JavaScript escalável Por Nicholas Zakas útil na pesquisa de opções de arquitetura do lado do cliente.

Duas outras dicas

1. Eu encontrei visualização, foco e gerenciamento de insumos 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 mente sobre o que você usa, ou misturar e combinar, se necessário.

Answer 2

A apresentação de Nicholas Zakas, como compartilhada por Dean, é um lugar muito bom para começar. Eu também estava lutando para responder à mesma pergunta por um tempo. Depois de fazer alguns produtos JavaScript em larga 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 preocupações comuns de desenvolvimento de JavaScript, como:

• Estruturação da solução
• Criando hierarquia complexa do módulo
• Componentes da interface do usuário autônomos
• Comunicação entre módulos baseada em eventos
• Roteamento, história, bookmarking
• Teste de unidade
• Localização
• Geração de documentos

etc.

Answer 3

A maneira como eu construo aplicativos:

• Estrutura ExtJS, aplicativo de página única, todos os componentes definidos em um arquivo JS separado, carregado sob demanda
• Cada componente entra em contato com seu próprio serviço da Web dedicado (às vezes mais de um), buscando dados em lojas ExtJs ou estruturas de dados de fins especiais
• A renderização usa componentes EXTJs padrão, para que eu possa vincular lojas 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 as estruturas JavaScript modernas fazem é muito grande. É sempre mais rápido adaptar algo existente do que construir tudo do zero.

Answer 4

Question - What makes an application complex ? 

Resposta - O uso da palavra 'complexo' na própria pergunta. Portanto, uma tendência comum será procurar 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 uma enorme aplicação enorme, tenho certeza de que concorda que não passa de 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,

-> O spa não é algum tipo de tecnologia central que é inventada recentemente para a qual precisamos reinventar a roda para muitas coisas que estamos fazendo no desenvolvimento de aplicativos.

-> É um conceito impulsionado pela necessidade de melhor desempenho, disponibilidade, escalabilidade e manutenção de aplicativos da Web.

-> É um padrão de design bastante identificado, portanto, uma compreensão do spa como padrão de design contribui muito para tomar decisões informadas sobre a arquitetura de um spa.

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

Question - What about the use of Frameworks ?

Resposta - As estruturas são o código / solução da placa da caldeira para alguns padrões comumente identificados e genéricos; portanto, eles podem tirar a carga x% (variável, com base no aplicativo) do desenvolvimento do aplicativo, mas não deve ser esperado delas, especialmente para pesado e aplicações em crescimento. É sempre um bom caso no controle total da estrutura e do fluxo do seu aplicativo, mas o mais importante é o código para ele. Não deve haver áreas cinzentas ou pretas 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 do seu aplicativo. Categoriza os componentes do aplicativo. Procure uma estrutura existente que esteja próxima da sua estrutura derivada, se você a encontrar, use -a, se você não encontrar, sugiro ir em frente com o seu. Criar estrutura é um esforço adiantado, mas produz melhores resultados em longo prazo. Alguns componentes básicos na minha estrutura de spa serão:

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

• Marque para apresentar dados: modelos

• Interação com o aplicativo: eventos

• Captura e navegação do estado: roteamento

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

Deixe -me saber se isso ajudou de alguma forma e boa sorte com sua arquitetura de spa !!

Answer 5

A melhor coisa a fazer é analisar os usos de outras estruturas:

TODOMVC mostra muitas estruturas de spa.

Answer 6

Você pode usar o JavaScript MVC Framework http://javascriptmvc.com/

Answer 7

O aplicativo da web em que estou trabalhando atualmente usa o jQuery e não o recomendaria para nenhum aplicativo da Web de grande página grande. A maioria das estruturas, ou seja, dojo, Yahoo, Google e outras pessoas, usam namespaces em suas bibliotecas, mas o jQuery não e isso é uma desvantagem significativa.

Se o seu site deve ser pequeno, o jQuery ficaria bem, mas se você pretendia criar um site grande, eu recomendaria analisar todas as estruturas JavaScript disponíveis e decidir qual mais atende às suas necessidades.

E eu recomendaria aplicar o padrão MVC ao seu JavaScript/HTML e provavelmente a maioria do seu modelo de objeto para o JavaScript poderia ser feito como o JSON que você realmente retorna do servidor através do Ajax e o JavaScirpt usa o JSON para renderizar HTML.

Eu recomendaria ler o livro Ajax em ação, pois abrange a maioria das coisas que você precisa saber.

Answer 8

estou a usar Samm.js em vários aplicativos de uma página com grande sucesso

Answer 9

Eu iria com JQuery MVC

Answer 10

Confira http://bennadel.com/projects/cormvc-jquery-framework.htm Ben é bastante acentuada e se você cavar em volta em seu blog ele tem alguns bons posts sobre como CorMVC é colocar juntos e por quê.

Answer 11

Alternativa: dê uma olhada em ITSNAT

Pense no JavaScript, mas codifique o mesmo em Java no servidor com as mesmas APIs DOM, no servidor é muito mais fácil gerenciar seu aplicativo sem clientes/pontes personalizados porque a interface do usuário e os dados estão juntos.

Answer 12

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

Answer 13

Nikaframework Permite criar um aplicativo de página única. Também permite que você escreva Html, CSS (Sass), JavaScript em arquivos separados e agrupa -os em apenas um arquivo de saída no final.

Answer 14

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

Por exemplo:

Se você decidir usar o Angular.js, existe um Gerador Yeoman, que oferece uma estrutura para roteamento, visualizações, serviços etc. também permite testar, minimizar seu código, etc.

Se você decidir usar backbone, checkout este gerador