Modernizr – Bonus 1 de 2 | Detectando e Aplicando Polyfill | Série HTML5 | SW9
Olá a todos. Sejam bem-vindos ao Canal e Blog SW9 (http://blog.sw9.com.br)
Dando continuidade a MEGA Série sobre HTML5. O Objetivo é apresentar os recursos e as possibilidades que surgiram com o advento do HTML5.
A bola da vez é a biblioteca Modernizr. São ao todo 5 aulas + bonus sobre este tema, onde explicarei passo a passo o uso desta biblioteca, passando pela introdução, instalação, configuração, detecção de recursos HTML5, detecção de recursos CSS3 e o uso conjunto com Polyfill para trazer uma solução para os navegadores não compatíveis.
O que veremos nesta aula?
Após passarmos por várias aulas sobre a bilioteca Modernizr, chegou o momento de aplicarmos o processo de detecção em nosso formulário web. Para isso reservei duas aulas bonus. Mas eu não vou me limitar apenas ao processo de detecção, nestas aulas eu vou mostrar também como aplicar uma solução de contorno (fallback) fazendo uso de polyfill.
Eu falo um pouco sobre Polyfill na primeira aula sobre Modernizr, se você não asssistiu as aulas passadas eu recomendo assistir. Para facilitar, eu preparei uma playlist com a Série HTML5. Você pode localizar este link na minha área de links, no final deste Post.
Apresentando rapidamente o que veremos nestas aulas bonus, eu vou citar os tópicos que veremos nesta primeira aula:
1- O que você precisa saber sobre carregamento condicional e as alternativas de implementação;
2- Criando nossa própria função Javascript para carregamento condicional;
3- Criando nossa própria função Javascript para carregamento condicional de arquivos CSS;
4- Testando o Carregamento Condicional;
5- Próximos Passos.
1- O que você precisa saber sobre carregamento condicional e as alternativas de implementação
Mas porque vamos falar de carregamento condicional de arquivos Javascript e CSS? Se formos simplesmente utilizar o processo de detecção de recurso usando a biblioteca Modernizr, não seria necessário passarmos por esta etapa.
Mas como nosso objetivo aqui, além de detectar se um determinado recurso é compatível ou não com o navegador, é aplicar um polyfill para os navegadores não compatíveis, teremos sim que explicar e implementar o processo de carregamento condicional.
Na verdade o carregamento condicional permite que recursos (leia-se bibliotecas Javascript, arquivos Javascript, arquivos CSS) sejam carregados na página apenas quando uma determinada condição é atendida.
Mas porque isso é necessário? Não faz sentido carregar todos os recursos durante o carregamento da página, se dependendo da situação não precisamos utilizá-los.
Vamos aqui a um exemplo prático: na realidade este será o exemplo que iremos aplicar em nosso projeto.
Nós temos um formulário web que utiliza os novos campos lançados com o HTML5. Temos então campos do tipo data, cor, semana, numerico, etc.
O objetivo é manter a compatibilidade destes campos em navegadores que não dão suporte nativo a estes tipos.
Para atingirmos o nosso objetivo vamos usar a biblioteca Modernizr para permitir identificar (em tempo de carregamento da página) se estes tipos são compatíveis ou não com o navegador.
Caso os recursos sejam incompatíveis, é nesse momento que usaremos o carregamento condicional para carregar os arquivos que fazem parte do polyfill que iremos usar.
Caso os recursos sejam compatíveis, não usaremos o carregamento condicional, já que o navegador usará os recursos nativos do HTML5.
Com esta prática, carregaremos apenas as bibliotecas quando for realmente necessário, e desta forma ajudaremos no quesito: velocidade de carregamento da página.
Eu acredito que agora você tenha entendido a utilidade do carregamento condicional 
Falando agora sobre as alternativas de implementação que temos, vou começar falando de duas opções que foram descontinuadas.
A ideia inicial seria usar o próprio método do Modernizr chamado ‘load’, no entanto este método foi descontinuado, já que a base que usava também foi descontinuada (estou falando aqui da biblioteca YepNopeJS). Como o YepNopeJS foi descontinuado, por consequencia o método ‘load’ do Modernizr também foi.
Na minha opinião isso foi uma pena, porque a utilização dele era bem simples. Segue um exemplo de implementação logo abaixo:
Modernizr.load({
test: Modernizr.inputtypes.date,
nope: [
\'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js\',
\'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js\',
\'jquery-ui.css\'
],
complete: function() {
$(\'input[type=date]\').datepicker({ dateFormat: \'yy-mm-dd\' });
}
});
Outra opção disponível é usar a biblioteca Jquery, mais especificamente o método getScript. De forma simplista segue um exemplo logo abaixo:
$.getScript(\'demo_ajax_script.js\');
Deixarei na área de LINKS, o link para referência sobre este método.
Vale destacar também outras duas opções: a biblioteca RequireJS e Automatizadores de Tarefa como Gulp e Grunt.
Apesar de ter destacado as opções acima, para nosso projeto eu vou implementar dois métodos de carregamento de forma nativa. O primeiro método será para carregar arquivos .JS e o segundo método para carregar arquivos .CSS.
2- Criando nossa própria função Javascript para carregamento condicional
Vou explicar passo a passo a construção do método de carregamento de arquivos .JS
Durante este processo, vou mostrar a importância de se utilizar o atributo Defer
3- Criando nossa própria função Javascript para carregamento condicional de arquivos CSS
Ao término da implementação do método de carregamento de arquivos .JS, vou explicar passo a passo a construção do método de carregamento de arquivos .CSS
4- Testando o Carregamento Condicional
Após a criação dos dois métodos de carregamento, nós vamos testá-los rapidamente em conjunto com a biblioteca Modernizr
5- Próximos Passos
Até agora atendemos parte dos requisitos, para na sequencia implementar o mecanismo de detecção + aplicação de polyfill.
Na próxima AULA concluiremos o nosso laboratório, aplicando o Modernizr + carregamento condicional + polyfill em nosso formulário web, e desta forma levar uma solução alternativa para os navegadores que não possuem suporte aos novos tipos de campos que surgiram com o HTML5.
[Conclusão]
Na aula de hoje [Modernizr – Bonus 1 de 2 | Detectando e Aplicando Polyfill | Série HTML5 | SW9], demos sequência na Mega série sobre HTML 5.
Falei sobre o carregamento condicional, alternativas de implementação, passo a passo o processo de criação da função de carregamento condicional de arquivos .JS e arquivos .CSS, e finalmente o que vamos ver na nossa próxima aula.
Vou disponibilizar este projeto na minha área de downloads, para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso. Dentro da minha área de Downloads, procure pela pasta HTML5. O resto é com vocês
Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.
Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.
Fiquem com Deus e até o próximo vídeo.
[Links úteis]
Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph
Modernizr: https://modernizr.com/
YepNopeJS (descontinuado): http://yepnopejs.com/
Jquery getScript: https://api.jquery.com/jquery.getscript/
RequireJS: https://requirejs.org/
Cloud 9: https://c9.io/login
PlayList Cloud 9: https://goo.gl/7aQbD6
PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8
Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/
Meu Blog: http://blog.sw9.com.br
Meu GitHub: https://sw9brl.github.io/MyGitHubPage
Canal youtube: https://youtube.com/+sw9brl
Link do vídeo: https://youtu.be/3NsNkGfsVXA
Parceria: https://www.tubebuddy.com/pricing?a=sw9brl
✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se
Que tal me pagar um café :-)
Uma pequena quantidade de café foi consumida durante a produção de um post + vídeo. Se puder, contribua adicionando mais combustível para que eu tenha condições de seguir em frente.
Brincadeiras à parte, o valor selecionado é multiplicado por 2 (x2) que representa a multiplicação de minha dedicação a cada contribuição que recebo.
Deixe um comentário