Svelte – Quickstart & Thorough Introduction Tutorial

00:00:01 hi there has been this new thing swelled
00:00:05 Jas it's actually not that new but in
00:00:08 working free it's relatively new and
00:00:10 that version changed a lot anyways it's
00:00:13 an amazing piece of front and Technology
00:00:15 which helps you build modern user
00:00:17 interfaces just like react angular and
00:00:19 view you might say and it d-dad us but
00:00:22 it brings some unique advantages to the
00:00:24 table a very lightweight and nice syntax
00:00:26 some interesting new features and it
00:00:29 spits out applications which are super
00:00:31 small and super fast in this video we'll
00:00:35 have a first thorough look at it I'll
00:00:36 walk you through its core features some
00:00:39 of its core features and I also do have
00:00:41 a full course on spelt in case you're
00:00:42 interested where you can learn all about
00:00:44 it from A to C all the way up to
00:00:47 deployment including things like
00:00:48 validation HTTP state management all the
00:00:53 query syntax features and so on
00:00:55 animations and on everything in there so
00:00:58 I would love to see you there but in
00:01:00 this video we'll have a first look at
00:01:01 swelled and see how it works and why you
00:01:03 should definitely have a closer look at
00:01:05 it
00:01:11 now in order to dive into swell and
00:01:14 understand how it works let's simply
00:01:16 create a new project and for this you
00:01:18 find a link below the video of course
00:01:20 where you will find these exact
00:01:22 instructions in the end what you need
00:01:24 for that is no js' which we'll use to
00:01:27 run our project and also to use its
00:01:29 package manager to set up a new project
00:01:32 so visit nodejs dot orc and download the
00:01:35 latest version dear and once you got
00:01:37 that you can just copy this NP x command
00:01:39 here which creates a new swell project
00:01:42 and run it in your terminal in the place
00:01:44 where you want to create that project
00:01:46 and I'll name it swelled first steps but
00:01:48 you can give this project any name you
00:01:50 want now what this will do is it will
00:01:52 scaffold out a new swell project with
00:01:55 all the required dependencies and the
00:01:57 required setup you need and this will go
00:01:59 superfast you can just navigate into
00:02:01 this new folder thereafter and now run
00:02:04 NPM install to install all the required
00:02:07 packages this project needs in the
00:02:09 folder of that project and this will all
00:02:11 just take a couple of seconds now with
00:02:13 that installation process finished I
00:02:15 open this project app in my IDE visual
00:02:19 studio code and there if you're working
00:02:21 with Walt I would strongly recommend
00:02:23 that you search for this Welt extension
00:02:25 and install that it will simply help you
00:02:27 a bit with other completions and
00:02:29 basically improve the support you have
00:02:32 in Visual Studio code for small now this
00:02:35 is the project we just created in there
00:02:37 you see a couple of config files this
00:02:39 project uses roll-up which is an
00:02:40 alternative to web pack for building
00:02:42 this project and the package to JSON
00:02:45 file you see the scripts you can start
00:02:47 and there it see development script
00:02:48 which we want to start as this will spin
00:02:50 up a development server and watch all
00:02:52 our files for changes and automatically
00:02:55 rebuild our project and reload the page
00:02:57 in the browser whenever we change
00:02:59 something in a file so let me open up
00:03:01 this integrated terminal here in Visual
00:03:04 Studio code and simply run NPM run dev
00:03:06 to bring up that development story now
00:03:08 with that started up you can open
00:03:11 localhost 5000 in your browser and you
00:03:15 should see this basic hello world
00:03:17 application which is the basic starting
00:03:19 apps welt gives you here now please also
00:03:21 note something interesting
00:03:23 you only got development dependencies
00:03:25 and the reason for that is that swelled
00:03:28 actually is not a framework that gives
00:03:30 you any code that goes along with your
00:03:32 code and runs in the browser instead
00:03:35 swell'd is a compiler that's super
00:03:37 important you write swell'd code which
00:03:40 is basically normal JavaScript code but
00:03:42 following certain rules and using a
00:03:44 certain syntax given to you by a swell
00:03:46 and then swell'd runs over your code
00:03:48 during development so right before you
00:03:51 deploy your application and it compiles

