Categoria: Blog

Publicado em

Ferramentas para minificar arquivos JavaScript

As boas práticas de JavaScript e ordenação correta do código permite aos desenvolvedores trabalharem de forma eficiente, ordenada e facilita a leitura do código ao se trabalhar em grupo. No entanto esse código é feito para entendimento dos humanos trabalhando com ele e para as maquinas, muito do que se coloca é desnecessário. Para isso efetuamos a minificação.

As técnicas de minificação são utilizadas por muitos desenvolvedores de website devido ao fato de gerarem versões dos arquivos que são menores e por isso, carregam mais rápido e permitem que o site execute sem afetar a experiencia de uso dos usuários com conexões mais lentas.

Para a sorte de muitos, existem diversas ferramentas disponíveis online que permitem que a minificação seja feita sem muito trabalho ou erro. Segue abaixo algumas delas:

JSMin

 https://www.crockford.com/javascript/jsmin.html

O JSMin promete conseguir reduzir arquivos JavaScript em até 50% através da remoção de comentários, linhas de espaço e quebras de linhas desnecessárias. Ao mesmo tempo, o programa sabe levar em consideração que certas peculiaridades da linguagem para evitar erros ao minificar Strings e onde o código pode considerar um fechamento de bloco implícito.

Para executa-lo, basta fazer um download do executável em formato ZIP ou do código fonte em C fornecido no próprio site.

YUI Compressor

http://yui.github.io/yuicompressor/

O YUI Compressor é mantido pelo Yahoo e serve para minificar tanto arquivos JavaScript quanto CSS. Para comprimir os arquivos JS, ele depende do Rhino que é uma implementação Open Source do JavaScript escrita totalmente em Java.

Ele começa analizando o arquivo JavaScript de para entender como ele está estruturado e após, imprime o fluxo dos tokens, omitindo o máximo de caracteres de espaço em branco e substituindo todos os símbolos locais por um símbolo de letra onde quer que tal substituição seja apropriada

AjaxminUi

http://ajaxmin.codeplex.com/

O Microsoft Ajax Minifier permite que você melhore o desempenho de seus aplicativos da Web reduzindo o tamanho dos arquivos JavaScript e CSS. Além de minificá-los, é possivel mapas de origem para arquivos JavaScript.

Com a opção -analyze na linha de comando para fornecer verificação de sintaxe no estilo “Lint” e análise de variáveis de código. Já com a opção -pretty na linha de comando resultará em um formato multilinha de fácil leitura.

Google Closure Compiler

https://developers.google.com/closure/compiler/

O Closure Compiler é uma ferramenta JavaScript para tornar o download e execução dos arquivos JS mais rápidos. Ao invés de compilar o código fonte em código de máquina, ele compila o JavaScript em uma versão “melhor”, mas ainda em JavaScript. Além de remover comentários e minificar os arquivos fornecidos, ele também analisa e otimiza o código, podendo remover ou reescrever trechos do script.

Gulp

https://gulpjs.com/

O Gulp é uma ferramenta completa que permite aos desenvolvedores reduzir o número de tarefas repetitivas que estão envolvidas com o a criação e deploy de aplicações web.

Com ele é possível minificar, organizar e controlar o tanto os arquivos JavaScript quanto os CSS. Comparado com as ferramentas mostradas aqui anteriormente, o Gulp é certamente mais complexo, mas se bem utilizado é o que permite o melhor controle e manutenção de seu projeto.

Publicado em

Conheça o Handlebars.js

[download id=”233″]

O Handlebars fornece as funcionalidades necessárias para permitir que você crie modelos semânticos de forma eficaz sem frustração. Ele é amplamente compatível com os templates Mustache e na maioria dos casos, é possível alternar entre os dois sem demais problemas.

Vou falar um pouco sobre o sistema, mas caso você queira saber mais, confira o site oficial do Handlebars no linkhttp://www.handlebarsjs.com e a demonstração ao vivo em http://tryhandlebarsjs.com/ para saber tudo o que o ele pode fazer por você.

Uso

Em geral, a sintaxe dos modelos Handlebars.js é um superset do Mustache. Depois de ter um modelo, use o método Handlebars.compile para compilar o modelo em uma função JavaScript. Esta função gerada leva um argumento de contexto que será usado para renderizar o modelo.

