Rich Harris - Svelte Cubed

[Music] [Music] hey rich here i want to talk to you today about an aspect of felt kit that has kind of flown under the radar so far we haven't really talked about it a lot and it's probably not what you think of when you think about spell kit but it's a feature i really like that i think kind of sets it apart from its competitors at least for now i hope they steal it so a quick recap for those of you who aren't yet up to speed spell is the component framework spelt kit is the app framework that builds on top of spell and gives you routing data loading server side rendering static site generation beautiful developer experience provided by veet and so on lots of you already using kit to build your apps because there is apparently no amount of this is not yet 1.0 messaging that will dissuade you a lot and that's fine we're all adults and your feedback has been hugely beneficial so keep doing your thing but here's the thing it's not just an app framework it's also a framework for building libraries and in the next few minutes i'm going to show you how that works and what it means so imagine you're building a page of a spell kit app chances are you'll have some mix of code that's specific to that page code that's been imported from a third party library and code that sort of sits between those two the sort of thing that you might shove in a generic utils.js file or something like that every app i've ever worked on has some concept of an internal library in sveltkit there is a place to put the stuff that belongs to that third category the source lib folder it's really a convention more than anything it's not a magic folder this felt kit does provide you with an alias so that you can import files from here without doing the whole dot slash dance really the idea is that you don't have to waste brain cycles figuring out where to put common utilities and components and if you move from one's felt kit project to another it'll follow roughly similar organizational principles now imagine you're building a library first file could be a component library or a new action function or something like that you're going to need to try out your library in a sandbox app while you're building it then you're probably going to want to build a demo site or some interactive documentation historically a typical workflow for this is that you start building the the library over here and npm link it into your sandbox app over here or maybe you're fancy and you have a monorepo or something like that and then you'll do the same thing when it comes to building out demos and documentation the problem is that mpm link is the leading cause of boldness among open source maintainers there's just something about it that makes you want to tear your hair out like having to re-link linked packages every time you install a new dependency there are solutions to the problems caused by linking take your drink every time someone shouts pmpm but it's never going to be the ideal workflow and then you have to think about build steps if your library uses typescript or if you're one of the holdouts still using sas in your spell components then you have to account for that and it all adds friction but wait if every app needs an internal library and every library needs a demo app then why we have two separate workflows why don't we use a unified approach and let you build the two things in tandem and then give you the choice between deploying your app and releasing your library the punch line of course is that this is exactly what sveltkit does it's not an app framework it's a toolkit for building apps and libraries demo time let's create a new component library called start maths i refuse to yield to the american math it's short for mathematics it makes no sense that you would abbreviate it that way we're using the bare-bones skeleton app with typescript and prettier pre-configured our first component is going to be an add a component that takes two props a and b and that's them for you we'll create an add function that takes a number b number because this is typescript and use it inside our markup back in our root route again i refuse to yield to route even though root route is a lot easier to understand than root root we can import the component from lib add it to the page give it some props and confirm that two plus two is indeed four that's cool but if this code was going to be visible anywhere for example inside a demo then it would be nice if we were importing from spelt maths instead of lib we need to jump through some hoops to make that work but it's pretty straightforward so i'll do it here first we update sveltconfig.js so that veep knows about the abs we need to resolve an absolute path so i'm importing the path module then we need to update our tsconfig.json so that vs code doesn't freak out about our missing dependency we'll need to restart the dev server in order for this to take effect now we can update that lid to svelte maths when we create a new multiply component we can import it straight from svelte math multiply 6 by 7 and the answer is 42. so we could now do npm run build to create an optimized production version of our app but we could also do mpm run package which will create a distributable version of our library let's take a look at the contents of the newly created package directory we have our two component files except that they've been pre-processed which in this case means typescript has been converted to javascript we also have these declaration files so that if someone else imports components from sveltemass they'll get type checking and autocompletion insidepackage.json is covered over the relevant parts of the rootpackage.json and it's added the exports field so that library users can import from spelt math slash adder.felt and spelt maths multiplier.felt maybe that's not what we want though maybe it would make more sense to use named imports rather than deep imports let's go back to the library and create an index file that re-exports our two components now we and anybody else can import them in a single declaration if we want to disable the deep imports we can update the package.export section of asphalt config.js and now when we do npm run package the exports map no longer lists the components of course our demo app might still need an internal library alongside the one destined for publication and we want to exclude those files from the package we can do that by updating the package.files section of osfalconfig.js so now we have both a production ready app and an npm ready package and we could easily add a script to build and release both simultaneously i've grown to really love this workflow and i think you will too all right all of that was really just an excuse to show off the library i've been building with spell kit it's something i started working on over the summer at the new york times for our olympics coverage news organizations aren't allowed to show footage from the olympic games because the broadcast rights are jealously guarded so if you want to announce the results you either have to describe them in text or you have to find a way to show them and so my friends and i built an app using fault kit of course that would ingest results data from the olympics api and convert it to twitter videos and embeddable widgets we chose to use 3js because for my money it's the best 3d library out there but when you're building something under extreme time pressure it's really useful to have a declarative component-based approach to keep a lid on the complexity and give us extra features like hot module reloading in other words in the same way we just felt to keep our dom code manageable we wanted something to keep r3 code easy to work with today i'm open sourcing the result of that work it's a component library called svelt cubed and you can use it right now there is a caveat it is not feature complete the documentation has gaps some things will definitely change but i know you people well enough to know that that won't stop you so let's look at a couple of examples i'm hoping to add more to this page soon but i'm only one person if you know your way around 3gs and have some fun ideas then please help come and fill this page up there's the obligatory hello world we can edit values in the control panel which is provided by another swell kit library called spelt knobby so you can play with the material properties if you're curious about what the source code for this page looks like hit the link in the bottom right another example trisolaris some of you might have read the three body problem trilogy i've only read the first two books so no spoilers and it begins with this classic physics problem about the unpredictable motion of free bodies relative to each other i implemented it in javascript and the behavior is indeed very chaotic what i like about this example is that almost all the code is javascript the three component stuff is very compact on the documentation page you'll find a short tutorial for building a 3d scene from scratch let's build it now we'll begin by creating a new felt git project npm in it spelt next and setting it up in the normal way i'm going to copy over the start code from the tutorial the first thing you'll notice if you've used 3js in the past is how little code there is this is the equivalent boilerplate if you were to write the same thing without spell cubed so far it's not that exciting let's make it look a little bit nicer by enabling anti-aliasing and giving the scene a background color now let's add some camera controls so that we can interact with the cube at the moment the cube has the default material called mesh normal material which is very handy for debugging normals which are vectors that tell webgl which way their face is facing but probably isn't what you want in your app so we'll add a material of our own using the color of this felt logo now that we're using mesh standard material which is physically based we need to add some light so that we can see it we'll add both an ambient light and a directional light coming from the left hence the minus two along the x-axis let's add some controls we'll add variables for width height and depth and apply them to the cube mesh using the scale property now we can add some inputs and change the values right now cube is only telling three to re-render the scene when something has changed the dimensions the camera angle or whatever some frameworks will automatically re-render 60 times a second regardless but cell cubed has more respect for your user's batteries that said sometimes we do want to update things on request animation frame and for that we have the on frame life cycle hook looking good so far but we can polish it a little bit further we can make the cube cast a shadow then add a horizontal plane for it to cast a shadow onto we'll use the primitive component to add this grid helper to the scene we need to enable shadows both on the canvas and on the light source i'm going to customize the shadow map slightly so that it looks less blurry lastly i'm going to add a fog property to the canvas so that the plane fades out gracefully and there it is that's all i've got for now there's lots to do still box to write features to add and if the clarity of webgl is the sort of thing that you get excited over then come on over to github and we'll build it together thank you

Channel: Svelte Society

Views: 7,614

Keywords: Svelte, Javascript, Web development

Id: qD6Pmp45sO4

Length: 10min 33sec (633 seconds)

Published: Tue Nov 30 2021