 So I just want to start off view three love it. I love you three. I've been doing Well actually view three, but just view overall I've been doing the last three years and it's really really good framework that I've been using I really want to talk more about it and let you guys know about view three coming up There one thing I like about view three is it's really easy to pick up I bring in some grads into the company sometimes and I've have they have a very easy time kind of picking it up Again, they don't have javascript experience, but they're able to kind of pick up Based on the structure of view How it kind of works Vue.js has been kind of around the last six years So it's like 2013 was the first version like zero dot six and it's been going since then and view three It's supposed to be released this quarter But it's been held back at the moment there so State of view just to give you an update on it I was hoping by this talk when I submitted this talk that view was three was supposed to be released in the end of 2019 so I thought by the time this came around I would have all everything done for you and showing you all the new features and There and like code examples of it. So unfortunately still in alpha stage at the moment now have a kind of I Guess that there's view Amsterdam in three weeks. They might release there I don't know for certain, but it's something that I think is there So it's still enough for release and planned for q1 They said when they up to when they kind of missed it They kind of said q1 so and then most of the RFCs are closed for comments at the moment So As well with the with it not being finished the only kind of version of it That's available at the moment is the kind of like the CDN version So we import it into your HTML and then you can kind of use the kind of JavaScript there What we normally do and when we're programming in my company is we use the kind of compiler the view js compiler So we have our dot view files and then we compile it That's not ready because the view loader that understands that schema of that file is not ready So again, the examples you see in the view repository is just ones from when they import the kind of the CDN link So it wouldn't be a thing without showing like How popular view is again, it's not the most popular, but I think it's kind of gaining traction how you kind of measure popularity and kind of Frameworks is kind of like up to yourselves, but I kind of picked it by like npm downloads So as you can see up here is the green one is that's we React obviously the most popular one, but then you see down here is View so views kind of come behind behind react and then you have like Angler amber source and backbone So I think views kind of get more and more popular again I think it's the ease of use of it again graduates can kind of pick it up senior Maybe infrastructure people that never did JavaScript before I've seen pick it up very quickly like so I thought that's what I kind of like about it These are the kind of new features There's loads more than this that they've introduced and these are the ones I'm going to kind of go over there So one thing about the these kind of features and stuff you don't see is it's a smaller code base now, so they've released The way they've kind of done it is they made it about 10 kilobytes now So it used to be around 20 kilobytes the core and they've kind of like brought it down a bit there There's better typescript support, which I won't go over here as well other features They're there is kind of like time slice and support static tree Hosting and you know, optimized slot generation. So there's those other kind of Features, but we'll kind of go through these ones here to kind of show you Hardcore the core what I found through like investigating this and going through the RFCs is really what they've kind of done is They've brought in some plugins into the core of ujs So that's the ones I'm gonna go over and then some of them they've just they were never plugins before and they've added them There's new features So you can think of it some of the features that are in view 3 you can actually do in view 2 at the moment And then when view 3 comes out it should be like an easy upgrade So I never say easy. Well, you never say easy because there's always gonna be some kind of problem But it should be like easy enough to do like so That's I'll show you some of those as well So just for anybody actually one thing I forgot to do how many of ujs developers are here I just kind of want to know Say 50 60 60 percent. Okay. That's good. Okay, Lisa's getting more and more popular. I've got to ask that in the popularity bit there So just for the the guys that are not ujs developers This is what I love about it is the structure of it So this is a single file component and you've got three sections for a template Which all your HTML goes to the script where all your kind of JavaScript goes and your styling again When I show the grads or maybe the senior infrastructure team how to kind of develop that's what I show them And they can understand it pretty quick, you know So this is a very basic one of it and here you have in your data section your reactivity So you have a thing called greeting and the greeting will appear there and that's your one web component again It's very very simple for them to understand So this is I can what I was talking about earlier a compile time file So Vue.js has to use webpack to convert it into a HTML and JavaScript files then afterwards So this is not what's going to appear on your kind of application. It's going to Compile it for you and this is not what's ready in Vue.js 3 at the moment to take in the new features that it's done so Okay, so one of the big ones there one of the big features that came in and there's a lot of controversy over it I think people kind of got the wrong in the stick straight away is Do you know the way there was the optional API now? This is composition API again, you can either use one or the other in Vue.js 3. It doesn't really matter But I would start to use composition API for more bigger components again. We'll go through that but It just really helps a kind of code reusability and we're kind of show that So just again for the people that don't maybe know Vue.js here These are all the kind of options So this is the option-based API and you have these different sections You have like the the prop section the data the method the computer Components watch and mounted and these are all the kind of things This is really good really structured grads understand it You know people that haven't done JavaScript before they can kind of go I need to do met new method I do it in the method section. I need to do a computer property I do in the computer property section only issue with this with this structure as your Components get bigger and bigger it can't be it's harder to maintain and it's harder to reuse some features You might have in it So you might have a method in here that looks after the greeting and you have a message here And they kind of work hand-in-hand say When you want to use that in another component You can't extract both of them with the options API So you can extract this into like the method into a JavaScript file But then the other kind of the reactive data stuff Doesn't follow it or if you're watching the the data property there that doesn't follow it either You can't extract it out and that's the kind of issue that they had and I've seen it in my own kind of program In our own products that we make like some components I can't bring down fair enough and there might be parent components really and The composition API is kind of going to solve that Again with some of these features you're kind of like I kind of knew about the problem But then there's a solution you're like actually that's a solution, okay? so and It's really it's about like maintaining that's all I want in the products is about maintaining and readability making that high quality luck So the composition API again, I just took this from view schools, which is a quite a good resource You've seen before that there was the different sections export default and there was the different sections in the options API and now here you just have one method called setup and in setup you can come to find any of your different Your different functions that you want to use so you can kind of like what you do is the import reactive or computed and you say actually, I just want to do the Reactive bit and I want to do my method and I want to return that so it's available in the template Again, the thing is about this is like you define what you want and you return what you want then big thing about this as well is this can all be an object from like line 12 to kind of 19 you can put that in a separate JavaScript file then so you're kind of like having your monitoring your state of the account You're also updating the count in one JavaScript file. So you can export it or have it imported from a JavaScript file into your Component and then you can use it in any other component. So all the kind of properties are following each other You're the computer in the watch. So that's kind of that makes it a bit easier to maintain You can also reuse that kind of pattern over and over again now the only issue I find with this and the thing we have with the options API nice and structured nice nicely done grads can kind of and senior engineers can kind of understand it quickly and Implement it and you can kind of do your code reviews were quite good with this you can do whatever you want Anywhere you want again within your own company or within your code You have to come up some pattern that somebody doesn't just put a method up here And then computer and then another method and then reactor properties at the end, you know, you can kind of really create unstructured Patterns then so with great power comes great responsibility on yourselves to kind of do that and that's what I see It may be a problem in the future with it Just to show you the difference That it's it's really the same. It's just another way of doing it Again, you can either use composition or optional API there so again, we have here we have money and Delta and They're reactive and we get the the Those functions from view so exactly as well. So the one thing I couldn't do With the view at three code base is get composition working So I imported it from view to again, you can get composition in your view to application at the moment So this is just my workaround for now So what I can do is I can have reactivity money and Delta and I can that's a kind of maps to the options API there I can also do computed which then maps to the computer kind of Functioning the option of the API again, they're all kind of following the thing So it's the same kind of thing. It's just a different way in a different pattern of doing it The only thing is I can export this this section here to here to a JavaScript file and call that a feature and then import it into my component and then all I have to do is return that object and Then it's part of the HTML then and I can use that kind of functions in the HTML So again, just with this as well just to explain it with the composition API everything you define you have to return So I have Delta money. There are two reactive properties I have to return them to be reactive in the HTML and Then format of money is a computer property and then add as a method which I'll use in my HTML So I have to return them at the end and they're part of the setup and that's all I have to do Then so that's the kind of composition and how they kind of map to each other. I think it's quite powerful I think it's going to be a lot of reusability available on it Okay, this is another feature. Does anybody have anybody pay portal? Does anybody know portal is? Okay, about half the crook. Okay, so portal is like you have a gun you shoot the wall Yeah, and then it creates like a Portal and you shoot the gun at another wall and it creates a kind of connection between them Yeah, so I can jump in that portal and I can peer up there So sometimes you might want that in your in your DOM Yeah You want to want to define something when I'm coding in a certain section in the DOM or a web component But when it renders, I want it somewhere else in the DOM. Do you know that kind of way? So I'll bring you through kind of idea again. This is useful for kind of pop-ups and modals and notifications where they're kind of like nearly at the end of the body sometimes because you don't want them interfering with the Rest of the DOM, so but really when you're maintaining it You don't want to be going up and down going okay This is the button that enables the modal but then I have to go to the bottom page to kind of look at that code but this allows you to kind of Co-locate the information when you're programming but when it's kind of Executing then it renders somewhere else. So I'll just show you a quick example here is a card class and Here I have like a button and when I click the button this section appears There so that's fine. It's just a V show and V show just toggles the display CSS attribute to kind of none and show so that's all it does But I don't want this class user class here interfere and with my With my like little section here It might have stuff the CSS that I don't want to have it But what I really do want is I want this section here Located next to the button because I want the grads to understand this button and this is connected But really what I have to do and if this is a modal kind of if I had a class called modal They might interfere with each other or this class might interfere with it then So I'd have to move it out of here and to the end of the body then So that's what portal does it says I can define it here And this is the kind of idea is I can define it in this nested kind of component when I'm programming so And what I'm saying is the target and when it's running it actually appears somewhere else in the DOM So I could say here when I'm programming This is the portal and this is how JavaScript or the VGS knows it's wrapped in a portal element and then when it's Running it will actually it's probably what it's doing is a very simple like Find and replace so it's going find me all the portals and then I'll replace them wherever they say pop up target So you have to have that so that's like your portal like I shoot up the wall That's my target That's my source and then I want to move this to where the target is at the end of the room So that's the kind of way it's doing it again I never had that kind of I did have that problem, but I didn't realize it until this again this is available in Vue.js 2 through the view portal API, but now it's part of the core And when I was looking through the code, this is part of the code already So you can see there's three different types we would go through there So again, this is just showing you that I can co-locate them now So the problem had two slides ago I had a button, but I want to say this button enables this kind of Say model or or a show and then it will actually wherever I've Put an ID pop-up target. It will appear there in the rendered HTML So that's what it's kind of solving so Yeah, so it's kind of It's a handy feature. I think as well so keep in co-locating get in more maintainable and people understand And okay this button and this is the code that activates and then when it's rendering you don't care because it's just for the Rendering somewhere else again. You can use it for other things Especially there like so so that's the kind of portal feature suspense is another one That's in core that's part of the core now. It used to be in Vue 2 I would use a thing called Vue weight plug-in. So the Vue weight is like, do you know when I fetch information? I want a loading kind of bar sitting there Now they brought that into the core So it's part of the default thing and this is a type that it understands Vue. Just 3 so all I'm just saying here is this template as Soon as it's ready then display this component here. So it's just kind of like When you're doing the fetch say when the fetch is finished Then say fetch finished and then it will display that and it's just a handy thing to do your loading again React has brought that into their core as well with that Render triggered. This is a really handy thing. So render triggered is part of the life cycle now of web component So this is a web component for Vue. Yes, and you have these different life cycle methods and now it's render triggered So render triggered when it triggers something to have to kind of new render again It will run this function and you can kind of put like debugging information or you can put debugger there and say Actually, you render it again. Why did it you can kind of investigate it again? You can look at kind of performance improvements there again. That wasn't available in the Vue 2 fragments Fragments is a handy one as well. I haven't had a Use for it at the moment But the thing is with Vue is in your template section here Which is kind of figured out is you need one root node or one root element So you have a Vue instance and one root element. You have to have that connection Sometimes just for sake you might have a wrapper node around or a wrapper element around your code Just because Vue will complain about it if you have like Just these three elements here input span P and you don't have fragments around it Vue will say you don't have a root element You need to create one now sometimes you just might create one just to have it Just to make it Happy there. So one thing is that you can do is you can wrap fragments around it again Fragment is a type that Vue understands now in Vue 3 again. I had to use the Vue fragments again. It was a plug-in and You can import it and that's how it kind of Is useful then so again, this could be stuff for like the parent wants to be the wraparound three three like Elements so you don't want to have to do the wrapping yourself in this web component just for the sake of it So as soon as this compiles it gets rid of fragments. That doesn't appear in your HTML or any divs or any anything there like so So this is the kind of output of fragment as well how it actually monitors Which elements are together within the fragment is it has a fragment ID? So that's how you know so we had three in the last one Over here. So this we had three elements. We had input span and that represented all those three elements And then that's the output. So that's how fragments kind of monitoring How they're connected together usually what how they notice is it would have a div around them And that's how it knows that together and it would have an ID on that div So that's a kind of work around then for it Another change as well is V model changes So V model changes is We have a parent here called settings. That's a component and then we have a setting card, which is a child of settings parent So what I want to show you is how we would do that in view to is we would have you can't maybe can't see it Is we would have one V model to do the username and then we would have two props to do email and location There so then we would input that in and on this side then we would have For the V model. We'd have to have a prop called value. So V model Has to when you do V model you have to have a value in your custom Component there So then you would have to say I actually need more information that has to be reactive and two-way binding So you have to create props and then you have to create emitters then or events. So here I have to do props I have to call one of them value as well. So that's the only thing and then I have to look after this So again, it's a bit verbose, but then ever knew kind of seeing that people wanted actual multiple V model properties now you can name them you say V model dot username or colon username V model email V model location and now they'll come in as actual props username email location again And all you have to do though is you have to admit eight update and the name of the prop and again It will look after it and it will be reactive again. It's nicer code and it's more maintainable there Another thing they've introduced as well is custom modifiers So in view to you have custom modifiers like trim for your input So you want to make sure it takes out the space or you might have lazy or Or a number so they kind of like modified the information when it's emitted up Straight away. So now that you couldn't do it in view to but now you can do your own modifier So you can kind of go dot reverse and that's all that is a prop and you say if top reverse is true Then when I admit the information, I actually reverse the information beforehand. Again, it's just a boolean for you So that's the kind of information Another thing as well. I haven't really used it myself is there's a new custom directive API. That's how you do Directives in view to now It's kind of following the way the life cycle of an actual component in view Three and view to so again you have in your component and normal one is before mounted before update That's that life cycle in view three, but it was a bit confusing here So I think ever knew it saw it Why don't we make component directed the same kind of life cycles? They're the same names and people understand it from a web component I haven't used it yet, but it's something like I think this makes it easier for people understand Then one other thing as well That's changed and it might I haven't kind of tried it out yet because I don't have the compiler to kind of change dot view files to outputs is view reactivity so how view reactive works in view to is you have a Data or you have a thing called touch like a data reactive element called or property called touch When you create that it uses a thing called object to define property to get a setter and get her on it And in the setter it will kind of weave in its own code to say when this is set Notify people that are interested in when this changes and this is the watcher the watchers kind of always kind of gets notified That's that watcher section Once it's kind of the setter is like you change that value of the touch property to something else The watcher will be run and the watcher would say if you're watching this then Rerender so we'll call the render function again, and that's how kind of re-renders the stuff So how it's changed in view 3 and you shouldn't see it really Is it's using the ES6 proxy before it was used in define Define properties so again one thing you should see and I can't deny Our claim is true is you should see and performance improvement. That's what they're saying I can't deny a thing so that's one thing you might just by upgrading to view 3 see a performance improvement then So other things just if you want to see the code base It's there and run that time a view Amsterdam is in three weeks If you want to go to it official view podcast by view mastery there if you want to keep up to date And that's how I keep it and That's all the questions I have then okay You