Devido à grande variedade de tecnologias web incorporadas contidas em páginas web modernas, o monitoramento de desempenho e testes de carga podem ser uma tarefa desafiadora. Este artigo analisará as particularidades do monitoramento de aplicações web dinâmicas e outros elementos que devem ser considerados na escolha do tipo certo de ferramenta ou solução de monitoramento.

Páginas da Web dinâmicas vs. Páginas da Web estáticas

Todas as variedades de tipos de páginas web podem ser divididas em dois grupos principais: estático e dinâmico.

Em poucas palavras, uma página da Web estática é uma página HTML gerada no lado do servidor em um formulário pronto para uso. Geralmente, a geração de página é implementada usando linguagens de script do lado do servidor, como ASP, PERL, PHP, etc. Quando um navegador faz uma solicitação a uma URL, o servidor retorna um documento HTML que já inclui conteúdo de texto e gráfico da página da Web na resposta.

Por outro lado, o tipo mais comum de páginas da Web ou aplicativos hoje em dia são dinâmicos. Para implementar elementos dinâmicos, as mais recentes estruturas JavaScript como React, Vue, Angular JS, Knockout e Ember são usadas no desenvolvimento da Web.

Páginas web dinâmicas trazem o conteúdo sobre as ações do usuário enquanto são executados em uma URL estática. O conteúdo dinâmico é mais complexo em sua estrutura. As páginas não são recebidas do servidor em documentos HTML prontos para uso, mas são construídas para cada nova solicitação no computador do cliente. Toda vez que um usuário clica em um botão ou executa qualquer outra ação na página da Web (navegando entre guias, preenchendo formulários da Web, etc.), o navegador executa várias etapas antes de reescrever o conteúdo da página na janela:

Сhallenges of Monitoring JavaScript-based Applications

Enquanto monitoram o desempenho da página da Web estática, as ferramentas de monitoramento estão olhando através da resposta HTTP recebida do servidor de destino. Toda vez que um usuário interage com uma página da Web estática, um navegador chama o servidor e recebe um HTML pronto na resposta. Como todo o conteúdo que deve ser mostrado a um usuário já está gerado e incluído na resposta no lado do servidor, as ferramentas podem validar o conteúdo e as métricas de carga da página.

No entanto, as modernas frameworks JavaScript fornecem alguns desafios quando se trata de monitorar páginas web dinâmicas.

Validação de conteúdo e funcionalidade

As páginas da Web baseadas em JavaScript, conhecidas como SPAs
(single-page applications, aplicativos de página única),
 não realizam novas navegaçãos no navegador depois de carregadas. O documento HTML inicial inclui arquivos JavaScript que são acionados em qualquer evento do navegador e chama o servidor para dados JSON. Esses dados serão usados para atualizar o HTML inicial e alterar dinamicamente o conteúdo da página na janela do navegador.

Ao mesmo tempo, spAs e aplicativos com elementos inline iFrame podem incluir conteúdo de terceiros incorporado, como seções de anúncios, análises, widgets (Google Maps, vídeos do YouTube, etc. ). Para exibir esse conteúdo, os navegadores analisam o código HTML da página e executam scripts de terceiros. Em seguida, scripts de terceiros buscam o conteúdo para exibi-lo na página.

Em termos de monitoramento, isso torna difícil dizer exatamente quando o novo conteúdo foi carregado na página (carregando uma imagem, abrindo uma caixa de diálogo, etc.) porque não há nenhum evento gerado e visível para ferramentas de monitoramento baseadas em HTTP.

Determinando tempos de carga e desempenho reais da página

Geralmente, as respostas HTTP são usadas como resultado bem-sucedido da solicitação para uma página web de destino. Mas isso não significa que todos os arquivos JavaScript foram analisados e executados pelo navegador e o conteúdo foi renderizado e tornado visível aos usuários. Uma vez que o HTML inicial é carregado, o navegador começa a executar todo o JavaScript incorporado. Em termos de SPAs e iFrames, a árvore DOM pode ser renderizada muito mais cedo ou mais tarde do que a carga da página concluída. Em outras palavras, a diferença entre o tempo em que um usuário real pode interagir com uma página e o tempo de carga “completa” evento pode ser de até vários segundos.

