Coding

Vue.js – Common Questions (and Answers!)

  • 00:00:01 welcome to this video where I want to
  • 00:00:04 have a look at some common beauteous
  • 00:00:05 questions I see a lot this is by no
  • 00:00:08 means complete just some questions that
  • 00:00:10 came into my head please share any other
  • 00:00:13 questions you have in the video comments
  • 00:00:16 I probably won't answer them there but I
  • 00:00:19 might create a second at firt and other
  • 00:00:21 parts of this series in the future so
  • 00:00:24 let's dive right into it
  • 00:00:29 let's start with the first question I
  • 00:00:31 see a lot do I need do you need a
  • 00:00:34 complex build setup or workflow do you
  • 00:00:37 need a setup with web pack and Babel and
  • 00:00:40 all these things the answer is it
  • 00:00:42 depends on what you're building
  • 00:00:44 you can absolutely drop in or drop you
  • 00:00:47 into you HTML pages where you want to
  • 00:00:50 use it just import the UJS and you can
  • 00:00:53 start using it you can use the view seal
  • 00:00:56 I'd create a project with it this gives
  • 00:00:59 you a feature which workflow with zero
  • 00:01:01 setup that you can still customize 100%
  • 00:01:04 since you get access to the underlying
  • 00:01:06 web pack configuration so this is in my
  • 00:01:10 opinion the best approach especially if
  • 00:01:12 you're building single page applications
  • 00:01:14 there you have one workflow that simply
  • 00:01:17 works and that's continuously updated by
  • 00:01:20 the people developing it you can also
  • 00:01:23 build your own workflow with web peg and
  • 00:01:25 Babel and so on this of course is a good
  • 00:01:27 solution if you need a highly customized
  • 00:01:30 setup right from the start but in most
  • 00:01:32 cases to view seal is best one exception
  • 00:01:36 our multi-page applications which you
  • 00:01:38 also can build with UJS you're not
  • 00:01:40 limited to single page applications
  • 00:01:42 there you often work with the drop in
  • 00:01:45 import because it's convenient you just
  • 00:01:47 add it to the web pages where you want
  • 00:01:48 to use some view feature and then you
  • 00:01:50 just create some view instances and
  • 00:01:52 start controlling parts of the screen so
  • 00:01:55 that's the general theme drop-in it's
  • 00:01:57 great for multi page applications on
  • 00:01:59 smaller projects medium-sized and bigger
  • 00:02:01 projects use the CLI if you got highly
  • 00:02:04 specific requirements use the custom
  • 00:02:07 setup from the start but again you can
  • 00:02:09 customize a seal I project you so this
  • 00:02:12 might always be the best approach when
  • 00:02:15 our question see a lot is should I use
  • 00:02:18 es6 or other next-gen features or es5
  • 00:02:22 because you can write view apps with
  • 00:02:25 both syntaxes you can use function or
  • 00:02:28 arrow functions you can use whichever
  • 00:02:31 features you want in a workflow that
  • 00:02:34 supports it like for example workflows
  • 00:02:37 created with the view CLI and there is
  • 00:02:39 no right or wrong here really use the
  • 00:02:41 syntax you
  • 00:02:43 often next-generation JavaScript makes
  • 00:02:46 many things easier makes it easier to
  • 00:02:50 solve certain problems so that would be
  • 00:02:52 my recommendation go with
  • 00:02:54 next-generation so es6 Plus JavaScript
  • 00:02:57 but in the end you are free to use
  • 00:02:59 whichever you feel more comfortable with
  • 00:03:02 important when using view chess as a
  • 00:03:05 drop in import so outside of a bigger
  • 00:03:09 build with flow you're limited by the
  • 00:03:12 capabilities of the browsers you're
  • 00:03:14 building for most browsers don't support
  • 00:03:16 all next-gen features yet so your may be
  • 00:03:19 forced to use es5 then here's another
  • 00:03:23 interesting question view instances vs.
  • 00:03:27 view components we have both in view
  • 00:03:30 apps we get our instances and components
  • 00:03:33 what's the difference now an instance
  • 00:03:35 allows us to control some Dom in an HTML
  • 00:03:39 file with that l property now
  • 00:03:42 theoretically that's not the only thing
  • 00:03:44 I instance can do you can use an
  • 00:03:46 instance without connecting it to the
  • 00:03:47 Dom but typically you will use that L
  • 00:03:49 property to say hey in this Dom I want
  • 00:03:53 to control this part with my instance
  • 00:03:56 and now I can use features like that
  • 00:03:58 templating syntax with the double curly
  • 00:04:00 braces to output my text property which
  • 00:04:03 are all to manage the instance and if
  • 00:04:05 you're starting off with a view
  • 00:04:07 you're always or off just working with
  • 00:04:10 one instance where you have methods and
  • 00:04:12 some data and computed properties maybe
  • 00:04:14 and check out my view serious or course
  • 00:04:17 if you want to learn more about this
  • 00:04:18 where you have all these things where
  • 00:04:20 you control parts of the Dom with that
  • 00:04:23 instance this is especially useful for
  • 00:04:25 multi-page applications where you maybe
  • 00:04:27 want to control some parts off the Dom
  • 00:04:30 which was rendered by the server with a
  • 00:04:32 couple of different view instances now
  • 00:04:35 components work well together with
  • 00:04:38 instances we also have our DOM and HTML
  • 00:04:41 file but now we maybe have a hook so
  • 00:04:45 some Dom code some HTML code which
  • 00:04:48 should act as a hook for a view instance
  • 00:04:51 which then in turn uses a couple of
  • 00:04:55 components
  • 00:04:56 its own template so we could replace
  • 00:04:59 that div with a template to find in the
  • 00:05:01 instance and start using these
  • 00:05:03 components in that template maybe it
  • 00:05:06 becomes a bit clearer with this graphic
  • 00:05:07 we got our Dom here on the right with a
  • 00:05:10 couple of divs this is the HTML code we
  • 00:05:13 wrote and we control parts of that Dom
  • 00:05:17 but not everything with a couple of
  • 00:05:18 different view instances and in the
  • 00:05:21 template of each instance so for example
  • 00:05:24 between the div tags where we have ID
  • 00:05:26 products we could start using our
  • 00:05:29 components these components are created
  • 00:05:32 with the view component method and they
  • 00:05:36 have a template and work a lot like
  • 00:05:38 instances but are reusable instances are
  • 00:05:42 not reusable instances are always
  • 00:05:44 connected to just one place in the DOM
  • 00:05:47 and if you have something like a card
  • 00:05:50 you know these cards material design
  • 00:05:52 cards you know from apps they look
  • 00:05:54 beautiful if you have something like
  • 00:05:55 that which you want to reuse probably
  • 00:05:57 let's say in a V for loop that doesn't
  • 00:06:00 work with instances it does work with
  • 00:06:02 components though so components allow
  • 00:06:04 you to create reusable building blocks
  • 00:06:07 for your new apps what about our
  • 00:06:11 third-party JavaScript libraries you
  • 00:06:14 want to use in your view app you can do
  • 00:06:16 that you have a couple of options you
  • 00:06:19 can add script imports either to a CDN
  • 00:06:21 or to a local file in the index.html
  • 00:06:24 file and the Sol's refers to multi-page
  • 00:06:27 applications where you add to that file
  • 00:06:29 where you need to you well package or
  • 00:06:31 you use a local import so you have
  • 00:06:34 downloaded a file and now you import it
  • 00:06:38 directly into your javascript file with
  • 00:06:40 the import statement in that file if
  • 00:06:42 you're building view apps you use import
  • 00:06:45 statements in your JavaScript files all
  • 00:06:47 the time and this now applies mostly to
  • 00:06:49 single page apps because for drop in
  • 00:06:52 imports and multi-page apps
  • 00:06:54 import statements aren't understood by
  • 00:06:56 most browsers but if you have a build
  • 00:06:58 workflow that bundles everything
  • 00:06:59 together in the end this will work and
  • 00:07:01 this is how you then import our
  • 00:07:03 JavaScript packages which will just be
  • 00:07:06 included in that big bundle at the end
  • 00:07:08 bye
  • 00:07:09 adding such a import of course you can
  • 00:07:11 also use NPM or yarn so dependency
  • 00:07:14 managers to install and download these
  • 00:07:16 packages and then still import them wire
  • 00:07:18 import statement and for CSS it's pretty
  • 00:07:21 similar there we can also use links in
  • 00:07:25 index.html or in HTML files in general
  • 00:07:28 pointing to you CSS libraries lying on
  • 00:07:32 some CDN or locally on our web server or
  • 00:07:36 we use a local file that we import with
  • 00:07:40 the import statement into our JavaScript
  • 00:07:43 file now that sounds strange importing
  • 00:07:46 CSS into a JavaScript file well this has
  • 00:07:51 one important prerequisite you need to
  • 00:07:53 be using a workflow that supports it for
  • 00:07:56 example one created with the view CLI
  • 00:07:59 there if you use the web pack setup it
  • 00:08:01 supports the import of CSS files
  • 00:08:04 it doesn't actually import them and mix
  • 00:08:07 them with JavaScript instead it makes
  • 00:08:09 web pack aware of the existence of that
  • 00:08:11 file and if your workflow then has the
  • 00:08:15 appropriate modules to handle that file
  • 00:08:17 type which the default CLI created web
  • 00:08:20 pack setup has then this will also
  • 00:08:23 include these CSS file in your final app
  • 00:08:28 automatically make sure it's injected
  • 00:08:30 into your index.html file and everything
  • 00:08:33 off like that so this is all managed for
  • 00:08:35 you by just adding a import qsr CSS file
  • 00:08:38 into your javascript file and only in
  • 00:08:41 one file is enough this will already
  • 00:08:43 include it and of course here you can
  • 00:08:45 also use package managers to download
  • 00:08:47 that CSS library like bootstrap for
  • 00:08:50 example and then add that import
  • 00:08:52 everyone can see your code now this is
  • 00:08:55 something I also hear a lot and it's
  • 00:08:57 true if you open the browser developer
  • 00:09:00 tools and you have a look at the source
  • 00:09:03 tab there you can access the JavaScript
  • 00:09:06 files that are powering the page you're
  • 00:09:08 currently on and there's nothing you can
  • 00:09:11 do JavaScript runs on the browser you
  • 00:09:14 can't hide it it's not pre compiled so
  • 00:09:17 it's not kind of unreadable everyone can
  • 00:09:20 read it you can't avoid that
  • 00:09:22 you have to ensure that you don't put
  • 00:09:24 security relevant or sensible
  • 00:09:26 information into that file and that's
  • 00:09:29 about the only thing you can do
  • 00:09:31 unfortunately you just have to be aware
  • 00:09:33 of this there's no way to hide it it's
  • 00:09:35 visible to everyone can I use Redux with
  • 00:09:39 you chase a question I get a lot yes you
  • 00:09:41 can read X is not a library which is
  • 00:09:44 closely tied to react though it's often
  • 00:09:47 used in conjunction with it and you can
  • 00:09:49 implement redux into view though my
  • 00:09:51 recommendation would be to use the view
  • 00:09:53 specific implementation view X it's by
  • 00:09:57 the same developers as view and
  • 00:09:59 therefore nicely integrates into view
  • 00:10:02 applications and works nicely together
  • 00:10:04 with you so have a look at view X I also
  • 00:10:08 got a serious on that and I do cover it
  • 00:10:10 in my view course on udemy two links to
  • 00:10:13 both can be found in the video
  • 00:10:14 description of course and with that you
  • 00:10:17 get a powerful tool for managing state
  • 00:10:19 on a in a central place in your view
  • 00:10:23 application can you use view with PHP or
  • 00:10:26 laravel framework a PHP framework or
  • 00:10:29 node or any other server-side language
  • 00:10:31 or framework the answer is yes view runs
  • 00:10:35 in the client in the browser it doesn't
  • 00:10:38 care about your server-side framework or
  • 00:10:41 language still we can differentiate
  • 00:10:43 between single page applications and
  • 00:10:45 multi page applications and let me
  • 00:10:47 explain what the difference then is in
  • 00:10:49 both cases you can use any server-side
  • 00:10:51 back-end however so for single page
  • 00:10:54 applications view controls the entire
  • 00:10:57 front end and we only get one file the
  • 00:10:59 index.html file from the server for
  • 00:11:03 multi page applications we only control
  • 00:11:05 parts of the views which are rendered by
  • 00:11:08 the backend now for single page
  • 00:11:10 applications our server sends that
  • 00:11:13 single-a index.html file where the view
  • 00:11:16 app then runs and controls the entire
  • 00:11:17 front end and all further communication
  • 00:11:20 where we might need to store data on the
  • 00:11:23 server or fetch data from there happens
  • 00:11:25 with a restful api which and that's
  • 00:11:28 important could also run on a different
  • 00:11:30 server view really doesn't care now for
  • 00:11:34 a multi page application of pro
  • 00:11:36 we also got a server and there we render
  • 00:11:39 our views so we sent multiple pages for
  • 00:11:42 different requests and if we click on a
  • 00:11:45 link there for example we send a new
  • 00:11:47 request to the server and get back a new
  • 00:11:49 view and then they would the library the
  • 00:11:52 framework runs in sum or in all of these
  • 00:11:55 views that's totally up to you so you
  • 00:11:58 then use view and there you don't have a
  • 00:12:01 restful service because view is now
  • 00:12:04 communicating with your view and if you
  • 00:12:06 need to directly communicate to your
  • 00:12:08 server you would do this with a HX
  • 00:12:10 request providing one restful endpoint I
  • 00:12:13 guess but in general the the approach is
  • 00:12:16 a different one because the server plays
  • 00:12:18 a more important role when it comes to
  • 00:12:20 rendering the views the front-end it
  • 00:12:23 doesn't do that at all in a single page
  • 00:12:25 application approach my state is lost
  • 00:12:28 after page reloads that's also something
  • 00:12:30 I hear a lot and it's true if you're
  • 00:12:33 coming from a traditional web
  • 00:12:35 application web page environment you
  • 00:12:38 used sessions to manage the user state
  • 00:12:40 if the user is locked in or something
  • 00:12:42 like that now for single page
  • 00:12:44 applications and that's important it
  • 00:12:46 only applies for that of course if your
  • 00:12:48 server is closely connected to the front
  • 00:12:51 because it's rendering to use so if you
  • 00:12:52 have a multi page application then you
  • 00:12:54 might still use sessions but for single
  • 00:12:57 page applications the front-end the
  • 00:13:00 single page is kind of detached from the
  • 00:13:02 backend so we don't use sessions there
  • 00:13:05 we can't really do that the backend is
  • 00:13:07 stateless instead we get to our options
  • 00:13:11 for storing data in state one is local
  • 00:13:14 storage and one is of course a
  • 00:13:16 server-side database
  • 00:13:17 local storage is a client-side storage
  • 00:13:20 mechanism like cookies a bit it runs on
  • 00:13:23 the browser and it can be accessed
  • 00:13:25 through JavaScript you can't directly
  • 00:13:27 access it from the server or anything
  • 00:13:29 like that it's a simple key value store
  • 00:13:33 so complex data can't be stored there
  • 00:13:35 but it's great for example for storing a
  • 00:13:38 JSON web token which is often used for
  • 00:13:40 authentication in single page
  • 00:13:42 applications and when your view app
  • 00:13:45 starts you can have a look at local
  • 00:13:47 storage and see if
  • 00:13:49 and which data already is in there and
  • 00:13:51 possibly initialize your view app with
  • 00:13:54 that data
  • 00:13:55 hence keeping the old state now not all
  • 00:13:59 the state should be stored here I said
  • 00:14:02 that we don't use sessions but of course
  • 00:14:04 on your restful api you probably have a
  • 00:14:07 database this database is fully under
  • 00:14:10 your control since it runs on the server
  • 00:14:12 it's accessible only from the server
  • 00:14:14 which can be a security advantage and
  • 00:14:16 you can use any database you want you
  • 00:14:19 can store any types of data you want
  • 00:14:21 you're not limited to a key value store
  • 00:14:24 here server-side database is the right
  • 00:14:27 choice for any data that needs to be
  • 00:14:29 long time persisting so let's say you
  • 00:14:33 plan on storing the orders of a user you
  • 00:14:38 could do that in local storage but
  • 00:14:39 whenever the user uninstalls the browser
  • 00:14:42 or cleans up their the cache and the
  • 00:14:44 storage this will be lost for some state
  • 00:14:48 this is OK for our state it is not and
  • 00:14:51 that should then be stored in your
  • 00:14:52 server-side database can you host your
  • 00:14:56 app on hiroko etc so on hosts that run
  • 00:15:02 server-side languages for example Doge
  • 00:15:05 is and so on well let's have a look at
  • 00:15:07 what we get when we build our view
  • 00:15:10 application and with that I'm again
  • 00:15:12 talking about a single page application
  • 00:15:14 multi page applications you host these
  • 00:15:17 on a server which supports the
  • 00:15:19 server-side language you're using
  • 00:15:20 because it's your server site that's
  • 00:15:22 rendering the views single page
  • 00:15:24 applications are detached from the
  • 00:15:26 backend though so you can host them
  • 00:15:28 separately if you build your view
  • 00:15:31 application for production for example
  • 00:15:34 in a view CLI project setup using
  • 00:15:36 webpack then you get a couple of files
  • 00:15:39 index.html filed a couple of JavaScript
  • 00:15:42 files and maybe a couple of style files
  • 00:15:44 all these files are static files
  • 00:15:47 there's no server-side code in there the
  • 00:15:49 JavaScript file doesn't use nodejs it
  • 00:15:52 will run in the browser eventually so
  • 00:15:55 therefore we don't need a host that is
  • 00:15:57 capable of executing server-side code
  • 00:16:00 static host like AWS as free or firebase
  • 00:16:04 hosting deaths so search for static web
  • 00:16:08 host when you're looking for a host for
  • 00:16:11 your view single page application here's
  • 00:16:15 another common problem I see a lot my
  • 00:16:17 routes don't work after deployment so
  • 00:16:21 here are you the user the user using the
  • 00:16:23 web page and the server you enter a URL
  • 00:16:26 and what you get back is a page where
  • 00:16:30 your viewer application runs and I'm
  • 00:16:32 talking about a single page application
  • 00:16:33 again here for multi page applications
  • 00:16:36 you're not going to run in this problem
  • 00:16:38 because all the routing is done on the
  • 00:16:40 server there for your single page
  • 00:16:42 application however the routes are
  • 00:16:45 stored on the front-end in your view app
  • 00:16:48 so if you click somewhere in your view
  • 00:16:50 app and you access let's say slash
  • 00:16:52 products then this works because the
  • 00:16:55 view app knows the routes because you
  • 00:16:58 defined them there and by clicking on a
  • 00:17:01 link where you always then add some
  • 00:17:03 special routing directive or something
  • 00:17:05 like that view captures that click and
  • 00:17:08 doesn't really send a request to the
  • 00:17:10 server but instead handles it internally
  • 00:17:13 checks if it knows the route and
  • 00:17:15 re-renders the page accordingly the
  • 00:17:18 server doesn't store any routes doesn't
  • 00:17:21 have any routes now if you click the
  • 00:17:23 refresh button of your browser you'll
  • 00:17:25 face an issue all of a sudden view has
  • 00:17:28 no chance of handling that route because
  • 00:17:32 if you refresh the page and you request
  • 00:17:34 to send to the server and that request
  • 00:17:36 targets slash products now here we then
  • 00:17:41 get a 404 error because the server
  • 00:17:43 doesn't know that route the problem is
  • 00:17:46 we would know it in the view app and to
  • 00:17:48 give you the chance of taking over and
  • 00:17:51 looking for the route we need to set up
  • 00:17:53 a rule a configuration on the server to
  • 00:17:57 always return the index.html file which
  • 00:18:00 hosts our view app even for 4 or 4 cases
  • 00:18:04 this means that instead of a 404 error
  • 00:18:08 we now again get the index.html file
  • 00:18:11 with the view app where we can look for
  • 00:18:14 that specific route and if it finds it
  • 00:18:17 it can render the according page and if
  • 00:18:19 you still want to provide a 404 page for
  • 00:18:22 routes that aren't defined there either
  • 00:18:24 you would need to add a catch-all route
  • 00:18:26 in your view router setup so a route
  • 00:18:28 that catches all unknown requests and
  • 00:18:31 then renders some default page from
  • 00:18:33 within your view application so that was
  • 00:18:36 it I hope this was helpful if you watch
  • 00:18:38 the other Q&A videos you might have seen
  • 00:18:41 some well connections as I mentioned at
  • 00:18:45 the beginning of the video share any
  • 00:18:46 other questions you have in the video
  • 00:18:48 comments
  • 00:18:49 I won't reply there I can't offer any
  • 00:18:51 help there but I will note them and I
  • 00:18:54 will see if I can create some future
  • 00:18:57 videos covering these questions I hope
  • 00:18:59 you enjoyed the video and I hope to see
  • 00:19:01 you back here on a Quetta mind in the
  • 00:19:04 future bye