Coding

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