Segue abaixo um exemplo simples, para executa-lo

<html>
<head></head>
<body>
  <script src="handlebars.js"></script>
  <script>
    let exemplo = "<p>Olá, meu nome é {{nome}}. Eu sou de {{cidadeNatal}}. Eu tenho "
        + "{{filhos.length}} filhos:</p>"
        + "<ul> {{#filhos}}<li>{{nome}} tem {{idade}} anos</li>{{/filhos}}</ul>";
    let template = Handlebars.compile(exemplo);
    let dados = {
        "nome": "Paulo",
        "cidadeNatal": "Cidade, RS",
        "filhos": [{
        "nome": "João", "idade": "12"
        }, {
        "nome": "Maria", "idade": "4"
        }]
    };
    let resultado = template(dados); document.writeln(resultado);
  </script>
</body>
</html>

Templates pré-compilados

O handlebars permite que os templates sejam pré-compilados e incluídos como código JavaScript ao invés de templates handlebars, permitindo que as aplicações carreguem mais rápido. Para mais detalhes veja esse LINK

Principais diferenças entre o Handlebars.js e o Mustache

O Handlebars.js incrementa algumas funcionalidades adicionais para fazer o desenvolvimento de templates mais fácil e também muda alguns detalhes de como o “partials” funciona. Segue abaixo alguns itens que mudam entre os dois.

  • Caminhos aninhados
  • Helpers
  • Expressões de bloco
  • Valores literais
  • Comentários delimitados

As expressões de bloco têm a mesma sintaxe que as sessões do Mustache, mas não devem ser confundidas umas com as outras. Sessões são similares com o “each” implícito ou com “statement” dependendo dos dados inseridos e os “helpers” são pedaços de código explícitos que podem implementar qualquer comportamento que quiserem. A documentação do Mustache define o comportamento exato das sessões. No caso de haverem conflitos com os nomes, os “helpers” recebem prioridade.

Performance

Em um teste de performance bruta, o templates pré-compilados do Handlebars.js (na versão original do Handlebars.js) renderiza na metade do tempo dos templates do Mustache. Seria uma pena se fosse de qualquer outra forma, pois eles foram pré-compilados, mas a diferença na arquitetura tem diversas vantagens de performance. A nova versão do Handlebars é mais rápida que a original a ponto de que diversos testes de performance independentes registraram uma diferença de 5 a 7 vezes mais rápido que o equivalente em Mustache.

Nota

Este é um resumo traduzido diretamente do site do handlebars. Para mais detalhes, acesse o site http://handlebarsjs.com/ e tambémhttps://github.com/wycats/handlebars.js

Publicado em

Novidades no site!

O que vem por ai?

Acadêmico

Inaugura hoje a nova sessão do site MundoJS chamada de Acadêmico. Nela disponibilizaremos diversos conteúdos para aqueles que estão aprendendo programação, estrutura de dados e algoritmos.

Os tutoriais serão apresentados no formato de mini tutoriais com vídeos, imagens e código fonte para ajudar a todos que estão iniciando a jornada no mundo do desenvolvimento de sistemas.

Posts e Artigos

Você verá nesta nova área o conteúdo apresentado de uma forma um pouco diferente da nossa sessão de Blog e Artigos. Os conteúdos serão agrupados por área e como a grande maioria é extensa, as páginas serão quebradas em diversos módulos/segmentos. A ideia é facilitar o estudo focado por nível de dificuldade e tópico. Caso você leitor tenha alguma dúvida ou sugestão, por favor entre com contato conosco.

Youtube

Junto com a nova sessão, inauguramos nosso canal no Youtube onde serão colocados diversos vídeos explicando como utilizar e resolver problemas comuns enfrentados por desenvolvedores front-end. Conheça nosso novo canal no youtube pelo link: Youtube – MundoJS

Redes Sociais

Por último, adicionamos em nosso círculo de redes sociais uma conta do Google+ para que possamos alcançar um público maior. Caso queira saber veja nossa página no G+, acesse aqui: Google+ – MundoJS, ou se você prefere o Facebook, mas ainda não nos curtiu acesse aqui: Facebook – MundoJS

