I'll tell you why I chose Svelte. What I like about Svelte and what not. Let's talk about when to use Svelte in production and why. The technology shows new possibilities of the composition of high-level abstractions and high-performance low-level code.

1. WHY SVELTE?WHY SVELTE?
Борис Могила
DOM.RIA (напрям “Новобудови України”)

2. vinnytsiajs.org

4. SVELTESVELTE

5. Svelte - кібернетично розширені веб-програми

6. Svelte - компілятор для перетворення Svelte
компонентів в ванільний js

7. The State of JavaScript 2019

8. npm trends

9. <script>
let name = 'world';
</script>
<style>
h1 {
color: red;
}
</style>
<h1>Hello {name}!</h1>

10. ПІДХІДПІДХІД

11. СТАДІЇ КОМПІЛЯЦІЇ SVELTEСТАДІЇ КОМПІЛЯЦІЇ SVELTE
Парсінг коду в AST
Відстеження посилань та залежностей
Створення блоків і фрагментів коду
Генерація коду

12. bit.ly/3cQutea

13. Compile Svelte in your head (Part 1)
Compile Svelte in your head (Part 2)
Compile Svelte in your head (Part 3)
bit.ly/36iHYRo
bit.ly/3cOMQQN
bit.ly/2AKzt5P

14. СТАДІЇ СХУДНЕННЯ ФРОНЕНДАСТАДІЇ СХУДНЕННЯ ФРОНЕНДА

15. JS FRAMEWORK BENCHMARKJS FRAMEWORK BENCHMARK
bit.ly/3e3ggL1

16. bit.ly/2WMgDnm

17. МІНІМАЛЬНЕ RUN-TIME ЯДРОМІНІМАЛЬНЕ RUN-TIME ЯДРО
youtu.be/CilgQdsiTkY