00:03:54 your javascript code to a bunch of
00:03:56 highly efficient JavaScript instructions
00:03:59 which then run in the browser and here's
00:04:02 how it works in the source folder you
00:04:04 have to code on which you will work you
00:04:06 have the main J's fall which is the root
00:04:08 entry point of your suelto plication and
00:04:11 in there you see some basic code where
00:04:13 we import something from a swell file
00:04:15 then this seems to be the constructor
00:04:18 constructor function we create a new
00:04:20 object based on that we then target a
00:04:22 place in our document in our HTML file
00:04:25 and we'll have a look at that file in a
00:04:27 second and we set up some props so if
00:04:30 you know react this tells you something
00:04:32 we seem to pass some data into this app
00:04:35 component here maybe but I'll come back
00:04:38 to that before we have a look at the
00:04:40 apps world file let's actually have a
00:04:42 look at the public folder there we have
00:04:44 the index.html file because swell'd is a
00:04:47 compiler that allows you to create
00:04:50 JavaScript applications or Java Script
00:04:54 components which you can drop into
00:04:55 existing applications and so either way
00:04:58 you need a HTML file where you import
00:05:00 your generated script which will be this
00:05:02 bundle J's file and where you then
00:05:05 provide a place for as well to hook in
00:05:07 and to basically take control over the
00:05:10 Dom because swell'd
00:05:12 is a JavaScript compiler not a framework
00:05:15 but a compiler that is all about
00:05:17 building reactive user interfaces and
00:05:20 therefore it needs its share of the Dom
00:05:23 where it can take control over and where
00:05:25 it can control the interface so we're
00:05:28 importing this bundled J's file which is
00:05:30 this J's file and this bundle J's file
00:05:32 in the end is just this output of highly
00:05:35 optimized instructions swell'd generates
00:05:39 based on your code now the bundle J's
00:05:41 fall as you see here is not yet fully
00:05:43 optimized doesn't use minification zon
00:05:45 because it's the development and
00:05:47 debugging version but still you see this
00:05:50 here is a bunch of code and it's not the
00:05:52 code we'll write instead this is the
00:05:54 code which will be generated which in
00:05:56 the end will do exactly the things we
00:05:58 tell it to do in this app's well file
00:06:01 therefore let's have a look at this file
00:06:02 and what we see here might look familiar
00:06:04 to you if you know UJS we have a script
00:06:08 tag with a style tag and we have some
00:06:10 markup here this is in the end how you
00:06:12 will build your swelled applications you
00:06:14 build them from components and this here
00:06:17 is one swelled component in this case
00:06:20 our only swelled component we control
00:06:23 the markup which we eventually want to
00:06:25 output then we have some JavaScript
00:06:26 logic and here with syntax like this we
00:06:29 connect our markup to our JavaScript
00:06:32 code and here we dynamically output the
00:06:34 name variable which is this variable and
00:06:36 we therefore print the value of that in
00:06:39 our real Dom so the world here is coming
00:06:42 from this curly brace name thing and if
00:06:45 you're wondering where the world text is
00:06:48 coming from well in this case that would
00:06:50 be from the main J's file which sets up
00:06:53 world as the value for the name drop and
00:06:55 a prop well that's just what we have
00:06:57 here since this is exported this is a
00:07:00 prop and that's just one of the syntax
00:07:03 features swelled ads or introduces it
00:07:06 uses standard JavaScript features but
00:07:09 sometimes it assigns a different meaning
00:07:10 to them and for example by exporting a
00:07:13 variable in a component you turn this
00:07:16 into a prop so now it can be set from
00:07:18 outside so let's actually take this to
00:07:20 the next level now to understand this a
00:07:22 bit better and let's assume we would be
00:07:25 building a basic online shop here
00:07:27 therefore we probably want to have some
00:07:29 shopping cart and a list of products so
00:07:32 for this I'll create a new component
00:07:34 here in the source folder and I'll name
00:07:36 it product on swell'd this will be my
00:07:37 file name now in there let's first of
00:07:40 all write some markup that could define
00:07:42 our product I'll keep this relatively
00:07:44 simple I'll add a div here maybe h1 tag
00:07:48 where I eventually want to output the
00:07:49 product title then also h2 attack
00:07:52 where I want to output price of the
00:07:55 product and then a paragraph with the

00:07:58 description and below that we probably
00:08:01 always wanted a button where we say Add
00:08:02 to Cart now let's also add some styling
00:08:06 here and the good thing in swell is that
00:08:08 whatever Styles you to find here they
00:08:10 are automatically scoped to this
00:08:12 component so if I styler h1 tag here in
00:08:16 this component in products weld all the
00:08:18 styles we defined here will only affect
00:08:20 this h1 tag but never the h1 tags and
00:08:23 our components like this one so
00:08:25 therefore let's go back into products
00:08:27 wealth and let's assign a couple of
00:08:29 styles here quickly and for that I'll
00:08:31 first of all work on my div here and
00:08:34 give that some styles I'll give it a
00:08:37 margin of 1 R M in all directions here
00:08:40 I'll give it a box shadow of 0 2 pixels
00:08:44 8 pixels and then rgba 0 0 0 0 to 6 like
00:08:52 this give it a padding of 1 Ram also a
00:08:56 border radius of 5 pixels a background
00:09:00 color of white something like that the
00:09:03 h1 tag there I want to shrink the font
00:09:05 size down to 1.25 Ram and reduce the
00:09:10 margin here to 0.25 Ram top and bottom 0
00:09:14 left or right for h2 I'll set the font
00:09:19 size to 1 Ram also decrease the margin
00:09:26 here to the same levels we have a noise
00:09:28 on the h1 tag and change the text color
00:09:31 actually not this gray but to a dark
00:09:33 grayish color something like that last
00:09:37 but not least on the paragraph here I
00:09:39 want to set my margin all the down to
00:09:42 0.25 Ram and 0
00:09:46 let's also let me have a look at the
00:09:48 button and there I want to actually
00:09:52 inherit all my font styles so that it
00:09:55 doesn't take the default system font Mac
00:09:58 OS would otherwise assign to it but
00:10:00 takes medieval font I have in the rest
00:10:02 of the application give it a little bit
00:10:04 of padding
00:10:06 maybe one five REM 0.15 REM from top and
00:10:09 bottom 0.5 REM left and right something
00:10:12 like that a background which I want to
00:10:16 actually find here in this purple
00:10:18 reddish area like this color here a lots
00:10:23 of this color look here a border of one
00:10:28 pixel solid and that same color a text
00:10:31 color of white with that we should have
00:10:35 some styled markup without dynamic data
00:10:37 for now but we can now import this
00:10:39 component here into our app component
00:10:41 and for that we simply go into our
00:10:43 script tags and there you can add an
00:10:44 import statement an import product from
00:10:47 dot slash products well file and this
00:10:50 starts well import here will be handled
00:10:52 by our roll-up conflict which will
00:10:54 include that component and generate some
00:10:57 code instructions that will actually
00:10:58 render all our code and styles here into
00:11:02 the DOM
00:11:02 however only as soon as we start using
00:11:04 it because well that's really smart and
00:11:06 efficient for the moment if you go to
00:11:08 the bundle here and you search for the
00:11:11 scription which we have here in products
00:11:14 well right we have description down
00:11:15 there if you search that in the bundle
00:11:17 JS file you won't find it so it's not
00:11:19 included yet we first of all have to
00:11:21 render our product component here in the
00:11:24 Dom of our apps well file so in the
00:11:26 markup here and we simply use product
00:11:29 here as a new HTML tag so to say of
00:11:31 course it's not officially an HTML tag
00:11:33 and we're also not creating web
00:11:35 components here so the browser won't
00:11:37 understand this but this is not what
00:11:39 will end up in the browser in the Dom in
00:11:41 the end this is just an instruction to
00:11:43 swell'd that it will add some code to
00:11:45 our bundle to eventually render the
00:11:48 product component into the Dom so now
00:11:51 have you saved that you go to bundle J's
00:11:53 and you search well we don't even need
00:11:55 to search here it is already description
00:11:57 and here you see we see no HTML content
00:12:00 in here and set these are all just
00:12:01 JavaScript instructions that in the end
00:12:03 set for example the text content of a
00:12:05 paragraph to description and element is
00:12:07 just a helper function which creates a
00:12:09 new paragraph and so on so this is
00:12:11 what's well gives us and now more
00:12:13 interestingly if we have a look at the
00:12:15 output this is what we have here this is
00:12:17 our button is our card look here for
00:12:19 this

