DEV Community

Karine Sabatier
Karine Sabatier

Posted on • Originally published at medium.zenika.com on

Getting started with Svelte

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. What I also liked was that RoR was not suited for everyone or everything. DHH, the conceptor of Rails, had some strong takes on what Ror should and should not do. Rails even has a manifesto!

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 — 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 who also is a very opinionated graphic editor at the NYT.

So be sure to start with Rich Harris and his “Rethinking reactivity” talk

Then, enjoy Rich’s storytelling skills on “Computer, build me an app” .

In French you have to watch Anthony Le Goas’s talk “Svelte, pourquoi tant de hype ?” 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, 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” or Ryan Atkinson’s “Why Svelte”.

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-2/ https://lihautan.com/compile-svelte-in-your-head-part-3/ 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. Recently MDN also opened a “Getting Started With Svelte” section and another one about Typescript Support in Svelte.

But the most precious resource to really get started is Svelte REPL . This is by far the more educational website I’ve seen in years (next to Brilliant on a totally different topic). I wouldn’t be surprised if the REPL was somehow inspired by Bret Victor’s work(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 :)

You can then reward yourself with another fun & insightful video of Rich being invited by Jason Lengstorf for a “Let’s learn Svelte” session.

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— by Kevin Åberg

Svelte bind directive — A cheatsheet — by Marc Radziwill

Effective Transitioning— by Andrew Smith

Svelte-Forms — 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 : the framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.

Rollup : the bundler solution for Svelte.

Routify : Routes for Svelte, automated by your file structure.

ElderJS ** :** An Opinionated, SEO focused, Svelte Framework.

Svelte Community site

Svelte Radio

Svelte Society Youtube channel

Svelte School

Svelte Reddit Thread

Svelte Unofficial newsletter

Made With Svelte

Also, check out my Twitter list of people using Svelte

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 to say Hi!

Want to be part of the community? Lucky you :) Svelte Summit is less than 2 weeks from now. Be sure to save the date!

Svelte Summit : the virtual conference about Svelte
Svelte Summit : the virtual conference about Svelte

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


Top comments (4)

Collapse
 
tanhauhau profile image
Tan Li Hau

Swyx, a prominent figure of the Svelte community, has made this video out of Tan li Hau’s (Svelte core contributor) first “Compile Svelte in Your Head” post.

well, its actually the other way round. The blog post was inspired by the talk. 😂

Collapse
 
karinesabatier profile image
Karine Sabatier

ooops. Corrected. Thanks :P

Collapse
 
swyx profile image
swyx

wow, this is a collection of really good resources, thank you so much for sharing Karine!! and thanks for the shoutout haha that was not one of my best talks lol

Collapse
 
elpheno profile image
Pheno

Merci pour toutes ces ressources
Thank you! Svelte is great thing to learn