Video details

Stephane Vanraes - 5 Years of Svelte at Itslearning


Platinum Sponsor: GraphCMS -
Gold Sponsors: LevelUp Tutorials - Cloudflare Pages - Svekyll - Netlify - Vercel - Magic - FaunaDB - WPEngine -
Music By: Fractal -
About the talk: When Svelte came on the scene in 2016 it was fully embraced by Itslearning for all frontend. With every new Svelte version parts got rewritten, so let's compare the same page, doing the same thing over the three Svelte versions.


Hi, I am glad to be part of Felt Summit again, this time with a short presentation about how it's Felt has changed in the past five years and how it's has been used. It's Learning. I have to add a small Disclaimer, however, that I do no longer work for each learning, but the company has been so nice to give me permission to talk about them during this presentation. It's Learning is a platform that handles several aspects of education. Our systems to grade and follow students, give homework, provide lecture material, communication with parents, attendance and many other features. It is used on many different levels of education from primary school to universities and even adult education. The company was founded in 1999 and currently has over 30 developers. It is mainly active in Europe as customers worldwide. At peak moments, around 400,000 of the 7 million users are using the platform together. It goes to say that this is not just some hobby project, this is a real application used by millions of people. It's also from So. It has a lot of old code. Big parts of the application are still written in and use Jquery to handle the front end parts. These things cannot be simply written in a modern framework because it has so much functionality that it would take years to redevelop the entire application and the customer wants to see new features on a regular basis and maintenance, especially considering this is such a crucial part for lots of schools. Think of during the Covet a pandemic and lots of people had to work, had to have school from home. It was a very important tool for them. However, in 2016 we started looking at ways to modernize the content. We could have chosen established frameworks like React or Angler, but out of nowhere came Felt and we lost it. One of the main reasons we chose Felt was the promise of small bundles. Many of our end users are on slow connections, computers or mobile devices. That was an absolute must. I'll have a look at some of the differences we saw over the years using different versions of Sellta. To do so, my former colleagues provide me with a source code of the Your Students page. This is a simple page listing your courses and students with some functionality like searching, filtering, sorting. Because of its simplicity, just rewritten in each version of Filter to serve as an example for other teams. I will not be showing the entire code as I would take hours to dissect, but rather draw inspiration from it to highlight some of the differences. Let's start at basics. How does a component look like? Here is version three. We import components, we export Pops, we use them in our market. And if you have lots of Pops you want to pass to children, you can spread them in those children. If you go back to version two, we had to do export default list all the components used there and export the properties as a data function. You also see in the markup. There is no more the possibility to spread the pops into a component. If you look at the actual code you'll see that sometimes children have like 1015 properties and this makes for a long coat. The spreading was a very good addition to Spelta. If you go even further back in time you see the appearance of double Curtis. If you look at the markup you will see that course to title there does not have double course. It should have, but it doesn't because I made a mistake here. We also use the extension HTML to import components. This was for syntax highlighting reasons as we did not have the tools back then that we have now. Reactive variables are taken for granted nowadays and they're very easy to work with. Dollar sign column name of the variable equals whatever you want is variable to equal. But if you go back in time we see that inversion two and inversion one for that matter, they were called computed variables. They had to be declared as computed variables in this exported object. Then we had a name of the variable as a property and then a function where the dependence are the argument and then yeah, you have the function results. Is your computer viable? Firing events in version three is easy. Albaed A bit cumbersome maybe with the create event dispatch theme here we see select course, dispatch, select and pass the course as an argument to be used in detail. Here is the same code, but for version two we see several things differently. All the methods are declared as a method of the component and we use this fire instead of a dispatcher. Another very important difference here is that when we look at a markup we see on select and then a function call instead of a function reference like we have them now. This is one of the biggest differences between version two and version three, except of course for this whole export default thing. It costs a lot of Bucks during the transition of form two to three. We still see now that beginners in often put their functions like this thinking this will work, but we all know that this doesn't work. You have to put a handler in there. Using variables in your skips is quite easy. Here is version three. I'm not sure what I can tell about this. It's easy. Active equals not active and it has changed. Inversion one and version two you have to use this dot get and then the property you want to get and this dot set with an object that you set the state of the component to. This code will only change the properties that are listed in this dot set. So ID and visited in this case will still remain the same. A favorite feature in Delta are stores, drive stores, readable stores the v three version of your students uses stores extensively? I think there are about ten different kinds of stores used and they are easy to work with. However, in version two there was only one store type. It was called store and we would often just make one global store for the entire site that contains all the data used on this page. You would pass the store as a separate property to a component and then it would be available for all descendants of that component. That means that you could have a store declared on the application level and then for instance in a subsection of the Patriot could have another story defined. We did not do that. However, in its running as a final thing let's have a look at lifecycle methods. Here we have the on Mount the on Mount uses student list. Student list is a reference to a Dom element. It was declared as a variable and then using bind this we bound the Zoom element to this variable. In version two we used have column to reference Dom element and I will use this reference in the code to get this reference preferably with the correct variable because this code will for surely not work as we expected where it concerns the lifecycle methods it's just on create on destroy on up to date and so on. It's fairly straightforward. I have to note there is a bind there difference value too but it's only used to keep input values in sync with properties of the component. That concludes a very quick overview of some of the differences of Svalto over the years. Have many more details but it is clear that felt has evolved a lot in those five years and it's always been a pleasure to work with and it will always stay a pleasure to work with.