Getting started with Svelte
Tags: svelte, webdev, javascript, compiler
Published: 2020-10-10 20:18:47

---
title: Getting started with Svelte
published: true
date: 2020-10-06 19:28:10 UTC
tags: svelte,webdevelopment,javascript,compiler
canonical_url: https://medium.zenika.com/getting-started-with-svelte-e7935abd4cb9
---

![](https://cdn-images-1.medium.com/max/1024/1*DQY_-lPJ9N2NW9qPOe8hkw.png)

A loooong time ago I used to be a developer. One of my last contacts with the coding world was with Ruby on Rails, one of the first MVC architecture frameworks. I remember loving the elegance and the conciseness of both Ruby [and the Rails framework](https://medium.com/dreamtoipo/5-startups-who-should-thank-dhh-for-gifting-them-ruby-on-rails-c75fb8155d1f). What I also liked was that RoR was not suited for everyone or everything. [DHH, the conceptor of Rails](https://twitter.com/dhh), had some strong takes on what Ror should and should not do. [Rails even has a manifesto!](https://rubyonrails.org/doctrine/)

Time has passed, I am not a developer anymore. Code looks like a foreign language that I can vaguely read but not speak or write. From where I stand coding the smallest application has become awfully complex. I feel lost in the frameworks and languages jungle and am simply in awe of my expert colleagues. Just being able to keep up with one technology and staying on top of it is a labor of love of one’s life, and this forces my admiration.

When I took a job as a Product Manager at [Zenika](http://www.zenika.com) — cabinet of IT expertise — I felt the urge to get back to understanding (at least as much as I could) what my teammates were doing with those zeros and ones. At the same time, many environmental concerns started to arise at Zenika and we were a bunch of people wondering how we could somehow still work in the Internet Industry and yet be part more of the solution than of the problem. I now believe that Svelte could be part of an eco-friendly solution for a “low-impact Internet”.

# Enters Svelte.

It’s simple, it’s smart, it’s concise, it’s compiled and it’s blazingly fast and clever. It also looks like we’re back to 1995 ❤.

Fresh.

Svelte was thought for reactivity and efficiency. I won’t be surprised to see a huge eco-conception movement gather around it. But that’s a bet for now.

So I spent some time during the lock-down to see if I could code something with Svelte (short answer : I did, but it’s awfully ugly and worthless). Turns out I could and that (surprise!) Svelte was not the hardest thing for me to figure out. Git and Javascript on the other hand… but that’s yet another story.

So here is a collection of links I used along the way during my brief — yet insightful — journey back to code. Hope it helps!

## Svelte’s stance

There is a philosophy and a mindset behind every tool, every method and every framework. Svelte is a strongly opinionated framework / language / compiler. To understand Svelte’s stance, you have to refer to [its creator Rich Harris](https://twitter.com/rich_harris) who also is a very opinionated [graphic editor at the NYT](https://www.nytimes.com/by/rich-harris).

**So be sure to start with Rich Harris** [**and his “Rethinking reactivity” talk**](https://www.youtube.com/watch?v=AdNJ3fydeao)

{% youtube gJ2P6hGwcgo %}

Then, enjoy Rich’s storytelling skills on [**“Computer, build me an app”**](https://www.youtube.com/watch?v=qqt6YxAZoOc) **.**

In French you have to watch Anthony Le Goas’s talk [**“Svelte, pourquoi tant de hype ?”**](https://www.youtube.com/watch?v=b4U2vxdADg4) where Anthony digs in to see what Svelte has under the hood.

# Svelte the compiler

Now you get it. Svelte is different because it is a compiler and most of the “magic” comes from that. So you might want to check those really great posts about how it works.

[Swyx](https://twitter.com/swyx), a prominent figure of the Svelte community, has made this video that inspired Tan li Hau’s (Svelte core contributor) first “Compile Svelte in Your Head” post. This is a good start. Also, lots of insights in Shawn’s “[Why Svelte — short version](https://www.swyx.io/why-svelte-short/)” or [Ryan Atkinson’s “Why Svelte”](https://github.com/feltcoop/why-svelte).

{% youtube FNmvcswdjV8 %}

**Head up to Tan li Hau’s website and his series “Compile Svelte in Your Head”** 

[https://lihautan.com/compile-svelte-in-your-head-part-1/](https://lihautan.com/compile-svelte-in-your-head-part-1/) [https://lihautan.com/compile-svelte-in-your-head-part-2/](https://lihautan.com/compile-svelte-in-your-head-part-2/) [https://lihautan.com/compile-svelte-in-your-head-part-3/](https://lihautan.com/compile-svelte-in-your-head-part-3/) [https://lihautan.com/compile-svelte-in-your-head-part-4/](https://lihautan.com/compile-svelte-in-your-head-part-4/)

# Now get your hands dirty

**Time to code!** 😱🥰 

First, have a quick look at [the Svelte repo](https://github.com/sveltejs/svelte). Recently MDN also opened a [“Getting Started With Svelte” section](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started) and another one about [Typescript Support in Svelte](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript).

**But the most precious resource to really get started is** [**Svelte REPL**](https://svelte.dev/repl/) **. This is by far the more educational website I’ve seen in years** (next to [Brilliant](https://brilliant.org/) on a totally different topic). I wouldn’t be surprised if the REPL was somehow inspired by [Bret Victor’s work](https://www.youtube.com/watch?v=8QiPFmIMxFc)(build something to learn it and while building it have an immediate and visual feedback on what you’re doing). Also, with Rich Harris being a graphic editor at the New York Times, I suspect he is very picky and careful about the learning experience on Svelte : visual, progressive, and fun.

[**Hurry up to the Svelte tutorial and don’t come back until you’ve done all of it :)**](https://svelte.dev/tutorial/basics)

You can then reward yourself with another fun & insightful video of Rich being invited by Jason Lengstorf for a [“Let’s learn Svelte” session](https://www.youtube.com/watch?v=ogXETl_I0Dg).

{% youtube ogXETl_I0Dg %}

Then, you will let serendipity take you over to other very interesting videos and links on some Svelte treats : bind, actions, stores, animations and forms!

[**Introduction to Svelte, Actions and Stores**  ](https://www.youtube.com/watch?v=BsNkyQ130Wc)— by Kevin Åberg

[**Svelte bind directive — A cheatsheet**](https://marcradziwill.com/blog/svelte-bind-directive-a-cheatsheet/) ** ** — by Marc Radziwill

[**Effective Transitioning**  ](https://www.youtube.com/watch?v=IbmppWk_Ckc)— by Andrew Smith

[**Svelte-Forms **](https://www.youtube.com/watch?v=-3MOeUcqEnk)— a lib by Kevin Åberg

# Svelte’s ecosystem

Now, along this learning curve, you’ve probably stumbled across many satellites of Svelte. Here are some you might want to check.

[**Sapper**](https://sapper.svelte.dev/) **:** the framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.

[**Rollup**](https://github.com/sveltejs/rollup-plugin-svelte) : the bundler solution for Svelte.

[**Routify**](https://routify.dev/Routify) : Routes for Svelte, automated by your file structure.

[**ElderJS**](https://elderguide.com/tech/elderjs/) ** :** An Opinionated, SEO focused, Svelte Framework.

[**Svelte Community site**](https://svelte-community.netlify.app/)

[**Svelte Radio**](https://www.svelteradio.com/)

[**Svelte Society Youtube channel**](https://www.youtube.com/channel/UCZSr5B0l07JXK2FIeWA0-jw)

[**Svelte School**](https://svelte.school/)

[**Svelte Reddit Thread**](https://www.reddit.com/r/sveltejs/)

[**Svelte Unofficial newsletter**](https://svelte.substack.com/)

[**Made With Svelte**](https://madewithsvelte.com/)

Also, check out my [**Twitter list of people using Svelte**](https://twitter.com/i/lists/1246712866553630721)

# The Svelte Community

Ok you get it, there are plenty of links and resources out there about Svelte now. But there’s more : the svelte community is incredibly vivid, humble and welcoming. So be sure to drop by [**the Svelte Discord**](https://discord.gg/6jEyDZ) to say Hi!

Want to be part of the community? Lucky you :) [**Svelte Summit is less than 2 weeks from now**](https://sveltesummit.com/). Be sure to save the date!

![Svelte Summit : the virtual conference about Svelte](https://cdn-images-1.medium.com/max/800/1*pXDQ0ZQT8A9ofLu3Vk8jfg.png)<figcaption>Svelte Summit : the virtual conference about Svelte</figcaption>

Now that’s a wrap. Thank you and see you there :)

* * *