00:12:20 product let me go back to the product
00:12:23 for one I want to tweak the button here
00:12:26 and give it a cursor a pointer so that
00:12:29 we have a nice cursor when we hover over
00:12:32 this button and we can also add a hover
00:12:34 and active effect here so let's go to
00:12:36 the button here again and add : hover
00:12:39 and button : active here and in there
00:12:43 I'll just add a little bit of box shadow
00:12:45 of one pixel one pixel six pixels rgba 0
00:12:49 0 0 0.26 with that we should have a nice
00:12:54 little hover in fact when we hover over
00:12:57 that that's now our button that's not
00:12:59 our card now of course you want to get
00:13:01 some dynamic data in there because that
00:13:03 is the end what makes our application
00:13:06 more dynamic we haven't taken care about
00:13:08 this at all so why don't we allow the
00:13:11 user to add a new product then so let's
00:13:14 go to apps world which is where we use
00:13:17 the product let's add a couple of inputs
00:13:19 here an input for the title a input for
00:13:23 the price and they have for off type
00:13:24 number and also a text area for the
00:13:28 description and I'll get rid of all of
00:13:30 that but the row is here so let me and
00:13:35 maybe add 3 rows here now I'll also
00:13:38 quickly add some labels so that we know
00:13:39 what we're working on so here we got the
00:13:41 title this will have tid title then then
00:13:45 here I'll add another label for the
00:13:48 price and I'll say price here and this
00:13:52 will get an idea of price and last but
00:13:55 not least here the text area let's add a
00:13:57 label this gription and give it a text
00:14:04 of description and here assign an idea
00:14:06 of description to this text area now all
00:14:09 to wrap these inputs into divs so that
00:14:11 each input receives a new line because
00:14:14 it's now wrapped into a block level
00:14:16 element all the for the text area of
00:14:20 course
00:14:23 that out of the way this is what we get
00:14:25 now this is not super pretty but it will
00:14:27 do the job for now what I want to do
00:14:29 though is I'll wrap this into a section
00:14:31 you could of course also just use a div
00:14:34 so put all my inputs into there and now
00:14:38 give this sections I'm styling here in
00:14:40 my absolute foul please also note that
00:14:43 the h1 tag I previously styled here did
00:14:45 not bleed over into the product
00:14:47 component the h1 tag tag here was not
00:14:50 purple because styles are scoped to the
00:14:53 component they are defined in so now
00:14:55 let's add a section here and maybe gift
00:14:58 is a width of 30 R M and a margin of oto
00:15:02 to Center it now we'll have this look
00:15:06 here and give labels and inputs here a
00:15:11 width of 100% so that they take the full
00:15:14 width I'm giving its here also for text
00:15:18 area so that they take advantage of the
00:15:20 full width I assigned to that section
00:15:22 now we have all these inputs and with
00:15:24 these inputs I for now want to set the
00:15:26 value here on tile price and description
00:15:28 and later we'll also make sure that we
00:15:30 have to press a button to add a new
00:15:32 product now to connect our inputs here
00:15:38 to this component on there we first of
00:15:42 all need to connect the values we're
00:15:43 entering here with variables in our apps
00:15:46 mod file vorenus I will now get rid of
00:15:48 this prop variable and add normal
00:15:50 variables which are not exported so
00:15:52 which are not settable from outside and
00:15:54 you do this with normal JavaScript
00:15:56 syntax because you always use normal
00:15:58 JavaScript syntax here there is no magic
00:16:00 in the syntax it's just house well
00:16:02 sometimes interprets some of your code
00:16:05 that this might differ from normal
00:16:07 JavaScript behavior but that's all
00:16:09 swells job and that's all documented in
00:16:12 as well talks and in my swelled course
00:16:14 of course and therefore here we just
00:16:16 create new variables for example title
00:16:19 which initially could be an empty string
00:16:22 and then let's replicate this also for
00:16:24 the price which initially is 0 though
00:16:28 and the description which initially all
00:16:32 does an empty string now we want to bind
00:16:34 this here to
00:16:36 our inputs and for that we use a
00:16:38 convenient binding syntax we can set the
00:16:41 value here the value property of the
00:16:45 input Q curly braces and now this is of
00:16:48 course a special syntax that's what I
00:16:50 meant
00:16:50 spelled sometimes add some new features

