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

Made with Slides.com

Front-end, do Futuro?

Novidades do HTML5, CSS3 e ES6 Javascript.

  • 1,242