neste artigo, vou explicar-lhe alguns conceitos fundamentais para a construção de aplicações de página única (SPA) e alguns exemplos de aplicações de página única criados usando componentes essenciais do Syncfusion JS 2.
o que é a aplicação de uma única página (SPA)?,
uma aplicação de página única (SPA) é uma aplicação web na qual uma única página de visualização de raiz será carregada a partir do servidor e, em seguida, com base na interação do usuário, a aplicação irá atualizar dinamicamente o conteúdo do lado cliente sem qualquer recarga de página.
SPAs são mais fluidas e sensíveis do que aplicações de multiplicação convencionais e são mais adequados para a criação de SaaS (Software como um serviço), dashboards corporativos, e outras aplicações web orientadas por forma.,
ciclo de vida de SPA
Existem vários enquadramentos para construir um SPA, mas o conceito de SPA em todos os enquadramentos permanece o mesmo. Obtenha a UI ou Vista do lado do cliente inteira do servidor durante a carga inicial. Em seguida, com base nas interações do usuário ou navegação através da aplicação, A IU será atualizada dinamicamente no lado do cliente.
SPA usa largura de banda mínima para entrar em contato com o servidor para atualizar os dados das interações do Usuário, e para obter os dados atualizados enquanto refrescava a página web.,
fonte da Imagem : https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
> Vantagens de SPA
uma Única página de aplicativos são mais fluido e responsivo do que várias páginas aplicações. Devido a isso, estas aplicações também são adequadas para dispositivos móveis, sem necessidade de construir uma aplicação móvel nativa separada.
SPA suporta ricas interações com vários componentes, como editores e pop-ups, na página de visualização. Estes componentes podem ter estados intermediários que podem ser mais difíceis de implementar com renderização do lado do servidor.,
para além da carga inicial da página, a SPA utiliza menos largura de banda para actualizar a IU. Não há atualizações de página enquanto um usuário navega na aplicação, tornando a aplicação mais confortável de usar em dispositivos móveis.
Como a camada de visualização e a camada de dados são mantidos separadamente no SPA, isso será muito mais fácil de implantá-lo na produção.
conceitos importantes de SPA
roteamento
em SPA, todo o conteúdo é mantido com URLs separados e pode-se navegar para diferentes conteúdos rapidamente usando estes URLs.,
aplicações de página única manter o estado usando URLs ou estados de faixa internamente, enquanto um usuário navega através da aplicação.
o principal caso de uso com roteamento de páginas em SPA é quando uma pessoa compartilha a URL. Essa pessoa pode ter certeza de que qualquer pessoa que abra esse link vai ver o mesmo conteúdo exato pela navegação para a URL exata na aplicação.
data binding and syncing
SPA usa largura de banda mínima para entrar em contato com o servidor para obter dados ou para atualizar o modelo de dados após a interação do usuário na aplicação.,
enquanto um usuário navega através da aplicação, o modelo de dados no servidor será atualizado simultaneamente usando um pedido HTTP assíncrono (AJAX).
com base nas interações do usuário, os dados são atualizados para o modelo de dados no servidor. E essas mudanças de dados são atualizadas de volta para a IU simultaneamente, tornando o usuário sempre capaz de visualizar uma página web atualizada sem refrescá-la.
tempo de resposta rápido e fluido
SPA é conhecido pelas suas respostas rápidas e sem costura à interacção com o utilizador., As suas interfaces ricas lidam com a acção do utilizador e actualizam dinamicamente a IU sem qualquer atraso ou pedido do servidor. Eles podem, assim, evitar interrupções na experiência e fazer o aplicativo web se comportar mais como uma aplicação desktop.
A separação da área de visualização e da camada de dados
SPA é construída usando padrões Model-View-Controller (MVC) e Model-View-View-View (MVVM), mas você ainda pode construir a aplicação no seu próprio padrão MV*.,
o ficheiro de visualização (juntamente com o pacote CSS) que contém a representação UI para a aplicação e a camada de dados da aplicação são bem mantidos separadamente na arquitectura SPA.
a separação da janela e da camada de dados destina-se ao utilizador a reutilizar a página de visualização para diferentes conjuntos de dados ou alterar a página de visualização sem afectar o modelo de dados em produção.a separação da vista e da camada de dados em SPA facilita os votos de versionamento e rollback na produção.,
exemplos de Aplicação de uma única página e demos
estes são alguns dos exemplos de aplicação de uma única página do mundo real construídos usando controles essenciais JS 2.
Gestor de despesas
o exemplo da aplicação de uma página do Gestor de despesas, mostra vários controlos essenciais do JS 2 em conjunto para acompanhar e visualizar as despesas diárias com uma grande UI.,
Expense tracker – SPA
as diferentes páginas web da aplicação, Painel de instrumentos, transações e sobre, use o DataGrid, gráficos e outros controles essenciais JS 2 para visualizar o modelo de dados. Esta aplicação usa um mecanismo de roteamento de páginas para transições de páginas para navegar entre vistas.
os usuários podem navegar entre estas vistas usando os URLs, que serão criados para cada página web por causa de roteamento., Uma vez que esta aplicação é construída usando arquitetura SPA, todas as páginas web serão baixadas no carregamento inicial da aplicação web. Em seguida, as transições de página vai acontecer completamente no lado do cliente sem solicitar quaisquer páginas web do servidor. Enquanto navega para diferentes vistas, o URL da aplicação será atualizado em conformidade.a ligação de dados tem um papel importante em SPA. Uma vez que todas as páginas web são baixadas no lado do cliente, os componentes UI devem ser atualizados com os dados atualizados então e lá., Ao realizar qualquer ação de edição na página web da transação, as alterações serão atualizadas ao modelo de dados simultaneamente. Estas alterações serão também reflectidas nos componentes IU disponíveis noutras páginas.
uma vez que o SPA é adequado para renderização tanto em navegadores de desktop e ambientes móveis, esta aplicação é construída com um design fluido e responsivo para renderização em dispositivos móveis.
a demonstração ao vivo desta aplicação está disponível no nosso site e você pode encontrar o código no GitHub aqui.,
Expense Tracker – Mobile view
Web Mail
Web Mail é um exemplo de aplicação de uma página única com uma interface de utilizador do tipo Outlook construída para gerir uma caixa de correio.
Esta aplicação é construída com interfaces ricas e um design interativo usando componentes de Sincfusão como o acordeão, ListView e barra lateral como uma página web de visão única. A aplicação é dividida em três secções para gerir a caixa de correio: pastas de correio, itens de correio e a área de conteúdo de correio., Devido ao seu design responsivo, este aplicativo pode ser renderizado com facilidade através de dispositivos móveis e navegadores de desktop.
a ligação de dados desempenha um papel significativo nesta aplicação para actualizar a caixa de correio e para mostrar o conteúdo do correio com base na interacção do utilizador. Os itens da lista de E-mail serão refrescados com o conteúdo apropriado com base na seleção do usuário em pastas de E-mail. A área de E-mail será refrescada com o conteúdo atualizado quando o usuário seleciona um item de E-mail da lista de E-mail.
Você pode encontrar a demonstração ao vivo desta aplicação em nosso site e você pode encontrar a fonte no GitHub.,
Web Mail – SPA
a aplicação lida com múltiplas interacções do utilizador e actualiza o conteúdo em conformidade, sem qualquer actualização da Página, fazendo com que a aplicação pareça uma aplicação de secretária.
O design responsivo desta aplicação torna mais fácil de renderizar através de dispositivos móveis com a melhor UI.,
Calculadora de empréstimos
A Calculadora de empréstimos é um exemplo de aplicação de uma página que mostra componentes como o DataGrid, gráficos, Barra e outros juntos em uma única página para calcular um pagamento de empréstimo com base no montante do empréstimo, juros e termo.,
Calculadora de Empréstimo – SPA
A ligação de dados no aplicativo funciona de tal forma que, durante o ajuste os valores de uma quantidade de empréstimo, juros e prazo, usando o controle deslizante componente, os dados para o gráfico e a grade componentes irá ser actualizada com os dados apropriados de acordo.
pode-se também atualizar o conteúdo do gráfico, escolhendo o mês desejado para ser visto usando o controle do DatePicker. Quando o mês a ser visto for alterado, os dados para o mês correspondente serão devolvidos a partir do modelo., O mesmo será atualizado no controle de gráficos também.
Você pode encontrar a demonstração ao vivo desta aplicação em nosso site e você pode encontrar sua fonte no GitHub.
Localizador de saúde
O Localizador de saúde é outro exemplo de aplicação de uma única página para rastrear a saúde de uma pessoa, rastreando a sua ingestão de alimentos, distância percorrida, água consumida e duração do sono.
Esta aplicação é construída com interfaces ricas e um design interativo usando controles de Sincfusão como gráficos e cartão como uma página web de visão única. A ligação de dados é usada para mostrar os dados no gráfico., A fonte para esta amostra pode ser encontrada neste local GitHub.
Saúde Tracker – SPA
Diagrama Builder
O Diagrama Builder é um aplicativo que ajuda na criação de vários diagramas para diferentes casos de uso, tais como os gráficos organizacionais, árvores hierárquicas, e mapas mentais.
Esta aplicação é construída com controlos poderosos e ricos em funcionalidades como Diagrama, Selector de cores, janela e barra de gama. A fonte desta amostra pode ser encontrada neste local GitHub.,
Construtor de diagramas – SPA
Estimador de histórias
o estimador de histórias é uma ferramenta eficaz e ágil para estimar pontos de história para histórias usando técnicas de planejamento de Poker.
Esta aplicação é construída com controles como DataGrid, gráficos, Máscara De Entrada, Botão, Botão de rádio e CheckBox. A fonte para esta amostra pode ser encontrada neste local GitHub.,
História Estimador – SPA
Gráfico de Ações
O Gráfico de Ações é usado para controlar e visualizar o preço das ações de qualquer empresa ao longo de um período de tempo específico.
Esta aplicação é construída com os controlos de gráficos, barra de ferramentas, Leitor de dados, largada e botões. Pode encontrar a sua fonte no GitHub.,
Stock Chart – SPA
Asset Management
the Asset Management application is a single page application example used to track and visualize the software and hardware assets of an organization.
Esta aplicação é construída com os comandos DataGrid, Charts, TreeMap e DateRangePicker. Pode encontrar a sua fonte no GitHub.,
Gestão de Ativos – SPA
Considerações para SPA
Além das várias vantagens de um único aplicativo de página, há algumas considerações especiais a ter em mente com SPA:
- deve-se assegurar princípios orientados a objetos ao criar um SPA. Se ignorado, ele vai levar a vazamentos de memória dentro do navegador. Assim, fazendo com que a aplicação abrandasse, degradando assim o seu desempenho.
- manusear o botão de trás do navegador corretamente em aplicações de página única., Caso contrário, o usuário pode clicar no botão de volta do navegador, levando à perda de fluxo de trabalho.
No entanto, as técnicas certas podem abordar todas estas questões.
resumo
neste post no blog, vimos os benefícios das aplicações de página única sobre as aplicações de multiplicação. Além disso, vimos os exemplos de aplicação de uma única página no mundo real construídos com múltiplos controles essenciais JS 2 de Sincfusão.
os exemplos de aplicação de uma única página anteriormente discutidos também estão disponíveis para Angular, JavaScript, ASP.NET núcleo e ASP.,Plataformas MVC NET, e você pode encontrar a demonstração ao vivo destas aplicações em nosso site. Você também pode verificar outras aplicações do mundo real construídas com componentes de Sincfusão aqui.
recomendamos que você mesmo verifique o código fonte, disponível no GitHub, que é facilmente executável, para ver como as aplicações de uma única página são construídas usando componentes de Sincfusão.