 Hello, I guess you can start now, right? All the food's gone, everything's finished. OK, guys. So I'm very, very excited to come and speak to you today about Vue.js. It's something that, as an IT person, I don't normally get very excited about new technology. And when Vue came on to the market, when I looked at it, I was like, wow, this is going to be big. And that was about one and a half, two years ago. Today, it's everywhere. Vue is overtaking. We are one of the best, most starred on GitHub. And the thing about it is just so easy. So I think what I would like to do, right, there are lots of meetups where they talk about the more advanced stuff. I want to be the person in the community that just does the beginner stuff. Because I feel very strongly that beginner stuff is very important. So the title of the meetup is called Vue.js, A New Hope of What. So we want to talk about beginners. And you want to look at how fantastic Vue is. 26,000 stars last year in 2016. It's probably now more. And we're competing with another quite popular framework. And if there's one line to sum up Vue.js, it means less is more. And later, I'll talk to you guys why less is more. Finally, the part about single-page apps spa that's very, very exciting, where we, in the web development business, can go and start to make an impact in the mobile apps. That's very exciting stuff. And finally, what exactly is Vue.js, in case you didn't know, it's a JavaScript framework. So look at the lines. So a lot of people like to wonder, what exactly do we mean by framework, especially those people who are not coders in the market? So we'll start at the beginning, off the beginning. All right, 1,000 DC ago, it was paper. You can't do very much with paper, OK? You write the thing, that's it, send it to the next guy. Nothing much happening. In the 1990s, HTML came into the market that allows you to text stuff. So you can see more interaction happening. In 1995, you had JavaScript. So just having a plain page with bold text wasn't enough. We wanted to have some interaction happening. And you normally would see that interaction as an alert. 2002 was a jQuery. The first JavaScript library of the first popular library is actually still very popular today. And in the 2010, we had the Angular starting the upper year, which is a framework. So as it gets more complicated, the frameworks appear. So what exactly is this? OK, when you're doing a lot of JavaScript right, you can see on the right-hand side, it's starting to get very, very complicated over the place. I've seen this everywhere. And you end up with that piece of mess on the left-hand side, where you don't know where all this code is coming from. It's either in the middle, it's in the side, it's over the page, you have variables referenced over the place. That's what ends up. And when the framework was developed, I like to think that a framework is actually a arrangement like a carpentry desk or something like that. So what's unique about that is that, first of all, you have a set of tools that are available to everybody. It may be a hammer, it may be a screwdriver. These are the first things. The second thing is everything's arranged. So that's what a framework is. It's arranged neatly so that it can be applied. And the third part, which is you know where everything is. So frameworks are very useful when you have multiple people, teams of people who work on the same thing. So imagine if I had a carpentry desk with my friend's house, I could go over there and work on that stuff immediately. So that's what a framework is all about. It standardizes stuff, makes things easy. And then the final part is best practices incorporated. When you're coding, right, you may not know what the best practices are. You may not know, like I have a very bad habit of naming my variables with underscore or with camel case and then they float between these two things. So a little bit of standardization makes it easy to work as a team. So you don't have to learn this stuff. You don't have to educate the person you're working with. You just have to say, hey, do you work with this framework? Do you work with a set of carpentry stuff? So that's what a framework is. Not many people actually explain this stuff. Of those people who are more advanced, just bear with me on that. So what happened in 2017? What, why is Vue.js so good that, you know, until I'm so interested in it? The first thing is that Frontend has gone crazy. It's out of control. Every few months, right, a new Frontend appears, a new technology. Before I even downloaded MPM 2.0 something, or I don't know why, I think 4.0 something, the new one came out already. So things keep changing so quickly in Frontend technology is described as for Cora, as ADHD. One minute is React, one minute is Angular, one minute is JSX, one minute is TypeScript. We don't know what's happening. So there's a bit of ADHD going on. The third thing that's happening is that it's more complicated than ever. You've got the compilers. You've got your web packs. You've got all this stuff coming in there. So for me, more of a back-end guy is like, I've just left this stuff for a while because I just couldn't get around it. Finally, you've got a certain framework that takes 200 megabytes and just to start your hello world. So you do all this stuff just to get it started. So this is the current landscape we are in. So why Vue.js? Okay, in a landmark speech, Vue.js started by one guy, Avenue. And Evan described this in his first speech in 2015 as front-end technologies of using a bazooka to kill an ant. So you set up all this stuff to do a very, very small task. And that is what currently we have in the market. You have all these wonderful technologies back about five to 10 years ago. We didn't have all the frameworks. We had, you started coding it from scratch. What happens to it, right? It's instead of coding from scratch, you start looking for your library. You start looking for your tool first to go and solve this problem. We're going way over the other side. So you look at Angular 2. You've got all these files. You have to learn all this stuff just to start your application. And when I was looking at it, it's like, whoa, as an independent person, that is too much work, AKA using a bazooka to kill an ant. So what do you do to kill an ant? I mean, one way is to take your shoe and go take it out and smash the ant. Then the other way is to go out and look for a tool that fits the application. So that is where we came up with the framework versus framework. So on the right, some of the frameworks that you guys know, okay? On the left is Vue.js. That's the kind of image that you want to be looking at. Which one would start off faster? Obviously, it would be the left one. And that's what Vue is all about. Getting straight up, not bulky framework. So three reasons why Vue.js is that platform that you want. First one is the tagline, which I think is why I'm so excited about Vue. Less is more. So what do we mean by less is more? The, how did this whole thing happen is that you've got your frameworks that are backed up by the big companies. You've got React, which is supported by Facebook. You have Angular, which is supported by Google. These guys are not too concerned about starting from square zero or independent consultants or any hacker in the basement. They are interested in big team solving big solutions. They can hard code, I can do it from scratch. All the small stuff. So Vue, where did Vue.js come from? Came from just one guy, Evan Yu. He had this idea of you taking the best of Angular 1 and taking some stuff from Ember, mixing that in, but coming with something that was easy to deploy straight out. And that's one of the best things. Vue.js is so simple, right? That in 60 minutes, you could go out and start coding the thing. That's how simple it is. That's the whole idea of it. And finally, it's in Gnostic. It doesn't force you to use technologies out there. So one thing I really hate when I was doing React was that this thing called JSX. So I want to use React, but I have to go and do JSX. Angular 2, they want to do tight script. So you don't normally come across applications that use so much stuff. So Vue doesn't have that kind of stuff. We want to go straight to the coding. We want to get it nice and simple. That's why less is more. Second reason is Vue is progressive. So I know what you guys are thinking. You saw that framework on the left. So this is a very bare-bodied kind of stuff that doesn't do very much. No, you're wrong. In fact, the way to think of Vue is actually like an onion. You can add the layers. It is progressively difficult. You can add all the applications that you hear, the what do you call it, flux. Vuex, same as the React stuff. Some of these very much more complicated stuff. What it is is that Vue is simple with a minimal core and an incrementally adoptable stack. So you add onto it, not have this whole thing deployed there and try to take away from it. So I'll show you guys that later. But this is why it's so exciting. Because generally, you just want to take your shoe and squash an end. If the end is much bigger, then you use a bigger tool. That is how Vue.js works. Finally, the whole point about design from the ground up to be incrementally adopted. So, again, same point, adding into that. You can start off really simple and add on to the thing and have your application achieve the goal. So the third reason is faster. The Vue is a framework under this structure called the MVVC. So that's a model Vue, Vue controller. What this means, right? Not many, I don't know why no one actually explains what MVVC looks like. So the way I explain it when clients come over to my office, right, is you think of a restaurant. So MVVC, right, let's say you go to a hawker shop. The same guy is the guy who takes your order, is the same guy who plates the thing and cooks the food. In a bigger restaurant, you've got a waiter, you've got a manager and you've got a cook. So your waiter, he does the presentation of the food, he's the Vue. The manager is a controller and the cook is the model. He does all the heavy work. So you never interact with the cook, you never interact with the model. This Vue with the MVVC means that there's some interaction going on with the Vue. So a simple example is if a burger comes to me in a restaurant and I want some salt in it, the MVC structure means that they send it back to the kitchen and then the chef puts the salt on it. The MVVC means the waiter has the power to get salt and put it onto the burger. So you're having some actions handled on the Vue side. Now what does this mean? Again, you gotta see it in practice, but for me, I think it's, for those people with the backgrounds, maybe in PHP or something, we are quite comfortable actually having interactions with our Vue, we are a Vueer. Those people who are more traditional in the, coming back from the C plus or the C shop, these guys don't like that. They want all the stuff happening in the back end in the model area. So again, you guys have, if you like that kind of thing happening in the Vue, if you think it's really stupid to go back to kitchen and put salt there, you want it to be in the front, Vue is for you. So we'll take a look at that. And finally, coding experience with the Coder. So on your right there is the React code, on the left is the Vue and you can see the difference of the type of code. We have a object there and on the right hand side, there's a little bit, one more step more. The handles message change step, which is a DOM system. Don't worry what the heck that actually means, but what it means is there's the one additional step happening down there. The other thing that's happening at the bottom, if you can see this area, is that the Vue is doing a lot of the control. So you have your Vue model there and that's actually a Vue model. So you can actually affect changes in the Vue. Okay? So, oh no, okay, this part. Okay, so I think the best way, right, when I was going through this thing, right, is that since Vue is so simple, we should actually go and code the thing live and show you guys that how this actually works. Because no matter what I explained, right, this, you know, a framework's only a framework until you see it in action. So when I was coming up with this idea, my friend said to me, Lionel, you know, don't do that. That is professional suicide in front of a room of Coder's live. This is very, very difficult. But I thought about it and I think, let me take a shot at it and let's see how we go with that. Don't, don't, don't fault me for this stuff. And the only other reason why I would do this is that Vue is so simple that we can actually achieve this stuff. Like I wouldn't do it with any other language out there. So let's just show a little example down here. Okay, so I've created a little, a little web page down here. And I've got a little stack here, simple stack. First of all, set up your environment. So I have a SAMP Windows Apache running over there. And I'm using a Microsoft Windows system. Shout out to Windows, sorry, Microsoft who's providing us this wonderful venue for us. So let's just see what we can come up with, okay? So first of all, you just wanna have a little bit of, I know it's supposed to be live from scratch, but it has some pre-made stuff so that I don't screw anything up. So this is just your standard HTML little file. And what I wanna just say down here, right, is that this really, really simple, no pet plus plus, nothing fancy. I want it to be as simple as possible for everybody else. And I like no pet plus plus. So the first thing you wanna do, right, is very simple. You just ignore this stuff if you're a real beginner. Put your Vue.js, include file in there. Now, I'm using the Node version because I didn't know what the internet was gonna work, but we can actually just use a CDN. You can use a depository. You just copy the code. That's it. You don't need this thing on top down here, okay? So you can go tonight. Don't even bother about how to download the thing. Just include that line over there, okay? For today, we're not gonna use this. Just gonna use simply down here. So all you need, right, is just the div, the decorator with an ID saying app, okay? Just ignore this secondary div there. I did that because the plain version looks really sucky. So I put a nice CSS framework down there. Okay, and then the final part of it, right? Very, very simple. You have your script tag here and you add a Vue object. So simple, Vue object. All it does, right, it has an EL there which says what element we're gonna apply Vue to. We have a data, which lets us put some variables in there and two other lines there which I'll explain later. So this is exactly very, very simple. So let's do something, okay? Let's see how we go. So my first line down here says I have to gonna try to bind a variable. So okay, we got the message here. Let's take a look at my thing. Oops, nothing, okay. So maybe we will put, let's use the mustach variable thing and put this word message there. Okay, woman of truth, here we go. Oh, did it appear? Oh, it did, it did. So, wow, it worked. Okay, so the variable binding peers right at the bottom, appear now on my view, like, wow. Are you guys mind blown? Have you anybody mind blown? Like, what, what do you do, man? Okay, it's not HTML, you know? Yeah, thank you. Some positive reinforcement. Like, what did this guy do? He put the variable down here. Like, what is going on? Is it like it flew up down here like a magic trick? Like, what's going on? Like, whoa, how long did that take? Where did the variable go? Okay, so that's, oh, that was good enough. All right, I can stop. All right, well, let's go one more, okay? All right, like that puns all the way. Okay, so now we bind this variable down here, right? Obviously, you guys, not impressive enough for me to just do that, not impressed. But let's try something else here. We need to do an event. Let's do an event, okay? Okay, so we created a button. Okay, do something, do something button, all right. All right, let's see what happens. Oh, nothing happens, what am I gonna do? So we gotta go and wire this thing up, right? I mean, this button doesn't do anything. Let's just wire it up. So we're gonna wire this up using the view module called add click. Okay? Okay, and let's do, let's call it do something. Okay, so obviously after you wired that, so this thing over here, right, is your view controller, and we'll now have to go to the back of the kitchen, right, and actually come up with something. All right, let's see whether I got that one. Okay, so now I'm gonna do something and I'm gonna click this thing. Okay, woo, second one went through. So we had a alert pop up right there at the bottom when I did something, hello everyone. So how long did that take? What happened down there? So once again, we have at the bottom here your model. So this is the heavy stuff. We have some interaction happening on here, right? This is what we call the view model, and we had the action being pulled down there, okay? So those people, anyone do the jQuery? You guys know jQuery, right? jQuery doesn't have that add click over there. That jQuery thing is right at the bottom somewhere. So nothing is happening on the view side. Those people doing React, you know that you couldn't pull that one off. You would have to have it somewhere in the code and then pulling out there. So that's right there, do something, okay? Now let's, so far so good. All right, now we go to the next one. Methods, okay. Okay, so we have some do something and we have that message. Maybe let's change that variable there, the message. Okay, let's see what happens. So I triggered the event, bang. Hi, everybody. I changed the variable live at that point of time. In the moment, it changed immediately. So this is that thing I'm talking about where we don't go and set up variables elsewhere. We don't have events firing everywhere. What is actually happening is that this message is actually linked to that display. So this is that virtual, those guys will know, virtual DOM. And this makes things very, very easy. So you'll see that somewhere else. I think Angular 1 is very common, but this is very cool programming, okay? So now let's go one more. Okay, so two-way bind, okay. Basically, right now I put the variable, it changes the view. What if we're interacting with a form? Could I link those two things together? How am I gonna do that? All right. So instead of doing that, right, what I could do is let's create an input box. Okay, can't really see that input. Okay, all right. So there's a box down there, all right. So we can type some stuff in it. Hmm, nothing happening. So what we're gonna do is we're gonna wire this up. How am I gonna wire this up? So instead of going back to the kitchen, going right to the bottom part of that thing, I'm just gonna use our view model, okay? And immediately it's right there. Is it? Yeah, okay. It's right there, doesn't check it. So hello view JS meetup appears in that box down there. So what happened? Did I go back to the kitchen? No, I didn't go back to the kitchen. I went to the salt table, grabbed the salt, put it down there. So this stuff is happening in the view. That's really cool. So let's just change some stuff over here. Whoa, what the? Yeah, it's dynamically linking up to this stuff through the model. So no going to the back. No need to go to that. Wack it right there. So it's two-way binded. This is interacting with this, this is interacting with that. That's pretty cool down so far. Okay, conditions with VF. Okay, I think I can do this one. So you guys are familiar. Sometimes you want things to pop around and appear somewhere. Okay, so something hidden. Okay, now I really wanna hide this thing. Did it go away? Maybe if I turn that off. Let's try it going off. Ah, okay. All right, so as you can see, dang, I managed to hide that with a VF by setting it to false. Okay, so something happened and then we set the variable. But that's not very impressive, right? So let's see what else we can do with that. Maybe we wanna make it as a password or something and that would require actually computing, like having the thing done immediately. So let's see what I can do now with that. Okay, I just wanted to check that. It was very close. Miss one equal sign there, okay? So what happened, right? What's happening is that we're computing this variable live through the computer function, okay? So this again is how simple VUJS is. You're running here, boom. And the minute it's triggered to true, the thing fires up, okay? So that's a computer property. What's exciting about that is that the variable is being computed as we are typing. So none of this completed stuff. If you were using jQuery, you'd be dead. You'll have to wait for this, blah, blah, blah. On click, if this is equal, on minus, on whatever. This doesn't matter. As long as that variable is equal to the thing, no matter what manipulation is happening, the event will fire. So that is the computer property. Very cool, I mean, very, very simple. Okay, let me see what the last two things is. List render, okay. One of the best parts about programming, right, is working with lists and big sets of data. And previously, when we dealt with this, we had to just go to the back end. It's very annoying. So we push it into the back end, and then that does the stuff. Vue handles it. I mean, if you've been to Angular, you know what, it's gonna come up. But let me just show you guys how we do it. And for those people who are beginners who have no idea, we can take a look at that. So let's see what we do. I've got a list here. That should be correct, all right. So a list of admins of the group. Lionel, Shadi, Aaron, yeah. Sorry if I didn't ask for permission. So let's see what happens. We'll just create a list. Okay, decorate a little bit, John. Okay, so what we can do, right, is again, tap another view model, right, over here. And instead of going back, we just go v4 equal admin in admins. Basically doing a loop over there. Let's try that. Oh, okay. So we've got John, John, John, John. Okay, so we're looping through the thing. And, oh, John. Okay, hang on a second. So we're not pulling a variable down there. I need to do something to that. So what we'll do is just do another mustache bracket, admin. Check the variable there at the bottom. The, it's name and close that. Whoops, what happened? Nice one, thanks. Okay, dot name. I think that should be okay. Okay, whoo, all right. So there we go. Bunch of lists were rendered with all the variables of a JSON object without going to the back end. I didn't do anything in the model in that area that called the object. Nothing happened. We did it entirely from the view model. So this makes it very simple. We've got a whole bunch of stuff down there and it's rendered out there. Okay, so let's see. I think we should be there. All right, this is point seven. So I'm just gonna recap what has happened so far in this beginner live coding session. First, we binded a variable. We put something at the back end and push it out to the front in the viewer. The second thing is that we worked with events at the ad click, which using this view model strategy. Not going to the back end to push it out, not triggering something, so like linking the two together. That's what I said about the view MVVC. The third thing is that we worked with some method. Remember the one where it was equal to and made it disappear? And we did two-way binding with our form. It's very complicated to pull off with other JavaScript networks. The fourth and the fifth one, we ran a condition with VF. And the sixth one is that we learned how to use the computer property. Changing the variable live as the variable changes every single time. So this will be the equivalent of throwing a lot of events out there. Finally, we learned how to do a list render. So now I'm going to come to my final act here and to put in something that at least, that you may have seen or applied in real life. So let's see what we can do down there. So we've got this, we've got this. So let's see what we can do. Let's see, okay. What if I had a directory of the admin tier today and there were a lot of people and we wanted to search for these guys? So why don't I do a dynamic search on here? Okay, we've learned six principles. Let's put something in here. So the first thing is that we will create a computer property. Now I've already got something done over here. So we'll just follow that. Okay, admin filter. Okay. I think it's off, right? Oh, okay, I'm not going to be able to get out of this one now. Damn. Okay, let's see what we can do. All right, let's create an admin filter. Okay, I copy and pasted this pre-made so don't blame me, right? What we're going to do is we're going to let SB this message, the message that variable done by my view model. Then we're going to run a filter called this.admin.filter. So this is the just standard JavaScript filter method. All it does is that it takes a function here based on an item called admin based on the name. We're going to lower it to lowercase because you can see some of the names like myself. Lionel is a capital L. And if it's true, this will appear in the value, okay? So that's running a filter on the list. Now, the only other thing I need to do is that I can't use admins anymore. I have to use my computer property, okay? So I think the property is called admin filter. Okay, so let's fire up and see how that goes. Oops. So usually if something goes wrong, right? It's usually a bracket somewhere. Oh, okay, what's that bracket there? Okay, that's fine. One more bracket? On which line? Yeah, another curly bracket. Okay, I think that should be it. All right, let's see how it goes. Ah, all right. Hey, there's not even a display there. Oh, damn. Okay, okay, it's working. Whew, I was wondering what was going on. All right, so sometimes that happens, all right? One bracket and then you off your game. But let's just remove this thing right here, right? Bang. Oops, that's not the one. It should be this one here. Okay, and let's put this as... Okay, so finally we have done with the dynamic search thing. There we go. Bang, live filtering of entire list done in front of you guys, in front of code. Hope that didn't take too long. You can see this application in every contact list, every area. You want Aaron, A, A, done. Chadi, C, H, A, R, D, Y. Okay, so as you can see, we've taken through all the principles down here of the application to create a dynamic search box based on Vue.js on the code done in front of you guys. One tiny error down there, two maybe. And that's just a testament of how simple Vue.js is and how you can actually apply this system. So thanks very much, guys. I'm now gonna hand this over to Xilin. And anybody, let's go straight to Xilin and then we'll...