version 0.1 Svelte. . - - PowerPoint PPT Presentation

▶
version 0 1 svelte
SMART_READER_LITE
LIVE PREVIEW

version 0.1 Svelte. . - - PowerPoint PPT Presentation

Mar 18, 2023 392 likes •929 views

version 0.1 Svelte. . AoT compiler https://medium.freecodecamp.org/a-real-world-comparison-of-front-end-frameworks-

slide-1
SLIDE 1 version 0.1
slide-2
SLIDE 2
slide-3
SLIDE 3

Svelte. Первый взгляд.

slide-4
SLIDE 4

Александр Шушунов

или просто

Саша

slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10
slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15
slide-16
SLIDE 16

AoT compiler

slide-17
SLIDE 17 https://medium.freecodecamp.org/a-real-world-comparison-of-front-end-frameworks- with-benchmarks-2018-update-e5760fb4a962
slide-18
SLIDE 18

Transfer size (KB) — lower is better

slide-19
SLIDE 19

First meaningful paint (ms) — lower is better

slide-20
SLIDE 20

lines of code — fewer is better

slide-21
SLIDE 21 https://twitter.com/Rich_Harris/status/1065992585095929857/photo/1
slide-22
SLIDE 22

Погнали!

slide-23
SLIDE 23
slide-24
SLIDE 24

<div class="result"> Итого: 10 </div> <style> .result { font-size: 10rem; height: 100%; } </style>

slide-25
SLIDE 25

<div class="result"> Итого: {score} </div>

slide-26
SLIDE 26

<div class="result" on:click="fire('close’)"> Итого: {score} </div>

slide-27
SLIDE 27

<div class="result" on:click="fire('close')"> {#if score > 0} Итого: {score} {/if} </div>

slide-28
SLIDE 28

<div class="result" on:click="fire('close')"> {#each scores as score} Итого: {score} {/each} </div>

slide-29
SLIDE 29

<div class="result" on:click="fire('close')"> {#await scorePromise} Жденмс {:then score} Итого: {score} {:then error} Упс {/await} </div>

slide-30
SLIDE 30

import Result from "./Result.html"; var app = new Result({ target: document.body, data: {score: 42} });

slide-31
SLIDE 31

<div class="result" on:click="fire('close')"> … </div> <script> export default { // Здесь писать логику } </script>

slide-32
SLIDE 32

<div class="result" on:click="fire('close')"> <Other prop={…}> </div> <script> export default { components: { Other: "./Other.html" }, } </script>

slide-33
SLIDE 33

<script> export default { components: {…}, data() {…}, computed: {…}, helpers: {…}, methods: {…}, events: {…}, } </script>

slide-34
SLIDE 34

<script> export default { data() { selectedId: 0 }, } </script>

slide-35
SLIDE 35

<script> export default { computed: { canSelect: ({alreadyAnswered}) => !alreadyAnswered, }, } </script>

slide-36
SLIDE 36

<script> export default { computed: { isSelected: ({selectedId}) => id => id === selectedId, }, } </script>

slide-37
SLIDE 37

<script> import leftPad from "left-pad"; export default { helpers: { leftPad }, } </script>

slide-38
SLIDE 38

<script> export default { methods: { handleSelect(id) { const {alreadyAnswered} = this.get(); if (!alreadyAnswered) { this.set({selectedId: id}); } }, } </script>

slide-39
SLIDE 39

<script> export default { events: { // Свои события, // Но я не делал }, } </script>

slide-40
SLIDE 40

<script> export default {

  • nstate() {…},
  • ncreate() {…},
  • nupdate() {…},
  • ndestroy() {…}

} </script>

slide-41
SLIDE 41
slide-42
SLIDE 42
slide-43
SLIDE 43
slide-44
SLIDE 44
slide-45
SLIDE 45
slide-46
SLIDE 46
slide-47
SLIDE 47
slide-48
SLIDE 48

HOC

slide-49
SLIDE 49
slide-50
SLIDE 50
slide-51
SLIDE 51
  • svelte.technology/
  • t.me/sveltejs
  • habr.com/ru/users/PaulMaly/
slide-52
SLIDE 52
  • v3
  • SSR
  • ES6+
  • Less, Sass, Pug и т.д.
  • Удаляет неиспользуемые стили
  • Web Components
  • Встраивается во все
  • И много чего еще
slide-53
SLIDE 53

@ashushunov github.com/AlexanderShushunov/ guess_who

“Угадай кто”