 Hi, I'm Divya. I am a developer advocate at Netlify. Netlify does hosting and deployment of static sites. I'm not currently based anywhere, but Netlify is based in San Francisco, and I spend most of my time in the US. So you can talk about that later. You can find me on the interwebs at Shortdiv pretty much everywhere on GitHub and Twitter. We can talk about why I'm called Shortdiv later as well. So this talk is actually a little deviation from what I initially wanted to talk about, which was input masks, but it's not entirely different. Because I was very inspired by CopyJS, and if anyone has gone to copyjs.org, you'll see that there is a form builder for building your own copy. So if you're a foreigner, if you're a foreigner, you have to learn how to order in local slang. I'm a local, but I spend a lot of time abroad and so my Singlish cannot make it sometimes. So I need to remind myself how to call something Coby. So essentially, let me move to the demo. This is going to be a live demo, so we'll see how this goes. But essentially what I'm trying to create is, this is really ugly. This is a nicer version of it, but this is essentially what we're trying to build, which is it allows you to pick the milk, the strength of your coffee, the sweetness of it, and the temperature. And then it gives you the corresponding name for it. And if this is wrong, let me know. Because again, I singlish cannot make it. And so we're going to build this in the 10 minutes that we have. But first things first, how many of you have done anything view-related? One, two, couple. So I'll do a high-level overview of you and then I'll dive into code and demo. And I'm actually okay with you asking questions as I'm demoing. So if you have questions, just lob them at me. That is fine. So view is very different from react, in a sense, very much different. But one of the key factors of view is that there is single file components. And a single file component is essentially that your templates and your JavaScript and your styles are all within the same file. So this is essentially what a view file, a dot view file looks like. It just has a template with a div or whatever template-y things you want. And then it has a script tag, which is where you can instantiate your view instance. So that's like the high level of how it works. So with that, I'm going to just jump straight into the demo. So I don't have internet and I'm not going to try to get internet. So what we're going to do is... We are going to go to master, get status. I'm going to commit my old code. I'm really sorry I should have done this earlier. So I'm going to go back to my master file and essentially you don't have to know anything about what's going on. But what we're going to do is we are going to serve that file. So essentially what I'm trying to do now is I am creating open Visual Studio Code. So this is like a very, very example basic view application. If you do like view CLI or if you create a new view application, it just has like a source file which is where you'll be working off of mostly. It has a components which is where you put your single file components and then it has an app.view which is where you include your components and you tell your app what you want to include. Very, very high level. So I did an NPM run start. This should change, yes it does. So that's what you see when you start a new view application, like super, super basic. So what we're going to start with in our copy builder is we're going to start with like creating a form. Firstly I'm going to start with milk because I don't know just it's the first thing. And so that essentially consists of three radio buttons. So we're going to create some radio buttons very quickly. So I'm going to go into, I'm going to create a new component called like, I don't know, copyoptions.view. Also if I have a spelling mistake, mistake let me know because live demos tend to be like that. So I'm going to create a new view single file component. I'm going to call it copyoptions. Super basic, there's nothing more to it. And then in my template itself, I'm going to create a bunch of radio buttons. So there's like a label with an input, I can spell, we're going to make it radio. And then I'm going to put a span for like the actual name of the thing. So for now, I'm just going to say that there is no milk. It's of name, milk, because it's of type that. And of course, like if we go back to our app, nothing changes because I didn't include it in my app. So app doesn't know that it exists. So I'm going to go back to app. I'm going to get rid of this hello world nonsense because we don't need it. Well, okay. And of course, I'm going to create a new V import. So we call that copyoptions, right? So I create a new options. And then in components, I'm going to create that specific thing. So now it knows that it exists. So very similar to how React does things. Now you can use copyoptions as a tag because it works. And so if I go back, well, what? Okay. I knew this was going to happen. You import it and you save it. Wait, what is there? Can't resolve components in view. Let's see. Wait, which one? I don't think that is needed. Okay. Oh yes, yes, yes, yes. Wait, what was that? It is not in the components folder. That is correct. Thank you. Okay. So we have our thing. What the hell? Okay. So we have our thing and like this is perfect. So what we can do next is we can essentially, we want like three options, right? So we can create a bunch of them. We can change it. So like, I don't know, you can choose whether you want condensed milk in it or you can choose if you want. I think the other one is evaporated milk, right? So we have those options, which is great, but like it doesn't really do anything. There isn't a default, which is really dumb. And so what we're going to do is we're going to create, ah, yes, before I go to default and everything, this is kind of tedious and we want to create an iterator because that is the nice thing about programming. So we're going to create a like a data property called like milk options, let's say. And then within that we can put in like the various options that we have. So like there's no milk, there's evaporated milk. I'm really bad at typing. And then there is condensed milk like that. And so now that we have all of the data in an array essentially, what we can do is we can use in view, they call it a v4, which is an iterator. So you can use v4 and I'm just going to say milk in milk options. And so with that, I can now do string interpolation, which uses two curly brackets and then put in milk and like, oh, comma, there we go. So now we have our like iterated thing, which is really great and awesome. And so the other thing that we haven't done is that our input isn't doing anything. So the input just kind of lives by itself and like it doesn't have a concept of what is checked like a default because that's essentially what radio button should have. It always should have a default. And so what we're going to do is we're going to create, first of all, in addition to having a default, a radio button also has a value because the value is essentially what the radio button needs to know is its value. And so we're going to give it a value. The colon is just a way of telling it that it's not hard coded. So in this case, because we're using an iterator, it changes each time. So we're going to say milk is the value. And then so that's fine and well. And then the next thing we're going to do is that the checked element essentially. And checked needs to do an equality check, right? Because we need to tell the radio buttons like, hey, this is the default. Click this if no other options have been selected. And so essentially that's an equality. So there is no sense of what the default is. So I'm going to create a new property called milkiness, which like is condensed milk, right? That's the default. I'm going to say yes it is. And so now what I'm going to do is I'm going to in the checked essentially check that milk equals the milkiness. And so when you refresh, you get condensed milk as the default, which is really good. But the problem now is I'm going to pull up the view console so that you see what is happening. So this is the view console. If you've never seen it, it's really great. It's similar to the react console because it allows you to look at data and how data changes. And so you see that as we're clicking it, the milkiness doesn't change as we're clicking through, which is a problem because if you select something, you want the milkiness, the status quo to change. Yes. And so what we're trying to do is if you're familiar with input buttons, there's the on change event, right? So it's like on change do something. So in view, there's this v on, which is for handling all kinds of inputs. And so you do a v on. And in this case, it's called input because it's an input event. And so what we can do is we can grab that specific event and then we can pipe it to do something else, like whatever. And in this case, what we're trying to do is we're trying to change that milkiness. And because it's an event, you have to grab the target value. And so that changes that specific property, I hope. So if we go down here, it updates if you look at this specific thing down here. Can everybody see this? Is this okay? Yeah, so we get exactly what we need. And so the thing is this is useful and really cool, but we still don't know the name of the copy that we want, which is like the whole point of this app. So what we're going to do next is we're going to create a new file. It's in the right folder this time. We're gonna call it copy order. And all copy order does is tell you the name of that copy based on an option selected. So for now, it's gonna have an H1 and I'm just gonna call it copy. And then I'm going to name it copy order in this case. And then I will include it in my import statements, like so. So it knows that it exists. And then you always have to put it in your components, which is a very common mistake. And then I will put it as a sibling element because it's fine. It works that way. So now we have the input elements and then we have the thing selecting and then we have the copy at the bottom. But again, the siblings don't know about each other's data. So the radio buttons are being selected, but the sibling, which is copy order, doesn't know that they have been selected. And has anyone done React before? Yes. So it's similar because in React, you would do an emitter so you emit up to the parent because siblings can't talk directly to each other but they talk to each other indirectly through their parent. So one specific component tells the parent, hey, like my data has changed and then parent is like anyone else listening, this data has changed. So that's what we're gonna do now. We'll go back to copy options and we're going to change the VON input event because there's gonna be more things that, so we're gonna refactor it. We're gonna call it like, I don't know, set milkiness. And then here in our data, we will create a method called set milkiness, fucking spell. And then we're doing the same thing, which is setting target.value and then it grabs the event. So I'm gonna check that that worked because it could easily break. What? Oh, did I? Oh, yes, yes, yes, thank you. Yes, yes, yes, yes, thank you. Perfect, I like this, pair programming or many to one programming. And so I just wanna check that everything worked so milkiness is updating as appropriate so like our refactor didn't break anything except for my typo. And so now what we're gonna do is we create, we're going to create an emitter so that our options emits that change up to the sibling element. So I'm gonna do like this.dollar emit milk selected. And then I'll pass it a single property which is like the milkiness property, yes. And now in my app, essentially options can tell its parent that things have changed via von, right? I'm gonna cheat little, actually nevermind, I'll just do von. And then it'll be milk selected. So it's like on this specific event. And then it will do something else which I'm gonna call set milk. So set milk is a method that I need to create in my main app here. And so now the parent element is grabbing that child event and it's gonna do something with it. So I want it to set the base milk to whatever value that gets passed through. And so there needs to be a data property called milk. So I'm gonna create that. The default is empty. And so now let's go back to our app and we'll see the parent element has this data property called milk. And so when it gets updated, it gets updated appropriately, which is really nice. But again, the sibling element still doesn't know about that. So does anyone know how we can pass data to a specific component? That's like super, super, super, super simple. No, okay. Well, you pass it through a prop. It's fine. So I'm gonna pass it through as a prop like so. And so it's very simple. It's similar to React. You just pass it straight up as a prop. And then in my order, I'm gonna tell the components to expect that prop. So in React you also have to, you can tell your component that these are the props to be to expect. So I'm going to tell my component to expect like a milk prop. And then view has a ability for you to tell your component. You don't have to, but I think it's common practice where you would tell your component what the prop is and what that type is. So you would do a number of Boolean and so on. And so it allows you to do that type checking, which is pretty nice. So we have the milk that gets passed through hopefully, but we're gonna check just to see. So we have milk and then it gets updated. Perfect. And so now we can do some kind of like string interpolation magic like so. And so we have like Copino milk. But again, as I said, my Singlish cannot make it. And this is not how you open up. You don't go to the auntie and you're like, hey, copy evaporated milk, show me what you're talking about. So what we're gonna have to do is we're gonna have to refactor all of these properties so that the option will still say no milk. But when it converts, it will say like oh, see or whatever the abbreviation is. So what we'll do is we will grab all of, blah, we'll grab all of these. And I'm going to call it type. So it's like of type thing. I don't know, you can call it whatever you want. And then I'll say like name. So each of them will have like name associated with it. So, okay, this is the part where I might mess up. So I think no milk is O and then evaporated milk is C. Is that correct? That's correct? Okay, cool. Sweet. Oh, it's a big O. Oh, that's fine. That doesn't matter. I think I missed the comma. Yeah, okay, cool. So it kind of works, but now we have objects because we're dealing with objects and not strings. So we need to change that. So what I'm gonna do is I'm gonna firstly change the span element so that you get the actual type of the milk. So voila, okay, type. So we get no milk, whatever, but Copey still gets object objects. So obviously we need to refactor some more. So for value, I'm going to grab the name element. And for checked, I'm gonna check the name element again because now milkiness is, if you look at it, milkiness is condensed milk as, and it changes as needed. But if you realize the default of options is condensed milk, which is wrong, because now we're checking the suffix. So because condensed milk has no suffix, essentially, we're going to just do an empty string. And so that should work. Yes, yeah, it works. So now our default option is still condensed milk and so on. And then it changes too. So we didn't have to do anything because we just refactored it a little bit and then we get exactly what we want to see. So this is all fine and good and we can obviously copy this to do sugar and so on. And I'm not gonna do that because it's repetitive. But what we're going to do is I'm gonna introduce you to what is really cool in view, just two-way data binding. And all of this, which is the input event, the checked and the value, is a lot of hard coding, which is fine, but the magic of view is in the two-way data binding. So there's this thing called the model. If you've done any view, you would know what that is. But essentially what V-Model does is you're tying a specific element to a data property. And anytime that data property changes, the element knows to change itself or change the data associated. So what I'm gonna do is I'm going to, because essentially what is changing is milkiness, I'm gonna get rid of the checked and that. And that should work. Oh, darn. Oh, I know why. Okay, so, okay, I'm gonna, okay. So milkiness, as you see, is updating, right? So what's not happening is that the sibling element doesn't know that that is changing anymore because previously if you realized we were leaning on this method called set milkiness, we're not using that anymore. And so the emitter is not being called. So the sibling has no idea that things are changed. That single element does. And so what is super nice about view is that there's this concept of watchers. It's similar to, it's just a life cycle hook, essentially. And so you can hook into a specific change in data. In this case, milkiness is changing. And so I'm gonna grab that. I'm going to copy this. Whop. And then that should work. Ta-da. And that's pretty much like two-way data binding, which is really cool. And then watchers, which is also really cool. And then I'm gonna show you one last thing because I think I'm actually out of time. But this is kind of ugly, especially if you have to do it for multiple different things. So what I'm gonna do is I'm gonna create a computer. And a computer allows me to do string interpolation without having to do it in my template itself. So I'll call it, I don't know, order name. And then here I can create a, essentially the same thing that I did earlier, which is this. And so I can get rid of all of this. And then I can just call it order name. And then that gives me, voila. Oh man. Oh, I know why, because it's not milkiness. It is order. There you go. So, and that's pretty much like a high-level idea of how ViewWorks, and hopefully this encourages you to use it, and I'm happy to take questions. Any questions on View? Nah, I'm kidding. Oh, thanks for the live demo. Cool. It's really cool. Yeah. What's your view of the best advantage of View over other frameworks I react? That's a really good question. I will not start a flame war, but I actually, I've used both, and I think the learning curve of View is much smoother because it appeals to a lot of people who don't, so React is very, very, very JavaScript heavy, and most web developers come in with like, you would learn HTML, CSS, and JavaScript, and React kind of forces you to use JSX. Not necessarily, you don't have to, but a lot of applications use JSX. And so that is a really steep learning curve, and I think if you reach an advanced level and React is, it's a wonderful framework. But I think View is very catered towards like onboarding people very quickly because it's essentially just HTML, CSS, and JavaScript. And there's like some sugar syntax and extra stuff to it, but I think that's like the biggest sell. And then the other thing, which is like my personal opinion is, I think the community is very strong and vibrant, and that's a result of it being very new. Because View has only been around since 2015, I think. Yeah, and so the community is very small and super open source and very scrappy, and people are very willing to help others. And so I think that's only gonna get better. Who knows, like at a high scale that might change, but for now I think it's a really good time to learn it. Yeah. Is there a name for whatever you're writing, like React, you're writing GSX, and you're doing the right type of business? Is there a name for this as well? So there isn't, we call it single file components, but that's not a View specific thing. Yeah, there really isn't, because like this is just like View syntax essentially. So we don't have what they, we have what we call like View bindings, which is very similar to Angular bindings, where you're writing templates, but you can bind it using Von or like Vmodel, which is what I did earlier. So that's the only difference, but essentially it's straight up HTML and CSS and JavaScript, yeah. And is more stars than React? Currently yes, it does. But I think stars aren't a good indication of anything really, because I think the contributor's list of View is still much smaller than React's. Hopefully that will change, I think it will. I'll give you the first result, and she's on Twitter, but the handle there is shot dead.