18. РЕАКТИВНІСТЬРЕАКТИВНІСТЬ
let speakers = ['Роман', 'Віктор', 'Олег']
speakers = speakers
.filter(speaker => speaker === name)
<button on:click="() => remove(speaker)">x</button>
1
<script>2
3
function remove (name) {4
5
6
}7
</script>8
{#each speakers as speaker}9
<p>{speaker}</p>10
11
{/each}12
13

19. МЕНЕДЖМЕНТ ДАННИХМЕНЕДЖМЕНТ ДАННИХ

20. PROPSPROPS
export let myProp = '';

21. КОНТЕКСТКОНТЕКСТ
import { setContext, getContext } from 'svelte';

22. STORESSTORES
import {
writable,
readable,
derived
} from 'svelte/store';

23. ЦІКАВІ РЕАЛІЗАЦІЇЦІКАВІ РЕАЛІЗАЦІЇ
Svelte-asyncable
Svelte Pipeable Store
bit.ly/2LS2yyF
bit.ly/3bWFyZM

24. ПЛЮШКИ ДЛЯ РОБОТИ З ФОРМАМИПЛЮШКИ ДЛЯ РОБОТИ З ФОРМАМИ
Двостороннє зв'зування даних
Можливість керувати окремими полями за
допомогою writable сторів
Агрегація даних за допомогою derived сторів
Можливість створювати кастомні стори за
рахунок контракту

25. Demo
bit.ly/3e33Gvg

26. svelte-forms-lib
svelidation
bit.ly/2AK6A9Q
bit.ly/2Ttdo22

27. РОБОТА З СТОРОННІМИ БІБЛІОТЕКАМИРОБОТА З СТОРОННІМИ БІБЛІОТЕКАМИ
<script>
const library = (node) => {
// init library on node
return {
destroy() { /* destroy library */ },
update(props) { /* update library by props */ }
}
}
</script>
<div use:library="{props}"></div>

28. АНІМАЦІЇАНІМАЦІЇ
1 2 3
5
7 8 9
10 11 12

29. SVELTE АНІМАЦІЇSVELTE АНІМАЦІЇ
bit.ly/2vLy78Y

30. TREE SHAKING З КОРОБКИTREE SHAKING З КОРОБКИ

31. PREPROCESSINGPREPROCESSING
Shawn Wang
(Svelte preprocessors and how to write them)
Svelte Preprocess
youtu.be/fu1PSmRsmt4
bit.ly/3lqf2xQ

32. SAPPERSAPPER
Роутинг
Code splitting
PWA з коробки
Prefetch сторінок
Декларативный опис метаданих
Вигрузка в статичний сайт
Cypress (тестування)
Дуже маленький розмір клієтського коду

33. Demo
Source
bit.ly/2XiQeNg
bit.ly/3bXFjOa

34. МАЙБУТНЕ SAPPERМАЙБУТНЕ SAPPER
Мікс статичних сторінок і SSR
Інтернаціоналізація
SPA режим
Єдиний підхід для аутентифікації
bit.ly/2ypx0x1

35. ЛЕГКО ПОЧАТИ РОЗРОБЛЯТИЛЕГКО ПОЧАТИ РОЗРОБЛЯТИ

36. ДОКУМЕНТАЦІЯДОКУМЕНТАЦІЯ

37. МЕНІ НЕ ВСЕ ПОДОБАЄТЬСЯ В SVELTE.МЕНІ НЕ ВСЕ ПОДОБАЄТЬСЯ В SVELTE.

38. SVELTE ЗМІНЮЄ ПОВЕДІНКУ JS СИНТАКСИСУSVELTE ЗМІНЮЄ ПОВЕДІНКУ JS СИНТАКСИСУ
export не export
використання мітки для реактивних декларацій
магія з stores

39. РЕАКТИВНИЙ СИНТАКС ЛИШЕ ДЛЯРЕАКТИВНИЙ СИНТАКС ЛИШЕ ДЛЯ
КОМПОНЕНТІВКОМПОНЕНТІВ

40. ВІДСУТНІСТЬ BEST PRACTICESВІДСУТНІСТЬ BEST PRACTICES

41. РОЗМІР ОКРЕМОГО КОМПОНЕНТУ БІЛЬШИЙРОЗМІР ОКРЕМОГО КОМПОНЕНТУ БІЛЬШИЙ
ПОРІВНЯНО З КОМПОНЕНТАМИ RUN TIMEПОРІВНЯНО З КОМПОНЕНТАМИ RUN TIME
ФРЕЙМВОРКІВФРЕЙМВОРКІВ

42. МОЛОДА ЕКОСИСТЕМАМОЛОДА ЕКОСИСТЕМА

43. ЗАКЛЮЧЕННЯЗАКЛЮЧЕННЯ
Svelte чудовий інструмент, але він не є срібною
кулею. Він є одним з варіантів вибору при початку
нового проекту, або поетапного переписування
існуючого в залежності від конкретної задачі. В
будь-якому випадку Svelte вартий вашої уваги і
ознайомлення.

44. КОРИСНІ ПОСИЛАННЯКОРИСНІ ПОСИЛАННЯ

45. ПОЧИТАТИПОЧИТАТИ
svelte.dev
sapper.svelte.dev
svelte.dev/examples
svelte-community.netlify.com
svelte-and-sapper-in-action

46. ПОДИВИТИСЯПОДИВИТИСЯ
Rich Harris (Rethinking reactivity)
Rich Harris (The Return of 'Write Less, Do More')
youtu.be/AdNJ3fydeao
youtu.be/BzX4aTRPzno

47. Павел Малышев (Svelte Cookbook)
Ілля Клімов (Три истории о Svelte)
youtube.com/I5DIcbcXzfE
youtu.be/0cFoEPhv2II

48. Svelte Society Day 2020
bit.ly/2XqJzke

49. ПОСПІЛКУВАТИСЯПОСПІЛКУВАТИСЯ
svelte.dev/chat
t.me/svelte_ua
t.me/sveltejs
t.me/sapperjs

50. ПРЕЗЕНТАЦІЯПРЕЗЕНТАЦІЯ
bit.ly/2xcUjZT

51. КОНТАКТНІ ДАНІКОНТАКТНІ ДАНІ

52. site:
facebook:
twitter:
email:
https://boryamogila.github.io
BorysMohyla
BoryaMogila
bora.mog@gmail.com

53. ДЯКУЮ ЗА УВАГУДЯКУЮ ЗА УВАГУ