JavaScript puro de front-end com API da Web versus visualizações MVC com ajax

Essa foi mais uma discussão sobre o que as pessoas pensam hoje em dia sobre como dividir um aplicativo da web.

Estou acostumado a criar um aplicativo MVC com todas as suas visualizações e controladores. Normalmente, eu criaria uma visualização completa e passaria isso de volta ao navegador em uma solicitação de página inteira, a menos que houvesse áreas específicas que eu não quisesse preencher imediatamente e usaria os eventos de carregamento da página DOM para chamar o servidor para carregar outras áreas usando AJAX.

Além disso, quando se tratava de atualização parcial da página, eu chamaria um método de ação MVC que retornaria o fragmento HTML que eu poderia usar para preencher partes da página. Isso seria para áreas que eu não queria diminuir o carregamento da página inicial ou para áreas que se encaixavam melhor com chamadas AJAX. Um exemplo seria para paginação de tabela. Se você quiser passar para a próxima página, eu preferiria que uma chamada AJAX recebesse essas informações em vez de usar uma atualização completa da página. Mas a chamada AJAX ainda retornaria um fragmento HTML.

Minha pergunta é. Meus pensamentos são arcaicos porque eu tenho um background .net em vez de um background front-end puro?

Um desenvolvedor inteligente de front end com quem trabalho, prefere não fazer quase nada nas visualizações do MVC e prefere fazer tudo no front end. Até as chamadas da API da web que preenchem a página. Portanto, em vez de chamar um método de ação MVC, que retorna HTML, ele prefere retornar um objeto padrão e usar javascript para criar todos os elementos da página.

A maneira de desenvolvedor front-end significa que quaisquer benefícios que eu normalmente recebo com a validação do modelo MVC, incluindo a validação do lado do cliente, desapareceriam. Isso também significa que quaisquer benefícios que eu recebo com a criação de visualizações, com modelos de html fortemente tipados etc., desapareceriam.

Acredito que isso significaria que eu precisaria escrever a mesma validação para validação de front-end e back-end. O javascript também precisaria ter muitos métodos para criar todas as diferentes partes do DOM. Por exemplo, ao adicionar uma nova linha a uma tabela, normalmente eu usaria a exibição parcial do MVC para criar a linha e depois a retornaria como parte da chamada AJAX, que será injetada na tabela. Usando uma maneira pura de front-end, o javascript usaria um objeto (por exemplo, um produto) para a linha da chamada da API e, em seguida, criaria uma linha a partir desse objeto. Criando cada parte individual da linha da tabela.

O site em questão terá várias áreas diferentes, desde administração, formulários, pesquisa de produtos, etc. Um site que eu acho que não precisa ser arquitetado em um único aplicativo de página.

Quais são os pensamentos de todos sobre isso?

Estou interessado em ouvir de desenvolvedores de front-end e de back-end.

Também sou um pouco cético quanto ao fato de que todo novo aplicativo da Web precisa ser um SPA, mas uma coisa em que sou 100% vendido como generalista, com a maior parte de sua experiência no lado do cliente, é que uma arquitetura orientada a serviços que entrega informações brutas os dados em vez do HTML para o cliente são o caminho a seguir, esteja você carregando páginas / visualizações pré-construídas do servidor e fazendo muitas coisas dinâmicas com dados após o carregamento da página ou criando quase tudo 100% com JavaScript.

Os motivos pelos quais isso é preferível a um desenvolvedor do lado do cliente são os mesmos que ninguém quer HTML no banco de dados. O que o desenvolvedor do lado do cliente deve fazer quando deseja recorrer a uma tabela, por exemplo, quando recebe HTML? O custo de desempenho de lidar com tudo isso no cliente é trivial comparado a fazer outra solicitação do servidor para fazer isso por você. Além disso, a criação de HTML é bastante bem coberta no JS-land. Classificar dados e criar novas linhas de tabela HTML a partir deles é um trabalho bastante trivial para um desenvolvedor experiente do lado do cliente.