00:16:53 interpret some output in a new way and
00:16:55 if it encounters curly braces here you
00:16:58 may also put them between double quotes
00:17:00 by the way that does not matter if it
00:17:02 encounters that it knows that now you're
00:17:04 about to output some dynamic value in
00:17:06 here or to be precise this has to be a
00:17:09 JavaScript expression that yields text
00:17:12 or a number or a boolean so something
00:17:14 which can be printed to the screen and
00:17:16 here I will simply point at titles of my
00:17:19 title variable which of course holds a
00:17:21 value that can be printed to the screen
00:17:23 now if we do that and I enter starting
00:17:27 title here you will see that if we save
00:17:29 that this is pre-populated with starting
00:17:32 title now of course we don't just want
00:17:34 to pre-populate it we also want to store
00:17:36 whatever the user enters here back into
00:17:38 the variable so I'll set this back to an
00:17:40 empty string and now add an event
00:17:42 listener here and you do this with on :
00:17:45 another piece of syntax which you could
00:17:47 add a normal HTML to but there it
00:17:50 wouldn't have any effect here swell'd
00:17:52 will actually pick this up and assign a
00:17:54 meaning to it with on :
00:17:57 you can add event listeners and you
00:17:59 could listen to clicks or to blur or in
00:18:02 this case to the input event and then
00:18:04 again you can add curly braces between
00:18:08 double quotes or without those that does
00:18:10 not matter and now here you don't assign
00:18:13 a JavaScript expression dead yield
00:18:15 something which can be output but
00:18:17 instead here you have to point at a
00:18:19 JavaScript function and you can simply
00:18:22 add that function
00:18:26 and I'll name that set title and receive
00:18:28 my event object here and in there I'll
00:18:31 therefore set title equal to event
00:18:32 target value because we get the normal
00:18:35 Dom event object which has a target key
00:18:38 which points at the element that
00:18:41 triggered that event and that element
00:18:43 here is an input element input elements
00:18:46 have a value property and that's exactly
00:18:48 what I'm accessing here so now here down
00:18:50 here I simply point at set title without
00:18:52 parentheses because I don't want to
00:18:54 immediately execute it instead I just
00:18:56 want to set up a reference pointing at
00:18:58 this function so that svelt can call the
00:19:01 function for us as soon as the input
00:19:04 event is fired which happens on every
00:19:05 keystroke now to see whether that works
00:19:08 or not we can simply temporarily output
00:19:11 the title appear again simply with curly
00:19:14 braces in the midst of our markup you
00:19:17 can use them in any place where you can
00:19:18 output text so that would be here when
00:19:21 you bind to an attribute or property but
00:19:23 also just like here as a text node so to
00:19:25 say and here I can use my title variable
00:19:28 again and now what you will see is that
00:19:30 as I type here this is a title you see
00:19:33 the title also appear up here and that
00:19:37 is how spelt works and that is how
00:19:38 powerful it is now what we have here is
00:19:41 kind of a two-way binding we're passing
00:19:44 our title into the value prop of the
00:19:46 input and we're also reacting to you
00:19:48 changes in the input through the user
00:19:49 and then stored it back into the
00:19:51 variable and if you have two-way binding
00:19:53 you all have a shorter syntax available
00:19:55 which I'll now use on the second input
00:19:57 here but we could also use it here in
00:19:59 the first one of course and that is an
00:20:01 hour special instruction a directive
00:20:03 which smelt understands the bind
00:20:05 directive barn : again is understood by
00:20:09 swell'd because it parses all your
00:20:11 mark-up you're writing here and you can
00:20:13 bind to a property here and that would
00:20:15 be the value property now this means
00:20:17 that swelled will both pass data into
00:20:20 that property but also react to changes
00:20:23 of it and here we bind to value and I
00:20:26 want to find that to my price variable
00:20:28 and that means that whenever it has
00:20:30 changes the changes are saved back into
00:20:32 the variable but whenever we change the
00:20:34 variable here from some other place
00:20:36 because some time are expired or
00:20:38 anything like that
00:20:40 such changes would also be reflected
00:20:41 back into the input and now another
00:20:43 special feature of suelto is dead since
00:20:45 this is a number of type number here it

