version 0 1 svelte
play

version 0.1 Svelte. . - PowerPoint PPT Presentation

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


  1. version 0.1

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

  3. Александр Шушунов или просто Саша

  4. AoT compiler

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

  6. Transfer size (KB) — lower is better

  7. First meaningful paint (ms) — lower is better

  8. lines of code — fewer is better

  9. https://twitter.com/Rich_Harris/status/1065992585095929857/photo/1

  10. Погнали !

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  27. <script> export default { onstate() {…}, oncreate() {…}, onupdate() {…}, ondestroy() {…} } </script>

  28. HOC

  29. • svelte.technology/ • t.me/sveltejs • habr.com/ru/users/PaulMaly/

  30. • v3 • SSR • ES6+ • Less, Sass, Pug и т . д . • Удаляет неиспользуемые стили • Web Components • Встраивается во все • И много чего еще

  31. “ Угадай кто ” @ashushunov github.com/AlexanderShushunov/ guess_who

Recommend


More recommend