E de que uso é a arquitetura de back-end para um front-end para outro dispositivo que pode precisar fazer algo exótico, como implementar widgets 100% canvas ou uma estrutura HTML totalmente diferente? Por que um desenvolvedor do lado do cliente deve carregar o visual studio ou bater na porta do backend para criar um ajuste estritamente de apresentação?

Quanto às suas preocupações com a perda de validação de modelo fortemente tipada, confie em mim quando digo que, se você estiver lidando com um desenvolvedor competente do lado do cliente, não encontrará nenhuma estrutura do .NET ou ferramenta do Visual Studio que seja mais compatível com o carvão. anal de diamante a poeira esmagadora sobre HTML válido e bem formado do que ele / ela é.

Do ponto de vista da pilha completa, eu gosto disso porque significa que nunca precisarei pescar na lógica de negócios ou de aplicativos que alguns yutz decidiram colocar na camada de modelo. Sem mencionar a carga por usuário retirada de seus servidores e, em muitos casos, melhorando a experiência de carga para o usuário em navegadores modernos com computadores modernos.

Eu acho que também é mais fácil argumentar sobre a arquitetura de back-end quando você a isolou completamente de todas as coisas da apresentação. Você não está mais capturando dados para compactá-los em algum HTML. Você está reunindo essas informações para criar uma estrutura de dados independente da implementação que se preocupa mais com o uso geral do que o que será feito com isso do outro lado. Na IMO, isso tende a levar a uma consistência maior na maneira como as coisas são tratadas, já que os dados agora são uma meta final, e não a penúltima etapa de um processo, e há menos oportunidades de preocupações não relacionadas para cruzar os fios.

Oferecerei meu valor subjetivo de 2 centavos (pelo que vale;)). Não há uma resposta certa ou errada para isso e há muitas considerações do mundo real além dos seus pontos, por exemplo:

• Você tem a experiência relevante em casa? a criação de um aplicativo orientado para o cliente é muito diferente de um aplicativo predominantemente orientado a servidor com um conjunto de habilidades completamente diferente.
• Quanto tempo você deseja e quais navegadores você precisa suportar? - quanto mais você faz no cliente, mais problemas com o navegador você enfrenta; O IE8 é doloroso e o desempenho do JavaScript é muito ruim, mas existem muitas empresas executando as configurações do XP / IE.
• Em quais dispositivos seus usuários visualizarão o site? A análise e a execução do JavaScript podem ser rápidas em uma versão recente do Chrome - mas não em um dispositivo móvel mais antigo, especialmente em uma grande quantidade de JavaScript com uma carga de lógica de negócios.
• Qual a importância da carga inicial? A modelagem do servidor é mais rápida que a modelagem do cliente

Esta lista não é de forma alguma exaustiva e soa como um ataque do cliente, que não é minha intenção, criei sites com forte ênfase no front end.

Para mim, tudo se resume à experiência do usuário e à reutilização da API. Para abordar cada um deles.

Se você estiver criando um aplicativo ou oferecendo uma API, faz muito sentido usar um projeto de API .Net, que então forma a lógica, a verificação e a implementação de plataforma cruzada. Nesse cenário, uma abordagem completa do lado do cliente pode ser favorável, a API pode ser mantida separadamente e apenas fornece uma interface para o seu aplicativo. Você pode alterar a lógica e refatorar confortavelmente e só precisa manter a interface igual. Você pode escrever facilmente aplicativos diferentes para mídias diferentes, todos usando o mesmo código de segundo plano.

O argumento mais forte para uma solução pura de front-end (na minha opinião) é o da experiência do usuário.

(Ao considerar todas as desvantagens) um aplicativo de navegador JavaScript puro oferece uma melhoria substancial na usabilidade e na experiência do usuário em um site tradicional?

Ao criar sites que funcionam como aplicativos nativos; Eu diria que a resposta é um óbvio sim. No entanto, a maioria dos sites não é tão simples assim; é uma questão de avaliar se os fluxos de trabalho de usuários individuais se beneficiam de uma interface altamente dinâmica.

