- 00:00:01 hi welcome to another video great to
- 00:00:03 have you here now if you followed along
- 00:00:05 the other videos on my channel or maybe
- 00:00:07 also watch some other tutorials you
- 00:00:09 probably always saw some setup like this
- 00:00:12 one here not sure if it was in jsfiddle
- 00:00:14 but you certainly saw the setup where
- 00:00:17 you simply dropped in a script import to
- 00:00:19 control over a part of your Dom with TL
- 00:00:22 property and output some data there
- 00:00:24 there's nothing wrong with that setup
- 00:00:26 that's a fine way of using future as it
- 00:00:29 might be the best way if you are simply
- 00:00:31 controlling tiny parts of your dawn but
- 00:00:34 if you're building bigger or even
- 00:00:37 medium-sized applications that might not
- 00:00:39 be your preferred way because it also
- 00:00:41 doesn't integrate very well into your
- 00:00:43 maybe existing workflow if you're
- 00:00:45 already building and bundling sales code
- 00:00:47 well you're not really doing the same
- 00:00:49 for your view chess code and you might
- 00:00:51 also want to split your view chess code
- 00:00:53 up over multiple files and so on
- 00:00:55 therefore in this video I'll show you
- 00:00:57 how to easily get started with a nice
- 00:01:00 setup for a bigger or medium-sized view
- 00:01:03 KS application using webpack as a build
- 00:01:06 tool and as you will see it's only a
- 00:01:09 couple of steps and you're ready to go
- 00:01:11 so let's jump in in order to get a nice
- 00:01:15 pre-configured workflow which you can of
- 00:01:17 course find you in to your needs I'm
- 00:01:20 going to use the view CLI here now
- 00:01:22 already googled for it view CLI and then
- 00:01:25 here we get two interesting links the
- 00:01:27 first two search results that should be
- 00:01:29 let's open the first one
- 00:01:31 the github page of the view CLI there
- 00:01:34 you can learn more about it you can read
- 00:01:37 what it really does but I'm of course
- 00:01:39 also telling you the view Scylla is a
- 00:01:41 nice little tool which makes scaffolding
- 00:01:43 out pre-configured view projects very
- 00:01:46 simple now with project I mean a basic
- 00:01:49 folder structure and the basic workflow
- 00:01:52 set up using webpack giving you some
- 00:01:54 commands you can run to bundle your code
- 00:01:57 to build it to split it up over multiple
- 00:01:59 files to have a tender running on a
- 00:02:01 development server in the end all with
- 00:02:04 one command and the second command which
- 00:02:06 allows you to build your files for
- 00:02:07 production that's awesome of course you
- 00:02:10 could set up such a workflow on your own
- 00:02:12 but you can
- 00:02:14 also finds you an existing one whatever
- 00:02:15 you prefer I'm going to use the CLI to
- 00:02:18 quickly get started now we also learn
- 00:02:21 how to install the CLI on this page so
- 00:02:23 why don't you follow these steps here to
- 00:02:25 install the CLI we're going to use NPM
- 00:02:28 so you need to have node node J s
- 00:02:30 installed on your computer you can find
- 00:02:33 it a node J s org and it's just a
- 00:02:36 server-side language JavaScript on the
- 00:02:39 server to be precise we're not needing
- 00:02:42 it because we're going to write node.js
- 00:02:44 code but it has a package manager which
- 00:02:47 ships with no HS which is the de facto
- 00:02:49 standard for managing your JavaScript
- 00:02:52 packages also for front-end development
- 00:02:54 which we're doing here so therefore
- 00:02:56 install now HS and you should have the
- 00:02:59 NPM command available thereafter and
- 00:03:01 with that we can stall a global package
- 00:03:03 on our machine we do this by adding – G
- 00:03:06 now on Mac and Linux you're going to
- 00:03:08 have to add a sudo in front of it to get
- 00:03:10 you right
- 00:03:11 well rights to install something
- 00:03:13 globally and then the name of the
- 00:03:15 package is view CLI now here I need to
- 00:03:18 enter my password you might not be
- 00:03:19 prompted to do so and then it should
- 00:03:22 install the view CLI package globally on
- 00:03:24 your machine which means thereafter you
- 00:03:26 will have it available from the command
- 00:03:28 line by typing a simple command in any
- 00:03:31 place on your machine I will see you
- 00:03:33 once this is finished so the
- 00:03:34 installation of TCL I just finished
- 00:03:36 without an error here and with that
- 00:03:38 installed we already can start using it
- 00:03:41 now how do we use it
- 00:03:42 let's go back to the Google search we
- 00:03:45 also have a second finding here now that
- 00:03:49 is a template we can use with to view
- 00:03:51 CLI the web pack template a full list of
- 00:03:54 all the available templates can be found
- 00:03:55 on the view seal I get a page if you
- 00:03:57 scroll down a bit here now templates are
- 00:04:00 really chest
- 00:04:01 well the templates for the project
- 00:04:03 system you want to use you could use a
- 00:04:05 web pack template or a simplified one
- 00:04:07 without unit tests and so on you can
- 00:04:09 also choose browserify if you wanted or
- 00:04:11 a simple template which basically is the
- 00:04:14 same approach we used in chase fill any
- 00:04:16 other videos but now in your local
- 00:04:18 environment in your browser well there
- 00:04:21 are all the templates you can choose I'm
- 00:04:23 going to use the WebEx simple one for
- 00:04:25 there
- 00:04:26 video here because well it's a quick and
- 00:04:28 easy web peg template to get started
- 00:04:30 with in order to use it we have to go
- 00:04:33 back to the command line and in the
- 00:04:35 command line you have to go into a
- 00:04:36 folder where you want to create your new
- 00:04:38 project folder and there you can then
- 00:04:39 simply type view since we install the
- 00:04:41 view CLI in it then the name of the
- 00:04:44 template you want to use webpack simple
- 00:04:46 in my case here and then the name of the
- 00:04:48 folder you want to create I'm going to
- 00:04:50 you name it view web pack but of course
- 00:04:53 you may choose any name you like hit
- 00:04:55 enter and this will install this or
- 00:04:57 setup this template this project here
- 00:05:00 you can enter project name if you just
- 00:05:01 hit enter it will pick the default
- 00:05:02 between the parentheses same for the
- 00:05:05 description for the offer and you're
- 00:05:07 done and with that you got it installed
- 00:05:10 and here you see the next steps we
- 00:05:13 should see the into the newly created
- 00:05:15 folder here you webpack thereafter we
- 00:05:19 have to run npm install because this
- 00:05:21 template doesn't install the
- 00:05:23 dependencies or this command has
- 00:05:25 installed the dependencies our project
- 00:05:27 need because of course we do have a more
- 00:05:29 complex workflow here with a couple of
- 00:05:31 dependencies a couple of third-party
- 00:05:33 packages we use and we need to install
- 00:05:35 those packages with npm install now this
- 00:05:38 will take a couple of seconds because it
- 00:05:39 installs WebP x various loaders – well
- 00:05:43 work with web pack and so on as a side
- 00:05:46 note if web pack is totally new to you
- 00:05:48 definitely check out some dedicated
- 00:05:50 tutorials i'm not going to explain web
- 00:05:52 pack in this video i'm just explaining
- 00:05:54 how to use this eli to quickly get
- 00:05:56 started with such a workflow now after
- 00:05:59 all these dependencies have been
- 00:06:02 installed we can let run the last
- 00:06:04 command if you remember it it was npm
- 00:06:06 run dev and this will start the
- 00:06:08 development workflow that means it will
- 00:06:11 bundle our project and it will start up
- 00:06:14 a development server so a little server
- 00:06:15 which Lunz runs on our machine driven by
- 00:06:18 nodejs another reason why we needed to
- 00:06:20 install it which will host our
- 00:06:22 application so that we can see it
- 00:06:23 running on our machine without deploying
- 00:06:26 it to an actual server let's have a look
- 00:06:28 at it we see it here in the browser it
- 00:06:31 should have opened a tab automatically
- 00:06:33 otherwise see that localhost 8080 and
- 00:06:36 this is the basic application this
- 00:06:38 template
- 00:06:39 with this is how we can install such a
- 00:06:43 template with this CLI but now let's
- 00:06:45 also have a look what got installed in
- 00:06:48 the first place which folders and files
- 00:06:50 were created for us I'm in webstorm D
- 00:06:54 IDE I'm using for development and of
- 00:06:57 course you could use an a variety or
- 00:06:59 editor like atom sublime which will
- 00:07:01 studio goat they should all work fine
- 00:07:03 and here we see the falls and father's
- 00:07:05 the view CLI created for us when we
- 00:07:08 choose that web pack simple template we
- 00:07:11 get two node modules folder holding all
- 00:07:13 our dependencies like web pack itself
- 00:07:16 and a couple of other dependencies we
- 00:07:18 need for that workflow UJS of course is
- 00:07:20 all included there and we can see a full
- 00:07:22 list of TD dependencies installed here
- 00:07:24 in the package chat Jason as you can see
- 00:07:26 there is only one run time dependency
- 00:07:28 view and a couple of development only
- 00:07:31 dependencies which are needed for that
- 00:07:32 workflow so that's one thing but besides
- 00:07:36 that we also get this source folder and
- 00:07:39 that source folder is important because
- 00:07:40 here we're going to develop our
- 00:07:42 application and now here we already see
- 00:07:44 something very strange this dot view
- 00:07:47 file here now what is that until now if
- 00:07:50 you watch maverick videos we only worked
- 00:07:52 with jsfiddle where we had one single
- 00:07:54 file where the script was in so we would
- 00:07:56 have expected a dot JS file here or
- 00:07:58 simply an HTML file well we do have an
- 00:08:01 HTML file here index.html desert zip
- 00:08:04 file which will actually get served and
- 00:08:06 it's pretty empty but it does have two
- 00:08:08 interesting things it doesn't a div with
- 00:08:11 the ID app well we know this from the
- 00:08:13 chase fill examples and it imports a
- 00:08:16 script so it looks like we're importing
- 00:08:18 some script which will then again take
- 00:08:20 over this ID or this app Dave here and
- 00:08:24 that doesn't it the case the quest will
- 00:08:26 just is well where does this boat touch
- 00:08:28 a script come from this is the bundle
- 00:08:31 created by web pack and it bundles all
- 00:08:33 our scripts in the source folder it
- 00:08:35 starts with the main dot JS file this is
- 00:08:38 just how it's set up you can check this
- 00:08:39 new epic config file here you see the
- 00:08:41 entry point again not going to go
- 00:08:43 through this file in detail but you just
- 00:08:45 see where it starts which loaders it
- 00:08:47 applies to transform these files and
- 00:08:48 what it outputs
- 00:08:50 DeBolt that chairs file which we import
- 00:08:51 in the index.html file
- 00:08:53 so if we have a look at the main dot JS
- 00:08:55 file we see it's relatively simple we do
- 00:08:59 create a view instance there we take
- 00:09:01 over the element here with the app
- 00:09:04 selector but then we do something
- 00:09:06 strange we call this render that method
- 00:09:10 here now what's the render method doing
- 00:09:12 the render method is a built-in method
- 00:09:15 of you instance nose which basically
- 00:09:17 means replace the part you're selecting
- 00:09:20 the Dom here with some other code now
- 00:09:23 the default behavior of UJS is to select
- 00:09:26 a certain part in the Dom like we did it
- 00:09:29 in the averages with chase fill with GL
- 00:09:31 property here so gear step of the app ID
- 00:09:35 for example and then take this Dom as a
- 00:09:37 template where we could use string
- 00:09:39 interpolation and so on but as you can
- 00:09:42 clearly see this div here is pretty
- 00:09:44 empty there's nothing in between we're
- 00:09:46 not having a paragraph where we output a
- 00:09:48 title or something like this so we're
- 00:09:50 clearly not following the approach we
- 00:09:52 solve thus far so what are we doing here
- 00:09:56 instead what we're still selecting this
- 00:09:58 part but the render method now overrides
- 00:10:00 it it tells view jeaious don't use the
- 00:10:03 Dom as your template instead just use it
- 00:10:05 as a hook and now override it with some
- 00:10:07 other template some other HTML code you
- 00:10:10 could say now the render function simply
- 00:10:13 takes an input here which is provided by
- 00:10:15 view chess which is a function which
- 00:10:17 gets executed in the end but the
- 00:10:19 interesting thing here is not how this
- 00:10:20 function works that's a relatively
- 00:10:21 complicated one the interesting thing is
- 00:10:24 what we pass as an argument to this
- 00:10:26 callback function this H function here
- 00:10:28 and that's app which we're importing
- 00:10:30 from the app dot view file now let's
- 00:10:33 open that file and Wow that certainly
- 00:10:35 looks strange here we got a template at
- 00:10:38 the top then we get a script tag and
- 00:10:40 then we get some Styles dot view files
- 00:10:43 are special files in view chests which
- 00:10:45 allow us to store all our template our
- 00:10:48 script and our styles in one file we can
- 00:10:52 therefore split our view KS app into
- 00:10:55 logical pieces components you'll learn
- 00:10:58 about this in one of my earlier videos
- 00:11:00 and each component could live in a view
- 00:11:03 chase file in it excuse me that dot view
- 00:11:05 file and each component of
- 00:11:07 has at least a template so something we
- 00:11:09 render some HTML code we store that
- 00:11:11 between template tags and you always
- 00:11:13 need these template tags and then we
- 00:11:17 have maybe a script we don't need it
- 00:11:19 necessarily but if we want to have some
- 00:11:21 logic we probably do need and probably
- 00:11:24 also optionally we do have some styles
- 00:11:27 we apply to this application that's
- 00:11:29 important these Styles by standard are
- 00:11:31 applied to the whole application they
- 00:11:33 are not scoped to disavow file that we
- 00:11:36 could force this by adding scoped here
- 00:11:39 as an attribute to style just to say
- 00:11:41 this right away with that you're telling
- 00:11:43 you chest please only apply these styles
- 00:11:45 to this file to this template up here if
- 00:11:48 you don't have scoped here they will be
- 00:11:51 applied to your whole application so but
- 00:11:54 back to this template here we do have
- 00:11:56 some HTML code and here one important
- 00:11:58 restriction is that inside of this
- 00:12:00 template we must have only one root
- 00:12:03 element so this div in this case here
- 00:12:06 it's not allowed to let's say I have
- 00:12:08 another div next to it this will throw
- 00:12:10 an error because you must only have one
- 00:12:12 root element a lot of talking about
- 00:12:15 these view files but what does it do
- 00:12:18 here in the end well web pack has a
- 00:12:21 special package the view loader which
- 00:12:23 knows how to handle dot view files what
- 00:12:25 the view loader will do is it will take
- 00:12:28 this file transform our template to HTML
- 00:12:30 code kind of you can of course represent
- 00:12:32 HTML elements with JavaScript code it
- 00:12:35 transforms it to JavaScript code I
- 00:12:37 wanted to say right so to JavaScript
- 00:12:40 code it will also pack in our script
- 00:12:43 part here it will add our styles to the
- 00:12:46 top of our index.html file in the Hat
- 00:12:49 section and therefore it allows us since
- 00:12:52 we only have JavaScript here all this is
- 00:12:55 transformed to JavaScript to bundle this
- 00:12:58 Q R and pet to pass this JavaScript code
- 00:13:01 to the render function which needs
- 00:13:02 JavaScript code which it renders in the
- 00:13:04 Dom in the end which it executes in the
- 00:13:06 end it does all there for us therefore
- 00:13:10 one single bundle gets created but it
- 00:13:12 gives us the nice possibility of
- 00:13:14 splitting up our code into multiple
- 00:13:16 files of using this dot view fault
- 00:13:19 concept to have a
- 00:13:20 clear separation of the different
- 00:13:22 components in our application now here
- 00:13:25 we're not really using a component this
- 00:13:27 is kind of our root component if you
- 00:13:29 want to think of it
- 00:13:30 we're just taking this EPP you faulty
- 00:13:33 template in the stripped of it and we're
- 00:13:35 rendering this and replacing our
- 00:13:37 selected part in the Dom here with the
- 00:13:39 app selector but in the next video you
- 00:13:43 will see how we can use dot view files
- 00:13:45 to actually create model components and
- 00:13:48 work with them I hope this video was
- 00:13:50 helpful for learning about the view CLI
- 00:13:53 how to quickly get started with a better
- 00:13:56 workflow with a local project using
- 00:13:59 webpack and to at least dive into the
- 00:14:02 basics of these strange dot view files
- 00:14:04 which make life really easier in the end
- 00:14:06 would be great to see in the other
- 00:14:08 videos bye