Coding

Svelte Tutorial – Is it better than React?

  • 00:00:00 no not another JavaScript framework
  • 00:00:03 please don't we have enough of those but
  • 00:00:06 what if I told you that this isn't
  • 00:00:08 actually a framework it's a compiler
  • 00:00:11 mind blow
  • 00:00:12 all right hello class and welcome to
  • 00:00:15 this video where we learn about what's
  • 00:00:17 felt is and then use it to create an app
  • 00:00:20 that implements full production allottee
  • 00:00:22 by using an API that I created a while
  • 00:00:24 ago for video to which a link is in the
  • 00:00:26 description and the link for that API as
  • 00:00:29 well will be in the description more on
  • 00:00:31 that later
  • 00:00:32 so what is felt and what makes it
  • 00:00:34 different to the other ones so like
  • 00:00:36 angular react and view felt is a UI
  • 00:00:39 framework for creating component based
  • 00:00:41 single page applications the catch is
  • 00:00:43 that felt takes a different approach in
  • 00:00:46 that it doesn't have framework code
  • 00:00:48 that's actually bundled with your
  • 00:00:50 application it actually goes over your
  • 00:00:53 code in build time and then compiles all
  • 00:00:55 of your code into instructions in
  • 00:00:58 written and purely JavaScript
  • 00:00:59 leading to a very lean bundle size
  • 00:01:02 because later your bundle wouldn't have
  • 00:01:04 any code that's relevant to felt itself
  • 00:01:07 is just your own code that you have and
  • 00:01:09 spelt as well takes a reactive approach
  • 00:01:12 when we render in your Dom and and it
  • 00:01:15 doesn't have a virtual Dom so it doesn't
  • 00:01:17 work by come rather comparing a virtual
  • 00:01:21 Dom to an actual Dom and then seeing the
  • 00:01:23 difference and then we rendering the
  • 00:01:25 difference instead it watches over a
  • 00:01:27 couple of variables that you define and
  • 00:01:29 then whenever any of those change it
  • 00:01:31 actually rear-end this the Dom so they
  • 00:01:34 take great pride in that it takes less
  • 00:01:37 code doing the same thing you could do
  • 00:01:40 the same thing in react and do it in
  • 00:01:41 felt and it will be less code when you
  • 00:01:44 write it in felt you can actually go
  • 00:01:45 here to learn more and write less code
  • 00:01:47 and you will see a couple of examples
  • 00:01:49 they show that for example this is with
  • 00:01:52 these two fields and calculating the sum
  • 00:01:54 between them this is what it would look
  • 00:01:56 like if you would write it and react
  • 00:01:57 using hooks and then this is what it
  • 00:01:59 would look like if you write it in felt
  • 00:02:01 and I've played around with felt and
  • 00:02:05 it's actually pretty cool how less code
  • 00:02:08 you get to write and even like the
  • 00:02:09 template syntax itself is very minimal
  • 00:02:12 it's got some really cool features now
  • 00:02:14 this doesn't mean it's gonna replace
  • 00:02:16 react or anything react still has a lot
  • 00:02:19 of like improvements during the runtime
  • 00:02:20 and some other cool features that are in
  • 00:02:23 the bundle itself so yeah I guess it's
  • 00:02:26 up to your preference now if you are
  • 00:02:29 saying now I want to learn more about
  • 00:02:31 spelt you can go to spell toor dhal the
  • 00:02:33 dev rather and learn more about it and
  • 00:02:35 if you want to like understand like this
  • 00:02:38 the idea behind it and the philosophy
  • 00:02:40 behind it I highly recommend this talk
  • 00:02:42 by rich harris the guy that made the
  • 00:02:44 framework himself this talk is called
  • 00:02:47 rethink and reactivity I'll put a link
  • 00:02:49 to this as well in the description it's
  • 00:02:51 a really cool talk that kind of explains
  • 00:02:53 why's felt was made alright so this is
  • 00:02:56 the application that we're going to
  • 00:02:57 build in this video so it's got this
  • 00:03:01 post is pulling them from the API so
  • 00:03:03 it's fetching these posts and showing
  • 00:03:05 them here and we can add some more new
  • 00:03:07 posts so you can click Add here using
  • 00:03:09 that form and we will actually submit it
  • 00:03:11 to to a server and fetch the response
  • 00:03:14 back and if we reload is still there
  • 00:03:16 because of the way the API works we can
  • 00:03:18 as well edit these like just type some
  • 00:03:20 others of gibberish here and click
  • 00:03:22 update and it will be edited and we can
  • 00:03:24 delete these posts you can limit the
  • 00:03:27 number of posts and we have this knob
  • 00:03:29 bar right here and we have like two
  • 00:03:30 pages that we can navigate between just
  • 00:03:33 to show you like how to do routing
  • 00:03:34 installed so the idea behind this app is
  • 00:03:37 that you get to learn some of the core
  • 00:03:39 things that you would do in most
  • 00:03:41 front-end applications like handling
  • 00:03:43 forms consuming a full crud api and
  • 00:03:47 routing as well so let's actually jump
  • 00:03:50 into the code alright so on the is felt
  • 00:03:53 main page let's go down and get this MPX
  • 00:03:55 command from here let's copy this and
  • 00:03:57 I'll go to my desktop and open up a
  • 00:04:00 terminal window and paste this command
  • 00:04:02 and we don't have to name it my felled
  • 00:04:06 project we can name it anything I'll
  • 00:04:07 just name it spelled for now and hit
  • 00:04:09 enter and now we need to see the
  • 00:04:11 internet also I'll say CDs felt and here
  • 00:04:14 we need to run npm install because it
  • 00:04:16 hasn't installed the dependencies yet
  • 00:04:18 and i'll open it using vs code and let
  • 00:04:21 it
  • 00:04:21 stall so if we look at the package.json
  • 00:04:24 we noticed that we have a couple of
  • 00:04:25 scripts and we're gonna use the dev
  • 00:04:28 script to build and run the app on a
  • 00:04:30 development server and if you notice
  • 00:04:33 here there isn't any dependencies it's
  • 00:04:34 just dev dependencies because it doesn't
  • 00:04:36 need any dependencies in production it
  • 00:04:38 only needs them in built time to compile
  • 00:04:41 the app so here I think it's done
  • 00:04:43 installing it has let's run npm run dev
  • 00:04:48 and see what our application looks like
  • 00:04:50 alright it started already so let's go
  • 00:04:53 to port 5000 yeah and there we go we
  • 00:04:57 just get a purple hello world so let's
  • 00:05:00 look at our app so we go to the source
  • 00:05:01 folder and we have this mange is that
  • 00:05:04 instantiates the new is felt app and
  • 00:05:06 passes some props to the apps felt just
  • 00:05:09 to show you how props work they did that
  • 00:05:11 and here we get the prop and here we put
  • 00:05:14 the prop inside the mark-up saying hello
  • 00:05:16 name if you notice we if you change this
  • 00:05:18 name to hello YouTube or just YouTube it
  • 00:05:22 will now say hello YouTube alright so
  • 00:05:25 let's get rid of these props because
  • 00:05:27 we're not gonna use them and let's get
  • 00:05:30 rid of this export name and this style
  • 00:05:32 as well and by the way in spelt if
  • 00:05:35 you've worked with view you're familiar
  • 00:05:36 with this with this kind of syntax you
  • 00:05:40 have a script tag where you put your
  • 00:05:42 logic you have a style tag where you put
  • 00:05:43 your styling and you have your markup
  • 00:05:45 the only difference here you don't have
  • 00:05:47 a template tag you just put your markup
  • 00:05:49 down here and cool thing is if you're
  • 00:05:52 using prettier and by the way I
  • 00:05:54 recommend you get the felt where is it
  • 00:05:57 right here the spelt vs code extension
  • 00:06:00 to have syntax highlighting inside of
  • 00:06:02 your app or I mean inside of your dots
  • 00:06:05 felt files alright let me close that
  • 00:06:07 close this now before we write any
  • 00:06:09 markup I want to grab materialized CSS
  • 00:06:12 which is a cool CSS and implementation
  • 00:06:16 of Google material material design
  • 00:06:18 standards it's got to get started and
  • 00:06:20 here it tells us to install materialized
  • 00:06:22 CSS up next so let's do that so here I
  • 00:06:25 stopped the development server and say
  • 00:06:28 npm install materialized – CSS at next
  • 00:06:35 like this okay now we need to link the
  • 00:06:39 CSS we could link here we will but by
  • 00:06:43 default the build tool for the bundling
  • 00:06:46 tool for spelt is roll up instead of web
  • 00:06:49 pack and it comes with very minimal
  • 00:06:50 setup so we need to actually install a
  • 00:06:53 plugin for this for it to actually
  • 00:06:56 recognize CSS files inside of this
  • 00:06:58 felled files and bundle them into a CSS
  • 00:07:00 file in production so here I'm gonna
  • 00:07:02 install a rollup plug-in so here I'll
  • 00:07:04 say NPM install roll-up plug-in CSS only
  • 00:07:12 and they say – capital D for it to be a
  • 00:07:16 dev dependency alright now in the
  • 00:07:19 roll-up config I'm gonna add this import
  • 00:07:21 let's import that plug-in so let's say
  • 00:07:23 import CSS from roll-up plug-in CSS only
  • 00:07:30 and then here underneath this spelt call
  • 00:07:33 we're gonna say CSS we call that
  • 00:07:36 namespace that imported that function
  • 00:07:39 and here for the options we just pass
  • 00:07:41 output and here we will pass a CSS file
  • 00:07:46 that would be all the bundled CSS that
  • 00:07:49 we pass through our app so here I'll say
  • 00:07:51 public slash extra dot CSS so what this
  • 00:07:56 plug-in now will do it will find any CSS
  • 00:07:59 that we inject into svelt files and
  • 00:08:01 bundle all of it into this extra CSS
  • 00:08:04 file and it will be in the public right
  • 00:08:06 here so we need to link it in our
  • 00:08:07 index.html so here let's link it before
  • 00:08:11 our actual CSS so here we'll say link
  • 00:08:14 and we say the H ref will be extra dot
  • 00:08:17 CSS even though it doesn't exist yet but
  • 00:08:19 it will
  • 00:08:20 let's change the title here so say is
  • 00:08:23 felt tutorial let's save this and let's
  • 00:08:27 go back to our app svelt now we can
  • 00:08:29 actually import CSS into this felt file
  • 00:08:31 so here we'll say import now that we
  • 00:08:34 have materialized installed we can say
  • 00:08:37 import we go back one level to node
  • 00:08:39 modules oops
  • 00:08:42 node modules slash materialized
  • 00:08:47 CSS slash dist slash CSS so I
  • 00:08:52 materialize our CSS dot min actually
  • 00:08:58 materialized dot min dot CSS like this
  • 00:09:02 we can just copy this to get the the
  • 00:09:05 JavaScript and here we'll say /j s and
  • 00:09:08 here will be the min dot J's like this
  • 00:09:11 now let's let's save everything and
  • 00:09:14 let's run our after ganda C and PM run
  • 00:09:16 dev and now we see that it created this
  • 00:09:20 extra CSS and it's got materialized
  • 00:09:22 stuff as you see here and it's actually
  • 00:09:24 linked materialized and if we would look
  • 00:09:26 at our app where is it right here if we
  • 00:09:30 reload we get that it's the header is
  • 00:09:33 now styled with materialized CSS had a
  • 00:09:36 one styling cool so we have materialized
  • 00:09:39 linked I want to start by putting a nav
  • 00:09:42 bar at the top of the page to link to
  • 00:09:44 different pages now of course the about
  • 00:09:45 page is empty I'm just using it to show
  • 00:09:47 you how to do routing in stealth so
  • 00:09:49 we're gonna use this felt routing
  • 00:09:51 library because by default to the
  • 00:09:53 routing library it doesn't come with
  • 00:09:55 felt so this is how do we use it we need
  • 00:09:58 to run this command right here so let's
  • 00:10:00 copy that and let's open up a new window
  • 00:10:03 terminal window and paste that command
  • 00:10:06 so if we look at the library here it
  • 00:10:09 tells us how to use it it tells us to
  • 00:10:11 import these things from spell routing
  • 00:10:13 so we can we can copy this and let's go
  • 00:10:17 to our app app dots felt can close these
  • 00:10:21 you don't need them anymore so here we
  • 00:10:24 will import this router and link and
  • 00:10:27 route from spell routing and now we can
  • 00:10:29 set up our router here so here we'll say
  • 00:10:33 router and then here we will start to
  • 00:10:36 put our routes but the way I want to do
  • 00:10:39 it I want to put them in an app but I
  • 00:10:40 don't want to put them right here I want
  • 00:10:41 to put them out buying its own component
  • 00:10:42 so let's go to actually I close that
  • 00:10:45 let's go to materialise CSS go to
  • 00:10:47 components and right here navbar let's
  • 00:10:52 grab this knife tag and let's go back
  • 00:10:55 copy that and let's click here let's
  • 00:10:57 create rather a new component and I'm
  • 00:11:00 put this in a folder called layouts I'll
  • 00:11:02 say layout slash nav bar dot spelt and
  • 00:11:06 here we'll just paste that
  • 00:11:08 let's change logo to say spelled
  • 00:11:12 tutorial and let's change these let's
  • 00:11:17 just have two pages so one would be the
  • 00:11:20 homepage and one would be the about page
  • 00:11:22 and we need to create these components
  • 00:11:24 as well and now these shouldn't be a tax
  • 00:11:28 they need to be links for our spelt
  • 00:11:30 router to work so here we'll change this
  • 00:11:33 anchor tag to link like this link of
  • 00:11:38 course we need to import it so here we
  • 00:11:40 need to put our script tag and here we
  • 00:11:43 will say import link from spelt –
  • 00:11:50 routing like this now we can use that so
  • 00:11:53 we can change this well the the brand to
  • 00:11:56 link like this we need to add a to
  • 00:11:59 attribute instead of href and this is
  • 00:12:03 the home so we'll say – slash and now we
  • 00:12:05 have this home link here as well so
  • 00:12:07 we'll say – slash like this and we will
  • 00:12:10 change this to a link and this is the
  • 00:12:13 about page so we'll say – slash about
  • 00:12:16 and change this here to a link as well
  • 00:12:20 now let's go back to our app here we
  • 00:12:23 need to put our navbar so we need to
  • 00:12:26 import it so let's go here and say
  • 00:12:28 import navbar from and on the same level
  • 00:12:34 we go to the layout folder and we get
  • 00:12:36 this navbar and here of course we have
  • 00:12:38 to add felt because it's not a
  • 00:12:40 JavaScript file we need to explicitly
  • 00:12:43 say what the extension is now that we
  • 00:12:45 have navbar we can actually use it in
  • 00:12:47 our markup so let's put it inside the
  • 00:12:49 router so let's say like this navbar
  • 00:12:51 oops
  • 00:12:52 apparently I didn't copy that so I can
  • 00:12:54 just say now bar like this and
  • 00:12:56 underneath here I want to put a
  • 00:12:58 container to push everything into the
  • 00:13:00 middle this is by the way just
  • 00:13:01 materialized stuff and here we need to
  • 00:13:03 put our routes and if we would look at
  • 00:13:06 the page for the package our routes are
  • 00:13:09 like this and by the way you can ignore
  • 00:13:12 this you are
  • 00:13:13 thing this is only if you're using
  • 00:13:15 server-side rendering so don't worry
  • 00:13:16 about that and let's copy one of these
  • 00:13:19 routes copy the second one actually and
  • 00:13:22 let's go back here we need to put routes
  • 00:13:24 so let's put the home route the path
  • 00:13:26 will be just slash and the component
  • 00:13:29 will be home and by the way you can use
  • 00:13:31 the syntax but you can as well omit
  • 00:13:33 these quotation marks they're not
  • 00:13:36 important so they're not necessary so
  • 00:13:39 let's put another one here and say slash
  • 00:13:40 about and this will be to the about
  • 00:13:43 component let's create these two pages
  • 00:13:45 I'll create another folder call it pages
  • 00:13:48 this is what convention that I like to
  • 00:13:50 separate pages from components this is
  • 00:13:53 not a spell come convention so here I'll
  • 00:13:56 say home that's felt and I'll create
  • 00:14:00 another one as well call it about dot
  • 00:14:02 felt and in the about I'm just gonna put
  • 00:14:05 a header one saying about page just to
  • 00:14:07 differentiate between them and here for
  • 00:14:10 now let's put a home page and we'll come
  • 00:14:12 back to it of course and populate it
  • 00:14:14 more and here we don't need link so you
  • 00:14:17 can remove it because the links are in
  • 00:14:19 the nav bar and we need to import these
  • 00:14:21 two components so here let's say import
  • 00:14:23 home from same level pages slash home
  • 00:14:29 that's felt and then we can copy that
  • 00:14:33 paste it one more time select home and
  • 00:14:36 ctrl D and say about all right let's
  • 00:14:39 save all files and let's look at our
  • 00:14:42 terminal everything is running fine if
  • 00:14:44 we look at our app right where is it
  • 00:14:46 right here for reload cool we get the
  • 00:14:49 snap bar and it's linking between the
  • 00:14:51 pages but it looks kind of weird let's
  • 00:14:54 look at our app I think it's got to do
  • 00:14:57 with the global styles yeah there are
  • 00:15:00 some global styles here I'm just gonna
  • 00:15:02 delete all of them and let's look back
  • 00:15:04 to our up because we're gonna use the
  • 00:15:06 materialized styling alright let's put a
  • 00:15:08 container actually to push these buttons
  • 00:15:09 in and for some reason this brand isn't
  • 00:15:12 the font size is tiny on that so
  • 00:15:15 actually let me check that to inspect
  • 00:15:20 it's actually not applying the class to
  • 00:15:22 it so let's go back here
  • 00:15:25 to the navbar the brand logo class is
  • 00:15:29 not being applied so what we can do we
  • 00:15:31 can just wrap this as well tutorial with
  • 00:15:33 a span with this class so we'll give
  • 00:15:36 that class brand logo and then take that
  • 00:15:38 put it inside of here and then wrap
  • 00:15:41 everything here so let's cut everything
  • 00:15:42 inside of this nerve repair and put a
  • 00:15:46 dot container tab and then paste back
  • 00:15:49 those links and let's save and there we
  • 00:15:53 go now the the the navbar logo class is
  • 00:15:55 applied so the text is bigger there and
  • 00:15:57 the links are pushed in inside so the
  • 00:15:59 routing is working now we can start to
  • 00:16:01 work on the content on the home page
  • 00:16:03 let's start to hit our API and fetch the
  • 00:16:06 posts and show them here so let's go to
  • 00:16:08 our app let's go to the home dots felt
  • 00:16:11 file and we can close this close the
  • 00:16:14 global CSS and app and everything else
  • 00:16:17 and here I'll put a row and inside of
  • 00:16:20 here we want to show our posts but of
  • 00:16:22 course we need to hit the API first and
  • 00:16:24 fetch these posts so here I'll open the
  • 00:16:26 script tag let me close this terminal
  • 00:16:29 here inside the script tag what we want
  • 00:16:31 to do we want to fetch these posts when
  • 00:16:34 the component loads or mounts so we need
  • 00:16:36 to import this lifecycle method called
  • 00:16:38 unmount so let's say import on mount
  • 00:16:41 this is in the documentation of course
  • 00:16:44 from felt and here let's let's bring our
  • 00:16:50 API base URL so here I'll say Const a P
  • 00:16:54 I base URL because we will need this to
  • 00:16:56 call the API this is in the description
  • 00:16:58 in the video description and here let's
  • 00:17:01 initialize our posts object as an empty
  • 00:17:05 array at the beginning so now let's call
  • 00:17:08 this unmount method and say unmount and
  • 00:17:10 this takes a callback that happens when
  • 00:17:13 the component is mounted and this is
  • 00:17:16 gonna reach for for this is gonna hit
  • 00:17:18 the API so I'm gonna make it an async
  • 00:17:20 callback so here I'll say async oops
  • 00:17:23 and here it's gonna be an arrow function
  • 00:17:26 and inside the V I'll say result or rest
  • 00:17:29 equals a weight the fetch I'm gonna use
  • 00:17:33 fetch API
  • 00:17:35 and I'm gonna give it the API base URL
  • 00:17:38 plus slash posts like this this is the
  • 00:17:42 route that gives us all the posts and
  • 00:17:44 here we'll say posts our so this
  • 00:17:47 variable right here equals a wait wait
  • 00:17:54 res dot oops Jason like this so the way
  • 00:17:59 fetch works is that you need to as well
  • 00:18:01 return a response dot Jason and this
  • 00:18:03 returns a promise with the data that's
  • 00:18:06 got from that request and now when we
  • 00:18:10 assign a value to post our component
  • 00:18:12 will actually rerender now let's use
  • 00:18:14 these posts to display them on the
  • 00:18:16 template here I want to loop through
  • 00:18:18 these posts so first I want to do a
  • 00:18:20 conditional because if we're still
  • 00:18:22 fetching the post I want to show loading
  • 00:18:25 posts so here we'll open curly braces
  • 00:18:27 and do hash if and this is felt template
  • 00:18:32 syntax and we'll say posts the length
  • 00:18:35 equals zero so if the length of posts
  • 00:18:39 equals zero that means we haven't got
  • 00:18:40 posts yet so I'll do a header three and
  • 00:18:43 say loading posts dot dot dot so you can
  • 00:18:47 put a spinner here if you want and here
  • 00:18:49 we'll say : else so else if we have any
  • 00:18:53 posts if it's not 0 the length we want
  • 00:18:56 to loop through them so we'll open
  • 00:18:57 another JavaScript expression and say
  • 00:18:59 hash
  • 00:19:00 each or just an expression and say posts
  • 00:19:03 as post like this the this is kind of
  • 00:19:07 similar to PHP if you've worked with it
  • 00:19:09 this syntax post as post so here we'll
  • 00:19:11 say they've call dot as 6 this is
  • 00:19:17 materialized stuff I want each post to
  • 00:19:19 take half the width of the viewport of
  • 00:19:22 or like the width of the container and
  • 00:19:24 here I'm going to put a card so dot card
  • 00:19:27 and inside the card we need card content
  • 00:19:32 so dot card content and inside that div
  • 00:19:37 I'm gonna start with the title so that
  • 00:19:39 we say paragraph P dot card title inside
  • 00:19:43 of here we'll do curly braces to put
  • 00:19:46 dynamic values and now that we have
  • 00:19:48 access to this post we can use what
  • 00:19:50 comes inside of the post by the way you
  • 00:19:52 can call credit this API on postman or
  • 00:19:55 something and you'll find that posts
  • 00:19:57 have a body I created that a user ID and
  • 00:20:00 and the title so here we'll need to say
  • 00:20:03 the title because this is the card title
  • 00:20:05 so we'll say post dot title like this I
  • 00:20:08 want to show is well the created at so
  • 00:20:11 here we'll say P and I will say curly
  • 00:20:15 brace post created ad like this and
  • 00:20:19 let's put the body of the post so here
  • 00:20:22 paragraph another one and say post dot
  • 00:20:25 body like this here we need to close the
  • 00:20:28 each tag so here we'll say we open curly
  • 00:20:31 braces and we say slash each and this
  • 00:20:34 will close that tag and here we need to
  • 00:20:36 close as well this if statement so he
  • 00:20:38 will say curly brace slash if like this
  • 00:20:41 alright let's save this and see what
  • 00:20:43 this looks like let's go to our app and
  • 00:20:45 there we go we're getting three posts
  • 00:20:47 which are all the posts are on the
  • 00:20:49 database right now if we reload
  • 00:20:50 we'll see loading posts for like a brief
  • 00:20:52 second before the actual posts load all
  • 00:20:55 right so let's add the two buttons for
  • 00:20:58 editing and deleting and I want to style
  • 00:21:00 this a bit to make it look better than
  • 00:21:02 that let's go back so underneath this
  • 00:21:05 div this card content div I'm gonna add
  • 00:21:07 dot card action and here we'll have two
  • 00:21:11 links so one anchor tag which doesn't go
  • 00:21:14 anywhere and this is gonna be the edit
  • 00:21:17 post so here we'll say edit and I'm just
  • 00:21:20 gonna copy this and add another one
  • 00:21:22 which is gonna be delete and I'll give
  • 00:21:25 this a class to two later style it so
  • 00:21:27 I'll give it a class of delete – BTN
  • 00:21:31 let's save let's see what these look
  • 00:21:33 like alright they look okay and I want
  • 00:21:37 to style this delete button so here
  • 00:21:39 let's open up a style tag and by the way
  • 00:21:43 these styles are scoped to these
  • 00:21:44 components so any style I write here
  • 00:21:46 will not go to any other component even
  • 00:21:48 if the component is inside of here so
  • 00:21:51 here we'll style the delete buttons also
  • 00:21:55 dot delete
  • 00:21:58 – BTN I just want to give it like a
  • 00:22:02 color of red and I'm gonna give this
  • 00:22:07 important for it to apply and I want to
  • 00:22:11 style the cards titles all saved card
  • 00:22:14 card
  • 00:22:15 content dot card title to target that
  • 00:22:20 and I just wanna that there's this
  • 00:22:23 syntax completion is a bit weird with
  • 00:22:26 this extension right now but I guess
  • 00:22:29 that will be fixed in the near future
  • 00:22:30 because this is fairly new so here we'll
  • 00:22:32 say margin-bottom I want to give it a
  • 00:22:35 margin bottom was zero and I want to
  • 00:22:37 style as well the this date they created
  • 00:22:41 that so I'm going to give it a class or
  • 00:22:42 is this right here can give it a class
  • 00:22:44 of time stamp and here will say so we
  • 00:22:49 can just copy this instead of card title
  • 00:22:53 this will be P dot time stamp and I'll
  • 00:22:58 just oops I'll just give this a color of
  • 00:23:02 like gray like hash nine nine nine and
  • 00:23:06 I'll give it some margin bottom so it
  • 00:23:08 separates itself from the body
  • 00:23:10 it's a margin bottom of ten pixels all
  • 00:23:14 right let's see what this looks like all
  • 00:23:16 right it looks better so let's go back
  • 00:23:18 now we can make these into a component
  • 00:23:21 by itself but we're gonna make some
  • 00:23:23 other components so I'll show you how to
  • 00:23:25 make components anyways here let's give
  • 00:23:28 these two buttons I call back like like
  • 00:23:30 a function that will be triggered when
  • 00:23:32 they're clicked and for this we're gonna
  • 00:23:33 use the on directive so here we'll say
  • 00:23:36 on colon and now we give the type of the
  • 00:23:38 event so here we're gonna give the event
  • 00:23:40 click and then say equal and open an
  • 00:23:42 expression and here we can pass a
  • 00:23:45 function that will be triggered once
  • 00:23:48 this button is clicked so here I'll pass
  • 00:23:49 a callback because otherwise it will
  • 00:23:52 trigger it right when the component is
  • 00:23:55 rendered and here I'll say edit post and
  • 00:23:58 pass it this post and here as well we're
  • 00:24:01 going to give a delete another event so
  • 00:24:04 here I'll say on :
  • 00:24:06 click equals and here I'll give a call
  • 00:24:09 back to
  • 00:24:11 delete post and I'm gonna pass the post
  • 00:24:15 ID and we're gonna implement these later
  • 00:24:19 but for now I'm just gonna have them
  • 00:24:20 print something to the console okay
  • 00:24:22 there's a mistake here all right like
  • 00:24:24 this let's go up here in the script tag
  • 00:24:27 let's create these two functions so here
  • 00:24:28 we'll have edit whoops edit post and
  • 00:24:32 we'll take a post and for now it's just
  • 00:24:35 gonna console.log it so just console.log
  • 00:24:37 post like this actually I need to use
  • 00:24:40 the keyword function let's create the
  • 00:24:42 delete post as well so function delete
  • 00:24:45 post will take an ID and for now I'm
  • 00:24:48 just gonna say deleting post with ID and
  • 00:24:54 just concatenate that ID let's save
  • 00:24:57 let's see if these are running properly
  • 00:24:59 so let's open the developer tools the
  • 00:25:02 console and I'm gonna put this
  • 00:25:04 side-by-side and here if I press edit on
  • 00:25:07 this it doesn't do anything let's go
  • 00:25:10 back okay I made a mistake here let's
  • 00:25:13 save that let's go back to our app
  • 00:25:16 refresh and here if I click Edit there
  • 00:25:20 we go it's printing that post that we
  • 00:25:22 clicked on edit and if I click delete it
  • 00:25:24 says deleting post with id something
  • 00:25:26 something which is the idea of this post
  • 00:25:28 alright cool so let's go back to our app
  • 00:25:30 let's create the form that we will use
  • 00:25:33 to submit a post to the server so on top
  • 00:25:35 of this row I'm gonna add another row at
  • 00:25:38 the top here and say the row and here
  • 00:25:40 I'm gonna have it take half the width so
  • 00:25:42 I'll say Col dot s6 tab and inside of
  • 00:25:47 here don't worry about that pretty old
  • 00:25:49 format it I'm gonna put the form but I'm
  • 00:25:51 not gonna put the whole form here I'm
  • 00:25:53 gonna just put the component and make it
  • 00:25:55 into its own component so here I'll say
  • 00:25:57 post form and then just leave it like
  • 00:26:01 this and let's import that and then
  • 00:26:04 create it so here I'll say import post
  • 00:26:07 phone from I'm gonna create a folder
  • 00:26:10 call it components and actually here
  • 00:26:12 we're inside pages so we have to go back
  • 00:26:14 one level and then say components slash
  • 00:26:17 post form dot felt like this and here
  • 00:26:22 let's create this folder
  • 00:26:25 components and inside of components I'm
  • 00:26:28 gonna create the post form dot felt so
  • 00:26:33 here we'll write our formula say oops
  • 00:26:36 we'll say form don't know why phone
  • 00:26:39 didn't work I'll just save form like
  • 00:26:40 this and this will have a submit event
  • 00:26:44 so we'll say on and the the event will
  • 00:26:47 be submit submit oops
  • 00:26:50 mint equals and we will call a function
  • 00:26:53 that will call on submit like this and
  • 00:26:56 let's close this form and inside the
  • 00:26:59 form will have a div with the class
  • 00:27:01 input field and this is materialized
  • 00:27:04 stuff just to style it with the
  • 00:27:06 materialized here will have two fields
  • 00:27:08 one field for the title and one for the
  • 00:27:10 body so here we'll put a label for title
  • 00:27:13 and you will say title like this and
  • 00:27:16 here we'll put the input for that title
  • 00:27:18 of type text and this here what we need
  • 00:27:23 to do is we need to bind the value of
  • 00:27:25 this input with a value in our component
  • 00:27:28 with a variable so misspelt has a
  • 00:27:31 two-way binding meaning that we can use
  • 00:27:33 the directive called bind and then give
  • 00:27:36 say : value equals now we want to give
  • 00:27:39 an the name of the value that we're
  • 00:27:42 going to use which we'll call title
  • 00:27:44 which we haven't created yet but we will
  • 00:27:46 so now whenever title this input changes
  • 00:27:50 it will change title in our component
  • 00:27:51 and if title is well changes the value
  • 00:27:54 of the input will change this is what
  • 00:27:56 two-way binding means so let's copy this
  • 00:27:58 entire input field and paste it here and
  • 00:28:01 here we'll change this is a label for
  • 00:28:04 body and this was a body and this
  • 00:28:07 variable here is where we'll be called
  • 00:28:09 body let's add a submit button so say
  • 00:28:13 button of type submit so : submit and
  • 00:28:17 click tab and we'll give it some classes
  • 00:28:19 to style it with materialized CSS
  • 00:28:22 styling who say waves affect waves light
  • 00:28:27 and bTW and as well and this button will
  • 00:28:30 say add because they adds a post and
  • 00:28:32 here let's open a script tag and I don't
  • 00:28:35 know if it's the is felt extension or if
  • 00:28:37 it's prettier
  • 00:28:39 it's probably this felt extension but
  • 00:28:40 you can put the script tag underneath
  • 00:28:42 the the markup and if you save the
  • 00:28:44 script tag will go up to the top which
  • 00:28:46 is pretty cool and the same thing with
  • 00:28:48 style because logically Styles should be
  • 00:28:51 before before the HTML because that's
  • 00:28:54 how cascading style sheets work and if I
  • 00:28:56 save the style tag we'll go up above the
  • 00:29:00 template which is pretty cool all right
  • 00:29:02 so let's go to the script so here we'll
  • 00:29:04 declare these two variables the title
  • 00:29:06 and the body so we'll say let title
  • 00:29:09 equals an empty string and let body
  • 00:29:13 equals an empty string all right now we
  • 00:29:16 don't have any red squiggly lines but we
  • 00:29:18 have this green squiggly line telling us
  • 00:29:19 that it's not the onsubmit is not
  • 00:29:21 defined so let's fix that here we'll say
  • 00:29:23 function on submit and we'll say it
  • 00:29:29 takes an event and of course first thing
  • 00:29:31 we do is say event prevent the fault
  • 00:29:34 like this don't know why added that
  • 00:29:38 underscore prevent the fault like that
  • 00:29:41 and here I'll do like a very basic
  • 00:29:43 validation and say if title the trim
  • 00:29:48 equals then always replacing these
  • 00:29:51 functions equals an empty string or body
  • 00:29:56 dot trim don't know it's changing this
  • 00:30:00 trim is a JavaScript function this is a
  • 00:30:03 bit weird but let's bear with it if any
  • 00:30:06 of these two is an empty string then we
  • 00:30:08 just return because we don't want to
  • 00:30:09 submit this because this is invalid data
  • 00:30:11 you can of course show some validation
  • 00:30:14 errors but that's kind of JavaScript I
  • 00:30:16 want to focus on svelte more for this
  • 00:30:18 tutorial so if not we have these fields
  • 00:30:20 then let's form this post and send it to
  • 00:30:21 our server so here we'll say constant
  • 00:30:23 you post is an object which will have a
  • 00:30:27 title of the value of title so we can
  • 00:30:29 just say title like this and body like
  • 00:30:31 this now let's bring our base URL from
  • 00:30:35 here let's copy this and put it right
  • 00:30:38 here and now we need to send a request a
  • 00:30:41 post request to our database to persist
  • 00:30:43 this post so we'll say actually we'll
  • 00:30:46 use async await so here we can make this
  • 00:30:49 an async function we add the async
  • 00:30:51 keyword and
  • 00:30:52 he will say Const response equals a wait
  • 00:30:58 fetch we do backticks and here we'll say
  • 00:31:03 dollar sign curly-brace api base URL and
  • 00:31:08 we concatenate slash post because this
  • 00:31:11 is the router that we post to here we'll
  • 00:31:14 say comma and we pass some options
  • 00:31:17 including the method so the method will
  • 00:31:19 be a post so method post like this and
  • 00:31:22 the body of the request will be json dot
  • 00:31:26 stringify or just string of stringify
  • 00:31:30 like this stringify and we pass it the
  • 00:31:33 new post that we just created so now
  • 00:31:36 when we get that data now we need to get
  • 00:31:38 the post from that data so we'll say
  • 00:31:40 Const post equals a wait res dot jason
  • 00:31:46 oops
  • 00:31:47 don't always change these variables it's
  • 00:31:49 bit annoying it's very strange
  • 00:31:52 okay let's save all files and let's look
  • 00:31:56 at our app and we broke it on submit is
  • 00:32:01 not defined okay okay because hey this
  • 00:32:05 is a capital S don't submit like this
  • 00:32:08 alright so we get our form and if we
  • 00:32:12 type anything here so let's say post
  • 00:32:14 from spelt if we leave this empty you
  • 00:32:17 shouldn't submit anything and it doesn't
  • 00:32:19 and if we type some gibberish it would
  • 00:32:22 click add I think it does and a request
  • 00:32:25 if we look at network post alright so it
  • 00:32:28 sends a request and the status code is
  • 00:32:29 201 so it's been created of course we're
  • 00:32:31 not adding any code to show it here but
  • 00:32:33 if we refresh we see that that post has
  • 00:32:36 indeed been posted I want to do
  • 00:32:39 something here I want to have a loading
  • 00:32:41 boolean and when we send a post it will
  • 00:32:43 actually show us a spin a bar that that
  • 00:32:45 indicates that we're actually
  • 00:32:46 communicating to a back-end so here I'll
  • 00:32:49 create another variable call it loading
  • 00:32:51 so let loading equals initially it will
  • 00:32:53 be false and here when we submit the
  • 00:32:56 form if it's valid then first thing we
  • 00:32:59 want to do we want to set the loading to
  • 00:33:00 true so we'll say loading equals true
  • 00:33:03 this is as simple as that just a
  • 00:33:05 that we change this variable and this
  • 00:33:08 variable is used in the markup just the
  • 00:33:10 fact that we reassign it to a different
  • 00:33:12 value it's actually going to re-render
  • 00:33:14 our our markup so we set the loading to
  • 00:33:17 true and then we communicate to our
  • 00:33:18 server and once everything is done we
  • 00:33:21 set the loading back to false so we say
  • 00:33:23 loading equals false false like this now
  • 00:33:28 in our markup we let's cut this phone
  • 00:33:31 and here let's do curly braces hash if
  • 00:33:35 and we'll say if not loading then we
  • 00:33:39 want to show this phone and then here
  • 00:33:41 let's say else so : else and here else
  • 00:33:45 if we're loading let's do dot progress
  • 00:33:48 and this is materialized CSS stuff and
  • 00:33:53 here we'll say dot in determinate and
  • 00:33:56 this will give us like an indeterminate
  • 00:34:01 loading bar or progress bar so here
  • 00:34:04 we'll finish close the if statement will
  • 00:34:07 say slash if like this and let's save
  • 00:34:09 let's go back to our app now if we put
  • 00:34:13 some stuff here and we hit add there we
  • 00:34:16 go we see that loading bar for a second
  • 00:34:18 and then it goes away once the loading
  • 00:34:19 stops let's actually make that loading
  • 00:34:22 bar go a bit in the middle and give this
  • 00:34:24 some padding so that it looks a bit
  • 00:34:26 better so let's go back here and what's
  • 00:34:28 cool about spelt is that we don't have
  • 00:34:30 to give this a class and style it just
  • 00:34:32 because this is in just in this
  • 00:34:33 component we can just say form and then
  • 00:34:36 style style this form and none of the
  • 00:34:39 other forms in any other page will get
  • 00:34:41 the style because this is scoped to this
  • 00:34:42 component so here I'm just gonna give it
  • 00:34:44 some margin on all sides of 50 pixels
  • 00:34:47 and here we'll say I want to start the
  • 00:34:50 progress bar source a progress and I'll
  • 00:34:52 give this a margin top and bottom of a
  • 00:34:55 hundred pixels and left and right of
  • 00:34:57 zero so let's save this let's look at
  • 00:35:01 our app so alright go the form looks
  • 00:35:03 much better now and if we submit
  • 00:35:05 something else that bars in the middle
  • 00:35:07 here alright let's work on actually
  • 00:35:11 adding this post to our post list now if
  • 00:35:14 by the way of course I'm getting all of
  • 00:35:16 this from the documentation is felt has
  • 00:35:18 some radical
  • 00:35:19 documentation ago two examples you can
  • 00:35:21 even fiddle with the code and change the
  • 00:35:23 examples and how they work and there's
  • 00:35:25 this thing right here called event
  • 00:35:27 forwarding which is what we're going to
  • 00:35:29 use to communicate between the inner and
  • 00:35:31 the outer components that we have so if
  • 00:35:33 you see here it actually dispatches an
  • 00:35:35 event from inside of a component that's
  • 00:35:38 nested inside this component and then
  • 00:35:40 based on that event the outer component
  • 00:35:43 will perform some action so let's copy
  • 00:35:46 this import from here this create event
  • 00:35:47 dispatcher let's copy that actually it's
  • 00:35:50 copied both of these because we need
  • 00:35:52 that let's go here let's paste this at
  • 00:35:56 the top and you can keep that there and
  • 00:36:00 then after we get the post we want to
  • 00:36:03 dispatch this event so let's dispatch an
  • 00:36:06 event and we just say dispatch like this
  • 00:36:11 let's call this event post created and
  • 00:36:14 we can pass a payload so the payload
  • 00:36:16 will actually be this post now we can
  • 00:36:19 listen to this event on any other
  • 00:36:21 component and then catch that and then
  • 00:36:23 get this payload and do whatever we want
  • 00:36:25 with it so where we want it we want it
  • 00:36:27 in the home page so here in the home
  • 00:36:29 page I'm going to go down here where we
  • 00:36:31 add our form and I'm gonna listen to the
  • 00:36:33 event so I'll say on and here you put
  • 00:36:35 the name of our custom event and say
  • 00:36:37 post created so on this event we're
  • 00:36:40 going to call a function and I'm gonna
  • 00:36:42 call this add post simple as that let's
  • 00:36:45 go up here and create this add post now
  • 00:36:47 we want to create a function that adds
  • 00:36:49 that post that we got to this post array
  • 00:36:51 that we have so here I'll say function
  • 00:36:53 post and if you look at the
  • 00:36:57 documentation you will see that the
  • 00:36:59 event right here actually if we look at
  • 00:37:02 app dot svelte the event has this
  • 00:37:05 property detail which holds our payload
  • 00:37:08 so here in our add post we will we can
  • 00:37:12 destructor it straight away so we will
  • 00:37:14 do structure detail and we can do a
  • 00:37:16 colon and give it another name because
  • 00:37:18 it's because it makes more sense to call
  • 00:37:20 it post here instead of detail because
  • 00:37:22 it's actually a post so here now that we
  • 00:37:24 have that data we just want to add it to
  • 00:37:26 our posts so we can simply say posts
  • 00:37:28 equals and we do an array and we want to
  • 00:37:31 put it at the top so we'll say
  • 00:37:33 , and then we spread our existing posts
  • 00:37:36 like this now be careful with this you
  • 00:37:39 don't want to do a post push or on shift
  • 00:37:43 because when you do that you're not
  • 00:37:44 assigning a new value you're changing
  • 00:37:46 the variable but you're not assigning a
  • 00:37:47 new value so that wouldn't actually
  • 00:37:49 cause the rerender you want to do posts
  • 00:37:51 equal and then you actually add your
  • 00:37:53 data so let's save all files and let's
  • 00:37:57 look our up and see if this is working
  • 00:37:58 just right here let's refresh just in
  • 00:38:01 case and we can say post to be added add
  • 00:38:06 this post and we click enter and there
  • 00:38:10 we go our post is actually added to our
  • 00:38:12 front-end but our form is not resetting
  • 00:38:14 so let's fix that let's go here so in
  • 00:38:17 our form when we submit that and we
  • 00:38:20 dispatch the event we can simply say
  • 00:38:23 title equals an empty string and body as
  • 00:38:27 well or you can say title equals body
  • 00:38:30 equals empty string so we reset both of
  • 00:38:33 them alright let's look at our app
  • 00:38:35 reload just in case and let's put some
  • 00:38:37 gibberish that gets added and the fields
  • 00:38:41 are reset sweet let's now implement this
  • 00:38:44 delete button I mean give it some actual
  • 00:38:46 functionality so let's go here in the
  • 00:38:48 home so we have or we already created
  • 00:38:52 this delete post function but it doesn't
  • 00:38:55 do anything so here we will say fetch
  • 00:38:58 and the way our API works we want to
  • 00:39:01 send to the URL slash post slash the
  • 00:39:05 idea of that post and once send it as a
  • 00:39:07 delete request so here we'll want to
  • 00:39:09 concatenate our with a curly brace
  • 00:39:11 dollar sign curly brace API base URL and
  • 00:39:16 close that curly braces
  • 00:39:18 slash post slash and then concatenate
  • 00:39:21 the ID as well and then here when I pass
  • 00:39:24 some options and in the options we only
  • 00:39:26 want to say that the method is a delete
  • 00:39:29 method and here we can use the the then
  • 00:39:33 syntax and then here we say response and
  • 00:39:36 by the way just because I'm using async
  • 00:39:38 there and then here I wouldn't do it in
  • 00:39:41 a project I'm just showing you that
  • 00:39:42 there are multiple ways of doing this in
  • 00:39:44 one of my projects I'll still stick to
  • 00:39:46 one way of doing things to maintain
  • 00:39:48 readability so here with the response
  • 00:39:50 wanna return rest or JSON like this and
  • 00:39:55 then chain another then where we get
  • 00:39:58 actually we don't need any of the result
  • 00:40:00 that's return nothing gets returned so
  • 00:40:02 we just want to actually remove that
  • 00:40:05 post from our front end so here we'll
  • 00:40:07 say posts equals and we'll say post dot
  • 00:40:10 filter to remove that post and our
  • 00:40:13 filter will be post where post dot
  • 00:40:16 actually post dot ID does not equal this
  • 00:40:21 ID which will now remove all the posts
  • 00:40:24 that don't have this ID I mean keep just
  • 00:40:27 the post that don't have this ID meaning
  • 00:40:28 that it will only remove that post so
  • 00:40:30 let's save that let's look at our app
  • 00:40:33 it's pretty low just in case if we
  • 00:40:35 delete this it actually goes away if we
  • 00:40:38 delete this it goes away let's add a
  • 00:40:40 pop-up like a confirmed pop-up that you
  • 00:40:43 know just in case people don't delete
  • 00:40:45 everything by mistake so let's copy all
  • 00:40:47 of this here will say if confirm and the
  • 00:40:53 confirm will say are you sure so if they
  • 00:40:57 click OK on that we actually want to
  • 00:40:59 send that post that I mean that request
  • 00:41:01 and now if you click delete access asks
  • 00:41:04 are you sure if you click OK actually
  • 00:41:06 deletes it alright let's now work on the
  • 00:41:09 edit button so let's go here so this is
  • 00:41:12 called from the post one or actually not
  • 00:41:15 from the home so what we want to do now
  • 00:41:18 is that we want to when we click on edit
  • 00:41:20 we want to pass the details of that post
  • 00:41:23 down to this form and then populate the
  • 00:41:25 fields of that form with those details
  • 00:41:27 so here when we edit a post we've got
  • 00:41:31 one gonna set a new property here I was
  • 00:41:33 call it an editing post and initially
  • 00:41:37 this will be will have a body that's an
  • 00:41:41 empty string a title that's an empty
  • 00:41:44 string and an ID that's no because the
  • 00:41:48 way our API works when we want to edit a
  • 00:41:50 post we want to send the body and the
  • 00:41:52 title and the ID as well to know which
  • 00:41:55 opposed to edit on the database so
  • 00:41:58 now
  • 00:41:58 we won when we edit post we want to set
  • 00:42:01 this editing post to this post that we
  • 00:42:03 clicked to edit so we'll say editing
  • 00:42:06 post equals this post that we got here
  • 00:42:12 simple as that but we want to pass this
  • 00:42:15 editing post to the to the post form as
  • 00:42:18 a prop we can do post editing post
  • 00:42:24 equals editing post like this but when
  • 00:42:29 we save it's gonna change it to like
  • 00:42:31 some really nice minimal syntax that
  • 00:42:34 I've been wishing that it would happen
  • 00:42:35 on react a while ago which is just doing
  • 00:42:37 curly braces editing post which was
  • 00:42:39 which is gonna give that prop with that
  • 00:42:41 name and that value to our post form as
  • 00:42:43 well now we want to use that in this
  • 00:42:45 component and display those details so
  • 00:42:48 let's go up here now
  • 00:42:50 what we can do we can say title equals
  • 00:42:54 editing post title up here so we can say
  • 00:42:57 let's title equals editing post the
  • 00:43:02 title and do the same thing for body
  • 00:43:07 actually I haven't tested this I don't
  • 00:43:09 think it will update once week yeah we
  • 00:43:11 won't update see there's a problem says
  • 00:43:15 editing post is not defined okay I know
  • 00:43:17 why because I we need to declare editing
  • 00:43:20 posts as a prop that we can that we can
  • 00:43:22 get from outside so we need to say
  • 00:43:24 export let remember like that that was
  • 00:43:27 on the app as well for the property name
  • 00:43:30 so we can need to say the same thing for
  • 00:43:32 editing post when I say export let
  • 00:43:34 editing post this will tell this
  • 00:43:37 component that we can receive this as a
  • 00:43:38 problem so let's save now if we look our
  • 00:43:41 up so that's fine but the problem now
  • 00:43:43 they're set to an empty string but if we
  • 00:43:47 click edit it will not change because
  • 00:43:49 it's not tracking any changes the way we
  • 00:43:51 fix that we can just use this syntax we
  • 00:43:54 can say dollar : and we can do the same
  • 00:43:58 thing for body here and this will we
  • 00:44:01 will tell our component will be like
  • 00:44:03 look we will assign this value but
  • 00:44:05 whenever editing post title changes then
  • 00:44:08 assign that value again to title so this
  • 00:44:11 is
  • 00:44:12 reactive to editing post so if we save
  • 00:44:15 this now that should fix it so here if
  • 00:44:18 we click Edit there we go we get the
  • 00:44:19 details from this component I mean from
  • 00:44:22 this post to our form right here so if
  • 00:44:24 click here we get those and we click
  • 00:44:26 here we get those that's pretty cool I
  • 00:44:29 want to as well change the button from
  • 00:44:31 add to update once we are in actually
  • 00:44:33 editing mode so there's a simple trick
  • 00:44:36 so right here once our editing post has
  • 00:44:40 some value when we click here it will
  • 00:44:42 also have an ID because by default it's
  • 00:44:44 not so we can use that as a conditional
  • 00:44:47 so down here instead of just add we will
  • 00:44:49 put an expression so we'll do curly
  • 00:44:51 braces and we'll say editing post don't
  • 00:44:54 ID question mark so if this is not null
  • 00:44:57 we will say update else if this is known
  • 00:45:02 that means we were an ad or we're in
  • 00:45:04 creating mode we'll say add let's save
  • 00:45:06 that let's look at our app so by default
  • 00:45:08 it says add when the ID is known but
  • 00:45:10 when we click on edit it becomes update
  • 00:45:13 cool let's now add the logic for
  • 00:45:15 actually reaching to our server and
  • 00:45:17 updating this post all right let's go
  • 00:45:19 back so this will happen through the
  • 00:45:21 onsubmit as well of course but now what
  • 00:45:24 we need to do we need to add a new thing
  • 00:45:27 here we will say because if we have an
  • 00:45:31 ID we will actually send a post request
  • 00:45:33 to API slash post slash that ID and then
  • 00:45:37 it will be a request to edit that post
  • 00:45:40 with that ID so here we can just say
  • 00:45:42 condition and will say if editing post
  • 00:45:47 dot ID so if it's not null then we're
  • 00:45:50 gonna actually update a post we're gonna
  • 00:45:52 form a URL let's say actually here we
  • 00:45:57 can say actually we need to declare
  • 00:45:58 these outside because we won't need them
  • 00:46:00 later so we'll say let will create these
  • 00:46:02 two variables URL and method as well
  • 00:46:05 because the method could be either a
  • 00:46:06 post or a put so here we'll say you are
  • 00:46:09 all equals as do backticks
  • 00:46:11 and the form our URL would be api base
  • 00:46:15 URL like this slash post slash this ID
  • 00:46:21 so we can do dollar sign curly brace and
  • 00:46:23 we can just copy and paste that inside
  • 00:46:25 so that's our URL and of course now the
  • 00:46:28 method will be put because we're in edit
  • 00:46:31 mode so we'll say put like this else if
  • 00:46:34 the idea is no that means we're trying
  • 00:46:35 to create a post so the URL will be
  • 00:46:39 backticks and we'll say curly brace and
  • 00:46:42 we'll say api base URL slash post and
  • 00:46:50 the method will be post and now we can
  • 00:46:56 say we can send the same request but
  • 00:46:59 instead we can send it to URL because
  • 00:47:01 this could be different and the method
  • 00:47:04 is just method so we can just omit this
  • 00:47:07 and send the same body here let's save
  • 00:47:11 and this should work so let's look at
  • 00:47:13 our app let's put this side-by-side and
  • 00:47:16 let's look at our network tab let's
  • 00:47:18 clear that and now if we just I'm gonna
  • 00:47:21 refresh just in case now if we just
  • 00:47:23 submit a post but I can't type in these
  • 00:47:27 fields okay I can't type in these fields
  • 00:47:30 because I didn't change these values now
  • 00:47:32 these values should actually be editing
  • 00:47:34 from editing post so here I'll say
  • 00:47:36 editing post dot title and dot body this
  • 00:47:40 should fix that let's go back alright
  • 00:47:42 now I can post I mean I can type alright
  • 00:47:44 so here if I just send this this should
  • 00:47:47 be a post request here it says URL is
  • 00:47:50 not defined
  • 00:47:51 let's see that okay this is URL I don't
  • 00:47:55 know why the autocorrect is changing my
  • 00:47:58 variable names that's very weird
  • 00:48:00 I hope they fix this extension all right
  • 00:48:03 now it should work if I put some
  • 00:48:04 gibberish and click add if I look at the
  • 00:48:07 network tab it sent a post request to
  • 00:48:10 slash post but now if I click on edit
  • 00:48:13 the same one and give it just like a
  • 00:48:16 bunch of V's like this and click update
  • 00:48:19 and if we go back it's right right here
  • 00:48:25 okay so this is the a put request and
  • 00:48:27 it's gone successfully but of course the
  • 00:48:30 problem now it's actually added it
  • 00:48:31 because we didn't change the logic to
  • 00:48:33 add post in the home component so let's
  • 00:48:35 do that let's go to the home component
  • 00:48:38 so here in
  • 00:48:39 post we want to check if we already have
  • 00:48:41 that post then we just want to edit it
  • 00:48:44 we just want to replace it so we'll do
  • 00:48:46 if posts don't find post where post dot
  • 00:48:51 ID equals this post that we got the ID
  • 00:48:55 so if this is true that means we already
  • 00:48:58 have this post that means this post was
  • 00:48:59 probably being edited so we just want to
  • 00:49:02 find the index of it and replace it in
  • 00:49:03 our existing posts so we'll say Const
  • 00:49:05 index equals posts dot find index and we
  • 00:49:11 want to find the index of post where a
  • 00:49:13 post of ID is the same condition that
  • 00:49:16 equals this post or ID now that we have
  • 00:49:18 this index we need to declare a new
  • 00:49:20 array and say let posts updated equal
  • 00:49:25 posts so we're just making a copy of it
  • 00:49:27 right now that we will assign later and
  • 00:49:29 now we want to edit this post updated so
  • 00:49:32 post updated dot splice and we remove
  • 00:49:37 starting from the index we remove only
  • 00:49:39 one and then we replace it with this
  • 00:49:41 post now we can simply say posts so our
  • 00:49:44 post equals posts updated which will
  • 00:49:47 rerender else else we just do this
  • 00:49:53 alright let's save and let's see what
  • 00:49:55 this looks like so now if want to edit
  • 00:49:58 all if one edit this one as well and
  • 00:50:00 change it to like like all exes like
  • 00:50:03 this click update there we go it changes
  • 00:50:06 to all exes and it doesn't add a new one
  • 00:50:07 let's reset the form now the phone
  • 00:50:10 should be reset from here we can't reset
  • 00:50:12 it from inside and this title and body
  • 00:50:14 don't exist anymore so we can remove
  • 00:50:16 that and here we can just assign it
  • 00:50:19 again to this so I can just copy that
  • 00:50:20 and after either of these happen we'll
  • 00:50:23 just do this paste this here alright
  • 00:50:26 let's go back now let's edit these from
  • 00:50:29 these two double use like this and we
  • 00:50:32 click update and the form resets cool
  • 00:50:34 let's add the post limiter that limits
  • 00:50:37 the number of posts right here so let's
  • 00:50:40 go back here let's go down to the markup
  • 00:50:42 and after the forum here I'm gonna add a
  • 00:50:46 column with the width s3 and here I'll
  • 00:50:50 put some text say limit
  • 00:50:52 number of posts and after this I'll put
  • 00:50:56 an input input of type number and this
  • 00:51:01 will have no name or bind it to some
  • 00:51:05 value and I'll call this value post
  • 00:51:08 limit and it won't have any ID close
  • 00:51:13 that tag and after this we'll have a
  • 00:51:15 button and this will have a click event
  • 00:51:19 so on : click I want to call the set
  • 00:51:23 limit and let's give it some
  • 00:51:26 materialized classes waves effect and
  • 00:51:30 waves light and BTN let's close that
  • 00:51:35 button and it will say set
  • 00:51:38 alright let's create this method this
  • 00:51:41 function and this post limit and the set
  • 00:51:44 limit so we go up here say let post
  • 00:51:48 limit and create that function set limit
  • 00:51:53 let's go down here and say function set
  • 00:51:56 limit let's send a fetch we'll say fetch
  • 00:52:02 to send a request and then we can just
  • 00:52:04 copy this so to the base of your URL
  • 00:52:08 slash post slash that number so we'll
  • 00:52:11 put the post limit right here and to get
  • 00:52:14 request and we'd only need to say
  • 00:52:15 anything
  • 00:52:16 we just chain then and when we get a
  • 00:52:18 result we want to return res jason and
  • 00:52:24 here we've chained another than and we
  • 00:52:28 will get to the posts and here we'll say
  • 00:52:31 show again I want to give it a different
  • 00:52:32 name to not conflict with the posts that
  • 00:52:34 we already have and we will say post
  • 00:52:36 equal equals posts data like this
  • 00:52:40 alright let's save everything let's look
  • 00:52:43 at our app lets give it a default value
  • 00:52:46 so it doesn't look empty like that and
  • 00:52:48 let's give it like some margin on all
  • 00:52:49 sides I'm just gonna give it some inline
  • 00:52:52 styling right where is it
  • 00:52:54 so it's this I'm just gonna say style
  • 00:52:58 equals margin 50 pixels like that and we
  • 00:53:04 want to give this post limit ad
  • 00:53:06 value of 6 all right let's save all
  • 00:53:11 right it looks much better now if want
  • 00:53:13 only two posts you click set it doesn't
  • 00:53:16 work it's cuz reference posts oh I made
  • 00:53:20 a typo my bad
  • 00:53:21 so right here this is post snapshots
  • 00:53:26 let's save let's go here when I get two
  • 00:53:31 we set we get two three we get three for
  • 00:53:34 a massive number we get all of them all
  • 00:53:36 right cool
  • 00:53:37 actually I forgot to show you something
  • 00:53:38 let's actually build this app to see the
  • 00:53:40 bundle size of it so here we're gonna
  • 00:53:42 stop this development server or is the
  • 00:53:45 NPM room built
  • 00:53:46 yeah it's NPM run build so say NPM run
  • 00:53:49 build hit enter okay it's built let's
  • 00:53:52 open this open reveal in Explorer so
  • 00:53:57 look at the public the bundle is 196 ok
  • 00:54:01 that's unfair because that most of it is
  • 00:54:05 coming from this materialize jeaious all
  • 00:54:07 right I'm gonna just comment that for
  • 00:54:08 now and build it so NPM run built just
  • 00:54:11 to show you the actual bundle size of
  • 00:54:12 spelt itself alright cool so if you look
  • 00:54:15 at public now it's 21 kilobytes which is
  • 00:54:18 absurdly low and 10 kilobytes or 11
  • 00:54:21 kilobytes of this is actually coming
  • 00:54:23 from spell routing so spelt itself is
  • 00:54:25 only 10 kilobytes I mean this app itself
  • 00:54:29 of course there's no spelled code inside
  • 00:54:31 this bundle is just some JavaScript
  • 00:54:33 instructions with our own code which is
  • 00:54:36 this is insanely small and very
  • 00:54:39 efficient so yeah I hope this gave you
  • 00:54:41 like a good start with felt I hope that
  • 00:54:44 you're excited about it's felt and you
  • 00:54:46 want to use it and learn more about it
  • 00:54:48 thank you very much and I hope to see
  • 00:54:50 you soon bye