Intro to Vue.js

Key Takeaways

cool um so um so welcome um so sounds like a lot of folks like we're looking at my profile ahead of time but let me just introduce myself a little bit um i'm you know been in la for um about 12 years now doing a number of different startups um you know right now i'm a cto of retina ai we're doing artificial intelligence for another one of those buzzwords for marketing analytics um but our web app is written in vue um i've been a long time you know web developer uh like leading various engineering teams but switching between a number of different languages and frameworks like going way back um i wrote things in cgi scripts um not sure people even know what that is anymore um you know it's all server side generated uh websites that was uh way back in the day um did things with java um php was a big proponent of that um definitely a lot of server-side things um so uh let's say uh about maybe eight years ago or like you know 2010 2011 or so um javascript really started um you know coming back right it used to be this thing that like you know always broke so like you want to write as little of your code in it as possible because all the browsers were were doing things like a little crazy but then jquery came out and then finally like everything could actually be written in javascript um and so um i who here has written things in jquery oh wow okay so you're all battle scarred all right um i mean it was great for the time i mean otherwise you wouldn't have been able to do things like um in javascript so you could change things on the page without like a full page refresh you know server side so you wanted to change this one thing over there you could just go and select that element and go ahead and change it um you could actually build in nice user validation things uh where based on what people were doing you know they were able to immediately see some sort of like um you know were they doing it right you have to get to the end of the form and then hit submit and then figure out that oh no i need to fill out all uh uh all over again so anyway so jk was great one of the things i built on top of jquery and this was unfortunately proprietary um was a framework on top of jquery that i think did it right um there's a lot of things where people are doing wrong with jquery where you try to select into the dom and try to like store your state in the dom and do all sorts of wonky things like that non-unidirectional flow um but definitely having a controlled event loop uh having um things be declarative within the html itself writing html and html that that's what this framework did it was specifically for lead generation you would end up with a single page app that would like show you one page you get validated put some inputs show you another page that sort of thing anyways um that was great and then i discovered angular angular is um like wow like i don't need to build this thing myself right it's actually a single page app that can actually manipulate all this stuff angular has been um you know a great uh uh great time saver great productivity thing i think for a lot of the folks in the room i saw who raised their hands about it earlier you know it had a steep learning curve and there's definitely some abstractions that people are it's easy to get wrong but um you know a really powerful language then came long react right uh sort of jumped on board with that as well um getting it so you get some performance actually um you know we had like some large uh pages that had lots of reports and lots of information on it and they get pretty slow so again some past companies so react actually helped to inject a lot of performance on there make it a lot simpler to do that application and in the same space kind of what started doing things in a node on the back end to try to get the same that we were doing the front end in the back um doing much in python current companies doing a lot of things in r i do a whole bunch of different languages i feel like you should use the right one for the right tool and we can geek out later if people really want to about different different types of ones that are doing different things i'm also a big fan of a type script as well in in the right context it can bring a lot of a lot of efficiencies to how you're coding um but anyways then it's covered vue um a little more than a year ago um and uh you know it's kind of like looking at it with some of my previous company as something we might switch to and then end up founding my current company and kind of like jumped whole hog into the whole thing and uh it's been really great ever since cool so uh what is view uh well so like why why why is zelda's hype right so it's actually been getting um a lot of popularity um you'd see actually that um it's just sort of neck and neck with uh react these days in terms of github stars um angular sort of forked itself for whatever they did so like their things got distributed but um it's actually it got really popular in 2017 uh the beginning of the year there uh that's when like things really took off 2016 is when the laravel community picked it up as their their dedicated front end um but vue um it was created not out of one of the big tech companies um evan yu who created vue was a former googler but he wasn't at google when he was doing it the idea is that rather than say facebook's you know doing react or google during angular it started from the beginning as a community effort and even though it's gotten corporate sponsorship since then um you know so alibaba and baidu are actually paying you know uh some of the new's a salary in order to come have them kind of work on that it's been adopted by like adobe and ibm you know various larger tech companies so what is view well it's a view oh obviously done we're done all right uh it's a view layer uh and so it fits in the same space where react does right um and where angular 2 and above is trying to be although it's wiring a bunch of things in addition to that um and so the idea is that um it's about everything that you do that's interacting with what people are seeing on their screen right how it appears there in a nice unidirectional flow you start from just one place and you control everything that's going on the screen you you have a nice standard way of handling user interactions you know different events they might do click events you know touch screen events all that sort of thing and so starting after react vue was also able to take advantage of a lot of the lessons learned from react so um so we got things like uh the virtual dom yes so the virtual dom is what makes these single page apps a lot faster than they used to be for all folks in the room who were jquery developers um imagine you you had a whole list of like a 500 items and then all of a sudden i don't know you wanted to change the color of all of them or something you might need to go and select each one of them and change the color on all on all of it you have to figure out you know how to do that or you might end up destroying all the elements and then recreating them all over again the the browser doesn't like that sort of thing it's kind of heavyweight to change things and create and destroy all sorts of dom elements especially select them all the time so a virtual dom helps to make the lot faster by maintaining a model of what is there and it only changes what it needs to do to get where it's going to go this is definitely what came out of react and view just jumped wholeheartedly into that it also did it in a universal app style so the idea is that you're able to do server-side rendering of your html just as you do in the browser so um it's sort of what everyone assumes these days in their you know angular 4 or 5 or their react 16 or whatnot but um you know it definitely was an innovation at the time and it's helped people to do um you know build workflows where say your html is generated via um via node code um like taking in some state generating that and outputting it as a template you can even send it completely non-web related we generated like some emails using um you know uh node in the past for some other companies so just no no no browsers involved so it helps with testing it helps with um of course universal apps a universal app being something where you write your pages and they render sometimes on the server so that what gets shipped to the user is html and that renders as fast as possible or things which are rendered within the browser so that the um the users has as fast and as responsible and experience as possible cool so um where so that's how it gets fast i mentioned the simple uh one-way data flow would be something where you're trying to control something on a on a website um and you're trying to specify uh let's see these list of list of items on on the website right uh and then you you have some reason to change you reorder them you want to sort them in some different order for example or you want to add an element in the middle right what you could definitely do is get rid of all of them just regenerate it all from your data but that would be expensive uh so what you'd rather do is you'd rather go through the view layer and say like here's my data i just mutated my data and view will just take care of making it look the way it's supposed to look so was that you guys have all dealt with this sort of thing before i think some of you all right um html like templates this is the thing that really everyone who's coming from react really loves about vue at least the ones who maybe were always a little bit uncomfortable with jsx files i i've never really never sat well with me to write your html in javascript in javascript and not and have to do things like um not have your four you know in a label like label for something or whether not actually refer to that because well four's a key word in javascript so you can't do that um it always seems wrong to mix one language with the other language being someone who has like learned a number of different languages i'd like html to be html javascript to be javascript that sort of thing um it's just a clear way of thinking about it so um i've been blabbing for a little bit let's talk let's look at some code here so this is an example of a view app what it's doing here is it's making this thing on the bottom here where you can start changing that and you can save it and do that sort of thing so um this is just on jsfiddle do note this is on an earlier version of you but it kind of deconstructs it a bit so i think it makes it a little bit easier for people to see um and it wasn't me it was this this guy um anyways so let's let's talk about what's what you're seeing here so um in uh in the view uh component here so this is the uh this is a a view template uh and mentioned it looks just like html uh what makes this magic here is this uh this id the app id here that's the reference that in this case view one is is hooking into and it's hooking into the element and thus everything inside of that div is now controlled by view the the other thing we're doing here is we're defining a new uh new component uh within view and so a component is um you know the html and the javascript that makes it do its thing all together and so that's what's going on here this is the template id item edit and this is just one of these little lines here the idea is it has some sort of list item that is displaying you see in the span oh yeah um and uh the the actual part which is uh being displayed is the item.name right so each item is being output there one can do nice little filters as well um sort of like you know my filter or whatnot at that point in order to transform it um okay so and what you're seeing here is you're seeing um sorry this is a older older view syntax here well v show can do a v if vl sort of thing but the idea is you're only showing this particular span if that property uh in addit is not true right and the other one if it is true then you're gonna show an edit screen so that's this is in edit this is true and then now it's uh it's false cool so um you know that's the idea of it being unidirectional uh the idea is that the templates are just listening to some state and you're just changing the state you're not looking at all the things that are listening to it um so you can generate additional items that we're looking for in edit and whatever was modifying in edit didn't have to worry about that great so now we have here we're getting to the actual click handler and so that's what's actually showing is either the save or edit link that we're doing so um the idea is that it's uh okay so this is connecting into the uh click handler in javascript the at click you guys see that oh there we go cool awesome uh all coding should be done in the dark i guess is that just too buggy all right cool uh so and what it's doing here is the uh so it's preventing the default thing that you'd normally do with a link normally when there's a link it would try to navigate um but it's disabling it here um and the idea is calling this toggle handler and so in our view component we have a toggle method and what that's doing is it's just um well toggling the inedit state so that's exactly what's going on here whenever i click one of these it's toggling each one of them notice that each one of them has its own separate state um that's actually being what's being defined here in the data attribute these are the data for that component and it's just a single boolean which starts off false so view components all right so um view components are a nice view innovation uh where they do exactly you know every web developer knows those three things html css and javascript so why not like put it all together and make it uh something that's part of your view framework because they all affect it in different ways right so the idea in view is that you can combine all of them into a single dot view file uh that might get some folks who have been maybe used to having their css be all separate in a separate file feel a little nervous because you start learning about like you're repeating yourself right but actually what you're doing is repeating that component all over the place and it can maintain its own styles however it wants to um in the react community and now with uh some later angular things they've been adopting up components as well um some of the things that's happening with vue is they're hooking this up with the web component standard uh so that then when one can take a standard web component and bring it in as a view component and vice versa uh it's not quite that smooth yet um but it's headed there um so great so what you can also do with a view component is uh you'll be leveraging those preprocessors so um in the time between when react and angular were first made like this whole ecosystem of pre-processors has sprung up starting with say gulp right um we're getting well even older there were some other things but goals when it got easy and then webpack now there's like roll up and other sort of preprocessors the idea is you're not writing in the code which is executing in the browser anymore and so you can be a lot freer to have your code be structured the way that you want to think about it and that's why there's no such thing as like running a dot view file just straight loading the browser right it's just it's a source it's not actually the executable code so we do lose a little bit of that um but there's a nice set of like debuggers and tools for for stepping through things uh that it doesn't tend to be a problem um react and angular by the way these days do the same thing and all modern sort of web development runs through some sort of preprocessor uh that's how you have type script and whole new languages that are created or people are writing in es6 even though the browsers don't support it or some of the browsers don't support it so um cool so we were just looking a little bit at the html templates there's a whole lot of other directives that it has um the things that were there v show and and whatnot those are actually um what vue calls directives and that's very analogous to an angular directive the idea that's an extra little bit of control that you're attaching on to the different elements that you're doing you attach different things onto it in different ways and what you end up getting is you end up getting like super powered html you start with html and you add this extra little things on it and all of a sudden it does more right just like we're showing that example a little bit oh like you can add that at click.prevent and all of a sudden you're hooking into the the click handler you could add a little more code there as well if you really wanted to get a little more elaborate certainly as a best practice you shouldn't be writing all your javascript in your html all over again because then you're kind of breaking things all over again but it's very easy and very powerful to to do and to superpower your html using these view templates so um great i will mention that because vue has decoupled it if people want to they don't have to use view templates to use view so if you're already hooking up your whole application to be view and then you bring on your react developer who's just gung-ho about jsx and has to write jsx they can write jsx and it can run in vue they can write a render function and it can run in view you could write pug formerly you know jade and and run it and view um so the idea is that via the power of these preprocessors and the fact that it's hooked in pretty deeply with them um you know anything that has a preprocessor in webpack you can run in a view component that's on the html side on the css side the same thing happens so you can run your css and you just call it a style you know tag and you put your your css in there and you're good to go but um people have been getting a lot more mileage off of css pre-processors these days um you know especially if you're going to do like nested things you're going to do a transform or you want to find some sort of variables like that set uh like the main colors of your site or how you want to set up your padding and your spacing and your grid system and all that magic that map that happens because you're using a css preprocessor you can do that in view in fact you can use it a little bit here and a little bit there and you can use your css here and you can use a post css there and then oh you happen to hook into this library that's using less so you can hook into your less there mix and match because it's all hooked in to these preprocessors um one thing that vue does that is new on the css side is uh using component scoped styles and so the idea there is that in your single view file you can actu where you have your html and you have your css all in the same file if you add the scoped keyword onto your style view will make sure that that style only applies to the elements in that particular component so then you don't have to have really really really long names just to um like re-select the thing you're looking at again this is like like bem and whatnot like i'm a fan of those as far as like clarity but um imagine you didn't have component scoped css you just had your css file and then you had a whole web app over here in order for this style to refer to this element it has to have sort of a globally unique name and there's all sort of like you know rigor model has to happen in order to do that why not just put them together in the same file and you just say scoped and that style applies that that element and you're done so um it does some magic by adding on some extra like pseudo ids and things like that to make that happen um but it's uh it's pretty nice when it does work there as far as you can make use of it very easily and it mostly just kind of gets out of your way one thing just to if you are using a component scope styles uh that's a little bit of a gotcha is uh it can become a performance issue if you're attaching it to just the type of element like all your anchor tags or all your li elements or something you should attach it to classes and not to elements that it works better in the browser that way just due to the way that browsers run css lastly so the last bit is of course the javascript um because you're running it through a preprocessor anyways in order to combine your javascript html and your css you can basically do all the javascript things so you can run es7 you can run typescript one of the the big advances that's been happening in vue like in the latest versions is they've been adding typescript types so the idea is that native view components and view code will actually have type strip types so you get the auto completion and the validation and all the power of typescript as you're writing your view code and just like in the html and the css you can mix and match right you can write this one component and it can be in typescript and this other one can be an h6 the other one can mean is five i wouldn't recommend you do that but if you really want to you can do that all right uh other things here so um the batteries are all included so because vue sits in the same place uh that react did just at the view layer it's taken all the different battle scars that react learned and just basically copied them just wholeheartedly just copied it copied it so basically if you can do something in react you can do it in view uh and so uh one of the big things that came out of reactive of course was of course the the flux related libraries for maintaining state right uh imagine you have a whole tree of different elements that are going down and you're trying to have one element on like the you know right side of the page here um or left side of the page for you alter something that's going over here well you might have to mainta store it at the top and kind of like have both of them pass it all the way down through the dom hierarchy and that can get pretty clunky so um one of the things that a flux sort of thing can do is instead of trying to um pass everything properties you can have sort of a globally shared state um and the idea is a single way of transforming it a single source of truth a single place of reading from truth um as to what is going on in your app um and so there what happened in the react world was that after they came out with that flux then people were like well we like that but it has some rough edges so he redid it with redux and then other folks kind of started there's like dozens of them now as far as different like flux clones and different spins on it or whatnot um it's been nice that in vue there's basically one that everyone uses because it's the officially endorsed one vuex and so it's really powerful and that takes a lot of the same features that you've gotten out of redux you can for example name space your different states um you can um you know attach your different uh getters and setters and be able to make things like fully modular it also hooks into debugging tools so there's also official view x view dev tools and those will hook into the the view x data stores so you can see them you can see it how it's changing and i'll show you that to you in a little bit here so great that's your store and you have a view you have another important thing which is like what controls all of that what actually executes all that code and figure out what uh what components to load and all that sort of thing that's your router right so um the the router goes from the url or basically external state of the world and figures out like what what you should be doing at that point um and so there's an official loader router for for view and that's the view router great everyone just uses that it's really powerful it does all the things that you would get um you know out of the react world and just does it one way and you don't need to worry about it being reinvented every three months or something it's just the one way that they're doing it in view in addition uh there's a whole ecosystem of other packages so um i was mentioning a little bit ago that there's um the site awesome view um if i was going to do this basically um here yeah so you uh you want to do your data table like pick how you want to do your data tables you want to do your notifications you do how you want to do your notifications you want to do progress loaders great take your pick pick your poison um basically anytime somebody was doing something in react they tended to be like oh well let's just do this in view too and it's easy to do that because again they sit at the same layer and they're able to do it but what you're getting out of all of these is you're getting all the simplicity and the build things that that view does as well so yeah i mean you want to do your icon sets whatever you want to do your validation models your basically whatever the heck we're using some things for graphing for example we're using high charts it's a nice view high charts plugin that's great you want to do graphql great you do view graphql and there is there's it's all hooked up and loading you know all the things that people are doing in the react world um and and they just come right on over to to view so all right i think folks get the idea there uh it's like um so um let's see cool um editor support actually here i'm going to mention that too so um i actually use adam but um there but other people use others things so all the modern and well supported editors have uh have view support as well um even uh even old emacs users anyways um um all right so uh yeah the the idea is i mean the power of open source of course right um and so you get all the syntax highlighting um you'll get auto complete all the goodness you get out of an ide um nicely supported in view so um great uh huh all right so um some of my favorite pack my favorite packages before diving to code here um is uh nuts.js um and i've been uh it's one of the even though it was a little hairy when i started using it i jumped in early and been getting a lot of mileage out of next next is a view clone of a react framework called next because you know it was react so they stole it made it into view and what it does is um it handles all the the webpack stuff that uh for you which can otherwise get a little bit hairy when you're doing something that has to be compiled the way that vue does and so you get all these sensible defaults it just sort of works out of the box but you can also go and modify things if you really want your webpack build to work this way and you prefer this minifier and not that one and you really want tree shaking or whatever the heck you can do it that way you also get all those things that everybody's been loving in the react world like hot module reloading you you edit your code you hit save and then bam your your page is loaded and showing that as well you get server side rendering and universal apps so if you're writing a page that's actually performance sensitive um you can actually have your what's first served be the html and that's actually rendering the actual content to let the browser go and do its thing load images all that sort of thing um and then afterwards it can uh asynchronously load all the javascript so that any subsequent page transitions are just single page transitions so it doesn't have to go back to the server in order to just navigate to another page um some of the recent things they've been adding uh is a static site generator um i think everyone who has a blog or a you know instead of using wordpress which is hacked every other second you should write a static site and have it just serve html and javascript and css and and not be hackable in that sense anyways um and so the idea is you can write your your pages as a view app and then you just tell nuxt generate and it will output static files you just like send those up or hook it into a ci cd pipeline or whatever whatever you want to do and it will go ahead and and load that quickly i'll show you guys an example in a bit last thing about nuxt is the what it does as part of making it simpler is it handles a lot of the routing for you i really like this style where really there's like two maps that you're kind of doing as you're writing a web app like two like tree structures you're doing one of them is the url structure of your site hopefully you have a sensible url structure such that somebody could actually bookmark your pages you're not just single page apping at all so that like they're like deep in your your app and hit bookmark and then they go back to it and they just end up on the front page again right so if you have some sort of structure to urls you're also doing things to your your components and how you handle the routing and you know ideally these two sort of like go the same way well nux just makes that simpler the idea is you place a file in a folder and you have the folder called i don't know blogs blog posts right and you have your file within it might be underscore id dot view and the idea is that then that will generate a url that can be blog slash five slash ten slash whatever it is and it can be dynamically routed based on the url to that particular view page and just just all works um i'll show that to you in just one second as i um actually yeah let me do that now all right so let's start here this is a the way that nuxt works is um just like how some of the highly opinionated web frameworks are have been working is that certain directories have certain meanings and you just always use those directories for their meanings and thus if you're picking up one project and going another project it's pretty easy to tell that well your pages are in the pages folder and that's where the pages are rather than in source modules i don't know whatever something yeah um so uh yeah putting your source and dist because that's wonderful anyways um okay so here we have a um a view app you see the top here this is a template this is the html as you can tell this uh this is what is this this is the css no it's not the css um this is the javascript part and it's in a script tag that's really nice and then um no there's no there's no css part to this but if there was um you just put that in the style tag and and you're off and running um okay great so um the idea here is that um just by putting things in these different folders it's automatically setting up the euro url routes for that so let's do that so it is uh it's running webpack and like next is actually compiling it and running it and now running a little bit of a local server in order to host this page um but uh kind of handled that all for me and this is the the page loading in dev mode right now so great here's the page um and uh if uh let's see if we're looking at this what's actually happening is oh interesting okay we can't make that go away all right great so what's what's loading with all of this right um is uh here let me navigate to another page so i go to the about page and you notice that what happened was it didn't actually have to go back to the server to do a whole page refresh this is a single page transition so um it's a faster experience for your users it's all happening just within the browser um great um let's see some of the other things you can do here which i don't remember if the oh yeah great so here you can see the state and you can be incrementing it and all of that's hooking into the the view debugger here um we'll go into the code in just a little bit here but um you can see that that's uh it's going ahead and changing that and you get like time travel here so you can even go back and see um you know if you kind of undo some of these like what was going on and it kind of goes back it's a nice nice fun little dev tool for view um alrighty so let's get back into the the app app itself here so um you're just looking at it but let's maybe try that that handle handle increment part because it's kind of more interesting when you're doing something in the app right um that is calling this method here handle increment and what it's doing is it's editing the ux store and telling it to increment the counter and then the vux store and nux style is in well the store because where else should stores be but in the store folder and the store still stores all of your global state uh in this case it starts off the counter at one um and the idea is there's an increment counter there and that's basically the main thing there the other thing that this store is using is it's holding some other information here that's another part of the app we can get into that but yeah this is this is ux is all you kind of really need to do yeah that one okay this one all right awesome they have a nice picture i was just trying to get to the picture all right um so uh normally when you just have a simple sort of like app thing right you have your actions just mutate the state in one way uh and that changes the view um but you might want to get a little more complicated because your syncopage app doesn't just like take inputs from the user you might get it from the backend database you want to plug in a debugger that sort of thing the idea though is that there's just a single way that this is all flowing you know directional flow you don't go from your actions back directly to edit the components you rely on the actions to go all the way through to the state and the state to then change the components themselves that sort of thing uh jquery world you would have some little jquery method that goes and directly edits things don't do that um so uh you can then you can hook your dev tools as i mentioned like the the view debugger into all those mutations and see all the different changes that occur to your state uh you can also see your state at that point um yeah that's the the basic idea of ux it's the this is like the flux diagram as well right cool um alrighty so let's see other things about the uh oh yeah so here this is all you really need to do um so let's see your jsla.view so i'm just going to make a new page here great so call it a template and uh div and hello [Music] great and then i can go back to my app which was oh i just killed it sorry it's not happy with me uh what was i doing was that writing some code on something well let me read the error message jsla you oh that there okay now it's recompiling that and it's happy should be happy great let's go to that go to jsla and there great we have a webpage awesome that was really fast and all it says is hello but the idea is that in order to add something new to the route or what not it's just as easy to that as that you can then um generate other things like as i mentioned like blogs and call this say id dot view and the fact that there's an underscore there let's see okay um great means that okay no errors great so what i could do is go to blogs and something and all of a sudden great it's routing to that in the uh in the actual javascript part we would get past the the params here which is actually the the the id value um and be able to then maybe do a database uh you know request and whatnot and actually load the proper blog at that point um yeah or questions yes how is that signified it's just the fact that there's an underscore yep yep yep just because there's an underscore there yeah yeah but uh anyways uh yeah so if you're starting off on and writing view um it's uh they're still adding to it but one of the things that's actually been really great about vue is that um and this just comes some in part just from the way of thinking of its original you know creator is everything is really well documented um so if you have a question or something you can actually go to the view website and you know nine times out of ten your answer your questions is right there nicely documented with examples and and all that so um yeah uh that's been something just from the get go that makes it really easy to adopt view cool um let's see how we're doing on the time here oh i'm playing relief all right so um let's see that that was next um i mentioned beautify is um some of the things that we're using here it's a nice uh you know front-end framework again comes with sort of like batteries included for all sorts of components that you might want in order to put on your site and have it all be material design friendly since you're writing a bit of an enterprise app it makes it easy to kind of like just implement things and get it done beautify is one of the more popular material design frameworks on on view so uh if you were to do that way you could also write your bootstrap where you write your whatever you want to do um you know on top of you um yeah but i i've been using this one and and you know it works quite nicely um also like nuxt it's all post 1.0 so there at least a promising stability on that um okay great uh this one uh i made this and uh i'm actually kind of a fan of it um just as an aside i mentioned i do lots of other things besides web dev uh devops being one of them and um as much as i love linux um i don't necessarily love ssh into lots of servers and doing servery things all the time when i'm just trying to write my web app so uh serverless has been a great um trend that's been going on in the industry in the past two years or so where you just write your code and your code runs in the cloud and the cloud takes care of it and does all the things it needs to do to make that happen for example on a website if you have your website running via serverless and you all of a sudden have much higher spikes and load it just starts running more of your functions because your website's just the function to say how it should render the page and then it will scale down down to zero if you have no traffic and they're not charging you for that anyways so you have high availability you have a high scale ability um and you have much much more efficient cost than just like running a bunch of servers just sitting there idle all the time so one of the things that i did was kind of like hook it all together so i have a serverless running express inside of uh adabus lambda and express is running next and then next is running whatever the view stuff that we want to do at that point um and so i have a universal app i have something that like has a nice local dev experience because nux does that for you um you just saw that a little bit ago where like all of a sudden you get the hot reloading and you get um like dev tools hooking you into it and all that sort of stuff um and when i hit deploy it goes into the cloud and there's no like linux patching to do and that sort of thing it's just it's just running um so uh there were some tricky bits and i figured out some tricky bits and that's why i made the package uh i'll get that sorry guys can you read that yeah so on the left here this is the next folder structure with pages and and whatnot at that point um oh actually yeah i mean this is the the template uh this is a view cli template um where it gets substituted but what um but uh the idea is definitely because nuxt is a universal app some of it runs on the server uh and some of it runs on the client so you need to make sure you're running libraries that support that so for example you're going to make an http request you might not have a window object on node so how do you you know do all of that you might use a library like axios is the most most common one it's actually been bundled into the latest versions of next um actually it makes you make uh http calls to other like the backend or whatnot and do so easily um let me just actually oh yeah here i'm actually plugging into axios at this point and then having axios go ahead and make a get request to its back end and then it's returning that as data so um i didn't go over previously in a view component how you handle like an asynchronous request or handle like data that's not coming literally from the page at that moment um there's really there's another way we can do it where there's a bit of a state of the page that's happening here it's the message value here and next is looking for the async data and it's waiting for the async data to come back before it starts playing the page to you and it will then do is then populate the message with whatever came back from the back end and the message is then being showed in that component so because we're using axios this same code will sometimes execute in the back end and sometimes execute in the front end and the page doesn't care or know the difference there is a difference in the perfect pocket though as to why you would sometimes you need to store secrets like you know your database password or something right and you don't necessarily want to put that in the front end uh so you need a back end that just is just back end and and so um so that's what this is uh this is what's actually a um an express router that's actually just handling that particular route and outputting that that one picture output and it could have for example pulled that out of the database in order to return it or whatever you wanted to do using using node um it's getting a little bit far afield from our view world a little bit but something that um i'm using a variant of this like in production in our stuff and it's working well um there again were some gotchas so making the framework help to take workarounds in the gotchas cool um [Music] awesome so there's that um other things was you know when you can build it into a ci cd pipeline uh it you just have the next build itself in its pre-compiled form and then you tell serverless to go and deploy it into the cloud and then you know we can run tests in between and whatever you want to do and just have it all automated and because it's all handled in this case by amazon amazon you can hook in very easily to things like cloudfront so you get ddos protection or like you know edge sort of like caching and uh faster page loads um ssl you know uh resolution uh you can put their their web application firewall in front of it if you really want to get paranoid about blocking traffic from here or not there and and that sort of thing anyways you can write enterprise apps using this stuff it's cool all right uh last bit here cool so i mentioned uh there's a official view site with a style guide um awesome view is basically if you saw something interesting here it's probably linked to from awesomeview because that's the name and the some other things that it links to but i just want to mention is the end of this month uh viewconf us uh the first one in the us is uh is being held in new orleans um there's been some view conferences um in the past but they were held in like norwegian countries and other places i will mention actually that view is actually very international um because uh it started off with strong chinese connections because again avenue its uh creator is bilingual so he was able to speak and write in chinese um so that's why you would get you know alibaba and baidu sort of buying on but it's been picking up in um some like european countries quite a bit uh if you do a nice little like google trend search map you see it popping up all over the world unlike where the us were tends to be bigger on let's say react or something like that so cool and yes i am the organizer for the la view js meetup so um what i did when i was jumping into things is like well i want to talk to other view developers and i didn't know too many of them so i was looking for a meetup didn't find one so i made one uh and so i've been running that about a year now and we meet um alternately we meet every month and alternate between on the west side and in downtown l.a i have a co-organizer who runs a space out of la and she she'll help to organize that one and yeah you can find us on meetup.com so that's the last bits and that's me so thanks guys [Applause] i'm vj thanks for coming to the meetup today i'm the organizer for javascript la i wanted to just personally thank you for watching this video if you found it useful i'd love for you to subscribe to our channel we're slowly but surely making lots of little video content for you guys to enjoy and soak up especially if you want to get better at programming i'd love for you to be on our slack channel too over 800 users the link is right here js join jsjo.in if you forget it's really simple if you have questions for this meetup or you know questions you didn't get to ask or because you couldn't make it we'd love to have you just posted on our slack group so if you're a newbie don't worry it's a good place to go there's a lot of great engineers all connected around l.a and orange county so i hope to see you there