Svelte - Aplicaciones web mejoradas cibernéticamente

Retomamos las presentaciones en nuestro tradicional Quito Lambda pero manteniendo el formato virtual a través de nuestro canal de YouTube. Regístrate para estar informado de cualquier anuncio.

Este mes, nuestro presentador Sebastián Arias va a darnos a conocer el framework Svelte.

Svelte es una nueva alternativa para el desarrollo frontend. En contraste con otros frameworks que hacen todo el trabajo en el navegador, Svelte mueve este a un paso de compilación. Sin virtual DOM y con reactividad directa en JavaScript.

Transcript

1. Quito Lambda
2. ¡Presenta tus ideas en Quito Lambda! Si tienes algo interesante que presentar, ¡ven a presentar con nosotros! Programación Funcional, DevOps, Cloud Computing, IaaS, Desarrollo Web, React, WebGL, ReasonML y cualquier cosa interesante info@stackbuilders.com
3. Svelte Aplicaciones web mejoradas cibernéticamente
4. Agenda • ¿Qué es programación reactiva? • Overview del Framework • ¿Qué hace a Svelte “único”? • Conceptos Básicos de Svelte • Demo • Conclusiones • Q&A
5. ¿Qué es Programación Reactiva?
6. Stream de datos Flow de objetos de datos que empiezan en algún lugar y se consumen en otro Programación Funcional Aplicación de funciones para manipular el stream de datos Observadores Asíncronos El código se ejecutará a diferentes momentos en cada una de las partes ¿Qué es Programación Reactiva? λ
7. ¿Qué es Programación Reactiva? 4 2 6 4 2 1 7 6 filter (x => x%2 == 0) Subject Observable
8. ¿Qué es Programación Reactiva? La programación reactiva permite manipular un stream de datos con funciones de manera asíncrona. La esencia de la programación reactiva es especificar el comportamiento dinámico de un valor completamente al momento de la declaración.
9. ¿Qué es Programación Reactiva? Manipular un stream de datos de manera asíncrona. Especificar el comportamiento dinámico de un valor en la declaración. Rastreamos valores en la aplicación La aplicación reacciona cuando haya un cambio Mejorar la experiencia de usuario
10. Svelte Overview
11. Svelte Overview Rich Harris - Rollup - Open sourcerer Extender JavaScript haciendo que la reactividad sea una primitiva del lenguaje Extender HTML añadiendo expresiones de Javascript en el lenguaje de marcado Extender CSS añadiendo un mecanismo de scope que prevenga que los estilos se mezclen entre sí Enviamos mucho código al usuario. A pesar de no necesitar todo el framework, igual se lo enviamos.
12. Svelte Overview This, to me, is the best of all possible worlds: we can lean on decades of accumulated wisdom by extending well-known languages, author components in a delightfully concise and expressive way, and yet still generate apps that are bleeding-edge in terms of performance and everything that goes with it. - Rich Harris en “What is Svelte?” gist
13. Componente de Svelte Svelte Overview Svelte Compiler Vanilla JavaScript y CSS
14. ¿Qué hace a Svelte único?
15. Reactividad en JavaScript
16. Reactividad en JavaScript No API para interactuar con estados Uso de Operador = Instrumentación de tareas tras bastidores Svelte también es un compilador count = count + 1 count += 1; $$invalidate('count', count);
17. Reactividad en JavaScript Estados que derivan de otros estados Label operator en JavaScript var a = 10 var b = a + 1 a = 11 b = a + 1 var a = 10 $: b = a + 1
18. Sin Virtual DOM
19. Virtual DOM fuente: https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch02.html
20. Svelte DOM Update count += 1; $$invalidate('count', count);
21. Svelte DOM Update count += 1; $$invalidate('count', count);
22. Svelte DOM Update count += 1; $$invalidate('count', count); Marca que parte del componente a cambiado Durante el re-render, se evita el “diffing” La función $$invalidate marca al componente como “dirty”
23. Conceptos Básicos de Svelte
24. La Anatomía de Svelte component.svelte Los archivos .svelte contienen un solo componente que está compuesto de 3 partes. <h1>Svelte Example Component!</h1> <input placeholder="Insert message" on:input={handleInput}> <h1> <span>Your message is:</span> {value} </h1> <style> h1 { font-style: italic; } span { color: blue; } </style> <script> let value ="" function handleInput(event) { value = event.target.value } </script> Logica del componente Scoped CSS Plantilla de Svelte
25. La Plantilla de Svelte • Usar componentes personalizados • Los componentes propios deben empezar con mayúscula • Expresiones de JavaScript entre { } <script> import CustomHeader from './Header.svelte' const headerHeight = 300 const headerWidth = 500 const componentTitle = 'Svelte looks good!' </script> <div> <p>{componentTitle}</p> <CustomHeader headerHeight={headerHeight} {headerWidth} /> </div> Import del componente personalizado Evaluado como JavaScript Si la propiedad y la variable tienen el mismo nombre podemos usar esta abreviación Uso de componente personalizado
26. Añadiendo Propiedades (Props) • Para aceptar una prop usar export para exponer una variable • Es importante usar let ya que const no es reasignable CustomHeader.svelte (child component) App.svelte (parent component) <script> export let headerHeight = 20 export let headerWidth = 40 </script> Valor por defecto <script> import CustomHeader from './CustomHeader.svelte' const headerHeight = 500 const headerWidth = 1000 </script> <CustomHeader headerHeight={headerHeight} {headerWidth}/>
27. Estado de los Componentes • Las acciones de usuarios disparan eventos. Se puede escuchar con on: para poder manejarlos con una función • Se puede enlazar el valor de manera bidireccional usando bind: <script> let value ="Some text" function handleInput(event) { value = event.target.value } </script> <input placeholder="Insert message" value={value} on:input={handleInput}> Usando on: Event Handler Event Trigger Usando bind: <script> let value ="" </script> <input placeholder="Insert message" bind:value>
28. Reactive Statements • Svelte analiza de qué variables los statements reactivos dependen • Cuando alguna de estas dependencias cambia, los statement reactivo vuelven a ser ejecutado • Útil para declarar estados derivados Reactive Statements: <script> import zxcvbn from "zxcvbn" $: isStrong = zxcvbn(password).score > 1 $: password="" $: console.log(password) </script> Re asigna cuando password cambia
29. Reactive Store • Reactive Store facilita compartir estados por toda la aplicación • El store existe en un archivo separado de JavaScript • En los componentes hay que usar el prefijo $: para los valores del store store.js App.svelte import {writable} from "svelte/store" export const headerTitle = writable("") <script> import {headerTitle} from "./store" </script> <input placeholder="Insert Text" bind:value={$headerTitle}> <p>binded text: <strong>{$headerTitle}</strong></p>
30. Conditional Rendering Condicional if List each • Se pueden renderizar elementos de manera condicional con {#if}. De manera opcional se puede usar {:else} • Para renderizar listas e iterar sobre ellas, existe {#each} • Siempre se debe cerrar los bloques con {/if} y {/each} {#if isStrong} <strong>Es Seguro!</strong> {:else} <strong>No es Seguro</strong> {/if} {#each menuItems as Item} <li><a href="home">Item</li> {/each}
31. Demo
32. Conclusiones
33. Que gusta de Svelte 1 Reactividad en JavaScript 2 Compiler hits 3 Lenguajes que ya conocemos potenciados 4 Scoped CSS 5 Reactive Store es sencillo de manejar e interactuar
34. Que no gusta de Svelte 1 Template system (#) 2 No detecta mutaciones en Arrays 3 Aún no es tan maduro 4 Pocos packages que se pueden utilizar
35. Lo que sigue…
36. Preguntas?
37. Stack Builders Presenta tus ideas info@stackbuilders.com Trabaja con nosotros stackbuilders.com/join Facebook: /QuitoLambda Twitter: @QuitoLambda Proximamente: Slack