Além disso, uma vez que a página baseada no JavaScript foi carregada, todas as alterações subsequentes na página não acionam novas solicitações do navegador para o servidor. Como resultado, o monitoramento baseado em HTTP não fornecerá métricas de alterações na página após a carga inicial da página. Para receber os tempos reais de carga, precisamos monitorar os eventos JavaScript na janela real do navegador.

Soluções completas como uma chave para o monitoramento abrangente

Como foi mostrado anteriormente, traços modernos da lógica do aplicativo web colocam limitações no monitoramento e teste com ferramentas que funcionam no nível de protocolo e NÃO usam um navegador.

Para imitar a experiência real do usuário, um navegador real é necessário para executar o monitoramento em todo o ambiente de tempo de execução JavaScript. Soluções full-stack, como a plataforma de monitoramento Dotcom-Monitor e a solução de teste de carga LoadView, usam navegadores reais para ajudar a superar todos os desafios descritos e garantir resultados realistas.

Monitorando páginas web dinâmicas: o gravador web everyStep

Para garantir que um usuário receba conteúdo adequado em uma página carregada em execução no mecanismo JavaScript, o Dotcom-Monitor fornece uma palavra-chave e uma funcionalidade de validação de imagem na janela real do navegador. Aqui estão os passos simples que você precisa executar:

  1. Script ações do usuário na página web alvo usando o EveryStep Web Recorder.
  2. Configure a Validação de Conteúdo para cada etapa.

Por exemplo, vamos configurar o monitoramento da página Dotcom-Monitor Email Report History como um exemplo de uma página web baseada em JavaScript.

Primeiro, precisamos abrir o EveryStep Web Recorder e fornecer a URL de destino.

Uma vez que a gravação é iniciada, para garantir que as desistências na página funcionem corretamente e o conteúdo especificado seja carregado, precisamos verificar os elementos suspensos e configurar uma palavra-chave de afirmação por cada gota. No caso de um erro de validação de conteúdo, um alerta será gerado para o dispositivo de monitoramento.

Como detectar problemas de desempenho em SPAs

A lógica SPA depende fortemente da tecnologia JavaScript. Consequentemente, para garantir que os requisitos de SLA do aplicativo sejam atendidos, é necessário monitorar as métricas de desempenho dos eventos JavaScript gerados na página.

O Dotcom-Monitor permite que os usuários configurem relatórios sobre o tempo de execução das solicitações JavaScript ou o tempo de processamento e execução de uma ação específica do usuário na página de destino. Para receber dados sobre as métricas JavaScript nos relatórios do dispositivo, use funções inline do Network Watcher e do Time Watcher no ES Recorder.

Além disso, para aplicações web construídas com a tecnologia AJAX, você pode detectar métricas de solicitação AJAX no Gráfico de Cachoeirado dispositivo .

Resumo: Monitorando aplicações web dinâmicas

Em resumo, ao configurar o monitoramento de páginas e aplicativos dinâmicos da Web, recomenda-se usar uma solução de monitoramento que utilize navegadores reais para capturar todos os eventos JavaScript na janela do navegador, dando-lhe os resultados de monitoramento mais precisos.

