Rich Harris — What You Can Do For Your Framework

[Music] oh [Music] [Laughter] [Music] [Music] [Music] [Music] w oh hey I was just crushing some rings all right let's talk about spelt 5 a lot of you have been following development very closely some of you have even yoed it into production already which God bless you but some of you have probably been like you know what I'll deal with that when the time comes well the time is coming we're not there just yet more on that soon but there is light at the end of the tunnel and so to get everyone on the same page I'm going to quickly run through some of the biggest changes the first thing I want to draw your attention to is the output of the compiler in spell 4 if you have a Hello World component it generates all this code and as you start adding State and logic and behavior it starts to grow at a fairly rapid clip and the generated code is pretty hard to follow it's not a problem exactly but it hints at the complexity of the spel 4 design and it leads people to ask does it scale now the same component in spelt 5 is much less code it's much simpler and it stays that way as we start to add more stuff to our components this isn't just a cosmetic change it reflects the fact that spel 5 is just much more tightly engineered in every respect here's a nice example of that components are just function calls we're calling this counter function directly there's no create component counter or anything like that by getting rid of that in direction we make the output really easy for tooling and JavaScript engines to optimize the hell out of another huge benefit of this overhaul is that the codebase is much more approachable for contributors than it was before and it's going to be a lot easier to add new features so your spell apps are going to be smaller they're going to be more robust they're going to be faster does it scale yeah it scales now that's all good news for your users which is the most important thing but spel 5 is also good news for you the developer because there's a boatload of new stuff and we're going to talk about it the most obvious change is runes just like in Ragnarok runes are magical symbol in spel the magic is reactivity you declare a piece of reactive state with the state Rune and every change of that state causes an update this works for objects and arrays too so I can add an item to a list with array. push and if I modify a single property only the things that depend on that specific property will get updated I can create derived state with the derived Rune and I can use the effect Rune to run imperative code like updating a canvas element now a side note the effect Rune isn't something you should be using often it's really more of an escape hatch than anything so if you find yourself reaching for it often think about whether there's a more declarative approach that would fit better the really cool thing about runes is that they're not just for components you can use runes intel. JS andelt dots files so whereas in the past you might have wanted to refactor some code into a utility module but then realize that you were going to have to rewrite everything to use stores that's no longer true if you've used stores to do anything complex in the past you're really going to appreciate how much simpler your code gets with runes essentially spel is no longer just a component framework it's a language for describing reactivity that dovetails seamlessly with JavaScript and typescript there are many improvements Beyond runes as well slots were always a bit confusing and messy in spelt for weird syntax lots of restrictions on how you use them no type safety don't even get me started on the let directive in spel five we have Snippets and render tags you can use these within components to Define reusable chunks of markup and you can pass them between components as props another big change is around events in spelt 4 you add a click event listener to a Dom element with on colon click but in spell five we get rid of the colon they're just like any other attribute this makes things much simpler when dealing with component events instead of doing the whole create event dispatcher thing we can just use props as well as being a lot easier to use it's a lot easier to type speaking of which spelt 5 supports typescript natively typescript was supported in spelt 4 via a pre-processor if you add Lang equals TS to your script tag and configure your bundler appropriately then you can use Ty scrip syntax but not inside your template which is particularly annoying for things like inline event handlers in spel 5 it just works typescript goes into the compiler JavaScript comes out you do still need to opt in Via Lang equals TS we have reactive versions of the built-in map set date and URL classes if I edit path name here HF updates and vice versa it's really easy to build your own reactive classes because you can use the state and deriv runes to Define class Fields this is a really great approach to domain modeling if you're one of these people who thinks classes are bad it's probably because you are listening to some washed up thought leader as long as you avoid inheritance and keep things self-contained classes are really cool and spell Embraces them wholeheartedly with just a classy framework style tags also got an upgrade you can now use CSS nesting syntax inside your components still taking advantage of spel style scoping and unused CSS removal it's also much easier to create Global Styles if I want to Target some elements inside an HTML tag I don't need to repeat this stuff over and over again I can just put it all inside a global block so there's a lot of new stuff and I know what you're asking when can I use it well I won't bury the lead any further spell 5 is now in the release candidate actually you know what I will bury the lead a little further this announcement feels a little flat need a little something extra there's only one man who can help bear with me a second hey puru hey how's it going good man it's been tooo long so listen I need your help I'm doing this felt 5 release candidate announcement and needs a little something extra need some of that Peru magic do you think you could hook me up yeah dude no problem send it over I'll see all right I'm sending it over now you got it okay I got let me see and this should do the trick awesome hey guys so without further Ado spell 5 is now in the release candidate phase hey thanks man this looks great yeah you really came through no worries man glad I could help and a big congratulations to the team for making it to the RC exciting times ahead wait how are you doing this well that was weird so what does this mean it means that in terms of API design and feature set as far as we know spelt 5 is done I say as far as we know because we can't be certain until it ships but if you start building with spelt 5 today we don't expect breaking changes between now and the stable release it also means that all of the big obvious how could they let this happen bugs are fixed and the stuff that's left is mostly edge cases and polish it does not mean it's ready for production I know that when I say that a lot of you go la la la la la we can't hear you but if you do take it to production and things break there are no refunds so how do you get started well if you want to try it out in a new project you can run mpm create spelt at latest and it will give you the option to try spelt 5 in a new spel kit project if you have an existing project you can npm install spell at next and you should be good to go if you're using the typescript pre-processor feel free to remove that if all goes well things should continue to work once you've done that you can start migrating your components to use the new features and that migration is what I want to spend the rest of my time talking about we've gone to some honestly quite obser lens to make sure that code written for spelt 4 will work the same way in spelt 5 with a tiny handful of minor exceptions and we're working on a tool for automated migrations that you can experiment with today it's right here in the playground but it's not going to be enough because this is ultimately a collective action problem with some tricky Dynamics we've seen this with other Frameworks and even entire languages the incentives not to upgrade can be stronger than the incentives to upgrade and so we find there's a tension between application developers and Library Developers developers a really good example of this is esm versus commonjs as most of you probably know commonjs was the de facto standard for writing modular JavaScript for many years and it's still the most common format on mpm but now we have a real standard esm and it has some important advantages over commonjs so much so the authors of new libraries overwhelmingly prefer it but here's the rub if your project is esm you can use esm dependencies or commonjs dependencies but if your project is commonjs you can use esm in certain scenarios it's got a little bit better in note 22 but there are some caveats the essential Dynamics remain what this means is that if you're building a library and you distribute it as esm a lot of people won't be able to use it so as a library author you're incentivized to use the old format instead of the new better one some people will distribute both esm and commonjs in the same package but that involves extra work for application authors the easiest thing to do is nothing just keep using commonjs after all switching involves extra work so the incentives are in Conflict both sides quite reasonably want to avoid doing extra work and the result is that the roll out of esm has been incredibly painful for the ecosystem unless you're using spel kit of course because we saw this coming years ago and spel kit projects have been esm first since day one unfortunately the same dynamics that I've just described also apply to spel 4 and 5 if you're building an app with spelt 5 you can use dependencies built for four or five but if you're building an app with spelt 4 you can't use dependencies that need spelt 5 so once again Library authors are disincentivized to adopt the new stuff and that could be a real problem because eventually in spel 6 or seven we will need to drop support for some of that old stuff so how do we solve this Collective action problem well the answer is by taking Collective action we need to pull together as a community that's not what your framework can do for you ask what you can do for your framework for application developers your task is pretty simple we need you to update to spelt 5 as soon as you can once we reach a stable 5.0 if you want to start experimenting with the release candida on a branch today that's even better as you'll help us uncover any last bugs and design flaws you don't even need to update your components that can happen gradually over time all you really need to do is update your package.json if you're currently on spelt 3 I do recommend updating to spelt 4 first by following this migration guide that's something that you can do today without waiting for spell 5 to come out for Library authors the first thing I recommend doing is updating your peer dependency on spelt if you currently depend on 3 to four make that 3 to five you can do that in a patch release without any other changes and people who have updated to spelt 5 will be able to use your package without getting a bunch of peer dependency warnings in their terminal once you've done that it's time to create a spel 5 version of your library this is a breaking change of course so it needs to be be a semantic versioning major release if you plan on continuing to support the old version then you should create a branch at this point so that you can continue working on that branch and cutting releases from it without interfering with the new version make sure that in the new version your package.json specifies a peer dependency on version 5 and not on older versions you could release it just like that but if you're going to do a major release then now is the time to make any breaking API changes for example getting rid of slots and replacing them with Snippets and replacing any component events created with create event dispatcher with callback props once you've done that you can release your package to npm pour yourself a drink sit back and relax knowing that you've done your bit aside from App developers and Library developers there's a third group That's essential to making this migration of success and that's the Educators if you're someone who creates content about spelt then people are going to be looking to you to understand how to make best use of the new features we can do this it's a challenging moment for any project but this is framework and if we all pitch in I'm confident it's going to be a huge success I'll see you all soon Peru stop it

Channel: Svelte Society

Views: 10,624

Keywords: Svelte, Javascript, Web development

Id: xCeYmdukOKI

Length: 13min 7sec (787 seconds)

Published: Tue Apr 30 2024