Upload
luiz-oliveira
View
960
Download
1
Embed Size (px)
DESCRIPTION
HTML5 e CSS3 já não é mais futuro. Nesta talk é abordado um overview de novas tecnologias que já estão em desenvolvimento e tornarão realidade nos próximos anos. Dentre elas: DOM Level 4, CSS Selectors Level 4 & 5, Media Query 4, HTML 5.1, Ecmascript 6 & 7+. Apresentada em: 14 de Dezembro de 2013 no Front in Recife Local: Faculdade Marista Palestrantes: Luiz Tiago & Guilherme Farias
Citation preview
O L H A N D O P R A F R E N T EH T M L , C S S & J S :
flickr.com/tisdale53
L U I Z T I A G O
• CTO @ MGR Tecnologia
• Pós graduado em Desenvolvimento Mobile @ CESAR
• Graduado em Sistemas para Internet @ FMR
• Co-fundador do Pernambuco.JS / jQuery Brasil
G U I L H E R M E FA R I A S
• Front-end Engineer @ MGR Tecnologia
• Graduando Sistemas de Informação @ AESO
• Firefox OS Developer & Evangelist
• Zepto.JS Contributor
D O M L E V E L 4
• Working Draft - 07 November 2013
• AbstractDOM define um modelo de plataforma para eventos, promises e document nodes.
http://www.w3.org/TR/2013/WD-dom-20131107/
D O M L E V E L 4
• Feature Detection
Modernizr is a JavaScript library that detects HTML5 and CSS3
features in the user’s browser.
D O M L E V E L 4
• Better Class’s Manipulation
C S S S E L E C T O R S L E V E L 4
• E:local-linkQualquer link que o destino já seja a página atual
• E:current
• E:past
• E:future
http://dev.w3.org/csswg/selectors4
C S S S E L E C T O R S L E V E L 4
• E:active-dropElemento que vai receber o elemento que está sendo arrastado
• E:valid-dropElemento que pode receber o elemento arrastado
• E:invalid-drop(!E:valid-drop)
http://dev.w3.org/csswg/selectors4
C S S S E L E C T O R S L E V E L 4
• E:valid && E:invalid Input válido ou inválido de acordo com a validação HTML (type email, required, pattern=“[0-9]”)
• E:required && E:optional Elementos que tem ou não o atributo required
• E! > F O pai do elemento :)
http://dev.w3.org/csswg/selectors4
C S S S E L E C T O R S
L E V E L 5
Ideas to consider
C S S S E L E C T O R S L E V E L 5
• ::first-words(n)
• ::first-lines(n)
• ::nth-line(an+b)
• ::last-line
• ::quote-start
• ::quote-end
http://wiki.csswg.org/spec/selectors
C S S S E L E C T O R S L E V E L 5
• ::dragging
• :time[ before <time> | after <time> | <time> to <time> ] Controlar durante uma transição CSS
• :click && :clicked
• :keydown && :keyup
• :placeholder
http://wiki.csswg.org/spec/selectors
M E D I A Q U E RY 4
• @media script
http://dev.w3.org/csswg/mediaqueries4/
http://loopinfinito.com.br/2013/11/26/media-queries-nivel-4/
M E D I A Q U E RY 4
• @media pointer
• none - não há dispositivo apontador;
• coarse - há dispositivo apontador de baixa precisão (tela sensível ao toque);
• fine - há dispositivo apontador de alta precisão (mouse, trackpad e tela sensível a Pen Stylus).
http://dev.w3.org/csswg/mediaqueries4/
http://loopinfinito.com.br/2013/11/26/media-queries-nivel-4/
M E D I A Q U E RY 4
• @media pointer
http://dev.w3.org/csswg/mediaqueries4/
http://loopinfinito.com.br/2013/11/26/media-queries-nivel-4/
M E D I A Q U E RY 4
• @media hover
http://dev.w3.org/csswg/mediaqueries4/
http://loopinfinito.com.br/2013/11/26/media-queries-nivel-4/
M E D I A Q U E RY 4
• @media luminosity
• dim - O dispositivo se encontra num ambiente escuro ou com pouca iluminação.
• normal - O ambiente tem um nível ideal de luminosidade.
• washed - O ambiente tem um nível muito claro ou até excessivo em quantidade de lux.
http://dev.w3.org/csswg/mediaqueries4/
http://loopinfinito.com.br/2013/11/26/media-queries-nivel-4/
M E D I A Q U E RY 4
• @media luminosity
http://dev.w3.org/csswg/mediaqueries4/
http://loopinfinito.com.br/2013/11/26/media-queries-nivel-4/
.1
H T M L 5 . 1
• capture input [ filesystem, camera, camcorder, microphone ]
http://www.w3.org/wiki/HTML/next
H T M L 5 . 1
• download
http://www.w3.org/wiki/HTML/next
H T M L 5 . 1
• Elements
• <reco> (Speech Web API)
• <tts> (Speech Web API)
• <intent> (Web Itents)
http://www.w3.org/wiki/HTML/next
H T M L 5 . 1
• Web Components
• <template>
• <content>
• <decorator>
• <element>
• <shadow>
http://www.w3.org/wiki/HTML/next
H T M L 5 . 1 - I D E A S
• Decompress Element <decompress>
• Inputable <Select>
• <Audio> Balance
• Melhorias em <video>
http://www.w3.org/wiki/HTML/next
E C M A S C R I P T 6
• Sets Lista com elementos únicos ordenados
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Sets Lista com elementos únicos ordenados
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• MapsLista com elementos únicos ordenados, mas com chave/valor
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• WeakMaps Lista com elementos únicos ordenados, mas com chave/valor, mas a chave não pode ser primitivo.
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Iterators for-ofPermite iteração em arrays e collections, e traz como resultado os valores dos elementos.
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• GeneratorsPermite iteração em arrays e collections, e traz como resultado os valores dos elementos.
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Arrow FunctionsSimples e elegante <3
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Default ParametersSimples e elegante [2] <3
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• REST ParametersSimples e elegante [3] <3
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• letVariáveis com escopo em bloco
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• constTambém com escopo em bloco apenas
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Objetos tipados
• uint8: Inteiros positivos de 8-bituint16: Inteiros positivos de 16-bit uint32: Inteiros positivos de 32-bit
• int8: Inteiros (positivos e negativos) de 8-bit int16: Inteiros (positivos e negativos) de 16-bit int32: Inteiros (positivos e negativos) de 32-bit
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Objetos tipados
• float32 : Números com pontos flutuantes de 32-bit float64 : Números com pontos flutuantes de 64-bit
• boolean : Valor booleano primitivo do ECMAScript
• string : String primitiva do ECMAScript
E C M A S C R I P T 6 C L A S S E S
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• ClassesDeclaração
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• ClassesHerança
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Modules“CommonJS + RequireJS”
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Modules“CommonJS + RequireJS”
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Proxies
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Better Math• Math.log10(x)
Realiza cálculos de logaritmos de base 10
• Math.log2(x)Realiza cálculos de logaritmos de base 2
• Math.log1p(x)Realiza cálculos de logaritmos naturais de 1 + x
• Math.cosh(x)Co-seno hiperbólico de x.
• Math.sinh(x)Seno hiperbólico de x.
• Math.tanh(x)Tangente hiperbólica de x.
• Math.acosh(x)Inverso do Co-seno hiperbólico de x.
• Math.asinh(x)Inverso do Seno hiperbólico de x.
• Math.atanh(x)Inverso da Tangente hiperbólica de x.
• Math.trunc(x)Trás o número inteiro de x
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Better Math• Math.hypot(x,y[,z])
Retorna a raiz quadrada da soma dos quadrados dos seus argumentos. (pode ser 2 ou 3 argumentos)(hipotenuza)
• Math.hypot2(x,y[,z])Retorna a soma dos quadrados dos seus argumentos. (pode ser 2 ou 3 argumentos)(hipotenuza)
• Math.cbrt(x)Raiz cúbica de x.
• Math.sign(x) Indica se o número é positivo, negativo ou não é um número. Ou seja, se x for -100 o resultado será -1, se x for 50 o resultado será +1.
• Math.expm1(x)Retorna um calculo preciso de uma função exponencial de x com a base dos logaritmos naturais
• Math.imul(x,y)Retorna o resultado da multiplicação de 32 bits (C-like) dos dois parâmetros. ex: Math.imul(0xfffffffe, 5) //-10
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Better Number• Number.EPSILON
Retorna o valor da diferença entre 1 e o menor número maior que 1, que é equivalente a 2.2204460492503130808472633361816 x 10^-16
• Number.toInteger(x)Transforma x em um número inteiro
• Number.isNaN(x)Retorna true se x não for um número
• Number.isInteger(x)Retorna true se x for um número inteiro
• Number.isFinite(x)Retorna true se x for um número finito
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Template Strings
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• startsWith String.startsWith(searchString,position)
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• endsWith String.endsWith(searchString,position)
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• containsString.contains(searchString,position)
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• toArrayString.toArray()
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• repeatString.repeat(n)
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• from & ofArray.from(arrayLikeElements) & Array.of(elements)
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• find, findIndex Array.prototype.find(fn) & Array.prototype.findIndex(fn)
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• fillArray.prototype.fill(value, start, end)
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• assignObject.assign(target, source)
• Faz uma cópia profunda do objeto, incluindo os dados de target para dentro do objeto source. Isso é muito util quando se trabalha com com objetos complexos, devido a forma que o javascript trabalha com os ponteiros para posições de memórias de objetos.
E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• isObject.is(value1, value2)
E C M A S C R I P T 7 +
E C M A S C R I P T 7 +http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Novas tipagens: bignum, rational, symbol, complex…
• Sobrecarga de operadores
• Traits (estrutura parecida com a do PHP)
• Trademarks
• Guards
• Brander
E C M A S C R I P T 7 +http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Brander
• Relationships (x @ r = 10;)
• Distributed persistence
• Code isolation
• Weak References
• Quasi-parsers for JS, HTML, CSS
E C M A S C R I P T 7 +http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Possibly lexically nested modules
• Parallel array (SIMD - Single instruction, multiple data)
• Distribution compatible promises (at least Promises/A+)
• Communicating Event Loop concurrency model
O B R I G A D O , R E C I F E ! ( :
!