Para monitorar o desempenho dinâmico de conteúdo e funcionalidade em SPAs, a validação de conteúdo (validação de imagem e palavra-chave) em ambientes reais do navegador e o monitoramento de métricas de desempenho javaScript devem ser realizados.

  • Frontend Frameworks para construir seu aplicativo web dinâmico

    As estruturas frontend definem a aparência das páginas que você vê como parte de um aplicativo web na janela do navegador. Em o oposto aos frameworks de servidores, as estruturas frontend não funcionam com a lógica de negócios dos aplicativos web. Essas estruturas executam todo o seu trabalho em um navegador. Usando diferentes tipos de frameworks frontend, você pode criar novas interfaces de usuário, adicionar animações complicadas a uma página da Web e implementar aplicativos de página única. Neste artigo, teremos um olhar mais atento sobre as estruturas baseadas em JavaScript e discutiremos algumas vantagens e desvantagens de usá-las para facilitar seu processo de desenvolvimento de interface do usuário.

    Hoje em dia há um punhado de frameworks de frontend JavaScript no mercado. Aqui está a lista dos seis quadros mais favorecidos na comunidade de desenvolvimento web:

    • Angular – é uma estrutura frontend de código aberto baseada no JavaScript pelo Google. É especializada no desenvolvimento de Aplicativos de Página Única (SPA). A estrutura permite criar aplicativos web do lado do cliente do zero usando HTML como linguagem de modelo. Atributos HTML personalizados adicionais permitem descrever os componentes do aplicativo de forma clara. Encontre mais informações sobre o monitoramento de aplicativos baseados no AngularJS em nosso post no blog.
    • React – formalmente não é uma estrutura JavaScript, mas uma biblioteca front-in que é usada para criar interfaces de usuário. É de código aberto introduzido pelo Facebook e amplamente utilizado por desenvolvedores web em todo o mundo. Encontre mais informações sobre o monitoramento de aplicativos web escritos no ReactJS em nosso post no blog.
    • Vue.js – é uma estrutura frontend que funciona com componentes de arquivo único e links unidiredas entre eles. A interface de linha de comando do Vue chamada ferramenta VUE CLI torna o processo de desenvolvimento mais rápido e fácil. Consulte nosso post para obter mais informações sobre o monitoramento de aplicativos web com o VueJS.
    • Ember – a principal característica do EmberJS é a vinculação de dados. A abordagem de vinculação de dados permite criar uma variável JavaScript, e quando o valor dessa variável muda, a parte do seu aplicativo que está vinculada a essa variável é atualizada.
    • Knockout – é uma estrutura de código aberto que trabalha com o modelo MVVM (Model-View-View-ViewModel). É desenvolvido em JavaScript sem dependências externas. Knockout é leve e fácil de usar e é especialmente eficiente na vinculação de dados. A estrutura é uma boa escolha para criar aplicativos de página única. por favor, encontre mais informações sobre desafios com o monitoramento de aplicativos .js Web em nosso blog.
    • AJAX – na verdade, AJAX (Javascript Assíncrono e XML) é uma síntese das tecnologias Javascript e XML. É uma estrutura que muitas vezes está associada ao termo Web 2.0 e é apontada como a mais nova aplicação da Web. Consulte nosso post para obter mais informações sobre o monitoramento de aplicativos baseados em AJAX.

    O que é JavaScript Framework? Por que você deveria tentar?

    As estruturas JS são bibliotecas de programação JavaScript que têm código pré-escrito que os desenvolvedores web podem usar para implementar funções e tarefas de programação comuns. É a base para a construção de sites ou aplicativos web ao redor.
    Vamos explicar por que as frameworks JavaScript reuniram tantos seguidores entre os desenvolvedores de interface do usuário. Embora o processo de codificação seja inteiramente possível sem o uso de frameworks, o ambiente certo pode tornar esse processo muito mais fácil. Além disso, a maioria dos frameworks JS são livres e de código aberto, o que torna sua integração no processo de desenvolvimento ainda mais simples.
    Primeiro, usar uma estrutura JS aumentará sua produtividade. Os desenvolvedores de interface do usuário não precisam mais escrever muito código manualmente, eles podem usar funções pré-escritas e prontas para uso e trechos de código. Com isso, você pode expandir modelos de código pré-escritos para criar alguns componentes padrão da Web em seu site. As estruturas são mais responsivas para o design de sites e mais apreciadas pelos desenvolvedores de sites. Vamos dar uma olhada nos melhores Quadros JS.

    Uma grande parte do mercado atual é detida por três frameworks populares: React, Angular e Vue. Essas estruturas são chamadas de reativas porque reagem a quaisquer alterações no estado do aplicativo e atualizam automaticamente uma interface de usuário. Por exemplo, se você declarar uma variável que controla o tamanho de um campo de texto em uma página da Web e, em seguida, alterar a variável, o tamanho do campo mudará por si só sem qualquer codificação manual. Você pode usar qualquer linguagem de programação, extrair dados para ele, empacotá-los em JSON, XML ou outros idiomas legíveis por máquina no backend e, em seguida, passá-los para a frente. Por sua vez, o quadro JS fará todo o trabalho deixado na frente. A estrutura atrai controles, configura animações, verifica os dados, apresenta as informações de acordo com as preferências do usuário e implementa a lógica do negócio. Todo o trabalho é realizado em um navegador e apenas os dados (às vezes, novas peças do modelo e das regras de lógica de negócios) são transferidos entre o navegador e o servidor web. Assim, as estruturas reativas são ferramentas indispensáveis para implementar o conceito de Aplicativo de Página Única quando todo o trabalho acontece em uma tela.

    Vue.JS

    O Vue é um dos quadros populares de frontend. É simples e simples comparado com o angular sofisticado. Além de leve, suas principais vantagens são o DOM visual, a abordagem de componentes e a vinculação de dados bidireires. O Vue é versátil, multitarefa, e pode lidar com processos simples e dinâmicos com facilidade. Ele pode ser usado para criar aplicativos web e mobile. Além disso, ele é usado com sucesso para criar aplicativos web progressivos (PWA) que são independentes do dispositivo ou tipo de rede, como Pinterest, Spotify e etc.

    O Vue possui documentação extensa e detalhada que ajuda a obter informações de alto nível e aprofundadas sobre os conceitos de estrutura. A estrutura suporta uma sintaxe simples que pode ser facilmente usada e compreendida pelos programadores JavaScript. E uma das principais vantagens da estrutura é o suporte incorporado da Typescript que permite evitar possíveis erros nas etapas de compilação. O suporte à typescript é extremamente útil no caso de construir aplicações em larga escala.

    O .js Vue é recomendado para projetos flexíveis, permitindo que você construa tudo do zero e desenvolva com sucesso grandes projetos.

    A única coisa que pode impedi-lo de usá-lo é a ausência de suporte de gigantes do setor como Facebook e Google. Além disso, devemos mencionar que algumas descrições ainda estão disponíveis apenas em chinês. Isso traz algumas dificuldades para o processo de desenvolvimento em algumas etapas. No entanto, considerando o quão popular esse quadro se tornou, a tendência pode ser alterada no futuro próximo.

    reagir

    Reagir é uma das estruturas mais fáceis de aprender. A estrutura foi desenvolvida pelo Facebook para corrigir problemas de manutenção devido à constante adição de recursos ao aplicativo. Reagir é a plataforma perfeita para quem espera muito tráfego em seu site e precisa de uma plataforma estável para mantê-lo. O moderno React de código aberto é notável por seu modelo de objeto de documento virtual (DOM), que oferece funcionalidade excepcional e garante estabilidade e bom funcionamento de um aplicativo web. A estrutura pode ser usada não apenas do lado do cliente, mas você pode usá-la no lado do servidor e, além disso, react pode ser usado com outras frameworks.

    O principal traço do React que o faz se destacar é a capacidade de reutilizar componentes de interface do usuário. Você pode criar um componente de interface do usuário uma vez e reutilizá-lo em outras partes do aplicativo. Além disso, você pode criar componentes de interface do usuário sem escrever novas classes. Isso torna mais fácil aprender a reagir. Além disso, o React Developer Tools estará sempre à mão para ajudar na inspeção das hierarquias de componentes React.

    Reagir tem muitas vantagens. Mencionamos apenas alguns deles neste artigo, mas é óbvio que a estrutura pode ser uma boa escolha para quem precisa construir interfaces de usuário com componentes de interface de interface reutilizáveis, especialmente é recomendado para o desenvolvimento de SPA. Resumindo, o React é a estrutura de frontend mais confiável do mercado nos casos em que você deseja desenvolver uma interface interativa.

    Quanto ao domínio do JSX para criar um projeto React, bem, você pode achar difícil usar o JSX, a menos que você tenha pelo menos experiência básica em Javascript. Além disso, você pode enfrentar algumas dificuldades para manter a documentação React atualizada devido a inúmeras e constantes atualizações.

    angular

    A lista das melhores estruturas front-end não estaria completa sem angular. Ao contrário do React, o Angular é único em seu recurso de vinculação de dados bidires. Isso significa que você sempre terá o modelo e a visualização sincronizados em tempo real. Em outras palavras, qualquer mudança no modelo será refletida instantaneamente na visão e o contrário. A Angular fornece a capacidade de reutilizar componentes e gerenciá-los facilmente usando injeção de dependência. O framework é enviado com as funções mais utilizadas, permitindo que você escreva menos código para o seu projeto.

    O Angular melhora o desempenho dos aplicativos web atualizando dinamicamente o conteúdo em pouco tempo, usando a vinculação de dados bidirecional. É a melhor escolha para aplicações corporativas e aplicações web dinâmicas.