Video details

Austin Crim - Skipping Scales to Make Music: Svelte as an Instructional Tool


Platinum Sponsor: GraphCMS -
Gold Sponsors: LevelUp Tutorials - Cloudflare Pages - Svekyll - Netlify - Vercel - Magic - FaunaDB - WPEngine -
Music By: Fractal -
About the talk: After failing to learn React, Svelte swooped in to rescue my frontend learning journey by allowing me to build things fast. Its syntax was simple and its mental model intuitive. Though there is much gnashing of teeth over web development neophytes skipping the fundamentals and going straight to frameworks, I will make the case for why starting Svelte helped changed the arc of my career.


Oh, hey. Sorry. I was just practicing some scales on my guitar. It's not really what I had in mind when I set out to learn a musical instrument, but someone once told me, it's really hard to master the fundamentals before you do anything you actually enjoy or something like that. And since it was a stranger on the internet, I really took this advice to heart. And since then, I haven't really enjoyed guitar at all. The fundamentals are so important, why am I not having fun? I guess I really set out to play guitar to learn some of my favorite songs. I really learned all this music theory. To be honest, it's quite discouraging. I haven't really wanted to practice since then, but this has got to be the right way, isn't it? Now, I hope you'll agree that sounded kind of ridiculous when talking about how to learn a musical instrument, but unfortunately there are many that approach learning web development this way as well. There are gatekeepers out there and Twitter thought fluencers that opine about how kids these days don't learn their fundamentals. And while fundamentals are critically important and do have their place, when you're a beginner web developer, you need to have small wins. You need things that will keep you motivated on your web development learning journey. Because it's not easy. When I first started making the transition from static websites into more interactive ones, I rapidly found myself approaching Burnout. I started with Vanilla JavaScript, and while it was easy enough to get going, I found it to be tedious and my naive code ended up a mess. I then had a pit stop at this thing called React that everyone was talking about. But as someone that was used to writing HTML and CSS inside of Notepad Plus Plus, React almost seemed like a foreign language to me. Then I found Svelt spelt matched my mental model so well as a beginner and provided the perfect on ramp into building the dynamic web apps that I was imagining. And while I definitely glossed over some fundamentals in those early days, web development was fun again. Learnings felt was low friction and let me build cool stuff quickly. And that's so key for any novice that's trying to learn something new while keeping their motivation up. Today I want to talk about why it felt was the perfect teaching tool for my beginner self and why it might be for you or those you're trying to teach as well. Let's dive right in to understand why Spell was such a great choice for me as a beginner. Let's first take a look at its great Reactivity model. First, let's take a look at this counter example, but write it in vanilla JavaScript to understand some of the pitfalls that a beginner might fall into. Try your best to get in the mindset of a beginner and put your assumptions aside. We have a style tag up top that pushes our app to the center of the screen, as well as a few bits of markup that will let us display the account, and a button that will let us interact with it. We have enough experience to know about variables, and that will need to store our account so that we can track it over the course of our application. We also just learned about a great new document query selector API that allows us to get a reference to our label and change its relevant attributes. We've heard Legends about where query selector came from, something about Jquery, but we don't really understand it all that well. It stands to reason that we want our labels text value to be equal to what we have in our count variable, and if we save this, we'll show that we actually have a number on the screen already. Seems like a great start. We'll use our friend query selector again to get a reference to our button element so we can hook up some logic to it. We'll read about hooking up event listeners on Stack overflow, and maybe even copy a little bit of code, but now that we have a place to write our logic, we should just be able to increment the account variable and we'll see that it doesn't work, and many of you would have seen the error already. But as a beginner, each step in this process seemed to make logical sense. I might even try debugging using our friend the alert function to see what's happening with our account value, and it is incrementing. Let's do the same exercise over in a spelt component and we'll compare our experiences. Now we're looking at a spelt component, except you might notice it doesn't look all that different from the HTML we were just working in. We still have a style block, except in this case the CSS is automatically scoped to this file. We have regular markup hanging out here in the middle, and we have a regular old script tag. Again, we'll have account variable initialized to zero, and after going through this Felt tutorial, we understand we can interpolate dynamic data directly in our markup using this curly brace syntax, and we have our number showing up on the screen. We also learned about the on colon click directive, which allows you to pass in an inline function and bind an event handler directly to a button. We'll do our count plus logic like we did before, except in this case we get a different result. The app works as expected. A spelt component feels like a natural progression from a plain HTML file with just some dynamic data and interactive bits sprinkled on top. The second reason that I think Sfelt is the Beginner's JavaScript framework is its battery's included approach to front end development. A quick search on NPM for React CSS will give us something like 3500 packages with similar results for React animation and React state. And while the breadth of choice is definitely a strength of the react ecosystem in some scenarios. For the beginner that's just learning. This can lead to analysis paralysis. Even experienced engineers have a hard time integrating new libraries into their application. A quick scan of the Spelt docs, however, gives you built in support for transitions, animations and even state management. Now we could build these extra features using vanilla JavaScript and web fundamentals but we'd spend so much time on that we'd never actually get to build the application we set out to build in the first place. Again, this would hinder us on our path to becoming an experienced web developer. That's why it felt as such a good choice for the beginner because as you build increasingly complex web apps and hit more use cases, you don't have to NPM install another new library, you just keep using Spelt and this has never been more true of Spelt than since the introduction of Spelt kit which allows you to build full stack applications in the same thoughtful Spelty way. I hope you've seen how Spelt might be the perfect tool for the beginner web developer who is looking to build more dynamic interactive web applications without a huge learning curve. I want to stress again that learning web fundamentals is of paramount importance. They enable you to build increasingly complex and performant websites but I would also stipulate that there really isn't a blessed path on the journey to becoming a web developer. There are really only detours and pit stops. The most important thing is that you keep going and seeing results quickly often thinks this felt is an important motivator. I'll resist the temptation to make a rock star developer joke but I will leave you with this. Whether it's guitar or web development, all of us have something valuable to create and share with the rest of the world. But only if we actually get on with creating it and don't get stuck practicing skills.