- 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