- 00:00:01 welcome back to the beauty of UX serious
- 00:00:04 this is the last video of this series I
- 00:00:07 hope you already learned a lot in this
- 00:00:09 video I just want to show you two
- 00:00:11 additional tiny tweaks or things to know
- 00:00:15 to keep in mind or free actually the
- 00:00:18 first one if you haven't found it
- 00:00:20 already it always lost in the video
- 00:00:22 description though is the official
- 00:00:24 documentation well it's not that hard to
- 00:00:26 find if you google for view X that's the
- 00:00:28 second result here it's view X dot view
- 00:00:31 chest org here you can dive even deeper
- 00:00:34 and learn some additional things about
- 00:00:36 view X but the main concept of course is
- 00:00:39 the one I showed you in the last videos
- 00:00:41 now another very useful thing when we're
- 00:00:44 in the browser right now is our the view
- 00:00:48 developer tools if you google for them
- 00:00:51 you should you should find a Chrome page
- 00:00:55 and I'm talking about the Chrome browser
- 00:00:57 there I don't even know if it also
- 00:00:59 exists for other browsers and there you
- 00:01:01 can add the view dev tools as a
- 00:01:04 extension to the Chrome browser now I
- 00:01:07 already got them added and what they
- 00:01:09 allow you to do is if you open them in
- 00:01:11 your developer tool and then view you
- 00:01:16 for one get your normal tools showing
- 00:01:18 you the components on your page app
- 00:01:21 registration and registrations where if
- 00:01:24 the values use there so that's nice but
- 00:01:27 you also get that UX tab and the cool
- 00:01:30 thing is watch what happens if I click
- 00:01:32 on register you see you see the commit
- 00:01:36 here if I click on register again you
- 00:01:39 see another commit and now if you click
- 00:01:41 on an older one it jumps back to that
- 00:01:44 state so you can time travel through
- 00:01:47 your list of states to debug your
- 00:01:50 application and quickly see how the
- 00:01:52 application looked like at another point
- 00:01:55 of time you also see the payload of each
- 00:01:58 commit and so on see the state of the
- 00:02:02 commit and a great tool to dive deeper
- 00:02:05 you can also if you don't want to jump
- 00:02:09 back temporarily but reset your app
- 00:02:11 simply click revert
- 00:02:13 and you're back to that state or you
- 00:02:16 revert at that state I should say so if
- 00:02:18 I revert that state and back to the
- 00:02:20 state before if I unregister and every
- 00:02:22 word that I'm back to that state so this
- 00:02:25 is another great tool for debugging your
- 00:02:27 application the last thing I wanted to
- 00:02:30 show you is if you have a look at the
- 00:02:32 app at the store the chase file this is
- 00:02:36 not a complex app but the store the
- 00:02:38 chase file is already not very big but
- 00:02:41 it has a lot of code in it well you can
- 00:02:45 split it up and you will see this in
- 00:02:47 bigger projects there you typically
- 00:02:49 create a new folder which you may name
- 00:02:51 store for example could also name it
- 00:02:53 view X and I will move my store dot J's
- 00:02:58 file in there that did not really
- 00:03:00 shorten the file though but I will also
- 00:03:03 create some other files here one for the
- 00:03:06 Gators one for D mutations and one for
- 00:03:12 you guessed it the actions now with
- 00:03:16 these extra files what I do is in the
- 00:03:20 actions file for example here first of
- 00:03:24 all I exported efj old object and then I
- 00:03:28 will go to my store the chess file to my
- 00:03:30 actions and simply copy that method or
- 00:03:34 all the methods I have there and put
- 00:03:36 them as methods into this object them
- 00:03:38 exporting in this file and then I can
- 00:03:41 simply go into the store dot J's file
- 00:03:43 and import actions from my actions file
- 00:03:50 this actions object and I simply assign
- 00:03:53 it as a value to my actions property
- 00:03:56 down there or use es6 to automatically
- 00:03:59 assign it since it has the same name now
- 00:04:02 I will do the same for the mutations so
- 00:04:04 I will grab the whole mutations object
- 00:04:07 here actually go to the mutations J's
- 00:04:10 file export the default object here to
- 00:04:12 the object I just wrapped and go to the
- 00:04:15 store J's file to now import the
- 00:04:18 mutations there and I will assign them
- 00:04:21 to the mutations property or again use
- 00:04:23 es6 since the name is the same and I'll
- 00:04:26 do this say
- 00:04:27 for the gathers export default object
- 00:04:33 that one year import the gathers in the
- 00:04:36 store dot JS file and assign them here
- 00:04:40 again using es6 as a shortcut and with
- 00:04:43 that distorted chase files much leaner
- 00:04:45 now the app would be broken though
- 00:04:47 because all the moved distorted shares
- 00:04:49 file so make sure to adjust the import
- 00:04:51 in the main dot JS file to and with that
- 00:04:54 if I save this and go to the application
- 00:04:57 reload it looks like it's working again
- 00:05:02 but now the store the chair's file is
- 00:05:04 leaner and i outsource this in two
- 00:05:06 different files mutation scatters and so
- 00:05:09 on and with that you should be set to
- 00:05:12 use view x and really improve your
- 00:05:14 applications with that i hope to see you
- 00:05:17 in other videos have a great day bye
