SVELTE

Alexis Jacomy

Mon coeur de métier, c'est la visualisation de données

J'ai commencé en

Flash

Des APIs graphiques excellentes...

...et C'est tout

problème :

Synchroniser les données et le DOM

Rendu incrémental et transitions

enter, update, leave

<svg xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
    circle:hover {fill-opacity:0.9;}
  </style>
  <g style="fill-opacity:0.7;">
    <circle cx="6.5cm"
            cy="2cm"
            r="100"
            style="fill:red;"
            transform="translate(0,50)" />
    <circle cx="6.5cm"
            cy="2cm"
            r="100"
            style="fill:blue;"
            transform="translate(70,150)" />
    <circle cx="6.5cm"
            cy="2cm"
            r="100"
            style="fill:green;"
            transform="translate(-70,150)"/>
  </g>
</svg>
const svg = d3.select("#root");
svg.append("circle")
  .attr("cx", 2)
  .attr("cy", 2)
  .attr("r", 40)
  .style("fill", "blue");
svg.append("circle")
  .attr("cx", 140)
  .attr("cy", 70)
  .attr("r", 40)
  .style("fill", "red");
svg.append("circle")
  .attr("cx", 300)
  .attr("cy", 100)
  .attr("r", 40)
  .style("fill", "green");

React

Le Virtual DOM permet un rendu incrémental sans effort

Data binding

CSStransitiongroup

Transitions css

+

+

(

)

Le virtual Dom n'est pas si génial

Parlons de

Next-generation es module bundler

export default 10;
import multiplier from './some-file.js';

export function someMaths() {
 console.log(multiplier);
 console.log(5 * multiplier);
 console.log(10 * multiplier);
}

some-file.js

index.js

'use strict';

Object.defineProperty(
  exports,
  '__esModule',
  { value: true }
);

var multiplier = 10;

function someMaths() {
  console.log(multiplier);
  console.log(5 * multiplier);
  console.log(10 * multiplier);
}

exports.someMaths = someMaths;

Sortie de rollup

tout faire au runtime est trop lourd

Les machines ne sont pas toutes performantes

Svelte n'offre pas de bibliothèque "runtime", mais compile du JS "optimisé" à la place

Xiaoru Li, @hexrcs

La syntaxe de svelte

Svelte repl

(Codée avec Svelte)

JS in HTML

Composants

Réactivité

Pas mal de sucre

CSS encapsulée

Instructions réactives

Interactions depuis JS

import App from './App.svelte';

const app = new App({
  target: document.body,
  props: {
    // assuming App.svelte contains
    // something like
    // `export let answer`:
    answer: 42
  }
});

// Set props:
app.$set({answer: 1337});

// Destroy component:
app.$destroy();

Les performances de svelte

Peu de dépendances runtime

Moins de JavaScript à parser

meilleur Time to interactive

Pas de virtual dom

Des mises à jour plus rapides

"mon" benchmark

Lighthouse

(chrome dev tools)

+

React + Redux

Angular

Svelte

Un meilleur benchmark

opérations simples

opérations avancées

initialisation de la page

Gestion de la mémoire

Alors, Svelte, c'est vraiment bien ?

Svelte est un solutions de vues trÈS performaNte

état applicatif Logique interne Effets de bord (cycle, Baobab...)

Vues

(React, Svelte...)

Événements

Données

Svelte est aussi un Langage TRÈS EXPRESSIF

mais c'est un nouveau langage

"Sveltescript"

JavaScript

!==

08/08/2018

22/10/2019

Mon expérience avec svelte

hANDLEBARS ON STEROIDS

Svelte

Ce que je veux

Les mêmes docs pour le runtime,

la compilation,

l'api,

le langage...

TL;DR

Svelte est un excellent outil

mais il fait trop de choses

Il y a de la place pour une solution

plus simple

Le Futur des

frameworks web

devra passer par

la compilation

Merci beaucoup !