00:20:47 will automatically convert whatever the
00:20:49 user enters here to a number normally it
00:20:52 would be a string but swelled will
00:20:53 automatically convert it to a number for
00:20:55 us nor last but not least the text area
00:20:57 can also be bound with bind colon value
00:21:00 and here we bind that to description now
00:21:03 we're getting all these values the next
00:21:05 goal is to pass them down to product for
00:21:08 that we have to go to the product
00:21:09 component and accept these values here
00:21:12 as props again if you know react you
00:21:15 know the concept of props props are
00:21:17 essentially pieces of data in a
00:21:19 component that can be set from inside
00:21:22 the parent of the component so from
00:21:24 inside the place where you include the
00:21:25 component through its selector which
00:21:27 we're doing here in apps weld to create
00:21:30 a prop well you already saw that before
00:21:32 we need some script tags here and then
00:21:35 we define variables like here product
00:21:39 title and product description and
00:21:44 product price or whatever you want to
00:21:47 name them I'm just choosing different
00:21:48 names than an app spelled for these
00:21:50 variables to avoid confusion technically
00:21:53 these variables won't clash so you can
00:21:55 use the same names but here I'm creating
00:21:58 these variables but now to make them
00:22:00 settle from outside you have to export
00:22:02 them so you have to add the export
00:22:04 keyword and this in turn then tells well
00:22:08 that this should be a variable that is a
00:22:10 prop so that can be set from outside now
00:22:13 we can use these variables in here in
00:22:15 products well just like normal variables
00:22:17 so for example just as before we can
00:22:20 output them down there so here we output
00:22:22 the product title here the product price
00:22:25 woops product price and here the product
00:22:30 description now we just have to set them
00:22:34 here in apps world and we want to bind
00:22:36 the values we stored in our local
00:22:38 variables here in apps world to these
00:22:40 prop variables on our product for that
00:22:43 you just go down to your product
00:22:45 component and you bind product title and
00:22:48 make sure you get the case incorrect
00:22:50 because casing does matter here because
00:22:52 this is not regular HT
00:22:54 certain tax were you would not have case
00:22:56 sensitivity this in the end is just some
00:22:58 markup which is first parsed and
00:23:00 converted by swelled before it ends up
00:23:02 in the Dom so here casing doesn't matter
00:23:05 and I bind product title to title
00:23:07 product price to price and product
00:23:12 description here to description and now
00:23:17 let me reformat that to make it a bit
00:23:19 easier to read with all of that if you
00:23:21 save this now we have this ugly card but
00:23:25 as soon as I start entering something
00:23:27 here like a book which costs $19.99
00:23:32 Harry Potter
00:23:35 the first volume you see all that data
00:23:39 appear down there in our card so the
00:23:43 next step now just is to make sure that
00:23:45 this only is reflected there once you
00:23:47 hit a button up there in the form so
00:23:49 only once we hit a button I want you add
00:23:52 to this product card here now for that
00:23:56 let's simply add a button below our
00:23:59 input here in apps well create product
00:24:02 and I want to use the same styles as on
00:24:05 the button I have here in products well
00:24:06 now I could copy over the styles but
00:24:09 copy and pasting is never that great
00:24:11 instead we should take advantage off
00:24:13 that component architecture as well it
00:24:16 gives us and therefore I'll add a new
00:24:17 button dot swelled component and now in
00:24:20 here add my button markup output
00:24:25 whatever text user wants between the
00:24:27 button tags and for this we can use yet
00:24:30 another new feature a slot this is a
00:24:32 HTML element which actually can take any
00:24:36 other markup that's passed in from
00:24:38 outside between the opening and closing
00:24:40 tag of our button component and output
00:24:43 it in here and you'll see how it works
00:24:44 in just a second and then here I can
00:24:47 also add my style tags and now copy the
00:24:50 Stars from products weld or cut them to
00:24:53 be precise and add them here to my
00:24:56 buttons weld styles
00:24:59 now let's the buttons well fall to use
00:25:02 it for example here in products wealth
00:25:04 we have to import it so up there in the
00:25:06 script tags let's import button from dot

00:25:09 slash button swelled and with the day
00:25:12 imported let's use it down here instead
00:25:14 of this button just like this with the
00:25:16 opening and closing tag and now you can
00:25:19 enter any content a text node or a more
00:25:22 complex markup between the button tags
00:25:25 here and whatever you have between your
00:25:28 button tags here where you use the
00:25:30 button component will be used as a value
00:25:33 for this slot placeholder here you have
00:25:35 in the button component slots are a
00:25:37 default JavaScript and Dom feature you
00:25:42 use them in web components too but as
00:25:44 well takes advantage of them and when it
00:25:47 parses the button component it
00:25:49 understands that this will be a
00:25:50 placeholder for whatever you're putting
00:25:53 between your component tags here now I
00:25:56 can use that same pattern component in
00:25:58 the apps weld file so here are all the
00:26:00 import button from dot slash buttons
00:26:03 weld and now if I use dad instead the
00:26:07 normal button tags please note that they
00:26:09 start with a capital case as all your
00:26:11 custom components should because that
00:26:13 allows well to tell them apart from the
00:26:15 default HTML elements so now if we use
00:26:18 our button component here we saved it
00:26:20 you see we have the same button in both
00:26:22 occasions now let's make sure that this
00:26:25 button is actually clickable and that it
00:26:28 adds a new product as soon as we do
00:26:29 click it now on a normal button you
00:26:32 could add on click just as we added on
00:26:35 input to our input here but since this
00:26:38 is a custom component it doesn't have a
00:26:39 click event the button inside the custom
00:26:42 component – though so here we can add on
00:26:45 click and now by simply adding it like
00:26:48 this without assigning an event handler
00:26:50 so without assigning a function it
00:26:52 should be triggered it will simply
00:26:54 forward the click event to the next
00:26:56 parent in line so in this case to the
00:26:58 apps weld and the products well false so
00:27:01 now on click will work here and now I
00:27:03 just want to fire a create product
00:27:06 function that's a function I have yet to
00:27:08 add so let's quickly do that here create
00:27:11 product and in here
00:27:13 the
00:27:14 now is to wrap all these values up and
00:27:16 create a new product based on that data
00:27:19 let's add a new variable for this
00:27:21 products which can be in a array of
00:27:23 products and in here I'll now have a new
00:27:26 product which let's say it's just a
00:27:28 JavaScript object and that new product
00:27:31 will have a title which holds the title
00:27:34 variables value as a value it will have
00:27:38 a price and it will have a description
00:27:40 just like that you could pick different
00:27:42 property names here in that product
00:27:44 object of course and now let's use our
00:27:49 products array here and push the new
00:27:53 product into it and this should update
00:27:55 the products array
00:27:57 the next goal justice to output our
00:28:00 products array down here now for the
00:28:03 moment when we start we'll have no
00:28:05 products so actually now I want you
00:28:07 outputs a message like no products yet
00:28:10 and for this we can use another special
00:28:13 piece of markup swell'd understands a
00:28:15 block statement where we use curly
00:28:18 braces in our markup and then the hash
00:28:20 symbol and then if and that's a special
00:28:23 syntax swell to understands where we can
00:28:25 now add a condition and here my
00:28:27 condition is products length if that is
00:28:30 0 so if it's empty
00:28:32 then I want to output some content and
00:28:34 you have to end the if block with slash
00:28:37 if between curly braces
00:28:39 so here I'll output a text no products
00:28:42 were added yet and only if we do have
00:28:46 products I want to output a list of
00:28:48 products here so for this we can add
00:28:50 another special statement or syntax here
00:28:53 in the F block and that is colon else
00:28:55 again that's a command picked up and
00:28:58 understood by swelled and this will
00:29:00 render some alternative content if we do
00:29:01 have products and there it should be a
00:29:04 list of products now a list is created
00:29:06 with yet another block command here
00:29:09 that's to each command or each
00:29:11 instruction nearly each block it's hash
00:29:14 each and there the syntax is products so
00:29:18 the name of the variable that holds an

