Le futur du Web

Qui suis-je ?

{
  "firstName": "Julien",
  "lastName": "Roche",
  "age": 35,
  "works@": "Viseo Technologies",
  "tags": [
    "JavaScript", "NodeJs", "Angular", "Backbone",
    "Grunt", "Gulp", "Bower", "Jspm", "Karma", "Mocha / Chai / Sinon",
    "HTML5", "CSS3", "Less", "Stylus",
    "Java", "Spring", "Hibernate", "JPA",
    "..."
  ]
}

CSS4

"Nouveaux" sélecteurs

  • ":not" officiellement dans la norme
  • Les pseudo-classes de formulaires comme
    • :valid
    • :invalid
    • :optional
    • :required
    • :indeterminate

Nouveaux sélecteurs

  • Formulaire:
    • :default
    • :in-range / :out-range
    • :placeholder-shown
    • :user -error
  • Egalité sans la casse pour les valeurs des attributs
  • :dir, :lang pour se baser sur le sens du texte et de la langue
  • Et d'autres !

For more details

http://css4.rocks/

Grid Layout

https://egghead.io/courses/master-css-grid-layout

Grid Layout

http://cssgridgarden.com/  

Containment

  • Pour optimiser le temps de traitement
    • Au lieu de tout redessiner dans la page, nous ne redessinons jusqu'au parent qui contient cette propriété
    • https://csstriggers.com/
  • https://developers.google.com/web/updates/2016/06/css-containment

Autres nouveautés

  • Créer des variables
  • Nested rules & Mixins
  • Les modes de fusions avec "*-blend-mode"
  • Les formes avec "shape-outside"
  • ...

HTML 5.1 & 5.2

Menu contextuel

  • Balises : menu, menuitem, contextmenu
<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="share">
      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
    </menu>
  </menu>
</body>

Section rétractable

  • Balises : details, summary
<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>

Dialogue

  • Objectif: empêcher l'utilisation de "alert", "prompt", "confirm" pour éviter des attaques XSS
    • https://developers.google.com/web/updates/2017/03/dialogs-policy
<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

Le push / sub protocole

Appelé "PuSH"

JavaScript

Passive event

  • Par défaut, le moteur JavaScript attend que les traitements des listeners soient terminés avant de continuer de traiter l'événement
  • Le but: autoriser de ne pas attendre
    • Utile dans certains cas comme sur l'événement "scroll" qui peut avoir des latences
  • https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
addEventListener(document, 'scroll', function(event) {
	console.log(event.defaultPrevented);  // will be false
	event.preventDefault();   // does nothing since the listener is passive
	console.log(event.defaultPrevented);  // still false
}, { 'passive': true });

Custom Elements v1

  • Première version des custom elements
    • Avènement des Web Components !
  • https://developers.google.com/web/fundamentals/getting-started/primers/customelements

Pointing API

  • Gère à la fois les événements "Mouse", "Touch" et "Pen"
  • https://developers.google.com/web/updates/2016/10/pointer-events
const foo = document.querySelector('#foo');
foo.addEventListener('pointerdown', ev => {
  console.log('Button down, capturing!');
  // Every pointer has an ID, which you can read from the event.
  foo.setPointerCapture(ev.pointerId);
});

foo.addEventListener('pointerup', ev => console.log('Button up. Every time!'));

De nouvelles APIs !

  • Api Fetch pour remplacer l'api Ajax
  • Pour le Bluethooth
    • https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web
  • Pour un bus d'événements
    • Pour communiquer entre les onglets, les iframes, les service workers et web workers dans le même nom de domaine
    • https://developers.google.com/web/updates/2016/09/broadcastchannel
// Connect to the channel named "my_bus".
const channel = new BroadcastChannel('my_bus');

// Send a message on "my_bus".
channel.postMessage('This is a test message.');

// Listen for messages on "my_bus".
channel.onmessage = function(e) {
  console.log('Received', e.data);
};

// Close the channel when you're done.
channel.close();

EcmaScript

Async / Await

  • Afin de rendre du code synchrone asynchrone et vice et versa
  • Basé sur les promises
function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function add1(x) {
  var a = resolveAfter2Seconds(20);
  var b = resolveAfter2Seconds(30);
  return x + await a + await b;
}

add1(10).then(v => {
  console.log(v);  // prints 60 after 2 seconds.
});

Decorators

  • Nous pourrions appeler cela aussi "annotations"
  • Permet grandement l'injection de comportements dans notre code
function readonly(target, key, descriptor) {
    descriptor.writable = false;
    return descriptor;
}

class Cat {
    @readonly
    cute = true;
}

Modules

  • Finalisation de la norme
    • Pris du temps afin de se mettre en relation avec les spécifications TC-39 de NodeJs
    • Le but étant de trouver un compromis

Et d'autres !

  • "use stricter"
  • Transduction
  • Enrichissement de la syntaxe au niveau des classes
  • ...

 

 

 

 

 

 

 

 

https://prop-tc39.now.sh/

Text

Text

Text

Text

Merci !

Le futur du Web

By Julien Roche

Made with Slides.com

Le futur du Web

  • 681

More from Julien Roche