 Hi everyone. So as you guys here, all JS developers, we must know about something called Yarn, right? So Yarn is a new JS package manager. It's very secure and much faster. It's taking the world by storm and it's trending right now. So yeah, roughly so. It's a very good tool and I like it personally. So for right now, I think Yarn is on top of the trending project on GitHub and roughly so again. Yeah. I'm sorry. Yeah. So this is Yarn. I'm sorry. Yeah. So 200 stars a day. By the way, this is data from last Sunday when I prepared for this tech. Maybe right now data is a bit different. By the way, you get the idea. But I'm not here today to talk about Yarn though. I want to talk a bit about Vue.js just one step ahead of Yarn in term of the trending project on GitHub about JS. So Vue.js is a simple yet powerful library for building modern web applications. What does it mean? Right. This is how popular it is. 31,000 stars GitHub questions on the Stack Overflow. It has the newest newsletter, right? 5,000 people on GitHub adapted by Spark from Laravel, the Logwell and just last week, it was picked by GitLab to be the official front-end framework. So I'm here today. By the way, my name is Yarn and I'm a core member of Vue.js team. So I'm here today to give you guys a very quick introduction about very, very quick and brief about Vue.js. Why is it a thing and why is it trending now? It's Java's report. So a bit of history. So Vue.js was created by this guy, Chinese guy called YoYuC and name is Yvonne, he's living in America right now, I believe and the code name is started in July 2013 and one year later, the first public release was there and so after that, one year later, Yvonne started to quick his every job, I believe from Google, and he started a patent campaign this year's March, and it turned out to be hugely successful. He's now working full-time on Vue.js, and he founded a core team just two days, three days after the patent campaign started, and we have 20 people strong in the team right now, I mean, 19 people in one week. All right. So just beginning of this month, we have Vue.js 2.0 released with a lot of new features and enhancements. So this is like a milestone in the history. If you want more about Vue.js history, I suggest take a look at this. A deck from Gazoo Pond, another member of our team, right. So this is the first glance of Vue.js. You have a div, you have a script, and okay, you know what, just scratch this. I will try to write a video instead, and how can I show my Chrome browser on this? All right. Thank you. This is how I get to this place, by the way. Okay. So let's go to GSP, all right. I'm sorry. The rest, SM PayPal guys. All right. Thank you. Sorry, sorry. Don't forget me now. All right. Sorry for this hiccup. All right. You can see this, right? So by the way, GSP is one of our official sponsors on Patreon. So using their service is just a good idea. So this is how a Vue.js application look like this. You have a division, and inside you say something like, you know, a very basic thing, say, hello, I don't know, put a name here, all right. And I'm going to use Vue.js right here, the edge version. New view, we take that element, and we put some data into the picture, and we say name, I don't know, put Vue here, all right, and we run it. All right, so hello Vue. Simple as that, that's a fully functional Vue application. Of course, you don't write this silly thing when you do real-time, real-life work, right? You need a form, you need some input, you buy the data into the model, and you send the data to some RESTful API. So let's do this now, all right. So let's put an input here. I'm sorry, let's see, it's not an input, all right. Let's say, what's that, model equal name, and that's it, that's all we need to do now, right. So see, hello Vue, and Vue, this model, and the data we have here, are bound together in something we call a reactivity system. Let's, we changed into, I don't know, hello talk, but yes. All right, so say hello talk, but yes. And I don't know, we can change this to whatever we like, hello from the other side. So hello from the other side, hello Adele. All right, so now you understand this whole thing to some RESTful API, so you need a button here, right. So when you put a button here, you add a clip handle, and by clicking the button, more than often you want to prevent the default hook. So it's just say, prevent. Equal something, submit, let's just put submit. So it's a method, so I would just add a method object into this stack. And let's say submit here, all right. And instead of just sending something to the server, I would just alert here. Here, submit in plus this.name, which is this thin, right. And again, just run it. So of course I need something here because you want an empty button, submit. Sorry, submit me. Okay, all right. So I don't know Adele because we say hello to her before. So submit in Adele. Simple as that. Of course you want to put this into a form or whatever. Let's say you have a form here, right. This is okay because you want a form for Semitic. I don't know if I even pronounce it right. All right, so instead of button click, you just put the whole thing into a form. And it's not click, it's submit. And run it again. Okay, so now you can just push enter here or click button here. So if you notice, I didn't have to refer to any documentation during the course because it's not just because I'm a member of VHS so I know how it works. Okay, well she didn't. Okay, I've been writing this a lot. But anyway, this is how easy and beginner friendly it is. This you must admit, it's very clear and everything is there and it's understandable. It's like English. So let's go back to that. How do you press? Command F. F what? One. Okay, that's what. F what? Oh, F what? Command F. F what? F what? F what? Oh, yeah. All right, I need a lesson from you later. So yeah, it's how easy view is. Yeah, but the thing about view is not just about easy. What we internally and we like to advertise about view is we often call it a progressive framework. And by, okay. How do you go there? I'm sorry. That's it? Okay, awesome. Thank you. So a progressive framework, what does it mean? It means, yeah, you can just start with some very small applications and you would, all you want to do is to have some declarative rendering or some component system in place. For that, you have the VGS core. But then your app starts to get bigger or you decided to be an SPA instead and you need a client-side routing framework or library on top of that. And we have that. We have something called a client-side routing, a view router. So you just add this onto the stack and it's very simple to implement and you have the client-side routing. And your application keeps getting bigger, right? It's a good thing and it keeps getting bigger and your data is harder and harder to reason about. So that's when you need to put, you want to put some state management library into the stack. And we have that. We have Vuex. Vuex is the Redux or ELM-inspired library on top of Vue. And it does pretty much the same. It's a large scale stage management immutable library, right? And then you want the Vuex system, you want to use Vuex with Webpack, browserify and you want to come and lie in the face. We have all of them. So this is what we call a progressive framework. You keep adding stuff into the stack when you need it and you don't need everything in the first place. All right. So the next, how I talk about is Vuex speed. Our Vuex is very fast. I know we have a lot of interacts here and yeah, but Vuex cut up defeats React in terms of speed, rendering time. So lower is better. And by the way, this is the third party benchmark. It's not something that's done by us. So it should be as biased, unbiased as possible. So this is vanilla JS, 1x Vuex and React, then Angular, the Aussie version. And despite being fast, Vuex is very lean, right? So this is just with 23 kilobytes. Can I move this here? Oh, sorry. Just with 23 kilobytes, you can have a fully functional Vue runtime build. And if you want the Vue router and Vue extra, just do what you guys about, just add nine more kilobytes there. Still half the size of React, Redux, React router, and we're not talking about these two guys here, which is Monster, Reynolds, in some of sizes. And Vue.js comes with added sugar. Yeah, by the way, this is our internal icon. We tend to play around with icons. So yeah, we have single file components. The single file components in Vue is some file that ends with Vue. And you can write the template HTML and CSS and you have a script in the same file. And with CSS, you can add your favorite SAS, CSS or less or, I don't know, Jok, or Puck, Jade into NNN. And you can have scope as well. And one more thing, normally you wouldn't need this, but you can use render functions in US in InView.js 2.0. And this helps you to have full control over the template that you write, over the HTML and DOM elements. So that means you can use your favorite JS, your favorite, not mine, I hate this. JSX with View. And I'm not sure if you want to do that, but you can. And View 2.0 comes with server-side rendering. And this is something that, if you want your application to be known by Google, being a pure JavaScript application, you should really take a look at this. You should really be serious about this. So it's faster, and it's SEO and everything. And you have ViewDevTools, which is a cool, developable tool extension for easy debugging. And when you combine this thing with View.x, you have time travel debugging, which is a pretty cool thing that I don't know how to use. Yep, I don't use View.x, I'm sorry. And last but not least, yeah, you can go native with Wix, or it's Wix, or on-send UI. By the way, Wix is being under active development by Alibaba and Ivan Yeo, because he's a Chinese guy, and Alibaba is a Chinese company, and they love each other. So they come together, and they build this thing. And we have this thing as well from Japan, I think. And these guys are integrated in this on-send UI framework into with View as well. And it's in the preview release stage, which is a good thing. OK. OK, I passed that line by doing this. Anyway, thanks. I hope that's give you a quick introduction about View. Thank you. So for more resources, you go here, you go here, you go here, or you go here, and I don't know. You go here and tweet me something, I would say. Yeah, this is me, by the way, because some guy take and waste me. Trust me. All right, thank you. You have any questions? I hope. Let's not. OK, cool, thank you. Yeah, this is good. Right, thank you. Oh, yeah, sure.