00:29:20 array and in this case that is products
00:29:24 as and then a name of your choice like
00:29:27 product which will hold the individual
00:29:30 product as we're looping through that so
00:29:32 for every iteration product will hold
00:29:34 the value in products and then we close
00:29:37 that each clock as well and now in here
00:29:41 I want to output my product and now
00:29:45 populate the values here with values
00:29:48 from the single product and looking at
00:29:49 for this specific iteration so we here
00:29:52 we have product title product price and
00:29:56 also product description let's now save
00:30:02 that and let's give this a try we see no
00:30:08 products were added yet and we can work
00:30:10 on the styling in a second let's add a
00:30:12 book $19.99 Harry Potter and if it
00:30:18 created huh nothing changed no products
00:30:22 were added yet so that's our click
00:30:24 listener maybe not work here well
00:30:26 actually it does
00:30:27 but swelled has a very special syntax
00:30:30 for understanding when it needs to
00:30:32 update the Dom it does thankfully not
00:30:35 update the Dom on every keystroke it
00:30:38 does simply not understand that products
00:30:41 change because portions on so all these
00:30:44 are a manipulating operations like this
00:30:46 won't be picked up by swelled that has
00:30:49 something to do with object and erase
00:30:52 being reference types and the values
00:30:55 stored in products not actually changing
00:30:58 by the push command because what we
00:31:00 store here is just a pointer at this
00:31:03 array and this pointer doesn't change if
00:31:05 we change the array and indeed swelled
00:31:07 simply watches for equal sign
00:31:10 assignments here so for value
00:31:11 assignments only if products it gets a
00:31:14 new value only then it will change or
00:31:17 update the places in the Dom where
00:31:19 products is used
00:31:20 that's how swelled works and again push
00:31:22 does not change products because it
00:31:24 changes the array but in the variable
00:31:26 products we don't store the array but
00:31:28 they're a pointer at the array and that
00:31:31 pointer didn't change so what we
00:31:33 actually need to do here is we need to
00:31:35 assign a new value to product
00:31:37 this will trigger an update by swelled
00:31:39 and this new value should be products
00:31:41 concat using our products array and
00:31:44 concatenating a new value and here I'll
00:31:46 concatenate my new product and now this
00:31:50 is a change which will be picked up by
00:31:51 as well therefore now if we try this
00:31:55 again and we add our values here we
00:31:57 click the button now you see the card up
00:31:59 here and we can click this multiple
00:32:01 times and we add more and more cards
00:32:03 here so that's pretty nice now let's
00:32:06 work on the styling of the cards and
00:32:07 then also finish this up by adding a
00:32:09 simple card to which we can add our
00:32:12 products now for the styling I will
00:32:15 simply put my cards here this whole if
00:32:19 block into a number section like this
00:32:22 and therefore it automatically should
00:32:25 look better if we give this a quick try
00:32:29 because now this will actually be less
00:32:32 big less wide that looks much better and
00:32:34 with that let's focus on the last part
00:32:37 and make this edible to the card for
00:32:40 this I'll add a new card dots well file
00:32:42 and a card here will be really really
00:32:44 simple in the end in this card
00:32:47 I just want to output the titles and the
00:32:51 prices of my products so therefore here
00:32:54 we could have an unordered list where I
00:32:57 want to loop through all the items in
00:32:58 the cart and for every item I want to
00:33:00 output title and the price let's say and
00:33:04 then at the bottom we have the total
00:33:09 price and that should be there some some
00:33:14 quick styling here just so that this is
00:33:17 not super ugly the unordered list will
00:33:20 get a list style of non to remove the
00:33:22 bullet points a margin of 1 Ram in all
00:33:25 directions and 0 padding the list items
00:33:29 will get a margin of 0.5 m top bottom
00:33:33 and Cyril left and right a padding of
00:33:36 0.5 M in all directions a border of 1
00:33:40 pixel solid and a light gray and then
00:33:45 the h1 tag with the total I'll set the
00:33:48 font size there to 1.5 for M
00:33:51 and give it a margin of one REM in all
00:33:55 directions
00:33:57 the more important part is now at a date
00:33:59 in which we need and for that again it's

