DevFest Nantes 2019

SVELTE

Alexis Jacomy

@jacomyal

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

"Rethinking reactivitY", Rich harris

Rich Harris

Parlons de

NYT Graphics

Rollup

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

"rollup vs webpack", luke boyle 

'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

"Svelte crash coursE"

La syntaxe de svelte

Svelte repl

svelte.dev/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

github.com/krausest

/js-framework-benchmark

(vue filtrable)

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

-svelte.dev/docs

-github.com/sveltejs

 /svelte/issues

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 !

Slides:

slides.com/jacomyal/svelte

Svelte, la nouvelle révolution des applications web

By Alexis Jacomy

Svelte, la nouvelle révolution des applications web

Nantes DevFest, Octobre 2018, Nantes

  • 2,836

More from Alexis Jacomy