quinta-feira, 26 de maio de 2016

Acessar o IIS Express remotamente

O IIS Express facilita muito o desenvolvimento de aplicações web utilizando o visual studio. O desenvolvedor aperta "F5" e tudo funciona, publicação, depuração... simples assim!

Mas e se você quiser testar sua aplicação em outra plataforma ou dispositivo? Como acessar o site que o IIS Express acabou de criar localmente através do seu celular, para avaliar a usabilidade? Há vários roteiros na internet, com dois ou três passos que podem ser repetitivos de se fazer.

Já o pacote Node iisexpress-proxy facilitou a tarefa com um simples comando (Depois de uma simples instalação)...
iisexpress-proxy [localPort] to [proxyPort]

Exemplo para a aplicação no http://localhost:51901/:
iisexpress-proxy 51901 to 3000


quarta-feira, 11 de maio de 2016

Performance da página no cliente

O nerdtech 03 (Velocidade, performance e otimização), podcast sobre tecnologia de conteúdo muito bem feito patrocinado pela Alura e feito pelo Jovem Nerd, deu uma visão geral de algumas formas de otimizar desempenho do site.

É possível mensurar o custo ou retorno de investimento num site rápido? Há um estudo da Amazon citado no programa na qual ela entende que a cada 100ms de latência maior em seu site impacta em 1% nos resultados da venda (Amazon found every 100ms of latency cost them 1% in sales).

Sites que ajudam na análise

Foi sugerido o site WebPageTest que ajuda na análise da experiência do usuário em um site. Possível inclusive comparativos de análises (No caso de ter sido feita alguma otimização) e a possibilidade de gerar um vídeo comparando o site  antes e depois de qualquer alteração.

Outra site que ajuda na análise é o PageSpeed do Google, que tem o diferencial de também avaliar tags bloqueantes. Outro site também do google é o Ferramenta de teste de sites para dispositivos móveis.



Dicas do Podcast

1) Deixar o servidor próximo do usuário, para diminuir a latência (Fazer CDN)
A latência representa o tempo entre requisição e retorno ao usuário.

2) Otimizar suas imagens
Otimizando a imagem haverá um download menor para o usuário e dessa forma, melhor desempenho no site. Normalmente imagens representam os recursos mais pesados na página.
Você pode fazer essas otimizações em sites como o TinyPNG ou fazendo tarefas automatizadas como o Gulp ImageMin

3) Minificar o CSS/JS
Esta ação também visa diminuir o custo de download, criando um arquivo novo, baseado na versão do desenvolvedor (que não deve ser excluída), removendo caracteres, espaços em branco - que tornam o arquivo de difícil legibilidade para humanos, mas é indiferente para a interpretação da máquina.
É possível fazer em sites CSS Minifier, JS Minifier ou através de tarefas automatizadas como o Gulp Uglify

4) Habilitar a compressão GZip no servidor
Configuração feita no servidor para otimizar o tamanho do download feito pelo cliente

5) Otimizar itens que bloqueiam o carregamendo do site
As tags de bloqueio são aquelas que interrompem o carregamento da página para requisitar novo recurso no servidor (Por exemplo javascript). Alguns arquivos tem bloqueio necessário como CSS.
Este item tem alto impacto no desempenho, mas adaptação ligeiramente mais difícil
Extra) Pensar no usuário

Referências:
Avoid Javascript blocking content download on your website during page load

sábado, 7 de maio de 2016

Corrigir "Use of const in strict mode" ao utilizar pacotes NPM (Gulp, GruntJS) no Visual Studio

Explorando mais pacotes de Gulp para automatizar tarefas (se você não conhece Gulp ou Grunt, leia o post "Gulp, Grunt, Bower e npm no Visual Studio"), ao tentar utilizar o pacote gulp-imagemin passei a ter o erro abaixo:

const imagemin = require('gulp-imagemin');
^^^^^
SyntaxError: Use of const in strict mode.


Solução:
  1. Garanta que você tenha a versão 4 ou superior do NodeJS, para isso. Para verificar a versão atual em seu ambiente, execute o seguinte comando:
    node-v
    1. Se precisar atualizar, pode fazer baixando o instalador do node.
  2. Atualize o NodeJS executado pelo Visual Studio em
    1. Tools -> Options  
    2. Projects and Solutions -> External Web Tools
    3. Adicione o diretório de instalação do NodeJS como primeira opção (Verifique sua instalação, o padrão é o diretório "C:\Program Files\nodejs")
Configuração Default do Visual Studio:

Configuração após atualizar:



Fontes que ajudaram na solução:
Synchronize Node.JS Install Version with Visual Studio 2015
SyntaxError: Use of const in strict mode