Publicado em

O que é minificação?

Navegadores não estão preocupados com a clareza do código na hora que estão gerando uma página web ou rodando um script. A minificação remove do código tudo que não é obrigatório para que o arquivo seja executado da forma correta e ao contrário das técnicas de compressão, os arquivos minificados não precisam retornar ao estado anterior antes que possam ser lidos e executados.

A minificação ocorre após o código aplicação web ter sido escrita, mas antes de ter sido lançada. Quando um usuário faz uma requisição para de uma página web, a versão minificada é enviada ao invés da versão completa e com isso é possível obter uma resposta mais rápida e a um custo menor da banda de internet.

Como a minificação funciona

A minificação funciona através da análise e reescrita das partes de um website que são definidas por arquivos de texto (código HTML, CSS, JavaScript, etc..). Normalmente ela é realizada pelo servidor web antes de enviar a resposta a máquina cliente ou podendo já existir uma versão pronta em situações mais manuais de controle de versão.

Aqui está um passo a passo de como a minificação pode ocorrer:

  1. O desenvolvedor cria os arquivos JavaScript ou CSS para serem utilizados na aplicação Web. Estes arquivos estão formatados para a conveniência do desenvolvedor. Isto significa que eles terão comentários, indentações, variáveis com nomes autoexplicativos e outras boas práticas utilizadas para melhorar o entendimento do código.
  2. O desenvolvedor aplicará técnicas de minificação para converter o arquivo em uma versão mais otimizada, mas mais difícil de ser entendida por humanos. Normalmente estás técnicas removerão todas as aplicações de boas práticas em prol da otimização do código.
  3. O servidor web utiliza a versão minificada quando responder a requisições, resultando em menos trafego de banda sem sacrificar a funcionalidade do código.

Técnicas de minificação e ferramentas

Uma das ferramentas mais completas de minificação é o minify. O minify gerencia a minificação, caching, e comprime os arquivos CSS, HTML e JavaScript. Ele também oferece integração com frameworks e aplicações web populares tais como o WordPress e Magento.

  • Minificação HTML

    O google fornece o PageSpeed Insights. Um site e extensão do Chrome que recomenda melhoras de performance para qualquer website. Ele também fornece uma ferramenta que minifica o HTML do site aberto.

  • Minificação CSS

    Como o CSS provavelmente será alterado com frequência, existem diversas ferramentas online que fornecem minificação instantânea. O CSS Minifier é um jeito fácil e rápido de minificar, enquanto o Refresh-SF usa diversas ferramentas para minificar o HTML, CSS e JavaScript.

  • Minificação JavaScript

    A ferramenta do Google de Otimização de JavaScript chamada de Closure Compiler cria uma versão mais eficiente de arquivos JavaScript. Quando um desenvolvedor cria ou altera um Arquivo JavaScript, ele ou ela pode usar o Closure Compiler para minificar o código. O novo arquivo é publicado no servidor onde ele pode ser acessado pelo navegador web.

Conclusão

Minificar os arquivos é um jeito fácil e rápido de reduzir o uso de recursos da sua aplicação web. Mesmo com as técnicas padrões de minificação, é possível reduzir em até 60% o tempo de renderização de uma página. Você também pode ter grandes ganhos de performance sem comprometer a experiencia do usuário.

Fonte:

StackPath

Publicado em

Boas práticas de JavaScript que você precisa saber

Boas práticas de programação são sempre bem-vindas em qualquer código. Infelizmente nem tudo pode ser aproveitado de uma linguagem para outra devido a forma como as mesmas são implementadas em seu “encanamento” para transformar o nosso código em imagens, animações, arquivos, etc…

Tendo isto em vista isto, coloquei aqui uma lista de boas práticas para programar em JavaScript que podem ajudar a melhorar o desempenho, eficiência e entendimento do seu código.

1) Evite usar variáveis globais

Sempre que possível, evite utilizar variáveis globais. Isso inclui todos os tipos de dados, objetos e funções pois eles podem ser sobrescritos por outras bibliotecas ou códigos espalhados pelo seu site/aplicativo. Outro possível problema é que a performance, apesar de pouco, é afetada negativamente pois demora mais tempo para o código ler as variáveis globais no JavaScript.

