The Quasar Show - Episode 1

[Music] my name is luke diebold i'm part of a group of web developers that build high performance view apps in record time with a framework called quasar we don't spend months on designs that take years to test and end up confusing our customers we use the material design spec because we already know that it works since we're community driven we have to be smarter than corporate frameworks we do this by insisting on top class web components striving to use best practices and pushing ourselves to raise the bar of what's possible on the web most component libraries do one thing and leave you to figure out the rest we have a vision that is much much bigger an unparalleled experience building front-end apps that work on all platforms we are crazy developers and there is nothing we can't build hello everybody and welcome to the very first episode of the quasar show in this show we're going to be covering quite a bit i'm going to show you some really cool components we're going to be looking at the news we're going to showcase some really cool projects that people have built and are actually out in the real world some real world quasar projects i'm going to talk about architecture at the end of this episode so stay through to the end if you're interested in that kind of thing it's going to be packed full of some fun exciting quasar related stuff and i honestly can't wait to get started so once again my name is luke debold and by the way if you like this kind of stuff then check out quasarcast.com register register an account there and then you can watch all of my videos that i have related to quasar that's more tutorial type stuff this is more of a show just to give you a bit of a taste to dip your toe in the water of what's out there in the quasar world today hmm there's a lot of exciting things happening in the quasar and view community so let's take a look at some of those things first of all quasar vision 2 beta is out a lot of you might have known this has been out for a little bit now but quasar version two has caused a little bit of confusion about what it means in relation to the versions of view okay so quasar version two is equal to quasar with view three under the hood okay so version two uses view three under the hood version one of quasar uses view two under the hood all right so i just wanted to um distinguish between that and let's go ahead and look at what it looks like to actually install a quasar version 2 project quasar creates and how about we call this quasar dash next and we want to say branch is equal to next however if quasar version 2 is out of beta you won't have to add this part here so let's go ahead and run that apparently that directory already exists so i'm guessing i already made that project so i'm just going to say yes and then leave everything as the default and yes we will use that use yarn so while that's installing let's move on to the next thing okay the upgrade guide so i just wanted to give you a brief look at quasar version 2's upgrade guide so if you go to the quasar docs and click on this little button here that's going to take us there and the upgrade guide raspberry has done an amazing job on it it's very concise it's um very in-depth however a lot of the stuff in this upgrade guide isn't even going to affect you it's actually quite a smooth upgrade and what i did was actually created a video that basically is an app that breaks as much as possible due to the latest upgrades and in this video series we go through upgrading that app to the next version of quasar so you can follow along with that using your own app if you like let's see if this is installed yes it is so let's jump into quasar dash next and then quasar dev and that's how we open up a development server using the latest version of quasar it's that simple all we really had to do is add that um the next flag and here it is that's a working version of quasar and that's actually using vue 3 under the hood very exciting stuff oh i can cross out a couple of these things here and let's move on next jeff is working on extension so i wanted to let you know let you all know that a lot of the extensions that you know and love like q calendar the q media extension a lot of the official quasar extensions um are actually built by jeff and he's actively working on them and working on getting them to quasar version two however there is one extension which is the markdown extension that can't work yet you twin due to an issue with view three so the view three should be um should be fixed in version 3.2 and then when oh sorry 3.1 and when that is released um jeff will then be able to update this extension and get it working but all of the others should be available uh when stable is released if not it'll be available soon after when stable is released so moving on kalo is working on typescript support so um the wonderful callow is working on making sure that typescript basically permeates throughout the entire quasar application and this will mean that it's going to be easier to catch errors for you for those of you that love typescript it's going to be easier for you to type things using quasar very exciting stuff and if any of you are very experienced with typescript then i highly recommend contacting calo and maybe giving him a hand because this is a monstrous job my hat's off to him for um taking it on because i certainly don't have the chops to do it all right so moving on what about ssr so a lot of you might be wondering why is ssr not available in quasar version 2 beta yet the reason is there's been a few road stops due to issues with vue 3 however most of those issues have been recently resolved and so now that they're resolved um ssr for quasar will be released by the end of this week either then or sometime next week so you can expect ssr for quasar version 2 beta very soon exciting stuff all right so moving on the last thing i wanted to do for the quasar section here is basically show you the api explorer in the docs so check this out if i come down to here it is here api explorer i can just type in the name of a component here like q ah how about the data table what is it q table and it just automatically brings up the api for that component so how cool is that we can also do that for q card and straight away just brings in the api q um what's another one q our list and there we go super easy to use oh my favorite q select that's got a really complex api i'm always looking it up and there it is there and i'm going to have this tab open all of the time now so moving on to view news so in the views ecosystem there's been a couple of new um changes vt version two is now released so what is v veed is basically a bundle it's kind of like an alternative to webpack however it bundles things instantly or not instantly within milliseconds though so that's very exciting i'll show you what it looks like in a second and it is now framework agnostic with version two that basically means that it's gonna work with other apps like um react preact um stuff like that can all work with veet it's got first class css support so you can say at import and then the name of a css file so for example something that's in your node directory in your node modules and it's also got experimental ssr so you're not going to have to wait a long time for your ssr application to go into development mode very exciting and by the way there's going to be a quasar um a quasar plug-in of 4v it's actually currently being worked on so that's very exciting i can't wait imagine being able to say quasar dev and then being able to develop literally quicker than you can open the browser very cool stuff what else now vuex version 5 has just been released um once again this is in the view ecosystem this doesn't relate directly to quasar however it probably will at some point so view x version 4 was mostly for backwards compatibility so if you want to upgrade from view 2 to view 3 you can do it very quickly by using vue x version 4 because the api between viewex version 4 and 3 is virtually identical however the vuex community have all these new ideas and they basically want to push the technologies forward for state management which is why they're also working on a vuex version five okay view x version four was to make upgrading easier view x version five is to introduce some cool new features and just cool new stuff so there we go that's the latest in the quasar and view community i hope you enjoyed this one and i'll see you in the next section let me be real with you for a second when i first learned about the composition api it kind of scared me a little bit i felt like it kind of threatened the way that i was going to write code because i was so used to doing things using the options api which just it felt right to me it's one of the reasons i loved you in the first place so i shied away from even experimenting with the composition api for quite a while which is not cool you should be at least trying these things but anyway i still jumped on the hype train and pretended that you know i loved it which i kind of feel bad about now you know you should be honest with yourself um in the dev community and it gives you a chance to be proved wrong by other people so anyway i decided to actually play around with the composition api when quasar version 2 beta came out and i was really surprised at just how simple it is to use it took me about 20 minutes to half an hour to really start getting used to it and i know honestly i'm not a rock star developer or anything like that and i found that the more i delved into it the more i started to see actually this makes a lot of sense um especially in terms of extracting functionality like pulling things out of large components sticking them somewhere else if not just to clean things up often so that you can reuse that functionality somewhere else in your application and you know we have mix-ins but they've always felt kind of gross to me so yeah i started playing around with it more and i started seeing how it would work with um at work we deal with very large component files at work and i'm starting to see when i move to version two of quasar it's actually going to be amazing to be able to pull these components apart and make it just so much easier to use my editor and click through to these different files so that's just a long-winded way of me saying i want to show you a basic example of how to use the composition api just because you haven't touched on it yet and maybe you'll learn something along the way in my and if you're not on board with the composition api maybe you'll end up loving it after this video i certainly hope so so let's have a crack at this by jumping into our editor and this is just a quasi-next project that we created before in the news section and the first thing i'm going to do here is um add a setup method here and this is how we start using the composition now api and basically anything we return here is going to be available within our template okay so the first thing i'm going to do is we're going to make a counter and i'll say const count is equal to a reference to zero so i'm going to pull out of view ref okay so whenever you want a reactive property you have to say ref as if as if to say reference to zero and now i can make that available here and i can come up here we'll get rid of the image and say q dash button and we'll give it a label equal to count and there we go it's working and now in order to actually implement the functionality the functionality where when you click it it um increments we can say add click count plus equals one so there we go we're using the composition api straight away not too difficult this is just how you would model data but let's go a little bit deeper now maybe we want this functionality to sit somewhere else what we can do is we can cut that and let's create a function called increment counter and now i'm going to create a variable called increment counter and that is going to be equal to a function and we can simply say here count plus equals one however whenever we're referring to a reference in the composition api we then have to say dot value so rather than just saying count we say count dot value save that and i might have to refresh the page here looks like i'm doing something wrong i need to actually expose that function as well so that it's available within the template all right cool increment can have i spelt it right refresh the page yes and there we go that's working for us now the next thing you might want to do is have a computed property so let me just add like a break here and then we'll say for example i don't know how about count squared and that's going to be a computed property so we can pull out of here computed and then i can come down here and say const count squared is equal to computed and then we simply pass through a function there and now we can say um count dot value multiplied by count dot value now let's expose count squared like so what have i done wrong here and that needs to be returned there we go and it works um however this break isn't working so we might have to put that inside of a div oh it's got to do with flex you know what it doesn't matter so there we go now we've got count squared as well that's how we use references so that's basically like having data using the options api and that's a function there and then we've got a computed property but here's the cool part now we can start putting that into its own file especially if this gets a little bit overwhelming so i'm just going to add it in here to keep things simple and we'll call this use count.js export default and then what i'll do is import up here reference and computed those two things that we were using before from view and there we go now i'm going to come back here and i'm just going to cut all of this so all of this functionality before the return and then i'll come back into use count and paste it in there and now let's basically format all of this correctly and so count is equal to a reference to zero and what i might do is make this available everywhere by saying const count is equal to a reference to zero and then i can just use that directly there and now all of this is still going to work because it's just referencing count over here all right so then we've got count squared computed property i think that's all that i need to do now check this out i can come up here and say import use count from components slash use count and then all we have to do is we can get rid of all of this and say dot dot use count and it's basically taking what's sitting inside of our use count um object we just created and whacking it directly in here so let's refresh the page and it still works how cool is that extracting this functionality is so ridiculously simple using the composition api and this is just the beginning i've only just started playing around with it i'm sure that there's a whole bunch of other cool things um that i haven't even picked up on yet using the composition api so i just wanted to take a moment to share that with you i can't wait to start using this at work and hey let us know in the comments if you like the composition api what you like about it what you don't like about it and we can discuss so thank you for watching this segment i'll see you in the next one opencourt.com built by caro sometimes it's nice to see what other people in the community have built with quasar because it gives you an idea of what's possible and it shows you how clean a quasar app can be and i always love seeing quasar components out in the real world so in order to find this site i'm about to show you i just went to discord and looked at the i made this section and i found this app called opencoret.com and it is really really cool check this out so straight away we've got a really nice landing page here i really like it i don't know if this was built with queries it looks like it could have been and we've got um a little our messenger thing to continue using messenger meaning that you can get in contact with the person that created the site so that's really cool and let's go ahead and click on get started and i've already created an account so i'm going to go whoop let's come back to sign in so i'll log in there like that enter my password and then click login it's it's very nice as well so beautifully built and check this out i already made like an invoice behind the scenes but let me just show you how i did it so you can have an idea of what it looks like to see quasar in the new in the real world very beautiful use of cards very very beautiful i love it um so if we come over here to like a sale for example i can say new sale and how about i put a keyword like platter i think was the one that i had before and there we go you can see that it does a search behind the scene see we've got the spinner there oh so nicely built i can't get over this a contact how about we can add a new one on the fly so daniel may we can click on this plus button here and it will automatically add that contact my address and i'm just gonna like copy paste that in issue date let's say i issued it today ah so click on there and then the due date is sometime next month this is a joy to use transaction type let's just say um an invoice remarks i don't know no remarks and terms no term this is this is just so wonderful transaction we can also automatically create a transaction number there we go it does it for us and we can even send an invoice to the client so i've seen apps like this in the past and i can honestly say i've never seen one that is done this cleanly and it's this snappy too so there we go we get a beautiful clean um looking invoice there and i can go ahead and say save this oh total amount must not be zero oh that's my bad i accidentally didn't put something in very nice error message as well so how about we set it to 70 dollars there we go confirm that save it and we can save end approve or just save it so let's go save and approve and once again the whole thing is just so snappy and beautiful so opencoreit.com you should definitely check it out have a play with this and actually look at the pricing it is surprisingly um surprisingly well priced the standard is only five bucks a month um 9.99 for professional i'm i would be really happy with that and i'm actually considering when i start accepting money for quasar cast using something like this would be really cool to actually use a quasar app behind the scenes so really cool and i just wanted to showcase that to you guys um and who's the person that created let me just take a quick moment to um get you this guy's name it looks like his name is um cairo k-e-r-o i don't know what his real name is but there you go open corey.com really cool there are a few components in the quasar world that just don't get enough love and one of them for me is the q skeleton component which makes the the user experience so much nicer because it lets the user know when something's loading on the back end but i'll show you that in a second and the other one is the cue menu component which basically easily turns anything into a menu i absolutely love it use it all over the web and it only takes me about two minutes to actually show you that component so this is really exciting check this out we'll start off by deleting the image here and we'll say q dash skeleton to begin with oops on so let's save that all right it doesn't look like much yet so how about we give it a width equal to 200 and we'll probably have to say pixels there and then a height that is equal to 100 pixels and there we go that is the q skeleton component it doesn't look like much but when you start combining it with other q skeleton components it's really cool check this out so let's throw this inside of a q card and then we'll throw it inside of a cue card section q card dash section save that and now we can see that something within that card is loading another thing you might want to do then is add some buttons as well so let's say cue card actions and then down here instead of a q skeleton with a width and a height we can actually say the type is equal to a queue button so check it out it automatically creates one that represents a cue button so let's add another button under there maybe give that a class with q dash margin left of s'more and there we go this is a card that is currently being loaded now what about when it's done loading so what you might want to do is say for example v if is equal to loading and let's go ahead and create that variable we will need to pull out ref and then we can come in here and say setup and then ref um false so then we'll say loading is equal to ref false oh sorry i'm building this whole thing backwards and then we can return loading like so save that and we want to say if it's loading so that should actually be true by default my bad and there we go so if it's in a loading state we will show the q skeleton component and in fact instead of putting it out on the cue card how about we put that inside of a div something like this yeah there we go we get the same thing but it's just a little bit easier to um activate and deactivate the skeleton component now i'm going to copy paste that down and now i'm going to say if it's not loading then instead of a skeleton component we'll have the actual content so how about this we just say for example let's have a div with a width and a height so something like this style is equal to width um 200 pixels and a height of 100 pixels there we go and then we can say class is equal to oh we actually don't even need a class here i might just throw some lorem ipsum directly in there that's probably too much so let's delete a little bit of it and see what that looks like and let's set loading equal to false all right there we go starting to look good so how about we have a couple of real buttons now so q dash button q dash button we can get rid of this type section here and we'll leave the class there and how about the label for this is i don't know that could be delete and then label for this could be something like edit all right so i might have to refresh the page to get this working oh i've done that in the wrong section so i'm going to copy that control z until we're back to where we were and then paste it in the right section and there we go so we've got a card with delete and edit last thing i'm going to do is make those flat because that that's just a slightly better style inside of a card all right cool now what we can do is set it to true by default so we're back to the loading version and just to sort of mimic a request here we can set a timeout of i don't know 1500 so that'll be 1.5 seconds and then we can say loading.value is then equal to false one and there we go refresh the page and now the user knows that it's loading and it's just a really nice ui experience so they can get ready to click before the things on the page have even finished loading yet so i reckon that is a really cool component now the next one i want to share with you is the q menu component so check this out i use it all of the time especially for login for pages where you're logged in and you've got that little menu in the top right and you want to be able to say log out so check this out i'll bring us back to the editor and we can get rid of just about everything here save that we can get rid of ref we can get rid of loading and basically bring us back to square one next q button and this is actually cool i don't have to write any javascript for this at all it's all handled for me behind the scenes so let's have a button and how about we give it a label equal to l for luke so this is going to represent me logged in and then i'll make it rounded unelevated and i'll give it a color equal to primary so there we go instead of rounded let's just say round that's a slightly better round for this scenario all right so if i want to make it so that clicking that button opens up a menu this is all i have to do it's ridiculously simple q menu and now anything in there will pop up as a menu so my stuff and there we go it works straight away that's all i had to do so you probably put in here for example a q list q dash item q item dash section you might even be able to skip the q dash item section but that's okay then we can say log out and let's make it so this item is clickable save that and now when i click on here i get that log out button and i can come up here to the queue menu and say auto close like so and now when i actually click on log out it automatically closes for me how cool is that so you can imagine this in the top right menu there in fact i use this for quasarcast.com i have a menu that is basically built in this exact way so how cool are those two components the q menu component and what was the other one the q skeleton component check them out have a play with them and maybe you can use them in your own applications keeper rx.com built by troy molin take a look at this it's really cool a website called keeper rx built with quasar so let's dive into this and notice that we've got a launch app here gives us some information about it and this app is for taking control of your medical life sounds interesting launch app i've already logged in i believe so if i click on log in here it might actually take me straight into the app and so we've got that beautiful quasar spinner i like it and there we go the the photo here was actually automatically brought in when i signed up i think was using github or maybe something else um there's actually a few ways you can sign up with this site and straight away we've got a beautiful way to navigate we can even search up here oh maybe i need to do other things to be able to search that's totally fine so let's come down here i can add photos um so maybe there's something wrong with me i can say doctor i look like a koala there we go so that's really cool and easy to do i can put in my blood type i can't even remember what it is let's just go with b positive and change all of my details and these forms are nicely laid out and i'm pretty sure it looks nice in them let's have a look at this in sort of a mobile layout yeah it still looks really beautiful what else can we do we've also got our medicine cabinet oh we got a little tool tip there all drugs and supplements in my medicine tablet cabinet so we can keep track of that so i've added in panadol there um i don't know what's another one ibuprofen i think ibupro let's do a search for that ibuprofen and then it automatically fills it in for me that's really cool and let's try adding a photo there and emu just for fun nice so good use of the upload um field there i really like that save it and now this is my medicine cabinet i've got some panadol and an emu for my ibuprofen um care providers and this actually has a catalog of care providers which is really cool i'm not going to add that just in case there's like um some privacy issues i'd be breaking by doing that but yeah really cool definitely keep definitely check this out it's called keeperrx.com i really liked um exploring this one and if you want to see any other apps like this go to the ideas section on the quasar discord channel oi sorry there are many hidden gems in the quasar documentation and i'm going to quickly show you a couple of them but i highly recommend spending time with the docs whenever you've got a spare moment um here and there even if it's just on your phone it's very phone friendly obviously so yeah just have a little browse through what's available because there's always finding things that you find along the way if you take the time to look at the quasar docs that's certainly what i found so we're going to be covering if we come down the bottom here a couple of quasar utilities so definitely check out this last little section at the bottom of the left menu here and we're specifically going to look at the date utilities now i've just got a basic quasar application i've basically just said quasar create and now we can run dev there and by the way this is quasar version two and then when that's done we can go ahead and get started so i'm gonna go to index.view and then basically start moving things around here so we'll get rid of that and let's go ahead and play around with quasar's dates so we'll start by saying import date from quasar so we can just pull it directly out of quasar really easy to get started with but now to help with destructuring we actually want to say const and then all of the date functions that we want and that's going to be equal to date i'll show you what i mean so the first thing we're going to explore is add to date and now due to tree shaking since we've been clear about how we wanted to structure this it's only going to be it's only going to pull out that method so let's come down here now and say setup we're going to be using the composition api and we might pull ref out of here ref then we'll say const current date is equal to a reference to we'll just say no to begin with and then we'll expose that like so cool let's go ahead and play around with this now we can say currentdate.value is equal to and now we can say add to date new date and what are we going to add to this date well we can pass through an object and say for example days seven that simple so now i can come up here and let's just copy this current date and spit it out there and let's keep it interesting we'll go cue card cue card section and then throw it directly in there and there we go that is the current date and i've added on seven days to it so yep that is correct the 7th of april super cool what else can we do well we've almost we've also got format date so format date let's pull that out and we'll say format date here pull in the date and now we can say what we want it to look like so for example day day slash month month slash year year year we can use that format go to the docs if you want to see um what's available to you for formatting the date and there we go it's that easy to format the date however we like maybe you don't like slashes you want dashes in there and there we go done how cool is that we've also got build date so if we want to build a date build date this is a really beautiful api for building our own date and we simply pass through there a object and then we can say for example the year is 1991 which is my birthday month march and then the date is the 28th my birthday 28th of march 1991 and there we go a really easy way to build a date using quasars date utilities what else have we got we've also got extract date and then after i've showed you extract date i'm just going to give you an examples of the api but we'll stop building things i'll show you what i mean in a second so extract date and now we can do this let's just say we've got 28 of march 1991 which is my birthday then i can say the format that that is in by saying day day slash month month slash year year and there we go a very easy way to basically grab a date string that isn't that might not be formatted how you like it and then you can extract the date by saying exactly what format that date is in very very cool and now i'm going to quickly just run you through what else we have available we can say is between dates and then we can say for example the date target or the target date and then date from date two so we can just say is this date between that date and that date so that's pretty cool what else have we got is same date and then we can put in for example date 1 and date 2 and that's going to check if those two dates are the same we've also got get date diff date one day two and we're going to get the difference in seconds so that would give us for example i don't know 700 seconds might be the difference between those two dates they'd have to be on the same day in that case but hopefully that gives you an idea of the power we have with quasar's date utility so now that we've covered dates let's have a look at colors check this out i'm going to come over here and remove most of this and change this to current date to how about current color and then i'll come up here get rid of that and then we'll say the style is equal to a template string where the background is whatever the current color is so there we go now we'll actually need a current color and actually how about we spit it out in here as well there we go and at the moment that's a date but we'll change that in a second so now instead of pulling out dates we're going to pull out colors and the first function that i want to pull out of that what's it called it's called get palette color there we go and now i can come here and say the current color is get palette color and we can pull out our primary color so this is a very easy way to pull our primary color out and there it is there now let's play around with this color a little bit we can say for example lighten and now i can come down here and say current color dot value is equal to lighten and let's just lighten uh the primary color so i might actually do that so get the current color oh sorry get the the primary color and then lighten it oh i probably need to say how much i'm going to lighten it by how about 50 percent yeah there we go it's 50 lighter if we go 100 it's probably going to be completely light yeah now it's just white very cool and notice that it's actually giving us the hex version of that color as well which is super cool all right what else can we do we can also um i think we can change the alpha as well let me have a look at that there we go change alpha so let's change the alpha to 0.5 so this is kind of like lightning but this is just going to make it a bit more see-through we can say 0.2 really really cool and by the way you could say instead of primary red orange whatever you like so there's a bunch of color utilities that we have available to us as well and just to give you an idea of what else we have we also have like rgb um to hex if we want to convert to hex we can also convert rgb to um hue saturation what's the i can't remember what the v stands for and then you can do hexa rgb all that kind of stuff is all available so definitely check out the date utility class and the color utility class in the docs sorry i shouldn't say class the color and date utilities i'll see you in the next section when i first started um building websites i just wanted to build things fast that's one of the things i liked about quasar i could just think of something and basically build it within a few days or within a week depending on what the project was and that always felt really cool to me it made me feel really powerful uh however one thing that i've come to realize is that for larger projects that i'm going to be sticking with for one two three even you know five plus years into the future i need to start thinking more about the architecture of the project so for example um when i first started at agripath which is the company i currently work at i built something for them very fast and it was very quite unquote impressive it's like oh cool you can do this really quickly now can you do that now can you do that and what i came to realize is as they wanted more and more stuff in the application i started to get slowed down and so i've eventually started to realize that i can't just build things like this i need to think about the architecture how do i want to build it now so that in the future it's going to be easy to extend my components to um to work on those components going forward and more importantly so that when we bring on other developers they can work on it too so that's what i want to talk about um now and this is just one concept um take what you like leave what you don't like um this is going to be very opinionated stuff so let's dive in and talk a little bit about architecture using the quasar framework so the concept i'm going to be showing you here is what i call volatile code i'm sorry stable code versus volatile code so we're going to start on the stable end of the spectrum move our way to the volatile end of the spectrum and the concept i basically want to teach you here is that stable code you want that to be tested um very very well because a lot of other components will be extending it volatile codes should still be tested but it doesn't matter as much because it's volatile and it's going to change a lot so as you're working on things you might not want to test it too much but as the thing that you're working on solidifies then you can start testing it a little bit further on the volatile end of the spectrum so i think this will start to make more sense as i give you examples so the hot the most stable thing on the stable end of the spectrum uh for an example would be an input component this is not a quasar input this is just a basic html input component i would consider that to be highly stable also highly tested i'm guessing that chrome and mozilla have tested this a lot to make sure that it doesn't break we can trust that this component won't break let's move on next we've got quasar's q input component now this is going to be a little bit more volatile but it's still pretty stable so this has been tested a lot by a lot of people in the community it's been built by people that are very talented um coders so i can trust that it has been tested pretty well um and so this is definitely on the highly stable end of the spectrum for me moving on what i then do is i will expand i will extend the q input component to make for example a base number input and the way i do this is by using an extension and in this example it's um a basically a component library extension which is all of my base components so this number input once again is going to be pretty stable i want to test this quite a bit to make sure that when i change something here other stuff in my code doesn't end up breaking moving on i will then for example extend my b number input to create what i call rest components so i also have an extension library for my rest components um which which stands for um oh my goodness i'm blanking on that um yeah but anyway for your restful routes um i i've got my restful components and what that allows me to do is pass through a model and for example a field so that could be salary for example and then i could say i want you to persist this to the database or send a request to this when this field is unfocused all right so as you can see we're going more towards the volatile end of the spectrum this is a little bit less stable because it's likely that things are going to change here maybe my api is going to change if my api changes i need to update this component here so as we get more towards the right end of the spectrum we want to make sure um the things are going to get a little bit more volatile all right so moving on i've got my r update field input so when i put stuff into that it's automatically going to update on the back end moving on we then have what i call the r update number import so this will for example um sorry this is an update field input and then my update number input is the same as the update field input but specifically for numbers and what that allows me to do is handle a lot of those edge cases um for updating using a number so i might want to do some validation to check that it actually is a number so moving on now we get to what i call my model components and i'll give you an example of that the m stands for model update user salary input okay for a lot of you this is going to be overkill this is just for larger scale applications a lot of you this will be overkill and this component allows me to simply pass through a model and that's all i have to do to consume this component and then when i enter the data um into this input it's automatically going to then update on the back end so yeah i just wanted to point out here this is not extra work it might seem like wow i'm doing all of this extra work to get to this point the reason it's not is because once these components have been created like this one for example the update number input once i've built that i can use it over and over and over again i'm already using these patterns all the time anyway why not put it into one component so that we don't have to repeat ourselves keep things dry and i gave an example up here we could also have an update username input which extends the update field input and if i'm losing you now that's totally fine um just stick with me to the end here you don't have to understand everything the next thing i've got here is the update user salary form so this will extend other inputs so for example the update user name input the update user salary input and now i can put all of them into the user salary form once again we're keeping things dry now i can use that form all over my application and it's all using the same code however we're getting more and more volatile now because this form is very likely to change we might be adding new fields to the form therefore it's a little bit harder to test this code um because it's on the volatile end of the spectrum so in order to test it thoroughly i'd probably want to wait until it becomes a much more established component before i get too thorough with my testing and let's move on i actually go one step further now for just about all of you this will be overkill but i'm going to tell you why i do this i then create what i call views so for example a view manage user which is basically like i'm just going to be a div with all of my managed user related stuff within it and what that means is i can plonk the manage user views in other applications so let me give you an example of that so i say why would you ever want to go this far well let's say for example i have a contacts app i have a rainfall app because i i work for an agriculture company we collect rainfall an admin app an app for the client as well all of these apps actually actually use the view manage user um uh what would i call that component so now i only have to change that in one place and i can manage a user in all these different apps in the same way and i know that the code's going to be the same so once again overkill for most people however the way we've decided to build applications is in such a way that we can have a lot of mini apps for our farmers i'll give you an example maybe one farmer is responsible for rainfall but we don't want that farmer to see anything else within the system he would just get the rainfall app he or she would get the rainfall app um and then they don't need any of these other apps on their phone so hopefully that makes sense this is my concept of uh stable code versus highly volatile code and i found coding in this way has been an absolute joy in fact on the front end uh on my applications itself so you know my actual quasar app i'm pretty much just throwing views in there when it and all they need to worry about is rendering those views so yeah um you for you you might just end up getting going to this part of the spectrum you might want to go this far depending on the size of your app but i just wanted to give you a holistic overview of how i think about architecture in my code in terms of extending components so hopefully you found that useful um i think this might be the last segment if not i'll see you in the next segment otherwise moving on [Music] so we covered quite a bit in this episode and i just wanted to take a moment to to just sort of tell you a little bit about my story you know some of you might be wondering you know who is this guy why should i listen to him in the first place and that's a good question why should you um but yeah i just wanted to give you guys a little bit of my background um and how i got into programming and how i basically fell in love with the quasar framework so i started um i started coding probably about five or six years ago not that long ago really in the grand scheme of things i was actually studying to be a classical pianist and i thought that's what i wanted to do with my life i thought i wanted to play piano for the rest of my life um in fact i remember when i first went to my piano audition i wasn't very good yet and i couldn't believe that i actually got into the course and i remember in my very first lesson my piano teacher actually said to me i can't believe that you got in you're definitely the worst pianist here by far so you know that obviously doesn't make you feel very good about yourself um in fact it made me feel quite crappy to be honest and i remember going to watch other people play and thinking wow they're so talented um how can they move their fingers so fast and how do they how are they so accurate all the time it just basically boggled my mind so anyway i was a pianist back then and i remember practicing like crazy because i just had this vision in my mind of what i wanted to be i wanted to be able to play certain pieces on the piano and so i went crazy and i started learning about the art of learning how to learn different tactics for learning things quickly but then also for learning things thoroughly the art of revision all that kind of thing and so as i went deeper and deeper into that i started to get better and better i ended up ditching that piano teacher and um taking on another one later on who was fantastic by the way and yeah he taught me a lot about the art of learning and how to break things down into smaller pieces so i ended up topping the year in my final recital so i went from being the worst pianist a concert pianist actually told me this a professional pianist said that you are the worst person here and i went from that to being able to um to yeah topping my recital topping the year for my recital and the reason i tell you this isn't to be like look at how amazing i am well i'm sorry i got something in my throat wow i'm so talented honestly it's kind of the opposite it really it really annoys me when people don't believe that they have it in them to do something i honestly believe the only reason that i was able to get as far as i did with piano was simply because i persisted at it over and over and over again and i kept trying different things and i kept pushing the limits of what i knew about practicing the piano so rather than just repeating things over and over again it was like how do i practice this how do i do it in such a way that it sticks that i learn it quickly and so i became very very obsessed with just learning in general and i remember i learned like over a thousand digits of pi which is actually really easy when you know how to using like mnemonic devices and yeah so i became obsessed with learning and i went okay became went from this person who frankly i think i'm naturally not very intelligent and i went from that person to someone who is now teaching other people how to code and you know i went on to be a piano teacher and help other people to um get good at piano as well and it's just like it's become a bit of a mission of mine how do i prove to people that they really can learn anything how do i prove to them that all you need to do is know the steps to take how to break things down into their smaller pieces and how to execute on that every single day so that you just get a little bit better every single day every single time um yeah and that's kind of how i got into coding because i then wanted to build a website that taught kids music theory and oral um and in order to do that i needed to learn how to code and i kind of thought well if i tell myself how to play piano from the ground up you know most people learned when i was six years old and i learned a lot later in life if i can do that and i am not a particularly smart person surely i can apply those things to coding as well and so you know i remember learning jquery um i've messed around with cake php and like these awful back-end frameworks and then discovered laravel which i fell in love with and um yeah and then started playing around with those different frames but what i came to realize is that one thing i hated about coding one thing i really hated about coding was css it's so boring i like sorry this is just me personally i know some people love playing with css and styling and it's like i discovered the material design thing and i thought these guys have already figured out how to build a website in and how to do a ui that works well and is beautiful you know i showcase some of the websites today they're stunning and a lot of that is due to their own skills it's a lot of it's due to material design and so i started looking at you know material design frameworks and then eventually came across quasar and i was it was almost like love at first sight not only could i build a web an sba that was fast tree tree shaken really well beautiful easy to build super quickly every component i could possibly need also templates for all of those components slots um attributes that allow me to extend it in every single way i could ever think of i just fell in love with quasar and that's why i that's why i'm here today that's why i did this show today and i hope that you enjoyed it and got a bit out of it i'm gonna get better um you know this is what i do i release something that's maybe not so good to begin with i hope you enjoyed it anyway um but then get better and better and better every time so i guarantee you in a few months time this show is going to be um fantastic um not because i'm talented simply because i know that if you keep at something and you constantly push to just be a little bit better every time that um you really can do anything so yeah that's why i'm here today that's why i'm starting up the quasar news podcast that's why i'm doing the quasar cast if you haven't already go to quasarcast.com register and register your account there the reason i'm doing all of this is because eventually i want to charge for my videos there will be free videos and paid ones but i want to get money for this so that i can funnel it back into the quasar community can you imagine if we could free up a little bit more time for the quasar developers so that they could rather than spend you know imagine if rather than spending i don't know eight hours four hours three hours a day depending on who they are and what they're doing for work in the core team imagine if we had some full-time people working on quasar i mean the you need to understand that the the depth of this framework is insane it is insane it's i can't i can't find anything like it on the internet even for paid frameworks you know you've got stuff like ionic i don't think that it's anywhere as beautiful as something like the quasar framework there are things that are paid for that have full-time people working on it so go to quasarcast.com register and when i start putting up a pay wall um subscribe i'm going to create some content that i really think that you will love and it's going to help to build this community bigger and until we free up more people in the quasar community i'm actually going to funnel every cent that i make through that through to quasar and i want to finish off here by basically saying please if you have the means donate to the quasar framework i remember when i was a kid my mum would always tell me to um to put the clothes on the line or take the clothes off the line sorry because it was going to rain that afternoon and i'd say yeah mom i'll do it later i'll do it later and the truth is it never happened this happened over and over again in my life and it was until later on that i realized that if i want to become a certain person then i need to dedicate to the action it takes to become that person i want to be the kind of person that supports open source if you want to be the kind of person that supports open source i encourage you to start donating to today even if it is the lowest donation that you can possibly afford everybody's got at least 5 cents or 20 cents 30 cents get into the habit of donating become a person who donates and then gradually increase that amount over time as you become more fortunate in life and also talk to whoever you work for and let them know that um your company is leveraging off of hundreds of thousands of hours of work and that um it would be great if they could donate to the quasar framework so thank you so much for watching i've really enjoyed myself i've really enjoyed doing these videos and also doing my quasar cost videos as well so go to quasarcast.com register um donate to quasar and i'll see you in the future my name is luke diebold i'm part of a group of web developers that build high performance view apps in record time with a framework called quasar we don't spend months on designs that take years to test and end up confusing our customers we use the material design spec because we already know that it works since we're open source and free we have to be smarter than corporate frameworks we do this by insisting on top class web components striving to use best practices and pushing ourselves to raise the bar of what's possible on the web most component libraries do one thing and leave you to figure out the rest we have a vision that is much much bigger an unparalleled experience building front-end apps that work on all platforms we are crazy developers and there is nothing we can't build you

Channel: Luke Diebold

Views: 3,123

Keywords:

Id: XxUYIg1eS9o

Length: 59min 21sec (3561 seconds)

Published: Thu Apr 01 2021