Learn Frontend with Vue.js

Christian Nwamba speaking at Laravel Nigeria in April, 2017
217Views
 
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

This talk will cover how we can leverage the power of Vue when creating the frontend for our Laravel applications.


Transcript


Christian: So, my name is Christian, and I have this particular way of [inaudible 00:00:06] and I want to share it with you guys. Okay. I'm telling you this story. I don't want to come out and give you a presentation. Okay? You guys have heard about MVP, right? Minimum Viable Product, that particular concept that we use for shipping small products gradually. I'm not a product person, I'm just a developer. I'm just trying to bring that concept into our world, yeah? Now this is the thing, it can get really overwhelming when you try to just build it to do app and then you have to set up webpack, start all those loaders, your plugins. To set those things up it will become very annoying. For goodness sake, I'm trying to build it to do app. I don't know if anybody has felt that way before, it's just very crazy, right. If you try to do anything before, these things become very overwhelming. Now, this is one thing that Vue is trying to tackle, okay? Before we get there, let me get to know you guys first. I did this before I started, I'm still going to do the exercise again so I will be sure I'm not in the wrong room. I will always do this every time, if you see me talk, I will always do this every time so I'll be sure that I'm not talking to people that do not even know what I'm talking about, okay? So HTML. It's just like 10 people HTML in this room, "What am I doing here?" Let me see your hands, now, don't put your hand on your jaw don't ... I said shirts are coming. Stickers are coming. Calm down. Just do this for me. Let's have a deal here. If you respond well, we will share.[inaudible 00:01:52] I think I will carry some and go home safe. So HTML? Thank you. CSS? Okay. Java Script? Small, wow. Wait, let me get something I don't understand. I'm not an elaborate person. Oh, fine. But I'm a front-end engineer. And so a few are first time developers, right? But majorly Laravel, [inaudible 00:02:24]? So how do you guys deliver stuff to your browsers? Is there another language front-end that I don't know about? Is there another front end language I don't know about? I mean, there's Laravel in browser these days? Probably, okay. Laravel, yeah. Laravel? Laravel now, but ... Laravel right? You are plenty. Okay. Node? Don't worry. I can pardon you for that one. Then Vue? Small, yes. So yeah, that's the idea. I expected small so I can give you more, right? You can add to this more you have and then it will become bigger, I mean. Fine. So, I told you guys already, my name is Christian, Codebeast on Twitter. It's not my nickname, but that's my Twitter name, but if you still call me Codebeast I will still answer you, sure. But Codebeast on Twitter, if you want to follow me, please you can follow me and I will appreciate. I'm a community person, I write a lot, I'm always anywhere that they are organising meetups. I don't know Laravel, I'm here, you understand? So that is just my thing, forLoop, NgNigeria, LaraNigeria, I'm always there. Then, I'm a technical writer at Deep Stream. It's a real time company and Scotch.io, still have Cloudinary and they come take care of them for those two guys. So, that's me. Now, let's talk about the challenges I've heard personally and I've seen a lot of questions on stack overflow about when it comes to building front end applications. The annoying thing is, at the end of the day, building the app is not even the problem. You saw what I mean right now. That is just the mad part. The annoying this is that building your to-do app is not the problem. [inaudible 00:04:35] and she repeats. She don't react, look through your [inaudible 00:04:39]. Spit out the ... there's all those stuff. But at the end of the day, it comes ... The things are surrounding the two lead steps. It's not even the two. It's not even the actual things. It's not able to get set up with the two, right. The first one is two-link. God, two-link drives me crazy. See webpack and it's just one serious problem. For the fact that I have to do all those things and face all those problems. I've never started building anything that I ... [inaudible 00:05:04] You woke up in the morning. You had a motivation to build the next big thing, and then just at the end of the day two-link discourages you. Webpack is not even working. I've never started writing code, webpack is not working. "What am I now doing here?" You get the problem? So, I just want you guys to keep these challenges in mind. We will come back to it and then I will show you how we are trying to solve these problems, okay? Are we together? If you been with me before, I always tell you to please, if I'm ... Nod your head, yes. If I'm making sense, just nod your head so, me, I will feel that I'm saying something reasonable, okay? Now if [inaudible 00:05:43], ask a question, please. I'm here to tell you a story and teach. I'm not here to just push things to your head. So community ... And another challenging thing about this stuff is the fact that I go to stack overflow. You don't expect be to actually know something before asking a question. I'm asking because I don't know the question. "I have an issue with stack overflow." And then I will ask a question. Someone will come and downvote it and block the question completely and say it's not constructive. How can it be constructive when I don't know what I'm asking. Not the point, you understand? Speaker 4: Too broad. Christian: Yeah, personally, if you look at my stack overflow account, I think it's still in [inaudible 00:06:21] and I asked a question. It's either I got to the repository of the project and file and issue, at least people there care about their projects. They want to actually make sure you are using it. But stack overflow is just a lot of people, both someone that is not even a Laravel person just come and tell you that your question you have it doesn't make sense, you understand. Community is key and then some frameworks are good. They are very lovely when it comes to community. In fact, that's the one thing that I like about Laravel. Laravel has a very lovely community, but some are very, very poor at it. Learning curve. You guys know what this ones mean now. Whether it's easy to just get started with the particular or it's actually very challenging to just do a very simple thing. Okay? Isomorphism. This one is more of a front end thing. What I mean about isomorphism is ... How many of you have worked with Angular? I think we should have a lot of Angular people here. Angular one, not Angular two. Just any front end and framework that supports SPA. Any one that does SPA? Let me see your hand, seriously. Okay. Now the thing about SPA is that it renders virtual domain. It doesn't give you the real thing. Okay? When you probably set up a new project you have a block post. [inaudible 00:07:53] click on the page ... Chrome and click on page source. You won't see your actual content. It's just the entry points. Who has experienced that stuff before? You've seen it. Let me see your hands. That's why asking you. I want to see you hands so I will be sure that we are together. Even if you've not seen it before, one thing about SPA is that is the major drawbacks of SPA is that it gives you virtual dome. It doesn't give you the real dome. It's complete virtual dome and then gives it to the browser virtually. It doesn't actually render the real thing, the real HTML you look at when you use Laravel to just put something out there. Okay, so what you just see it probably a dev-named app, which is the entry point of the front end applications app. Okay? So at the end of the day, you're wondering "This thing is working, but I can't see the source." Yeah? So as much as it is being able to actually make this thing render, this your SPA app render as well ... It's called server-side rendering. You said it before. You must have heard somewhere ... Someone said, "Server-side rendering. What does it mean?" That's what it means. So trying to fight that issue where you don't have your actually dome and you know the implication. First of all, spiders won't find you. If you Google, he's trying to actually make in depth society for ... it's very, very ... you won't see anything on your site. If you try to share that page on Facebook, if you're using Angular you will just see column braces. Right? Yeah. So that's the very big issue, okay. This one is more a front-end thing and we are talking about front-end right now. See, I love Laravel, but forget Laravel now. Okay? Fine. Now state management and usually what we did before was to have data ... probably if you're building an app that probably manages product and everything about the store. Okay? You could have the product data live in a different data structure. I don't mean a database now, I mean in your UI, probably in [IRE 00:09:56]. When it comes from the server, it needs an [IRE 00:09:58] that it straight over and you have the store staying in one place and you have the information about the store you are going to, that the person is buying from [inaudible 00:10:06] our place. One thing about this is nothing is wrong with it. That was what you have been doing before. Right? But the issue is this. It's sometimes you run out of sync. Managing these states become problem. Probably, you need to know what is happening its products when something instore happens. You have to start trying to find a way to actually put these things together and make them work better. If you're doing a small app, that's not a problem. When your app is going to grow very, very big, there's what they call a centralised state management. What we will try to do is to put all this state in one store and then access it from that store. Okay? That is what redux and flux is trying to do for a react. You guys, redux is popular. You guys must have heard about it before and then others are adopting it. Angular have adopted it via NGRX and Vue is adopting it via VIVUEX. Okay? This is one other aspect that we have challenges with. Actually being able to even understand why we need the centralised system and how to manage that state, and then deal with mutation. The only topic around mutation there is if you don't mutate. So those kind of stuff. So that's another issue. Then flexibility, what I mean by flexibility is the fact that ... Who has worked Angular two here? I'm an Angular fanboy, but then I have been with Angular, except Angular two. The boiler plate alone, like what I need to start a simple app, just a to do app is way much bigger than what I need to ... You understand what I mean right? That's what I mean by flexibility. Vue just allows you to just ... you don't even need to use your CLA. You can just use a script tag and import Vue and start building something. Just to prototype and know what is going to come out of you before you start bringing all those big tools, okay? So these things are what you are supposed to use Vue to tackle. Now I have this five minute rule about every framework, every single framework, before I start learning it. On the get started page, does it take me more than five minutes to learn, to actually make something out of it? If it takes me more than five minutes, I don't bother. I will look for an alternative. Okay? So it's not just ... That's how human beings are ... You guys know about five to eight second rule about users coming to you site. I think I should be able to ... If you build something, I think the APS should be very, very simple for the user to use to get started within five minutes. If not, there was no point in building more tags in existing. You understand? I'm making a point, right? Fine. I will show you guys where this comes in. Same thing I was just saying, okay? It say "If I can't write a 'Hello World' application in any framework within five minutes, then it's not worth learning." Okay? Still keep this in mind. I'm heading somewhere with all these things I'm showing you guys. Now the golden rule is, to me, love is everywhere, right? Yes, from your Bible [inaudible 00:13:18] from your Quran instance is love, right? We're always thinking about love. Now, it doesn't just apply to humanity. I prefer Angular to enter that framework and it's because I am biassed, you understand? I see a lot of [inaudible 00:13:33] Angular with their lives. Surely Angular two, but I love it and it won't say everything ... Even if the bundle is big, I will start minimising it. It's my Angular, it must get small by all means, you understand what I'm getting to? When people come to you and tell you "Hey, don't do Angular, no, no, no, Vue". I can't use that stories. [inaudible 00:13:50] doesn't even make sense for me to even try. Just look at ... You know why you are using these two. Don't let people's opinion actually change why you love what you are doing. As long as there is love for it, you actually find a way to beat those issues you have with it. There was no state management before we are building apps. All this new stuff were not there before, but we were able to ship application. Google has been existing since we have been searching what we want to search and they started with very low level stuff before they start incremental growth. Okay? So, if you don't ... I don't really like the fact that someone will just wake up and tell you "Ah, you Laravel developer, na. Wow for you. You've heard of Node before, abi?" There are all these kinds of story. It doesn't make sense. These things have gotten to a level where it has become emotional, now. It's no longer about work. People can beat you up because you say Laravel doesn't make sense. I'm very serious. People can just set up and beat you up because you said Laravel doesn't make sense. That's why I'm very, very careful because I know I'm not a Laravel person. I cannot just say anything here because somebody can just come up and just tell me I'm ... Nobody should have a problem with what you do. Love what you do, but then make it better. That is what you should care about. If Laravel is messing up on one end, that is why it's open source. Grow it, make it better, okay. I just say this because if you are coming from ... If you are an Angular person working with Laravel, or another person working with Laravel and you want to try Vue, fine. If you don't want to try Vue, fine. Both of them works fine with the situation. I'm just here because, you see why I'm here. Now, the progressive UI framework, this is what Vue is known for. Okay? For the simple fact that Vue allows you to start with your rubbish idea, which finally actualizes and then Vue is still there for you as a big app. That is why it's called progressive. Whenever you go to our society, they tell you that Vue is progressive. It's just the simple fact that it's approachable, you can start ... I want to ... I think I have something like Uber, but for another thing. You guys always see that phrase, right? Something like Uber, but for food. Something like Uber but for video recording. All those kinds of stuff. Something that hits you. You understand? And then you want to get going with something, if you would just allow it to just pick your scripter from CDN, put your HTML, and start prototyping. Okay? Now with time, you're like "Man, I think I really need to start growing better. I think I should start putting other things and this way won't help, but let me start bringing in webpack and start involving two-link". The girls at the back, are you hearing me? Can you hear me? Yeah. Okay, okay. It's one thing that Vue really sells, you understand. In fact, what Vue did ... I wanted to use a very wrong word there, but [inaudible 00:16:58]. But what Vue did is what the last person in the market does. You understand? If I'm selling rice on this street and you ... What's your name? Kallis: Kallis. Christian: Hmm? Kallis: Kallis. Christian: Kallis, and you come to sell rice on this street, too. How about you? Emanuel: Emanuel. Christian: Emanuel. And Emanuel comes to sell rice in this same street. The last person is going to build on top of our strengths. It's a natural thing to do. When he comes he will be like, "Chris is selling rice. He's selling rice. No. I can't just sell rice like that with them also selling the same rice or something better." So that was what Vue did. Okay? So, Vue just came and, "Ah. See Angular? We're just laughing at Angular." After this Angular look and react. "Hey, now." You just did a very amazing work at building on the weakness of those other frameworks. You understand? So all those challenges I listed, Vue did a great job simplifying them. You understand? So whenever you hear server-side rendering, just know that if you are using Vue, it's not going to be as challenging as it is if you want to easily react with Angular. Okay? Does it make sense? Audience: Yeah. Christian: Now, just about those challenges I listed initially. So Vue was built with those challenges in mind. So it was built on top of the weaknesses of the existing ones. Okay? And how we tackled most of these things was this whole list here. It's progressive. I have already told you guys about what makes it progressive. Vue is small. You understand? I don't know it's size, but it's small. If won't give you headache to actually work with when it comes to size and bundling. Okay? Now, it's very easy to learn. Who has tried learning Vue here? When you try a new Vue, you feel like, "Why haven't I start using these two things?" It's actually very, very easy to get started with. Yeah? Am I right? Audience: Yeah. Christian: It has a lovely community. Laravel is backing Vue up and then Laravel is a lovely community, which makes the Vue community also lovely. Right? Are you guys still hearing me, those at the back? You can't get me? Speaker 6: Not very much. Christian: Not very much? Now I'm not the type of person that actually stands to speak, but they say I have to stand here. You can't say I will be standing one place. It's just like bondage. Just try and hear me because of the camera. Okay? Now, the tooling is very simple. Now Vue gives you templates to work with. If you don't want webpack, fine. If you want browserify, fine. If you don't even want any of them, fine. You will still build your Vue app. You're not compelled to anything just like we see in usual environment. Okay? It's integrated into the CLI. It doesn't just tell you, "Okay, Vue works with browserify. Go and find a way to do it." You understand? That is not the case here. It integrates browserify into its CLI. So you can just choose as a template to start with if you don't like webpack. Or even if you don't like any of them, you can just start with your normal including scripts. Fine. Okay? Easy state management with Vuex. Now we won't talk about that today, but just know that if you want to try centralised state, Vue has your back. Isomorphism got simplified, okay? So the fact that you want to ... Probably what you are building you are doing on SPF actually where you need spiders to find you. There's no spiders in textures so [inaudible 00:20:47] those sites. Okay? So you can actually use and can actually set this up in your Vue application in a very, very similar [inaudible 00:20:59] or [inaudible 00:21:00] through code and not [inaudible 00:21:02]. And who have heard of next year? Audience: Next year? Christian: Next years. Yes. Next years is for react for subarranging. It's a [myth 00:21:13] for react of subarranging. Now in the same days, made something for Vue was called it Nox. Okay? So it can easily pick this up and then we are good to go. Declarative routing. Routing and routing in Vue is very simple. We won't go deep into ... let's just move forward. Now these are the building blocks of Vue. You have your components, JavaScript, of course, there are templates. Vue has certain place in [inaudible 00:21:45] which we are going to see soon. And then the usual MVVM binding, plugins, and Vue instance. Now these [inaudible 00:21:55] right, but that's something in Vue. Okay. So what I'm telling you guys about Vue. Yeah? Now you can just ... [inaudible 00:22:25] one jam in this process? You want ... Yeah. I think we still have some time. You want to ... let's make it there. What you just say [inaudible 00:22:34] workshop then. We have kind of ... Is these are fine? A lot of assets. Right? Okay. It's not [inaudible 00:22:41] because we are going to send ... Audience: [inaudible 00:22:48] Christian: That's okay. I'm not sure. So that's ... you guys can see the screen, words, right? [inaudible 00:23:05] very well. Audience: Yes. Christian: Now you need the Vue CLI to get something. Remember, I told you can just pick this script stuck and just get going. If you want to do that, fine. Another thing is on the CDN. [inaudible 00:23:17] if ... in company on the CDN, but let's just use CLI so you can see how it works. Because I don't instal the CLI globally. MPM installed VUE-CLI with the global flag. Okay? [inaudible 00:24:05]. So I already have this CLI installed. If you don't, you can just run the command I showed initially. This command here. Okay? So instead of CLI. Now if you want to, join me in this. The other thing is [inaudible 00:24:54] I don't want to see webpack or browserify. It's mainly just this simple and the simple templates. Okay? Well, we just as well just end up using just scripts. We [inaudible 00:25:05] scripts inside HTML. Okay? Let's just keep these things simple. Okay? So you have to run Vue init simple in other projects if you have installed Vue already. So if you just have any questions, up on the screen you can see my screenname. Name of my project is lng. Laravel NGIS just LaraNigeria. And as the author and we are good to go. So I have a folder here already created. Just an [inaudible 00:25:44] of HTML. They are simply [inaudible 00:25:46]. This is what's other [inaudible 00:25:49] want to give you [inaudible 00:25:51]. These are [inaudible 00:25:55]. Okay? And we have the Vue app. Just like that. You guys, I think, you see now how amazing it is. Right? So in less time we did ... I took it as an Angular fanboy isn't afraid to [inaudible 00:27:08] an Angular. If you guys did, I did. Like I took the available [inaudible 00:27:14]. Now that's how straightforward Vue is. Okay? So I'll just show you how it's done on the weakness of these ones. You understand? This is truly in ... we have enough set up. Okay? [inaudible 00:27:40] So you guys know what ... let's just [inaudible 00:27:43] if you know one thing. Like if you can amount and work, you normally have your data bound to an [impute 00:27:50]. And when I [impute 00:27:52] changes, data of dates is effectively [inaudible 00:27:56] an MGV in framework. Right? All together. Audience: Right. Christian: Okay. So [inaudible 00:28:10]. Sa? Audience: What do you use to [inaudible 00:28:19]? Christian: Oh, sorry, I'm using a save. Just fact for save is an MPM module using ... [inaudible 00:28:27] go back there, if your front save on the folder, I want to ... It's just provide a ... it's default to 3000, but you can set your ports do different port. Yeah. Actually, if we can by [inaudible 00:28:41] root next and nodes to the save ... to [inaudible 00:28:46] there are plenty of them. We have to put it in different HTML. You'll have time. That's the missing about the ... it definitely just in ... just open that [inaudible 00:28:54] browser, it start working. Okay? You don't need the [subacc 00:28:58], actually. What was your name? No, the guy behind you. Audience: [inaudible 00:29:12] Christian: Yeah. Are you lost? Audience: [inaudible 00:29:16] Christian: Yes, you are looking at me, but you are looking at me like, "I'm missing ...," you're looking at me like, "I'm lost." You are with us. Right? I know you love Laravel. You guys don't want to hear Vue. But just ... just [inaudible 00:29:29] a piece of out of it. Okay? Oh my God. It's [inaudible 00:29:46]. So you guys have seen this, right? Initially there was ... you had ... if you start Vue, you had this image, the Vue boiler plate have this image. It just comes up like this to you. Okay? So under this [inaudible 00:30:28] will come to your VGA's app. It's bound to the Vue. It's not a static ... It's not in the [inaudible 00:30:34], but it's a Vue content that is never [inaudible 00:30:36] normally either of you ... And I'm not really here to actually teach you Vue. I'm here to introduce Vue. Okay? So welcome to your Vue app is bound to the template using the greeting property. So I have the greeting property here. Okay? That's in the contents you see here. Now I just quit ... I just [inaudible 00:31:03] an impute. It [inaudible 00:31:04] from impute, thus it takes to box, and then bound grit into it using Vue module. So what's [inaudible 00:31:13] is ... you guys know about [inaudible 00:31:14] binding in Angular. If you have done anything in Vue. So what's up right now is once the Vue updates, the module updates, and once the module updates, same thing happens to the Vue. Okay? So let's see about that. Let me just move the image. Because it can be very distracting. Here. Okay. Does it makes sense. Now if you've not done any ... if not even front-end framework before apart from jQuery and JavaScript. Listen. Don't laugh. I'm sure you know what this will take you to do. Audience: Yeah. Christian: Sends it for it grab the impute, attach ... and this not [inaudible 00:32:04]. Once it changes your ... you know how it goes, right? Audience: Yeah. Christian: But we don't [inaudible 00:32:09] your facts will, the property and the view, if you change property, this one updates. Okay? So, I'm not telling you have to laugh at developer, but I've not done front-end before. I'm [inaudible 00:32:21] that. I know you guys have loved front-end. But let me [inaudible 00:32:23] the fact that you guys don't [inaudible 00:32:25] EPIs. And then from [inaudible 00:32:28] actually I want to go [inaudible 00:32:29]. See, I'm learning ... let me find ... let me show you something. See I'm learning design, but [inaudible 00:32:36] it looks. This is sketch. [inaudible 00:32:39] place. Audience: [inaudible 00:32:45] Christian: Okay. [inaudible 00:32:44] I'll come. Audience: [inaudible 00:32:46] Christian: Okay. You put in the CLI ... you do use the init command to quit it and there's HTML file. Okay. Please. Audience: [inaudible 00:33:05] Speaker 7: Okay, so I told you the CLI [inaudible 00:33:08] MPM. Christian: Okay. Yes. Speaker 7: Sorry. And then the next thing I did was to run the ... Audience: [inaudible 00:33:17] Christian: Start your question from beginning please. Speaker 7: Okay, so I used MPM to pull in the CLI- Christian: You installed it globally, right? Speaker 7: Mm-hmm. Christian: Fine. Okay. Speaker 7: And then next it was I run Vue init simple and then the name of the file. Christian: Fine. Yeah. Speaker 7: What's that supposed to do? Just to create it in file? Christian: It creates a folder. Speaker 7: Okay. And next thing was I used MPM to pull in serve like you said. Christian: Look, you did MPM? Speaker 7: I use MPM to pull in serve. Christian: How? What was the command you ran? Speaker 7: MPM instal globally serve. Christian: Serve. Okay. Speaker 7: Then what next? Christian: Just run save and that's the command for that. Speaker 7: Run save and this, I don't have anything in my index that's HTML file so I don't expect to see anything on the browser. Christian: Yeah, the instructions are in the HTML file actually. Speaker 7: It's not in Vue? Christian: [inaudible 00:34:04] Speaker 7: Maybe I did something wrong. There's nothing inside my [inaudible 00:34:08]. Christian: Maybe Vue-CLI [inaudible 00:34:10]. I'm just kidding. Emanuel: [inaudible 00:34:15] Christian: No, just vue init simple the name of the app. So let's say vue init simple emanuel, the title of your project. Emanuel: [inaudible 00:34:29] Christian: So it's [inaudible 00:34:36] it's away from that. I'll talk to you later please. So I was saying something. I was showing you guys my sketch. [inaudible 00:34:43] I'm showing you guys my sketch today. I'm trying to actually link something else. So you got to get motivated. I'm a front-end engineer, not a designer. Okay? But I already get [inaudible 00:34:56] give me nice stuff and now I'm just ready CSS. When, let's say [inaudible 00:34:57] to do these things myself. So I say I have to pick out my file names. Then just try. So I say [inaudible 00:35:02] place in my motivator to go home and start Vue in the front-end. So I'm not trying to say that if you want to do that and you encounter JavaScript and jQuery and try to do something like this, what you just did here, we have an impute bound to a view. Once your bits ... what it comes to is that when the impute changes, it takes changes here. Now it's very difficult. It's not even [inaudible 00:35:32], but it's more difficult to do when you have something like this framework, like Vue. So I try to complete this. Okay? Are you guys with me. Audience: Yeah. Christian: Eh? Audience: Yeah. Christian: Like you ... your attention please. Attention. So you ... I really suggest, okay? I really suggest that you guys actually try start giving Vue a try because it's something that was loved by community. It's something that [inaudible 00:36:03] loves. He loves and he's put a lot into it. And that's done. So you guys should just [inaudible 00:36:08]. I'm not even Laravel or anything, but I enjoy Vue more than [inaudible 00:36:13]. Actually it would be Laravel. So I think for it to be part of ... it should be a ... first [inaudible 00:36:17] Laravel [inaudible 00:36:18] try to just pick it up and then [inaudible 00:36:21]. Okay? So questions please. You must ask me questions. It's by force. Even if you've [inaudible 00:36:37] yes, please. Speaker 8: So there was Vue 1 and there is Vue 2. Christian: Yes. Speaker 8: What's major difference between this order? Christian: No, sincerely speaking, I do not use Vue 1. Speaker 8: Okay. Christian: Please. Can someone answer that question? Is there anyone here that uses Vue 1 because I would love to know, too. Audience: What's the question? Christian: Yeah, there was Vue 1. There was Vue 2. And make Vue ... I'm sorry. A second question. Speaker 9: [inaudible 00:37:07] Christian: Please. Please. Speaker 9: From the little I know about Vue 1, they just changed the API of details and things. Christian: Okay. Okay. So it's ... I'm not sure it's as ... It's not as big as Angular 1 and Angular 2 of this. Right? So it's not like you have many difference not together. [inaudible 00:37:28], too. Another question? Ask me question now because that's what I'm here for. [inaudible 00:37:40] from you. Speaker 10: Is there a documentation for the Vue? Christian: The Vue? Yes, of course. [inaudible 00:37:55] into communication. I will give you the [inaudible 00:37:57] later. Yes? After him. Ollie: My name is [Ollie 00:38:07] [inaudible 00:38:08]. My question is, I don't know if it can stay [inaudible 00:38:12] and it'll out to use this switch. It have to do with using Vue and Laravel together, since it come bundled with Laravel once you instal it. Especially 5.42. Christian: Sorry, please. [inaudible 00:38:19] Ollie: The question again? Okay, I mean using Vue with Laravel- Christian: Okay. Ollie: -with Lara 5.4 it comes bundled with it so it's actually very ... so my question is more like, is it advisable to be Vue large applications with, okay using Laravel as a back-end and then Vue serving as a front-end only together and then how easy and then ... I mean, because, just to mention something about [inaudible 00:38:45], I mean how to rank your site, but if you now use Vue majorly for all your front-end, I mean how good is your effect in the- Christian: Let me tell you a good place to actually apply in Vue. Your dashboard doesn't need Google [inaudible 00:39:06] right? It's an admin thing. I know how complicated dashboard is. It's actually work ... not [inaudible 00:39:16] you computer your dashboard to back-end with Laravel. You know, so let's say [inaudible 00:39:22] let's say motels are usually back-end. I've never [inaudible 00:39:29] before [inaudible 00:39:31]. Yeah? Fine. But your dashboard, your customers don't care about your dashboard. Okay? There's no reason to actually do a server-side render. It's not important. [inaudible 00:39:43] In that case, you cannot do Laravel as back-end, Vue as front-end. And trust me, if you did it'll make your life a lot more simpler because you have fine control over every single part of ... well everything comes with component. Including, even the side bar. So you cannot do that in [inaudible 00:40:06] unless we are using [inaudible 00:40:10]. Right? This data is [inaudible 00:40:13] I'm done by now. [inaudible 00:40:16] the engine. This is [inaudible 00:40:15] right? So it can ... you're not even [blade 00:40:21] or trying to ... because I'm sure there's no way you can view it in dashboard with Laravel without using jQuery. It's not possible. No matter the ... Yeah? Am I [inaudible 00:40:31] the facts. It's very difficult for it to build a complete dashboard without using jQuery or JavaScript. Right? Now compare that [inaudible 00:40:42] everything and try to rewrite it in Vue and see how your life becomes easier. You understand? And then Laravel bundles and Vue. It doesn't mean I cannot ... It's not going to make it rain out of the server. You understand? I've looked at the dock before and I tried and I see if it worked. In fact, I'm going to write about the very [inaudible 00:41:05] that is done. Okay? Yes? Yes? Ollie: Okay, this question is more like ... and I [inaudible 00:41:22] with a friend. So we're just talking about how you can ... that the best way to solve your view application is to have it on a separate domain. And if you are using it with Laravel, not as a back-end, that one should be more like on the subdomain of the main ... So, I mean, is that the best approach to it or you can actually have them together in the same directly sort of separated. Christian: Yeah, this is my own personal ... I will give you ... I say this is what I do normally. I'm not used to ... I came from a background where in Vue, APS, in Lot, and then you give [inaudible 00:41:57] mention of EPA and the endpoints to the front-end engineers. What they were calling [inaudible 00:42:04]. So at the end of the day, if you know of my company's example, example is called [inaudible 00:42:08]. Like my UI with Leve. And then API got example that's come was very Laravel leve. Okay? And that's what I've been doing as a practising engineer. You understand? But it doesn't stop you. I'm doing a blog right now. And what I'm doing is actually doing exactly what I just did I'm doing, which is having my API defend the main and ... but I know that over [inaudible 00:42:34] button so I'm used to. [inaudible 00:42:37] You are used to actually having probably Angular or Vue inside your blitz template. You understand? You hand in your last project, you can just allot into this together. They are very happy with each other. You understand? But if your app is definitely very big, sometimes doesn't it preferable to split these things out? Have an ... most dash we have is something that is [inaudible 00:43:03]. For example, your dashboard actually. You can't really have an APF. That's for admin. You understand? Now any admin operations have an APF within. Write the whole front-end review. You understand? Does it make sense? Audience: [inaudible 00:43:21] Christian: No. There's no posing math issue. Please. You have your question here. Speaker 12: I was going to ask something similar to- Christian: To him? Speaker 12: -to his, but also I have something else. In the last [inaudible 00:43:49], Angular, you spoke of us about its influx for the data managements. Right? Because it says for you, picking up the services over and over again. [crosstalk 00:44:03]- Christian: Can I get the last thing and that's it. No? Speaker 12: Okay. I said in the last, that's last thing, though. Christian: Yeah. Speaker 12: I said in the last [inaudible 00:44:12] that we did, you talked about there is influx to be managing the data especially between the components. Now, if he has to, it's also done in Angular. How is that done? Christian: Angular or Vue? Speaker 12: I mean, sorry. In Vue. Christian: In Vue, yeah? So and what I think that it was, even before I state ... even before I went into Vue [inaudible 00:44:39] Angular, I told you guys to forget Angular. Let's talk about components. Right? So the idea is, that past question applies to every component architected from work. It's like so once a framework uses ... so let me make his question clear. He was asking when you need to use the flux pattern? Please listen. This is very important. It's a very, very important question. He was asking whether or not you can actually use flux in view and when you need to do that. Now flux is an implemented [inaudible 00:45:18] ... it just a concept. The flux is a concept, which was implemented by Windows, Vuex, NGRX. Yeah? And Vue is Vuex. Okay? Now, your question becomes whether the same thing I said on Angular [inaudible 00:45:34] talk, would I apply that in Vue, right? Now what I said that it was a ... once you have deeply nested components, okay, once you have ... Yeah, yeah. Once you have the comment item inside the comment list and the comment list [inaudible 00:45:52] up, which the up is the global component. It's the [inaudible 00:46:01] components. So as you probably you have nested components down, let's say five levels, okay. If the last component, probably the fifth component on a tree. Yeah? Am I making sense? Are you guys get what I'm trying to say? If ... please tell me to go back if you need me to actually retreat. Now if the fifth component needs to tell the third component, okay, about a change ... [inaudible 00:46:28] if you need to tell .. because no matter. Data is in the sixth component. In the first component. So if you need the list [inaudible 00:46:37] it's the list [inaudible 00:46:37] and he wants to click it and he needs to tell fifth [inaudible 00:46:40] to make something in view. Your first [inaudible 00:46:43] about components is that you can't just do that directly. If fifth component have to tell your first component, the [inaudible 00:46:50]. Okay? So when you have, let's say second to third level nesting is fine. [inaudible 00:47:00] the third [inaudible 00:47:01] fifth. But once you start entering fourth and fifth and going deep that way, that's where we are going to need [inaudible 00:47:08] management and [inaudible 00:47:12] ... that is [inaudible 00:47:14] what I was talking about. So in that case, you don't dispatch events from the fifth component. It goes to the stock, which does a state itself and then of [blitz 00:47:00] this state, this is what you call a reducer, and then gives it back to the app that needs it to really up to send all the data. Okay? Okay? So in the case of Vue, yes. Vue is component architected. So [inaudible 00:47:41] applies. Once your Vue component starts nesting, you have to find a way to actually push information above the deterrent and then send data down. Okay? So you just have to actually use Vuex when your app is that big, they're having nested components. Speaker 12: Also asked some question about the isomorphic [inaudible 00:48:08]. That is server-side render, right? Christian: Yes. Speaker 12: In platform, or in frameworks like [inaudible 00:48:14], actually use them embed the GS to present the entire view. This compiles to HTMLs, TSS stuff. Christian: Okay. Speaker 12: Now if you are doing something using Vue on the front-end, [inaudible 00:48:29] on the back-end, can that problem be solved by filling in all the SEO details? Christian: All the ... Speaker 12: SEO details now because as some of you can [crosstalk 00:48:41] engine is mostly because of the SCU and the sharing- Christian: Okay. Yeah, I think[inaudible 00:48:47] SCU it is in [cils 00:48:48] not in Vue. Speaker 12: In [Cils 00:48:49], not in Vue. Christian: Okay. Speaker 12: Then transmute to the front-end, I just [crosstalk 00:48:54]- Christian: Yes, I know where you are coming from. Now that is actually coming from that same perspective of as much as in. That's when you're trying to do server-side rendering right now. Speaker 12: Yeah. Christian: For the way you are going, it might actually become more difficult for you when you realise how is it [inaudible 00:49:09] if it's to use what Vue provides. I think one Vue does this, it just [inaudible 00:49:16] marching. You don't have to go to your back-end [inaudible 00:49:20] to do anything. [inaudible 00:49:21] Just doesn't [inaudible 00:49:22] much into much [inaudible 00:49:23] content brings on that [inaudible 00:49:28] route. Okay? So rather than your templates being saved only to the clients, it's actually [inaudible 00:49:34] computers. So even after finished the client, you can take it back to the server after you render it. You understand? After compilation, do it'll finish injecting data in everything I missed to be in it. In the terms of before saving it. Yeah.