2) Utilização dos ponto-e-vírgulas

Teoricamente, a maioria dos interpretadores deveria permitir que os ponto-e-vírgulas sejam omitidos de certas partes do código (ex.: antes do fechamento das chaves e ao definir valores a variáveis). No entanto isso não é necessariamente uma regra e pode levar seu código executar de forma não desejada.

3) Nunca declare números, strings e booleanos como objetos.

Declarar variáveis de tipos “primitivos” como objetos causa um impacto na performance do código que é desnecessário em 99% das vezes que é feito desta forma. Sempre que possível declare-os utilizando os valores primitivos (ex.: var umaString = “teste”;).

4) JavaScript Puro Sempre Pode Ser Mais Rápido Que Usar Uma Biblioteca

Bibliotecas como o Jquery, bootstrap.js, w3.js entre outras são ótimas ferramentas para reduzir o tempo de desenvolvimento de aplicativos e websites. No entanto, elas pesaram para serem carregadas por seus usuários e as funções que elas fornecem podem ser significativamente mais lentas que a utilização do JavaScript puro. Por isso, avalie sempre a necessidade de utilização dela e também se ela seria substituível por algumas funções prontas da linguagem.

5) Coloque os Scripts na Parte Final da Sua Página

Algumas bibliotecas e frameworks já tem instruído os desenvolvedores, mas vale a pena lembrar. Sempre que possível, chame os scripts no final antes do </body>, pois desta forma você estará permitindo que o html e o css renderizem em tela antes de carregar os scripts. Isto dá uma sensação de velocidade maior para o usuário que dificilmente interagirá com seu site antes do binding de eventos e carregamentos das funções.

6) Minimize as chamadas HTTP

Cerca de 80% do tempo de resposta para o usuário final é gasto no front-end e boa parte deste tempo é baixando imagens, stylesheets, scripts, etc… É aconselhável que você entregue todo o código JavaScript de uma vez só e assim economizar a chamadas para cada arquivo. Para isso existem diversas ferramentas que permitem minificar e unir diversos arquivos JavaScript em um só. Verifique se sua IDE e linguagem de programação back-end possuem tal funcionalidade.

7) Deixe o código JavaScript em arquivos externos

Normalmente o uso de arquivos externos (colocar o código em um arquivo js ao invés da tag script dentro do html) gera uma página com tempo de carregamento mais rápido pois o navegador costuma fazer cache de arquivo JS e CSS. Se o estilo e o script do código existir junto com o HTML, ele será baixado junto com a página toda vez que a mesma for carregada. Por mais que essa prática reduza o número de chamadas http, ela aumenta o tempo base fixo para carregamento do website.

8) Minifique e use Gzip

Apesar da indentação e comentários serem ótimos para melhorar a leitura, entendimento e clareza do seu código, os interpretadores não precisam deles e na verdade precisam trabalhar mais para isso. Por isso, utilize uma ferramenta para criar uma cópia minificada do seu código javascript quando for colocá-lo em produção.

Outra ferramenta que pode reduzir o tamanho de seus arquivos em mais da metade é o gzip, reduzindo o tempo necessário para que o conteúdo seja baixado pelo usuário final.

9) Comente seu código

Essa última dica deveria ser cadeira de faculdade. O código comentado facilita muito a comunicação do que está (ou deveria estar) acontecendo no programa e permite que outros programadores possam navegar com menos trabalho em scripts que não são deles. Para aqueles que trabalham sozinhos e acreditam que não precisam comentar seu próprio código pois são os únicos que o lerão eu lhes pergunto, você já consegue pegar o código fonte de um programa complexo seu escrito 2 anos atrás e dizer de cara o que cada função faz?

Fonte:

w3schools – Best Practices

Github – Steve Kwan Blog

Yahoo – Performance Rules

Publicado em

5 frameworks JavaScript que você precisa conhecer

Com o crescimento da popularidade do JavaScript como sendo mais que apenas uma linguagem que valida forms ou faz alguns “efeitinhos” e animadas na tela, vieram diversas bibliotecas e frameworks que adicionam funcionalidade, complexidade e muitas, mas muitas horas a mais de estudo. Para ajudar a reduzir um pouco esta carga, colocamos aqui uma lista com 5 frameworks que podem servir como ponto de partida para essa jornada. Boa sorte!