00:34:01 time for script X and we should add a
00:34:05 prop here that will be the items of the
00:34:09 card and these have to be set from
00:34:11 outside so that we can manage them in
00:34:13 the apps weld component which will be
00:34:15 the parent component of both the product
00:34:17 and of the card and therefore it will
00:34:19 have access to both components and can
00:34:21 pass data to both components because
00:34:23 that is how you typically distribute
00:34:25 your data unless you're using a more
00:34:27 complex estate management solution which
00:34:29 will also be covered in my course for
00:34:30 bigger projects but for simple projects
00:34:32 you simply lift the state up if you have
00:34:35 some shared state between products and
00:34:37 card you put it into the parent
00:34:39 component of both these components
00:34:40 therefore the card component will
00:34:42 receive the items as an input and can
00:34:44 now output it down there so here we can
00:34:46 add a number each block and go through
00:34:48 our items with the wealth items as item
00:34:51 syntax you already learned about then
00:34:53 here we output item dot title assuming
00:34:56 that we do have a title and here item
00:34:58 dot price now we just need to total and
00:35:01 we'll take care about this in a second
00:35:02 let's first of all make sure that we can
00:35:05 add items and that we out put them there
00:35:07 so in the apps mod file I'll now add a
00:35:09 new variable here card items and that's
00:35:13 also an empty array and now this should
00:35:15 be populated as we add items to well the
00:35:18 card for this we just need to know when
00:35:21 we clicked that Add to Cart button in
00:35:24 the product component so let's add an
00:35:27 onclicklistener here but the problem of
00:35:28 course is we're in the product component
00:35:30 and we could simply forward this with
00:35:33 this syntax again and now we could
00:35:35 listen to clicks on our product here in
00:35:38 the apps fault file this would work here
00:35:40 but in a bigger application you might
00:35:42 have more than one button to click on on
00:35:44 a product therefore what's more helpful
00:35:47 here is if we dispatch our own custom
00:35:50 event so here in the product not spelled
00:35:52 file I'll fire the add to cart' function
00:35:55 which we have to add of course Add to
00:35:58 Cart and in here we want to dispatch a
00:36:01 custom event which you can do by
00:36:04 importing the create event dispatcher
00:36:07 function from spout so from this
00:36:11 package itself this allows us to create
00:36:13 a dispatch function which I'll store in
00:36:15 a constant name dispatch by calling
00:36:17 create event dispatcher and now here
00:36:20 I'll dispatch and I simply give this my
00:36:23 own identifier like ad cart you can
00:36:28 choose any name you want you can also
00:36:32 attach data and here I want to attach
00:36:34 the product title st identifier assuming
00:36:38 that the title here will be unique there
00:36:41 should be something unique of course you
00:36:43 could generate some ID here I'll simply
00:36:45 assume that the title always is unique
00:36:46 even though we're of course not
00:36:48 enforcing this in this simple
00:36:49 application but let's assume you would
00:36:51 so now I emitted my own ad card event
00:36:54 with the product title event details and
00:36:57 an app's wealth we can now listen to our
00:36:59 custom event on ad card is now possible
00:37:02 because we're emitting this ad card
00:37:04 event so here i'll then all the fire i
00:37:07 add to cart function now in the app
00:37:09 component and of course we need to add
00:37:12 this function here add to cart we get an
00:37:15 event object because we're emitting a
00:37:17 regular event a custom event but still
00:37:20 it's a event object generated by
00:37:22 javascript in the end and there we can
00:37:25 get our title from event detail now
00:37:30 let's add the two card items and you
00:37:32 know how it works we assign a new value
00:37:34 so that smells does pick up this change
00:37:36 and we can concatenate our product with
00:37:40 that title for that we just have to find
00:37:43 it and that in turn can be done by
00:37:46 reaching out to our products array and
00:37:48 using the find method and there we have
00:37:50 to pass in a function that finds us the
00:37:52 relevant product this function turn will
00:37:55 automatically receive each product it's
00:37:58 looking at and it's looking at all items
00:38:00 in the products array so it runs this
00:38:01 function here for every product and we
00:38:03 get the product here as an input and now
00:38:06 we have to return true or false