Eu tenho uma visão bastante pragmática disso, não é uma questão ou outro; Obviamente, o JavaScript será reproduzido com as tecnologias do servidor e você não precisará escolher uma ou outra - todo site não é um aplicativo da web de uma única página - mas não há nada que o impeça de usar Knockout, backbone e similares em páginas individuais para melhorar as coisas onde é considerado necessário.

Eu tenho uma relação de amor e ódio com aplicativos pesados ​​de front-end.

Por um lado, adoro escrever JavaScript e adoro o navegador como um ambiente de execução.

Por outro lado, ambos parecem um carro de corrida de Fórmula 1 com furos no motor. Realmente se resume a isso: Você pode impedir a duplicação da lógica de negócios entre C # e JavaScript? Nesse caso, use qualquer método para gerar a exibição que você considerar digna. Se você estiver duplicando a lógica de negócios em dois idiomas, poderá ter um desenvolvedor de front-end que queira apenas escrever JavaScript e que não tenha uma visão geral.

Quanto às diferenças técnicas:

Renderizando um parcial e entregando-o ao cliente:

• Fácil e rápido de implementar
• Impede que a lógica de negócios de back-end seja duplicada no front-end
• Pode resultar em uma carga HTTP HTTP muito maior para o navegador. Não é uma coisa ruim em uma área de trabalho com uma conexão de alta largura de banda. Muito ruim em um telefone celular fraco enquanto você está sentado em um trem na hora do rush, acelerando a pista a 100 km / h e outros 1.000 telefones celulares estão se desconectando simultaneamente de uma torre de celular e tentando se reconectar à próxima torre de celular.

Entregando JSON e renderizando um modelo do lado do cliente:

• Pode resultar em uma carga útil HTTP menor que HTML, o que pode fazer com que o aplicativo pareça mais responsivo em conexões de rede não confiáveis ​​ou lentas
• Muitas linguagens de modelagem JavaScript são completas, o que significa que não precisamos de um back-end apenas para gerar um pouco de HTML

Às vezes, acho que as estruturas JavaScript mais recentes estão jogando o bebê fora com a água do banho - cara, espero não estar me tornando um programador rabugento mal-humorado ...

No meu último aplicativo, combinei a API REST e o front-end do JavaScript.

O que eu fiz foi:

• Criei uma API REST para operações CRUD.
• Criei um aplicativo Javascript que carrega modelos HTML predefinidos e preenche os dados retornados da API REST.

Basicamente, o front-end JS se comunica com a API REST para operações CRUD e preenche o HTML com os dados retornados ou dados criados, ou remove os dados excluídos ou atualiza os dados alterados.

Portanto, temos HTML puro, o processamento é feito no cliente, temos menos uso de largura de banda por não ter que carregar todo o HTML e podemos fornecer uma experiência verdadeiramente Web 2.0 para os usuários.

Não faço validações de negócios no front-end para segurança e duplicação de código, pois qualquer pessoa pode alterar os dados antes de enviá-los ao servidor e precisamos validar os dados no servidor novamente. Portanto, isso seria facilmente hackeado. Todas as validações são feitas no back-end. As validações no lado do cliente são feitas apenas para tipos de entrada.

Prós:

• Facilidade para fazer alterações no HTML devido ao fato de não ser gerado pelo JS;
• Menor consumo de largura de banda usando ajax e JSON;
• Menor consumo de processamento do servidor, pois o HTML é preenchido no lado do cliente;
• Experiência do usuário aprimorada usando JS para alterar a tela, permitindo o uso de efeitos e aumentando a velocidade de renderização.
• Melhor uso do protocolo HTTP, usando REST.

Contras:

• 2 aplicações a serem mantidas;
• Depende do processamento do cliente, que pode ser ruim devido ao hardware insuficiente.

Espero que isto ajude.

Saudações,

Com relação ao validationaspecto no Web Api - É possível fazer "validação de modelo" e responder com uma resposta http de 400 solicitações incorretas.

Consulte /programming/11686690/handle-modelstate-validation-in-asp-net-web-api/25050285#25050285