Angular

Angular é um dos frameworks JavaScript mais utilizados para construir aplicações web e SPAs. Ele foi desenvolvido e lançado pela Google com o nome AngularJS no ano de 2009. Desde então ele já sofreu diversas atualizações de versão, se tornou disponível como um projeto open source licenciado MIT e é a base de diversas aplicações web de nível empresarial.

Angular é um framework MVC e oferece um a possibilidade de fazer one-way ou two-way data binding entre views e models. Angular é utilizado para construir tanto aplicações desktop quanto web.

React

Construído pelo Facebook e lançado em 2013, o React ganhou popularidade rapidamente e se tornou um dos frameworks JavaScript com o crescimento mais rápido dentre os mencionados. O React é utilizado na interface com o usuário tanto do Facebook quanto do Instagram e isso já prova que ele é capaz de lidar com aplicações empresariais de alta performance.

Este framework fornece um fluxo de dados de 1 caminho e dá suporte a componentes encapsulados que gerenciam seu próprio estado. React pode ser renderizado no servidor usando Node e também pode ser usado para construção de aplicativos para celular usando React Native

Ember

Ember é um framework JavaScript simples de aprender e possui um bom suporte da comunidade. Ember possui um framework para criar aplicações web de grande porte e utiliza o Handlebars, que atualiza de acordo com a mudança dos dados, como base para seus templates.

Ele foca na produtividade do programador e incorpora funcionalidades comuns para que o desenvolvedor não perca tempo fazendo escolhas triviais.

Aurelia

Aurelia é outro framework popular para o desenvolvimento mobile, desktop e web. Aurelia oferece two-way data binding e suporta várias versões do JavaScript, tais como ES5, ES 2015, ES 2016 e Typescript.

Ao invés de utilizar um framework monolítico, é formado por diversos módulos menores e focados. O Aurelia também torna fácil testar o código e seus criadores fornecem suporte comercial.

Meteor

Meteor é um framework de aplicações reativas completo para desenvolver aplicativos mobile, desktop e web utilizando JavaScript como a linguagem padrão. Desde que foi lançado em 2012 ele tem crescido bastante.

Com um framework open source sobre a licença MIT, ele foca em construir funcionalidades com menos linhas de código e usando uma integração JavaScript desde o banco de dados até a tela do cliente. A equipe que desenvolveu o Meteor também fornece suporte comercial e hospedagem para aplicativos que o usam.

Qual deles é o melhor?

Todos os frameworks mencionados são muito populares, cada um tem seus pontos fortes, pontos fracos e os focos mudam um pouco. Por isso fica difícil escolher o “melhor” pois depende da aplicação sendo implementada, a estrutura de trabalho seu ou da sua equipe e a plataforma de escolha. De toda forma, sempre vale a pena mexer com o básico do código de cada um para se ter uma ideia melhor do que é melhor para você.

Publicado em

Veja qual a diferença entre Framework e Biblioteca

Está pergunta é muito comum as vezes é a causadora de discussões em círculos de desenvolvedores pois framework e bibliotecas podem ter significados diferentes para pessoas diferentes e em momentos diferentes. No entanto existe uma definição geral que tentarei descrever aqui com a finalidade de simplificar e esclarecer cada um.

Biblioteca

Uma biblioteca é uma coleção organizada de funcionalidade uteis. Um exemplo de biblioteca padrão poderá incluir funcionalidades para manipular string, datas, eventos, animações, etc… Cada uma destas funções retornará valores para a aplicação que a está invocando que então poderá ser manipulada de acordo com a necessidade.

Bibliotecas normalmente fornecem um nível mais alto de abstração que serve para facilitar implementações que sofrem inconsistências devido a variáveis externas. Por exemplo, uma chamada AJAX normalmente depende da API XMLHttpRequest mas a mesma precisa de várias linhas de código para lidar com as inconsistências entre os navegadores. Por isso uma biblioteca pode fornecer um método ajax() que lidará com essas mudanças, deixando você livre para se preocupar com a implementação da lógica de negócio.

