 Terima kasih, Eleno. Jadi, saya rasa dia telah melakukannya dengan kerja yang hebat berkongsi dengan kami bagaimana anda boleh menggunakan bagaimana simpel Vue.js dan bagaimana anda boleh menggunakan untuk mengambilnya dengan cepat. Tapi, Vue.js bukan hanya itu. Vue.js juga digunakan dalam produksi. Jadi, dalam perniagaan saya, saya Shilin. Btw, saya pembangunan pembangunan untuk sekitar 3 tahun. Dan saya telah memperkenalkan UI Leashes. UI Leashes adalah 2 untuk menggunakan aplikasi web. Dan saya dapat membuat demo cepat untuk menunjukkan bagaimana Vue.js digunakan dalam produksi. Tapi, bagaimanapun, kami bukan hanya yang menggunakan Vue.js dalam produksi. GitLab, bagaimanapun, juga menggunakan Vue.js dalam produksi. Dan anda sepatutnya mencari artikel ini dan melihat video ini untuk mencari kenapa mereka menggunakan Vue.js juga. Jadi, ada banyak sebab mengapa saya akan menggunakan Vue.js dalam projek besar. Jadi, bagaimanapun, saya perlu pastikan bagaimana mudah untuk belajar. Bagaimanapun, saya pernah bekerja dalam perniagaan lain dan kami menggunakan AngularJS. Dan saya telah mengatakan bahawa saya adalah programa perniagaan itu. Dan apabila saya menggunakan perniagaan dan memperkenalkannya, kerana saya menggunakan AngularJS. Ia merupakan penyakit besar untuk memperkenalkan kepada jenayah lain dan beritahu dia semua tentang AngularJS lagi. Dan satu perkara yang saya mencari adalah bahawa saya mencari jenayah yang penting untuk digunakan. Saya mengajar jenayah R&JS dan saya sedar saya merasakan jenayah yang sama apabila saya melihat jenayah AngularJS. Ia seperti, Oh, saya akan beritahu jenayah saya bagaimana menggunakan jenayah R&JS. Jadi, saya dapat memperkenalkan Vue.js dengan projek yang lain yang saya bekerja dalam. Ia adalah base dan PHP. Jadi, Vue.js sangat popular dalam PHP. Dan apabila saya memulai Vue.js dengan kecil-kecil-kecil dan apabila saya memperkenalkan Hey, ianya sangat mudah dan saya tidak akan menunjukkan ianya sangat mudah. Jadi, perkara lain adalah kode yang menjelaskan dan ianya cepat. Dan perkara itu, kita boleh menjelaskannya. Jadi, seperti yang saya beritahu dan anda dapat melihat Vue.js sangat-sangat. Dan ia dapat dipakai dan ia sangat kuat sebagai R&JS terutamanya untuk aplikasi besar. Jadi, dalam aplikasi besar, anda ingin mempunyai perkara-perkara keadaan jadi, kita mempunyai Vue.js yang dapat melakukan itu. Kita juga ingin mempunyai perkara-perkara keadaan untuk aplikasi yang sangat kuat. Jadi, Vue.js mempunyai versi sendiri yang disebut Vue Router. Jadi, segalanya yang anda perlukan untuk mempunyai aplikasi modern sudah di Vue.js. Tetapi, Vue.js sangat kuat. Oh, Vue.js juga sangat cepat. Jadi, kembali dengan R&JS sendiri, ia sepatutnya. Jadi, anda tidak dapat pengalaman negatif dalam framework langil JS sehingga jika anda memperlukan banyak-banyak listan. Vue.js mulai memperlukan sedikit sedikit sedikit. Jadi, Vue.js sangat cepat dengan semua bahan-bahan data ini. That's why they can render huge datasets. It's as fast as React.js. And although it's really, really powerful and you have everything in the kitchen sink, it's also really thin. So, you can start really small as Lionel show you he didn't have to plug in everything in the kitchen sink. You didn't have to learn how to how to use Vue.js. You didn't have to learn how to use Vue Router. You can just get started already. So, you only need to install the plug-ins as you need it. And when I was working on UILicious as a prototype to begin with, it was as simple as what Lionel show you. And as the project got more and more complicated and I started to realize the need of putting in Vue Routing then I put in Vue Routing as as it got harder and harder to transfer datas between parent to child components from child to parent components from sibling to sibling components and it was getting hard-passing data around. Then that's when I thought hey, I need state management then I plug in Vuex. So, it's really really lean and it's progressive. So, CodeShift also says the same thing. So, recently CodeShift wrote this blog. It was back in June. And they say like what's great about Vue.js is that it can grow into something more when you need it. And one great thing about Vue.js it plays nice with third-party libraries. So, when I need to plug in Tether to do my two tips when I need to plug in jQuery for some reason or when I need to plug in maybe bootstraps or like or some date picker module. It plays nice with the third-party libraries. You don't have to make it you don't need to do another adapter like I think in Angular back then so I haven't actually used React myself so I I would cite a lot of Angular examples. So, back then if I wanted to use bootstraps like for to do a very nice select dropdown for Angular I actually to find adapter library for it and plug it in. And sometimes they don't maintain this third-party adapter library so it's pretty pretty painful they don't get updates and they don't fix boxes. So, you're dependent on people who maintain the third-party adapter libraries. So, this one nice thing about Vue.js it plays nice. And I think one thing that I really scared me about React.js is JSX I couldn't accept the thought of putting HTML into JavaScript. Yeah. Okay, so as I mentioned Vue.js has a really easy link that's why I chose it for production. So, I want thing to consider about a large project is that can we keep the code maintainable? So, if you work on a really really large project and I've been working on web projects for quite number of years before AngularJS it was it was jQuery and we end up with spaghetti code it was horrible. So, one of the inspirations for how so so what what this translates to like is a code maintainable it's just another way of saying how can we not end up with spaghetti code. Yeah. So, one of the inspirations I I thought about when I was doing a little bit of video game programming along the side is that video games have really really complex user interfaces and how do they how do the video gamers keep it seeing? So, I did a little bit of our unity programming at at at a site and I realize that video gamer video game programmers are really smart they every single our object is in charge so that's why we have the Polymer project days are advocated by Google but the web components have is that they are still they still require a lot of polyfills for to support other browsers as well as older versions of IE and these polyfills actually have some add on to the have an impact on the performance of the web components itself and there's a lot of things that I found was missing in web components or was difficult about web components that I decided not to go with it but web components form the inspiration for Vue.js and they and what Vue.js does better with the web components is that it does it does there's there's no polyfill there's neither is performing very fast on each of area one of the browsers as well Okay so how do we keep code scene so I mention that every component should should take care of its own style it should take care of its own that logic so we instead of having lots live javascript file and one monolith CSS or SCSS file we every component has its own dot view file so in this dot view file that I just copied from out their documentation site on top it says it is the template so the template is base it is written in Jade Jade here but it can just be as simple as your HTML itself so that's your HTML template and a script which controls the logic of the the view component itself and right below the script is the style so everything is encapsulated in one file so imagine if you have hundreds of hundreds of components it's much more seen to find all these all the code within its own file rather than to dig up in some giant 10,000 lines of code but the problem with dot view is that the browser don't know why it's dot view so what you end up needing to do is to use build system like webpack and browser refile so that's one the ugly parts of ViewJS everyone when I talk about ViewJS everyone just ugh yeah like even I I can't do enough I can't do a I thought about doing a talk on backpack but I don't think it's just gonna do a disservice to all of you and disservice to webpack itself so I decided that well if you wanna learn how to do web do webpack for configure webpack for View by hand you can go to this really really good guide on webpack for View but if you wanna make it if you wanna be lazy View has a really good tool that allows you to bootstrap your your application very quickly so you could just grab View CLI and if you wanna do really really simple prototyping you could just do View it needs simple my project but if you wanna do you wanna bootstrap your application for webpack you just do View you need webpack my project so the production templates they do also do all the production builds pipelines for you so such as hot reloading linting testing and CSS extraction and et cetera et cetera so it's really good to it's really good to just use View CLI do get started so as for us in UI leashes our front-end stack is quite simple it's just it's a simple page application and we use ViewJS 2.2 View ViewX and ViewRouter we also use ES6 and Bebo and Bootstrap 4 and we only use jQuery because Bootstrap needs jQuery if we want for Bootstrap I wouldn't be using jQuery because ViewJS does a really good job of doing everything that jQuery could do and we also use Webpack but I'm not going to go too much into Webpack because it's really complicated and not going to do anyone the service alright so that's basically it's so before I do maybe a quick demo of just to show you what the available tools you can use for ViewJS perhaps is there any questions you guys have on how do you use the view for large projects oh unit testing so unfortunately we don't ah I don't unit test the ViewJS component itself I know React has a library for that core enzyme the funny thing is we build our own testing library that's why we don't use a unit testing library yeah okay I would like to actually mention something about the third party parties mm-hmm like I can play around with this new blood yes it's a sort of a GIS plug-in where you can are display maps and things on that we're doing that thing so actually talking about past right the problem I'm running into is that ah I'm not sure what it is because of my quotes or because I'm not doing something ready compared to vanilla JS and compared to the ViewJS and the ViewJS with the developed plug-in is the performance is much much lower and it's quite confused so it is a mapping a map library it's a yeah it's a mapping library it's ah it's a visualization thing like ViewJS I think you like ViewJS so I think the thing I notice that it's quite common among all the modern frameworks so this is not a problem that is committed to ViewJS I heard a lot of issues we're trying to integrate the D3 and 3 FJS coming from each of these library having their own methods of handling the DOM rendering that is on top of the frameworks own DOM rendering methods so because of these two there is some inefficiency so that is I think one of the unfortunate I don't really know that it has a solution for it what I heard from the guy who did the the D3 and the ReactJS hack was that he remove all D3 DOM rendering code ya it seems like a huge hack so I this is one of the limitations so if you have a library that does a lot of visualization and and because of this visualization they need to do their DOM rendering on their own then it might run into trouble with ViewJS and ReactJS because they have their own separate set of ViewJS DOM rendering processes and it's going to come into conflict and it might just cost your application to be slower one question ya so what about the asynchronous data so suppose we have some data which coming from the adjective there so how do you test that much? how do you how do you test asynchronous data? okay sorry and no question what do you mean? so how do you test that component with the asynchronous data here? oh so so this similar to uniqueness so this one I unfortunately I don't have a lot of knowledge on that so I why don't you leave that question on the meetup group I will do a little bit of research and come back to you about that have you look into code splitting and jumping ya definitely it's a nightmare ya ya ya it's a nightmare but it's done I've done it so I I could share with you like the configuration I have ya okay so maybe I could show you a little bit of some of the magic tricks that we have for VueJazz I think one of the things that I really like about Vue is the Vue developer tool so this is available as a Chrome extension so this is UL and we just basically is an IDE for for you to write user interface test so I'm going to just run one of this test here and you can see that you can inspect so you have to open your your Chrome developer tools first and you can there you see here if you is installed and your website has Vue is running Vue the Vue tab will be open and there's a Vue tabs here components VueX events and you can refresh it so you could inspect the components inside the inside your app so we have a route here we have a global event hub we can look at the studio there's a model container which when you click on this opens a model so it's really nice that you can inspect all of this and to debunk then and as I'm clicking each of these you can see what is the the data that is bound to each of these fields and you can see that in each of these components they take care of their own routes as well so that's why we could do things like we could just swap between editor and settings and back to editor and you just the the app navigation by itself it does not so far at all what is swapping out is just the the view itself is because of the view router so it's just swapping this this stuff out I think let me open more of this so you can see that is so you can see that the editor is just swapping out with the settings page so this just controlled by view router itself and it's very nice that the debug tool helps you to see all of these things so yeah so it not not only can you just see can you see the data object itself you could see what are the computer objects itself so in the script pane we could see that is loading a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a i u Cloud k d k stripped a k dan untuk projek ini dengan ID1, kemudian keadaan dan sebagainya. Jadi, ada banyak perkara yang sangat kuat. Jadi, ini adalah salah satu perkara yang saya suka tentang View. Bukan hanya mudah mengajar program saya bagaimana untuk menggunakan, ia mudah untuk mengajar bagaimana untuk menghubungi View juga. Jadi, itu saja. Jika kita ada banyak pertanyaan, ya? Maaf, maafkan saya lagi. Meditasi. Meditasi. Meditasi. Okey, jadi itu adalah salah satu perkara yang saya lakukannya. Jadi, kita tidak mempunyai perkara magik. Jika saya ingat, bagaimana-bagaimana angkulannya, kita perlu mempunyai sesuatu yang disebabkan n.g. dan banyak perkara yang membantu anda untuk membuat meditasi. Tetapi, ini tidak mempunyai menjadi View. Jadi, saya perlu membuat cara saya sendiri untuk membuat meditasi. Dan jika meditasi ini terjadi, saya akan mengubahnya menjadi keputusan. Jadi, meditasi adalah sesuatu yang tidak dibuat menjadi View. Ya. Okey, jadi saya rasa itu saja yang kita ada. Terima kasih.