Conf

JavaScript para Adultos

Guilherme BlancoPhoto by Ray Thomas

Photo by Ray Thomas

Conf

Guilherme Blanco

Desenvolvedor 10+ anos

Evangelista OpenSource

Contribui para...Doctrine

Symfony

Zend Framework

PHP

@guilhermeblanco

http://github.com/guilhermeblanco

O que um navegador web?

Tudo uma questo de percepo entre Performance & Accessibilidade

Sem tcnica

Graceful Degradation (1994)

Progressive Enhancement (2003)

Renderizao no navegador

HTMLCSSInline CSSInline JSDone!

Bloqueia Renderizao

Bloqueia Renderizao e Downloads

Poucas requisies HTTP

CSS Sprites

Image maps

Combinando JavaScript e CSS

Combinando JS e CSS

Separao de scripts eficiente

Doloto Microsoft Researchhttp://research.microsoft.com/en-us/projects/doloto/

JSLint / Google Closure compiler

Tcnicas de carga sob demanda

XHR eval

XHR injection

Script ou IFRAME

Script DOM element

Script defer

CSS no topo

Flash Of Unstyled Content (FOUC)

JavaScript na base (bottom)

JavaScript na base

Tolerncia falha

CNAME para download paralelo

Minificar JavaScript

Gzip componentes

Gzip componentes

HTML, CSS e JavaScript

Request

Response

Accept-Encoding: gzip, deflate

Content-Encoding: gzipVary: Accept-Encoding,User-Agent

Gzip componentes

mod_deflate

AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

Chunked responses

Chunked responses

Mecanismo do HTTP/1.1

Divide dados de resposta e transmitindo cada chunk com seu tamanho

Melhor usado quando a estrutura do site est em sincronia com esta estratgia

ChunkView http://tools.w3clubs.com/chunkview/chunkview.php

1

2

4

3

HTML Semntico

Acessibilidade

SEO

Tolerncia falha

JavaScript OO

Template Binding

Template Binding

HTML direto no JS

Manipulao de DOM no JS

Clonar um elemento template

Jquery Templatehttp://api.jquery.com/jQuery.template/

Template Binding

Perguntas?

${Name}

function renderList() { // Template ser compilado somente uma vez. $( "#summaryTpl" ) .tmpl( movies ) .appendTo( "#moviesList" );}

[...]

[...]

[...]

[...]

yahoo.util = function () { var __construct, setFormAjax, setLinkAjax;

__construct = function (context) { // No faz nada };

setFormAjax = function ($form) { // Implementao aqui };

setLinkAjax = function ($link) { // Implementao aqui };

return (function () { var self = { setFormAjax: setFormAjax, setLinkAjax: setLinkAjax };

__construct(self);

return self; })(); };

Follow

[...]

yahoo.util.setFormAjax($(".follow"));