Uma biblioteca pode reduzir o tempo de desenvolvimento de pois não a necessidade de se preocupar com detalhes. Por outro lado, um bug dentro da biblioteca pode se tornar difícil de descobrir e corrigir, não há garantias que os responsáveis pela biblioteca irão corrigi-lo em tempo hábil e uma atualização pode mudar a API de forma a causar mudanças em seu código.

Frameworks

Um framework é o esqueleto de uma aplicação que requer que você utilize um design de software especifico e insira sua própria lógica em certos momentos. As funcionalidades como eventos, armazenamento e ligação de dados são fornecidas prontas para o desenvolvedor.

Comparado com uma biblioteca, o nível de abstração é mais alto e somado as diversas funcionalidades prontas, o desenvolvimento dos primeiros 80% será incrivelmente rápido. Por outro lado, os 20% restantes podem ser mais difíceis que a primeira parte se eles saírem das limitações do framework, atualizações são muito difíceis de serem implementadas e ao mesmo tempo o código se torna obsoletos relativamente rápido.

Publicado em

Qual é a melhor linguagem de programação para iniciantes?

Este post é para você que está procurando sua primeira linguagem de programação. Antes de mais nada gostaria de dizer que existem diversas linguagens que são ótimas e pessoalmente aprendi muito mais estudando linguagens de programação diferentes e com paradigmas diferentes do que teria aprendido estudando apenas uma.

Tendo dito isto, respondo à pergunta dizendo que acredito no JavaScript como sendo o melhor candidato para ser a sua primeira linguagem de programação pelas seguintes razões:

Não é necessário fazer setup

Por ser uma linguagem interpretada por praticamente todos os browsers, não é necessário baixar nenhum programa para rodá-lo. Adicionalmente, o código pode ser escrito até mesmo no bloco de notas e rodado diretamente. Como exemplo, abra o seu bloco de notas e digite o seguinte código:

alert("Olá MundoJS!");

Salve como teste.html (lembrando que não pode ser um arquivo txt) e abra-o em seu browser favorito (Chrome, Edge, Firefox ou até mesmo o IE). Você que abrirá uma página em branco com um pop up mostrando a frase “Olá mundo!”. Para aqueles que preferem evitar o uso de pop ups, tente o seguinte:

console.log("Olá MundoJS!");

Ao rodar o seu código parecerá que nada acontece, no entanto basta entrar nas ferramentas de desenvolvedor (normalmente o atalho é o botão F12) e selecionar a aba “Console” e lá estará nossa frase “Olá mundo!”.

Ampla aplicação em diversas tecnologias

Apesar de ser uma linguagem focada para o desenvolvimento web, existem diversas implementações do JavaScript. Atualmente pode-se programar para

  • Serviços back-end
  • Aplicativos Mobile
  • Robótica
  • Internet das coisas
  • Aplicativos Desktop

Ótimas (e gratuitas) ferramentas para trabalho:

Apesar das funções poderem ser escritas em qualquer editor de texto, o melhor mesmo é aproveitar das vantagens que diversas IDE e editores avançados fornecem para acelerar o trabalho e facilitar a identificação do código. E a melhor parte é que mesmo as ferramentas gratuitas já oferecem grande auxilio de forma que você pode começar a desenvolver diversos scripts e aplicações sem precisar gastar dinheiro logo de cara.

Publicado em

MundoJS publicado!

logo

Foi ao ar o site do MundoJS (www.mundojs.com.br), um website focado em fornecer informações sobre a linguagem de programação JavaScript e de seus diversos frameworks e bibliotecas. Tendo como objetivo melhorar a quantidade e qualidade de informações disponíveis para esta linguagem.

Por que criar este site?

Apesar de extremamente útil, o JavasCript ainda possui pouco material em português, forçando muitos desenvolvedores a terem que procurar respostas em site em Inglês ou outras línguas. Utilizando artigos, dicas, noticias, vídeos e cursos, o MundoJS tem por objetivo aumentar a quantidade e qualidade de informação disponivel

Caso você que está lendo deseja postar um artigo ou conteúdo relevante, por favor sinta-se à vontade de entrar em contato conosco pelo e-mail contato@mundojs.com.br, tela de contatos ou através de nossas redes sociais.