Next generation Web UIs with Svelte

A look into Svelte

Transcript

1. Next generation Web UIs with Svelte
2. Rajika Imal Senior Software Engineer - 99X Technology Contributor at SCoRe lab @rajikaimal
3. Generations of JavaScript applications
4. Vanilla JavaScript
7. jQuery
9. Single Page Applications (SPA)
12. Libraries and frameworks • Overhead of library / framework dependencies • Bundle sizes • Native reactivity • Runtime complexity in vDOM approaches
13. JIT vs AOT
14. Let’s recap
15. • Vanilla JavaScript • jQuery • Single Page Applications with libraries / frameworks ◦ Backbone.js ◦ Ember ◦ Meteor ◦ Angular.js ◦ Angular ◦ React ◦ Vue
17. https://github.com/sveltejs/svelte
18. !framework
19. Compiler
20. No runtime dependencies
22. Reactive programming
23. In computing, reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change. With this paradigm it is possible to express static (e.g., arrays) or dynamic (e.g., event emitters) data streams with ease, and also communicate that an inferred dependency within the associated execution model exists, which facilitates the automatic propagation of the changed data flow. - wikipedia
24. a = b + c
25. Let’s look at some basics
26. Svelte is component based
27. .svelte
32. Dynamic attributes
34. Props
37. Reactive assignments
39. Reactive declarations
41. Markup logic
43. Bindings
45. Lifecycle methods • onMount() • onDestroy() • beforeUpdate() • afterUpdate() • tick()
46. Stores • Writable stores • Readable stores • Derived stores • Custom stores • Auto-subscriptions
50. Performance
51. ToDo applications comparison • https://github.com/sunil-sandhu/react-todo-2019 • https://github.com/sunil-sandhu/svelte-todo Courtesy of Sunil Sandhu
52. React
53. Svelte
54. React Svelte Page load perf
55. React Svelte DOM manipulation perf
56. Courtesy of Jacek Schae Results validated by Rich Harris and Richard Feldman
57. Courtesy of Jacek Schae Results validated by Rich Harris and Richard Feldman
58. Courtesy of Jacek Schae Results validated by Rich Harris and Richard Feldman
59. • Rich Harris - Rethinking reactivity: https://www.youtube.com/watch?v=AdNJ3fydeao • Is Prepack like Svelte: https://gist.github.com/Rich-Harris/d9de6692eaae94f8aa7ca87a0dc980f2 • Svelte web site: https://svelte.dev • Sapper: https://sapper.svelte.dev • Realworld (Medium.com clone): https://github.com/sveltejs/realworld
60. Thank you!
61. Rajika Imal Senior Software Engineer - 99X Technology @rajikaimal