00:38:07 indicating whether that is the product
00:38:09 we were looking for or not and I will
00:38:12 return true if fraught title is equal to
00:38:17 the title I'm extracting here now since
00:38:21 already used hide as a variable here I
00:38:22 want to avoid a name clashes in
00:38:25 name confusion so here are lambdas
00:38:30 actually select the title and therefore
00:38:33 also select the title here in my
00:38:36 function now we add this to the card
00:38:39 items and it's even better if we
00:38:41 actually create a copy of that so that
00:38:44 we rule out that we ever mutated this
00:38:46 indirectly because such mutations
00:38:48 wouldn't be picked up by swelled and
00:38:49 therefore I'll wrap this into curly
00:38:51 braces and use the spread operator to
00:38:53 pull out all the key value pairs off
00:38:55 this found object and add it to a new
00:38:57 object now is dead we should be able to
00:39:00 add items to card and for now let's
00:39:03 simply console lock card items here
00:39:07 whenever we do add item to the card so
00:39:10 we can see whether that works or not and
00:39:13 let's now give this a quick try and
00:39:15 create here a Harry Potter here for
00:39:17 $19.99 a nice book create the product
00:39:22 Add to Cart and open up the developer
00:39:23 tools of course now we see that an array
00:39:26 is being printed here so that's looking
00:39:28 good and in there I undid half that book
00:39:31 and if I add Harry Potter to here is
00:39:33 another product and I click Add to Cart
00:39:35 there we see that is now also added last
00:39:39 but not least let's output the cards and
00:39:41 for this let's import the newly created
00:39:44 card component so import card from dot
00:39:47 slash card swelled and let's output that
00:39:52 up here all the wrapped in a section
00:39:55 maybe card like this I'll add a
00:40:00 horizontal tag between sections so that
00:40:02 we have some separation now this card
00:40:04 requires our items prop right so we need
00:40:08 to pass that in so let's bind PI items
00:40:11 here and items is bound to the card
00:40:14 items variable I'm managing here in apps
00:40:16 weld so now hopefully this outputs to
00:40:18 card right now we only see the total but
00:40:21 now if I add Harry Potter $19.99 a book
00:40:27 and I click Add to Cart there it's added
00:40:30 here now obviously it would be nice to
00:40:32 calculate the total as well and also
00:40:34 shows a message if we have no items in a
00:40:35 card therefore let's go back to the card
00:40:38 component
00:40:39 they're actually in front of price I'll
00:40:41 also add a dollar sign so just some
00:40:43 normal text and now you only showed us
00:40:46 if we have items again I'll use a if
00:40:48 statement and if items length is equal
00:40:50 to zero then I want to output some
00:40:54 content otherwise I'll output my list
00:40:57 here and then we have to close the F tag
00:40:59 and here I'll just output no items in
00:41:02 cart yet if we have no items in there
00:41:05 and now to calculate the total we can
00:41:07 take advantage of an average cool syntax
00:41:09 feature added by its welt and that is a
00:41:11 dynamic statement here in the script
00:41:14 tags for dad you write dollar sign colon
00:41:17 and you might have never seen that
00:41:18 before it's actually a regular
00:41:20 JavaScript syntax it's called a labeled
00:41:23 statement and you typically don't use
00:41:26 that you could use it in conjunction
00:41:27 with loops and to continue and break
00:41:30 keywords but again you might have never
00:41:32 seen it because it's not really a common
00:41:34 feature in JavaScript spelled hijacks it
00:41:37 and make sure that whatever you right
00:41:39 after this labeled statement or after
00:41:42 this label here and this has to be a
00:41:44 dollar sign so whatever you write after
00:41:46 this will be reacts acute advice welt
00:41:48 whenever one of its input values changes
00:41:50 and here we can create a new variable
00:41:54 card total without left that would be
00:41:57 wrong here and swell'd will
00:41:58 automatically create that variable for
00:42:00 you so you can just use the name here
00:42:02 even though we haven't declared a
00:42:05 variable any card total here can simply
00:42:08 be the summed up prices of your items
00:42:11 here and for this we can simply use
00:42:13 items reduce
00:42:17 then pass in a reducer function which
00:42:20 gets two arguments our sum and our
00:42:25 current value case you're not sure how
00:42:28 reduce works you find a link to an
00:42:30 explanation below the video we start at

00:42:33 zero as a default value and then here we
00:42:36 return a new sum which is our old sum
00:42:38 plus in the end the current value the
00:42:41 current value however is not the price
00:42:42 but the full product so there we have to
00:42:45 access price and now this labelled
00:42:47 syntax our statement here will in the
00:42:49 end rerun this whole code here and
00:42:52 recalculate car total whenever one of
00:42:54 the items here on the right changes in
00:42:57 this case that is whenever items changes
00:42:59 it will rerun this so therefore now we
00:43:01 can output death down there we can
00:43:04 output our what did I name it card
00:43:06 total with curly braces the dollar sign
00:43:10 down here is just regular text that is
00:43:12 not a special spelled syntax and now
00:43:15 with this we have no items in cart let's
00:43:16 add Harry Potter for a $19.99 which is a
00:43:21 book let's also add Harry Potter two for
00:43:25 2099 and let's add Harry Potter and then
00:43:30 Harry Potter – that's looking quite good
00:43:32 does he's getting updated and there's
00:43:33 all this getting updated now that's a
00:43:36 first quick look at swell and its core
00:43:38 features some of its core features
00:43:40 obviously twelve has way more features
00:43:42 than that and in my complete course
00:43:44 you'll learn all about spelled you'll
00:43:46 learn about foreign validation advance
00:43:47 state management using HTTP some
00:43:50 additional nice syntax features you have
00:43:53 because we only scratch the surface here
00:43:55 there is more than chest if-else and
00:43:57 variables you learn all about that in my
00:44:00 course and swell'd is pretty nice
00:44:02 because to be honest its syntax is
00:44:04 pretty straightforward to learn it's not
00:44:06 that complex
00:44:07 you can't build powerful apps with it
00:44:09 you have this component driven
00:44:11 architecture which you also find in
00:44:13 react and an angular and you can also
00:44:15 watch my comparison video where I should
00:44:17 tears well Judy's a ver frameworks and
00:44:20 libraries to find out if swelled might
00:44:22 be interesting for you now in addition
00:44:24 if you need more arguments let's
00:44:27 actually go there and run npm run build
00:44:29 in this project to get the
00:44:31 final build output and see how big or
00:44:33 small that is and now if I reveal that
00:44:36 in my finder here you will see that this
00:44:39 bundle JS file is 11 kilobytes big or
00:44:43 should I say small and that's not even
00:44:45 gzipped so if you gzip this you actually
00:44:49 end up with a 4 kilobyte big app and yes
00:44:52 this is a simple application but try
00:44:55 building this app with react view or
00:44:56 angular it will be much bigger so the
00:44:59 efficiency of this application that it's
00:45:01 quite small and that it has highly
00:45:03 optimized and also fast JavaScript code
00:45:06 and with fast I mean fast during runtime
00:45:09 as well that all are strong arguments in
00:45:12 favor of swelled

You may also like