 Okay Okay Here Hello, everyone. Oh gosh, okay Okay so Hi, um, my name is Shannon Bosch. That's my father over there But I'm gonna be talking a little bit about a few things but before I get started I'll talk a little bit. You can I'll tell you about me This is my incredible family Very happy without them. I would not be here And this is a little bit more about me. I love reading music. I actually love making PowerPoint presentations So I hope you like this one. It was a lot of fun to make and I like social media and coding Which brings me to my first point of sometimes instead of using apps. I draw them now Please excuse my drawing I was just give you a little bit of background. That's probably two hours into scrolling through Instagram and I realized that It was kind of cool how Each page and only a few buttons that connect the page have kind of consumed lots of hours in my lifetime so I just draw like the very fundamental pages and that kind of got me thinking of just the basic foundations of all apps that I've kind of used Which brings me to I was kind of drawing some other things and I decided to put those pictures into Into powerpoint and then I hyperlinked the buttons To the buttons which they would go to and then I I kind of discovered how With enough of those rough drafts and with enough hyperlinks you can kind of make A very rough draft of any application that you kind of have ever dreamed of so Moving on about a few weeks ago. I was a helper at a girl code workshop at n us and it was a really really cool Experience I met a lot of new people we had about 65 girls come And the whole point of it was we're just trying to give them an intro into computer programming mostly python But my part in it was I had from the beginning I asked them to Take something that was in their mind I feel like that's a very important part of just making anything so First of all we had like lots of incredible colorful papers Markers just letting their creativity run wild and we just asked them To draw something they were interested in and that's it And then after that we asked to think of something how they could take what they were interested in and use Programming actually make something up it and there was no computers around We just asked them to draw what they would make so as you can see here Someone drew like this video game maze someone else drew like a pet rock app health thing I think and just really fun stuff and not only were they able to Draw things that they could make but they were also able to learn a little bit about the basics of programming Using code combat which is something I really recommend. It's very fun And it was just a really cool time And throughout the whole experience I was thinking of all of these girls and what they were making and I kind of Had a little bit of spark of creativity as well. So when I got home that night I drew this and it's very basic, but I am a huge Bookworm you could say so I love Percy Jackson. So I'm just yeah So this app was pretty much my idea of having character images And then when you pressed when fans could press like a button You would up the vote for the person you wanted to go on a specific quest And so I took this idea and I decided it would be really cool if I used just the Programming coding skills that I know and actually tried to take this drawing this prototype And actually make it into something usable that I could share with other people So this is some initial html that I did in a website very basic I had like the title some buttons I put some images in the buttons and then I just put random numbers The buttons just to kind of give myself an idea of what I wanted it to look like But of course I couldn't do as much as I wanted with html So then I decided to add view which is kind of the title I'm in love with the shape of view which is the word play but anyways So I created that and then I added the element property And then I referenced the element that I wanted to enhance as you can see here the arrow And then I decided to add counter. So this would be kind of my form of what I wanted to do to change the Ability of my buttons to actually function, which is mainly what I want to focus on So I decided to replace the numbers next to my buttons with counter into curly braces And I just came up with a very random number 22 But as cool as it was There was nothing that happened after I pushed my button So I decided to add add click inside my button element And that way it would reference and whenever I click the button the number would go up So I was getting closer, but it was not quite there yet So I decided to add even more counters for my different buttons to reference different counters So I had one two and three as you can see here And this is pretty much what I wanted and it's I think Using what I had I was just very very happy with it And then I realized I didn't need actually I didn't need the button element So I just put all my stuff into the image element as you can see here But once I had that I I was able to actually Take what I had and share with other people and was I was able to actually take my first image of my very prototype on a note Low card and I was able to also show people my app and say this is how I got from here to here And so I showed to a few people and I got incredible feedback about like reset buttons for the voting if it would be possible to see Who's leading in the voting and all that but throughout this whole process I just thought it was really cool how if you can tell someone that they can make whatever they imagine Just by drawing something on a piece of paper That's an incredible amount of power and no matter if you're really great at coding Or if you have a little bit of coding experience or at all. I think that it's important to tell people That no matter kind of where they're at if they can do enough of those papers And if they can show enough people what they're planning to do Some way they can achieve what they were intending to achieve So that's all I hope you learned something or it was entertaining for you. My name is Shannon I am your future intern And uh live longer prosper. Thank you All right, that's going to be hard to follow but um I'll try and be half as much cute and we'll see how it goes Who who am I kidding? I've got no prayer Okay, let's see All right, so um When shan was going to do that I thought it would be good to maybe share the the other side of things that that I run into So I'm a university professor and I've taught a lot of courses where we prototype designs and come up with new ideas I lead a development team that's always trying to move sort of larger applications forward And one of the things that I really want to encourage people is exactly that just go draw on a piece of paper In fact draw me two versions go show it to five people And then come back and tell me why you like version one instead of version two That's much more productive usually than hey prop. I have an opinion. This is better. Let's let's change it But when you do that you do get some code that um It's it's it's very variable. It's very different than what I might design It's very different from what I would expect my uh my software engineers to design So what I want to do is walk through why I like view as well I've done a lot of angular. I've done a lot of react and I too am in love with the shape of view It's it's just been easier for me to do a lot of things than I used to So I'm going to walk you through sort of what it's like for me trying to refactor an app It's a wonderful app. I love it Shannon. It's exactly what it was supposed to be But now I'm going to try and make it a little bit more Software engineering if you will so typically what we do is Software engineers as architects as computer scientists We make things more and more complex until no one else can understand it And then they have to pay us more money Because no no one year's two year out of university person can do it You know what I mean? We do this we have our own reasons But all they need to know is only we can understand it So first of all I want to get that javascript out of my html page And I'm going to take all the javascript that was here Shannon did a nice one page app about 15 lines of code work just fine I'm going to take that I'm going to put it over in main.js Mainly so that I have my my javascript in one place and so I can go do some test driven development with it Then I'm actually going to go ahead and just export The default app this is just I'm just trying to show you what I do very quickly when I'm trying to get my Hands around designs and I don't know what I don't know yet So I'm just going to export that And then over here in the html page I've replaced where Shannon had all of her her stuff inside the javascript tags I've replaced it with a reference to main.js everybody got that cool show hands who in here has played with view before Who in here has never written any view code? Excellent. Oh, okay excellent. So you guys will enjoy this. I hope All right, so everything else is the same as Shannon's except I replaced that Now I want to go off and I want to do test driven development So I have a lot of engineers asked me why do I bother writing tests after the app is already written And I always tell them because I'm usually going to want to change stuff I'm going to do this fancy thing called refactoring and when I start changing things I'm going to break stuff and I want to know when I broke something Because if I don't know that I broke something then I'm afraid to change something because I won't know if I broke anything And if you've done a lot of worked on a lot of big projects, this makes a lot of sense to you So I'm going to go write some tests Just to sort of then I'll sort of show you how I start writing the test first and then how I rearchitect the design So just a simple that you know test. I'm going to import view. I'm going to import the code the javascript from main I'm going to describe one test and here. I'm just going to start with a failing test expect one to equal to One's not going to equal to and so I'm going to get a failing test Depending on what framework you use but in this environment I'll have a nice place that I can go down and and see that I expected the value to be two But I received one of course that's wrong So we always make our tests fail first for the main reason that we want to make sure our test works For test never fails. It's not really a test It's just you feeling like you did something that you didn't do So now we're going to change the two to a one and now all of our tests fail. I love all green Green is a color you love to you learn to love if you do a lot of unit testing Because every time it's green. It's like, yes, awesome. I accomplished something time to go get a coffee time to uh, You know go go do whatever I do to take a break before I dive right back in All right, so that works So now we're going to try and make it a little bit more real We're going to go expect app dot counter one the counter that shannon Created we're going to expect it to equal one But we expected one and we got zero Because it start it turns out that the counter starts with zero So I changed that to zero and now it's passing So now at this point if I ever break counter one or I change the default for counter one My tests will fail and I'll be reminded to do that If you have a hundred features in your app, which happens very quickly that there's a hundred things that could go wrong It's nice having these little tests because you you end up break You don't know which one of the hundred things you're going to randomly break All right And so then I said let's just go check all of our counters because she had four of them They come all equal to zero yay all tests are passing All right So let's say let's go add something new All right, so I wanted to share a little bit about you So I decided to add one more thing that wasn't a shannon's design. This is going to be called counter total and what counter total is supposed to do It's just supposed to add up all the counters all the votes for the four different characters All right, so I say make app counter total equals zero And I get an error because there's nothing called counter total. It doesn't exist in the javascript code It's undefined. So first we need to fix that So we go back to view where we had our data And I'm just going to add a new property here counter total in my object make it 99 And now I'm still failing all that's cut off the slide instead of zero now. I'm getting 99 So I go change it to zero my zeros match all my tests are passing right feel like a magician, you know all green okay So then what we want to do is when we want to figure out How are we going to be tracking when any of the counters actually change if um If the total counter is changing and what I noticed very quickly when I got to this point that if I was running the app I was getting six. I was like, where's the six coming from? Well, one of the things if you have a whole lot of tests and they're all like Incrementing your counters or setting values if you don't reset your starting values to zero before every test You'll end up with these type of errors So typically what we do is we reset our state before we run our tests And we do that before every test. So we have a deterministic type of result So here my counters, you know, we're all supposed to be a zero And so what i'm going to do here is i'm going to increment my counters This time and so what i'm going to do is call app counter plus plus which is the same code That uh shannon's code was doing when she pressed the button And so I should be able to say hey Counter total should be zero when I increment one counter the counter total should equal one And it doesn't Because i've not written the logic yet That adds up all the separate counters and puts them into counter total So I could figure out how to watch the different counter values and go add things up whenever anything changes But one of the nice things about view that um, I just found out accidentally when uh, when messing around with it Is you just get this built-in thing called computed so rather than just your data that stores everything You can create a computed value And and then for that same variable name give it a function And every time the things that make up this function change, they're all watched This thing gets re executed and you have a new value for computed All right, so I didn't really have to write any code other than to say when I ask for counter total I want the result of counter one plus counter two plus counter three plus counter four these four counters Make sense All right. Awesome. So I've computed so no more that me having to write the code to um, just you know, uh Manually add up things and keep track of them when they change view is going to do all that for me. All right, so that's fun All right, and then um Now I come in here and before I had this code here where I'm I'm adding one to a counter Then another then another then another and now I've got my counter total. I want to make sure it equals Four, but before I make the test pass. I'm going to make it fail. So I put one in there says I got one I expected four Good. That's what you were supposed to do test I I change it to four all green. Yay okay, all right Um people do unit testing for a living. They're like, oh my gosh Is he is he really going through this step by step? But if you don't do testing this is this is actually what it looks like it goes pretty fast and it's make it fail Make it pass make it fail make it pass All right Now that we've got this counter total not only can we use it in our java script code Since we're doing view we can go back into our html and anywhere we want we can stick in this computed value All right, and so what I've done here is I've just made another header tag Said counter total equals votes and now whatever the total of all the counters are that's going to be our number of votes across all the characters all right now increment encounter so rather than just Hardcoding the counter plus plus inside the html. I want to pull that out into a method So I'm going to call the method increment counter It doesn't exist initially. So I get this nice error Tells me what to go do next which is go create a new method And so in right below computed I've added another section view lets you add things called methods Which are exactly what you think they are their methods that you then are going to use that you can call from other methods Or from your html. All right Now the other thing is A lot of you in here if you're if you're super coders you're used to changing nine things at once I do this all the time over the years though I have learned if I try and change six things at once it is exhausting to me I'm having to keep track of it. I have a little notepad to my right where I'm saying don't forget to do this this this You broke these five things check them off when you're done Uh, I still do that at times when I'm just hacking around trying to get things done But there is something that makes it more fun if you go step by step Fix one thing at a time add one test a break it picks it. So we make our function And then we're going to go in our function fails now. It's always returning zero We're going to come in and say hey when we when we run this we actually want to increment counter one all tests are passing Yay Time to time to break something again. Okay All right Also now up here instead of doing counter plus counter one plus plus in the html I've replaced that with this increment counter function All right, same thing All right now about this time I'm starting to realize that you know what Uh, I don't want to have four different counters. I'm going to go have to Replace I'm going to have to go rewrite that increment counter method four times if I write write a separate increment counter You know Function for every single counter so to set right now. It's time to do some heavy-duty refactoring So instead of having individual variables for my counters I'm going to go up and I'm going to create something called counters plural And it's just going to have to start off being an array of you know Four zeros so these are going to be my counters at index zero one two and three and I'm going to use that to replace the counter variables All right, so here it here is in my data. I add it right here the moment I stopped typing for a second My environment notices that it's time to run my tests again. They run it and I see all green All right, there's something something like that. Sometimes I find I'm trying to type just fast enough So because I know as soon as I stop it's going to run my tests and they're going to fail again But if I get that last bracket written, uh, it'll it'll be all green Okay, all right And then uh from there, let's just keep making it more complex, right? So it's harder for hr to hire someone to work on this app So now instead of calling counter one and counter two I'm going to replace the counter one with counters and index zero the first You know number that's in that javascript array All right Now this is uh one of the places where when I was playing with view I came across a newbie error You know, I ran it to the issue. I said, what in the world is that? Why is this not working? I did like you did I went over to google pasted the error into google and then google led me to this page on the documents Hey newbie. Here's what you guys don't realize how things work Whole lot of code But the main thing to say is view is going to do its best to update things whenever your data changes Except if it's in an array, it's not going to look inside your arrays at every single index item Uh, I actually got around this issue at one point by when it wasn't updating. I said, you know, what's easy to do I'll just add something to my array and then I'll pop it off So in my initial view code when I was playing around it was like push one pop one or push one pop You know nothing, uh, and then I finally got around to figuring out what I was doing And and the main thing is is we're just going to use this array splice Rather than this um array zero equals value and that's going to do enough of a mutation that view will notice it And then they'll they'll recalculate all of our values All right, so that's what this is we've changed increment counter from just being this that counter zero plus plus to actually being um Find the new value and then go splice it in uh to the array And the main reason we're just doing it the harder way this way is so we get the uh responsiveness from from view All right. Well, all that's working pretty well except When I start switching to this all my code is breaking It just seems like that would be just fine, but I just changed my increment counter button It's no longer, you know working the right way. I get some failing tests So I go off and I just start changing a lot of things. I'll jump ahead a little bit here since uh I want to leave a little bit of time for questions, uh, but eventually we have all of our counters and everything's passing again All right, and then what I want to do for finding my total is I don't want to add up counter one two three four and five I came in here and I said, you know what? I'm just going to reduce this list of counters by adding them all together Accumulating them and then returning that as my counter total If you've never got around to learning how map and reduce work in javascript. I highly recommend you do it They're awesome. They're powerful It and once you do it you'll be able to read things like this This pops up more and more in people's code They like using reduce and if you're not used to what reduce is doing It'll at least it makes a lot of my students tilt their head sideways and squint a good bit All right Um, and so now we just we don't really want all all these counters anymore What we'd like to do is that same increment counter, but we'd like it to work for all of these So what we're going to have to do is we're going to have to pass an index in uh to our counter So we're going to start replacing increment counter with increment the zero counter the first counter the second counter The third counter and that's going to end up making all of our tests pass again. All right And so this is just an example of how I do A lot of refactoring in view going from things that are a lot of duplicate code And trying to replace them with things that are just a little bit more efficient So now on increment counter this is where we pass in the index for one update And this is how we're actually updating the values this dot counters of whatever our index is Add one two All right, and um Jump ahead a little bit here. So I had all that working next thing in our html We're going to use increment counter. We have to replace all these counter plus pluses with this increment counter magic And that's what we're going to do Get our counters working get our increment counter show the counter that's in the array and After we do that our view code is a lot simpler. It's small So literally the whole thing to make the app work all that stuff showed you ends up just being about 18 lines of a Uncommented code. We just have our counters We just have the counter total which adds up the value of the counters to give us our votes And then we just have this increment counter value that as long as you pass at the index it will update The correct counter. All right, so at that point. I'm like it's a good place to stop That feels good. My code is uh, it's nice and dry. So then I go look at my html and I go, oh, you know what? That looks like a lot of duplicate code as well. That all looks the same. The only thing different is the urls to the images Hey, maybe if I could pull those urls out I could put those urls in an array and then make all these images look a little bit more similar And so then if I do that I can just create one loop. So this is my last view thing. I'll show you there's this v4 And you can do for x in urls But if you if you wrap that in parentheses and do common index You can get both the current item as the urls as you're looping through them And you can get the index the 0 the 1 the 2 the 3 and this is my quick hack That's how I get the number the the index that I want to use for increment encounters All right. And so now I've got down to my nice 20 It's actually 20 lines. I think if you take out the spaces but of dry html code and I've got my dry JavaScript code and and dry generally means do not repeat yourself And if you can ever keep from repeating yourself, it will reduce your bugs over time Trust me or don't trust me. That's fine But what'll happen is if you don't reduce your duplicate code one day, you'll have to change something You'll change it in one place. You won't change it in the other and you'll leave a bug behind Right or somebody will be designing a client to work with your code And they'll look at one copy and they won't notice that the other copy is done a little bit differently All right So that's why going through all this now. I have some dry code. It feels much more engineering Appropriate for me And I know if I come back to this in six months after I've forgotten what it does I'll be able to glance at that code just have a few lines of code and remember what was going on And with that I'm going to invite Shannon back up for questions. Thank you Any questions drawing prototyping Spiring the women of tomorrow refactoring Yes I like just just just seems to work Uh, I like suggest is what the facebook guys have built into react It works mostly out of the box with a view. I haven't played enough with the View specific ones yet and I like just because I can do code coverage very easily And uh, sometimes I like to just look at a code base and go how covered is it? Is it 10% or is it 50% so um And just works well for my command line It works really well from this code sandbox. Oh, I oh environment without me doing anything So, uh, it could be it's the path of least resistance But it's also just done most of the things I wanted to do I've I've not really looked up, you know, it's very basic The very basic stuff there, you know, is it's pretty much what I'm using. Yeah Any other questions? All right, excellent. You guys are on schedule. Excellent next speaker