JSFoo 2019

Modern frontend apps get clunky and slow over time as more features are added to them. They take time to bootstrap and get janky unless the underlying framework or library is superimposed with custom solutions to enhance performance, and they require a lot of boilerplate code.

One aspect of the problem can be solved if we stripped away the runtime that we shipped to our users, reducing the number of computation that’s performed by the runtime before it updates the UI. But this would break down how we write our apps and their components, since they are centered around the runtime (setState, componentDidMount). This opens up an opportunity to tackle the second problem as well: reducing boilerplate. It just might be possible to build performant frontend apps with great UX while improving on the DX as well.

Svelte is a compiler that understands and converts your code into native DOM API calls at build time. It also introduces the concept of Reactive Programming within your components along with patterns that reduce the overall LOC that you end up committing. This allows developers to write components in a way very similar to how we first started out writing HTML when we learnt web development.

Since we’re converting everything to native DOM API calls and not shipping a runtime to the user, apps built with Svelte are faster than those shipped with a runtime (like React or Vue). Svelte also brings in built-in, first-class support for CSS animations and transitions, so you don’t need to import other libraries into your app in order to just get the damn transitions working.

This talk is an introduction to the ideas behind Svelte, and then Svelte itself. It intends to leave the audience with an introductory idea about Svelte and the patterns Svelte introduces. The audience will be able to experiment with and write performant Svelte components.

Outline

• A bit about Svelte
• Introduction to Reactive Programming
• DX vs. UX, and what Svelte proposes
• Introduction to writing code in Svelte
• Similarities and differences with existing solutions
• Live examples in the REPL

Requirements

This talk assumes some experience writing component-based apps (React, Vue, Angular, etc.)

Speaker bio

Umang is a Senior Frontend Engineer at Razorpay. He loves writing JavaScript, good documentation, and automation. He is a part of the team at Razorpay that’s been using Svelte for quite some time (since v2) to build production apps that are fast, easy to maintain, and don’t compromise on UX.

Links

• https://github.com/umanghome
• https://twitter.com/umanghome
• https://umanggalaiya.in

Slides

https://umanghome.github.io/svelte-jsfoo-2019/