Front-end, do
FUTURO?
Cezar Luiz
Analista de Sistema pela UP
Front-end no EBANX
HTML5
<!doctype html>
<video> <audio> <picture> <web-components> <section> <footer> <aside> <main> <article> <header> <nav> <meta charser="utf-8"> <canvas> srcset websockets geolocation filereader localStorage DB's
input types
color range date email tel search url
input attrs
autofocus required! min max pattern sted placeholder!
Imagens Retinas
<img src="logo.png" srcset="logo@2x.png 2x, logo@3x.png 3x">
CSS
cansei de ser sexy
#header { color: red }
.section { color: red }
.title { color: red }
WHY?
Preprocessors to the rescue!
// SASS
$fail: red;
.alert.error { background: $fail; }
// SASS
@mixin border-radius($r) {
-webkit-border-radius: $r;
-moz-border-radius: $r;
border-radius: $;
}
.box { @include border-radius(10px) }
variáveis flexbox gradients border-radius box-shadow normalize box-sizing sprites rem vw vh transition keyframes
JavaScript <3
FTW
jQuery? Precisamos ainda?
$('.post')
document.querySelectorAll('.post') // IE8+
vs
$('#header').addClass('fixed')
header.classList.add('fixed') // IE10+
vs
$('input[data-class=food]')
document.querySelectorAll('input[data-class=food]')
vs
$(el).hide();
el.style.display = 'none';
vs
$(el).empty();
el.innerHTML = '';
vs
$(el).attr('tabindex');
el.getAttribute('tabindex');
vs
$(el).remove();
el.parentNode.removeChild(el);
vs
$(el).css('border-width', '20px');
el.style.borderWidth = '20px';
vs
$.parseJSON(string);
JSON.parse(string);
vs
API's
geolocation vibration canvas dragndrop filereader shadowdown websockets rtc battery ajax2 fullscreen getusermedia db's notifications classList audio/video push
Tá... e o tal do FUTURO?
Estamos no futuro!
Muitas ferramentas
react angular ember vue backbone undersocre lodash jquery
ES6
ou ES2015
const let arrow classes template-strings interator+for...of unicode spread-operator modules! map-set proxies symbols new-object-math-array-api promises
const e let
const PI = 3.141593
// ...
function f() {
{
let x;
{
// okay, block scoped name
const x = "sneaky";
// error, const
x = "foo";
}
// error, already declared in block
let x = "inner";
}
}
classes.. sim classes!
class Shape {
constructor (id, x, y) {
this.id = id
this.move(x, y)
}
move (x, y) {
this.x = x
this.y = y
}
}
class Rectangle extends Shape {
constructor (id, x, y, width, height) {
super(id, x, y)
this.width = width
this.height = height
}
}
class Circle extends Shape {
constructor (id, x, y, radius) {
super(id, x, y)
this.radius = radius
}
}
arrow functions
// Encurtar nomenclatura
var a = [
"Hidrogenio",
"Helio",
"Litio",
"Berilio"
];
var a2 = a.map(function(s){ return s.length });
var a3 = a.map( s => s.length );
// this léxico ou lexical this
// modo antigo
function Pessoa() {
var self = this; // Alguns escolhem `that` ao invés de `self`.
// Escolha uma e seja consistente.
self.idade = 0;
setInterval(function crescer() {
// O callback referência a variável `self` a qual
// o valor é o objeto esperado.
self.idade++;
}, 1000);
}
var p = new Pessoa();
// com ES6
function Pessoa(){
this.idade = 0;
setInterval(() => {
this.idade++; // |this| corretamente referência ao objeto Pessoa
}, 1000);
}
var p = new Pessoa();
template strings
// Sem template String
let link = 'http://www.ecma-international.org/ecma-262/6.0/';
let cssClass = 'link-js';
let text = 'ECMAScript® 2015 Language Specification';
let elementTpl = '<a href="' + link + '" class="' + cssClass + '">' + text + '</a>';
console.log(elementTpl);
// <a href="http://..." class="link-js">ECMAScript® 2015...</a>
// Com template String
elementTpl = `<a href="${link}" class="${cssClass}">${text}</a>`;
console.log(elementTpl);
// <a href="http://..." class="link-js">ECMAScript® 2015...</a>
modules
//sum.js
var sum = function(x, y) {
return x + y;
};
export { sum }
//multiplier.js
var multiplier = function(x, y) {
return x * y;
};
export { multiplier }
//calculator.js
import { sum } from "./sum";
import { multiplier } from "./multiplier";
var result = sum(15,27); // 42
result = multiplier(6,7); // 42
promises - adios cb hell
welcome promises hell hehe
var promise = new Promise((resolve, reject) => {
if (/* Condição */) {
resolve("Promise + Arrow Functions = <3");
}
else {
reject(Error("Oops!"));
}
});
promise.then((result) => {
console.log(result); // "Promise + Arrow Functions = <3"
}, (err) => {
console.log(err); // Error: "Oops!"
});
other stuffs
Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false
Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"
Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1, 2, 3].find(x => x == 3) // 3
[1, 2, 3].findIndex(x => x == 2) // 1
[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"
Object.assign(Point, { origin: new Point(0,0) })
Quem já está usando es6?
react yahoo airbnb mozilla netflix clouflare paypal spotify reddit vimeo soundclound slack walmart flipboard evernote linkedin auth0 behance godday atom ember
Uow!!!
Eu também quero usar! Comofas?
Browsers que suportam
é...
BABEL e ES6-Shim
TO THE RESCUE!
babel = compiller
es6-shim = tipo polyfill
Quer usar alguns objetos como Object.assing?
ES6 shim
Quer usar tudo do ES6 inclusive a nova syntax?
BABEL
Conclusão
Obrigado!
Dúdivas?
Cezar Luiz
cezarluiz.c@gmail.com
github@CezarLuiz0
Front-end, do Futuro?
By Cezar Luiz
Front-end, do Futuro?
Novidades do HTML5, CSS3 e ES6 Javascript.
- 1,328