Зачем нам SVELTE

Размер бандла

Размер бандла SVELTE

Virtual DOM

Как работает SVELTE

Скучные цифры

https://krausest.github.io/js-framework-benchmark/current.html

RealWorld Example App

Perfomance

Статья: https://bit.ly/3lPgyKp

GitHub: https://bit.ly/3i1crs8

RealWorld Example App

Line Of Code

Статья: https://bit.ly/3lPgyKp

GitHub: https://bit.ly/3i1crs8

RealWorld Example App

Size

Статья: https://bit.ly/3lPgyKp

GitHub: https://bit.ly/3i1crs8

SVELTE + TS???

https://svelte.dev/blog/svelte-and-typescript

if

Vue

Svelte

 <div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Не A/B/C
</div> <div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Не A/B/C
</div>

 {#if type === 'A'}
  <div>
    A
  </div>
{:else if type === 'B'}
  <div>
    B
  </div>
{:else if type === 'C'}
  <div>
    C
  </div>
{:else}
  <div>
    Не A/B/C
  </div>
{/if} {#if type === 'A'}
  <div>
    A
  </div>
{:else if type === 'B'}
  <div>
    B
  </div>
{:else if type === 'C'}
  <div>
    C
  </div>
{:else}
  <div>
    Не A/B/C
  </div>
{/if}

foreach

Vue

Svelte

 <ul id="example-1">
  <li v-for="item in items" :key="item.id">
    {{ item.message }}
  </li>
</ul> <ul id="example-1">
  <li v-for="item in items" :key="item.id">
    {{ item.message }}
  </li>
</ul> <ul id="example-1">
  <li v-for="item in items" :key="item.id">
    {{ item.message }}
  </li>
</ul>

 <ul id="example1">
  {#each items as item (item.id)}
    <li>{item.message}</li>
  {/each}
</ul> <ul id="example1">
  {#each items as item (item.id)}
    <li>{item.message}</li>
  {/each}
</ul> <ul id="example1">
  {#each items as item (item.id)}
    <li>{item.message}</li>
  {/each}
</ul>

Computed

Vue

Svelte

 const vm = new Vue({
  el: '#example',
  data: {
    message: 'Привет'
  },
  computed: {
    // геттер вычисляемого значения
    reversedMessage: function () {
      // `this` указывает на экземпляр vm
      return this.message.split('').reverse().join('')
    }
  }
}) const vm = new Vue({
  el: '#example',
  data: {
    message: 'Привет'
  },
  computed: {
    // геттер вычисляемого значения
    reversedMessage: function () {
      // `this` указывает на экземпляр vm
      return this.message.split('').reverse().join('')
    }
  }
}) const vm = new Vue({
  el: '#example',
  data: {
    message: 'Привет'
  },
  computed: {
    // геттер вычисляемого значения
    reversedMessage: function () {
      // `this` указывает на экземпляр vm
      return this.message.split('').reverse().join('')
    }
  }
})

 let message = 'Привет';
$: reversedMessage = message.split('').reverse().join(''); let message = 'Привет';
$: reversedMessage = message.split('').reverse().join(''); let message = 'Привет';
$: reversedMessage = message.split('').reverse().join('');

component

Vue

component

Svelte

Vue

Github

Страница с примером

https://github.com/Razdva122/Svelte-pledge-example

Code

View

https://razdva122.github.io/Svelte-pledge-example/

	<div v-if="type === 'A'">
	A
	</div>
	<div v-else-if="type === 'B'">
	B
	</div>
	<div v-else-if="type === 'C'">
	C
	</div>
	<div v-else>
	Не A/B/C
	</div>

	{#if type === 'A'}
	<div>
	A
	</div>
	{:else if type === 'B'}
	<div>
	B
	</div>
	{:else if type === 'C'}
	<div>
	C
	</div>
	{:else}
	<div>
	Не A/B/C
	</div>
	{/if}

	<ul id="example-1">
	<li v-for="item in items" :key="item.id">
	{{ item.message }}
	</li>
	</ul>

	<ul id="example1">
	{#each items as item (item.id)}
	<li>{item.message}</li>
	{/each}
	</ul>

	const vm = new Vue({
	el: '#example',
	data: {
	message: 'Привет'
	},
	computed: {
	// геттер вычисляемого значения
	reversedMessage: function () {
	// `this` указывает на экземпляр vm
	return this.message.split('').reverse().join('')
	}
	}
	})

	let message = 'Привет';
	$: reversedMessage = message.split('').reverse().join('');

Здравствуйте, я представляю компанию Орифлейм

SVELTE