Disclaimer

I'm not a expert.

So, please, if I make any mistake, just tell me so!

Disclaimer

I'm just a Svelte lover and I want to spread the word...

Svelte Concepts

Why I love it

• Svelte is a compiler not a framework
• Use it in any project
• Is truely reactive
• Write less code
• Super performant

Svelte is a compiler not a framework

• Svelte is meant to be the framework that is not a framework
• It's a tool that compile your code at build time
• Builds your code as highly optimized vanilla JavaScript
• Only need to include the buildFile.js file
• No framework at runtime

Truely reactive

• No virtual DOM
• No need to use setState or useState
• It uses javascript similar to Observable
• Run your code as topological not top to bottom

Breaking code

						(() => {
						 const square = number => number * number;

						 const secondNumber = square(firstNumber);
						 const firstNumber = 42;

						 console.log(secondNumber);
						})();
						

True reactivity

$: foo = bar

						// in vanilla js
						let foo = 10
						let bar = foo + 10 // bar = 20
						foo = bar // bar = 20 no reactivity
						bar = foo + 10 // now bar becomes 25

						// in Svelte
						let foo = 10
						$: bar = foo + 10 // now bar is 20
						foo = 15
						// bar is now 25 because it is bound to the value of foo
						

Write less code

with Svelte

							
							
What year were you born?
							
							Submit
							{#if age}
							 
You are {age} years old
							{/if}
						

13 lines of codes

with React

							import React, {Component} from 'react'
							export default () => {
							 const {age, setAge} = useState(0)
							 const {year, setYear} = useState(0)
							 function calculateAge(){
							  const currentYear = new Date().getFullYear()
							  setAge(currentYear - year)
							 }
							 function handleChange(event){
							  setYear(event.target.value)
							 }
							 return(
							  

							   
What year were you born?
							   
							   Submit
							   {age ? 
You are {age} years old
 : null}
							  
							 )}
						

25 lines of code

Performant

Svelte compiles your code into low-level, pure javascript that will interact directly with the DOM

Svelte Basic

Installation

							npx degit sveltejs/template my-svelte-project
							cd my-svelte-project

							npm install
							npm run dev
						

Basic Page template

You write your code in a .svelte file

						

						

						
Hello {name}!
						

single mounting component

						// main.js
						import App from './App.svelte';

						const app = new App({
						 target: document.body
						});

						export default app;
						

multiple mounting component

						// main.js
						import App from './App.svelte';
						import App2 from './App2.svelte';

						const app = new App({
						 target: document.getElementById('div1')
						});

						const app2 = new App({
						 target: document.getElementById('div2')
						});

						export default app;
						

Import Component

Scope styles

						// App.svelte
						

						

						
These styles...
						
						

Nested component

						 // Nested.svelte
						 

						 

						 
{name}
						

Reactive variables

						

						
						 Clicked {count} {count === 1 ? 'time' : 'times'}
						

						
This is reactive variable {foo}
						

If and else if

{#if condition} {:else if} {:else} {/if}

						

						{#if x >= 10}
						 
{x} is greater than 10
						{:else if x > 5}
						 
{x} is greater than 10

						{:else}
						 {#if 5 > x}
						  
{x} is less than 5
						 {:else}
						  
{x} is between 5 and 10
						 {/if}
						{/if}
						

For each

{#each yourArray as yourSingleElement} {/each}

						

						
The Famous Cats of YouTube

						

						 {#each cats as cat}
						 

						   {cat.name}
						  
						 {/each}
						
						

Event forwarding

on:message={thenameyouwant}

Binding data

bind:value={yourValue}

						

						
						 
						 
						

						
{a} + {b} = {a + b}
						

Other awesome functionnality

• Life Cycle
• Stores
• Motion
• Transitions
• Animations
• Async
• Context API
• Slots in component
• Debug tags
• So much more...

Include Svelte in WordPress

In a theme or a plugin

• npm install svelte packages
• Build a Gulp or Webpack or Rollup config file
• Structure your folders for source files and compiled files
• Run your compiler
• Add a div with a id in your theme or plugin or by action hook
• Enqueue your script bundle.js file in functions.php
• Enqueue your style bundle.css file in functions.php