Coding 101 35 (Transcript)

Shannon Morse: Today on Coding 101 we are building an app.

Netcasts you love from people you trust. This is TWiT. Bandwidth for Coding 101 is provided by CacheFly. At cachefly.com. This episode of Coding 101 is brought to you by Squarespace. The all in one platform that makes it fast and easy to create your own professional website or online portfolio. For a free two week trial and 10% off, go to Squarespace.com and use the offer code CODING.

Father Robert Ballecer: Welcome to Coding 101. It’s a TWiT show where we introduce you into the wonderful world of the code monkey. I’m father Robert Ballecer.

Shannon: And I’m Shannon Morse. Welcome friends and enemies and everyone in between to our show today, Coding 101. Where we introduce you to all the concepts you need to know to be a code warrior. Is that weird?

Fr. Robert: Yeah. No, not weird at all. Now we’ve been hitting the class boat for a while now and I think people are starting to get it. We’ve been staying with it because it’s an important concept. We’re going to be moving on today.

Shannon: Oh boy. I’m excited.

Fr. Robert: I’m excited and actually-

Shannon: I think that we have classes down.

Fr. Robert: We have classes down, we’re going to be introducing ourselves into a few more concepts that are going to help people who actually want to make apps. So we’re not going to be stuck in the console window anymore, we’re going to be building things that look pretty.

Shannon: Aw man. Okay, I’m excited for that. But first, of course, we have Snubs compiled. Because everybody likes to see some examples right?

Fr. Robert: I love my compiled Snubs.

Shannon: So this week we actually got three different great examples on our Google+ community, so I decided to just go through all three of them. Because they’re awesome. So, the first one. And this one comes from Joe. So do you guys remember in Perl when we were talking about regular expressions? Regex.

Fr. Robert: Of course.

Shannon: So he basically took that idea from Perl, which is pretty much the same exact code, almost. And he compiled it to work in C Sharp. Let me show you his code real quick. Ill actually show you how it runs. So it says what is your favorite animal? Remember this from Patrick’s example?

Fr. Robert: Of course.

Shannon: I’ll say Rabbit. You said rabbit. Yes bunnies are the best. And then what is your favorite quote. Let’s see. Geronimooo oh my gaaawd. And then it goes Geronimoooo oh my gaaawd. And then it goes, it puts them all on different lines, hit any key to close. So I can go ahead and close that. So the nice thing about Joe’s example is he puts in so many different comments on here. And he explains everything that he included in here so you can understand it. The first one I wanted to point out was up here. So he did this collections generic, and then down here he had using system.text.regularexpressions;. So this is one of the many, many different things that you can find on the MSDN website. They have a whole bunch of different examples of classes and where they fall within the library. The FCL library. And you can find all sorts of amazing examples. I spent like two hours on there last night just looking at hundreds of different examples of things you can include in your code. And they’re all just built in. so they’re really, really easy to use. So in this code, he basically just took it, you see that he has a class called program. And then down here, he takes regex, he calls it rgx1 equals a new regex. So it’s a new class.

Fr. Robert: Yeah. So we’re taking the class of regex, so we’re creating a new object. Nice.

Shannon: Right. And then he’s also creating a second one, a new regex object, and this one is going to be called rabbit. So we have rabbit and bun. So it can take bunny or bunnies. Down here of course we just have the write line, the string. Animal equals console read line. So it reads whatever you output into it. And then down here we say if the regex is a match, then it says you say whatever you entered, yes bunnies are the best. Else you said, if you put in horse or cat or whatever, it’ll say okay, they’re aren’t as good as bunnies, of course. And then below that we have the example about the favorite quotes. So the favorite quote line, it just strings out the quote, console read line, and then we have another object, rgx3, which is a new regex, and it reads the quote, separates it out onto different lines, and then it outputs it to you and says “did you mean” and then it puts them all on different lines. And then you just hit any key to close, just like normal.

Fr. Robert: What I like about this is that it’s taking a programming example that we had for a different language, and its estimating it. It’s approximating the function inside of C Sharp. Which is nice because it’s a good way to look at the differences between languages. The way that they work. C Sharp is definitely not going to be Perl. It’s not going to be PHP or Python, but it does have a specific way that it can do the same problems, and we like that.

Shannon: It’s beautiful. Our second one is also from Joe as well. On this one he kind of had something to say to you Padre, he said “now Padre’s downloader class is okay, but I wanted to do something that would let me download a website right into a string.”

Fr. Robert: Which is very helpful, okay. Dropping an entire website into a string, I like that.

Shannon: So we have the code pulled up on my computer right here. So I’m going to go ahead and skip down to his actual code. Again, he has just called a program, which is the generic class that you start out with. Down here he’s made a new object. Wc= a new web client. And then he downloads the information from that website and he tries to look for- so down here you notice that he’s searching for an image src= .wildcard. So it could be .jpeg or whatever. That kind of tag within the HTML for that website. So he’s looking for an image. Then we scroll down a little bit more. It tells you I found whatever the image ends up being, it’ll download the picture for you and then you can save it into whatever folder that you want to save it into. And ill scroll down a little bit more just so you can see the rest of that code. So if I go ahead and build this…

Fr. Robert: He actually has an exception built in there, I like that.

Shannon: He does, yeah. So if it ends up not being able to find any kind of picture of the day, it’ll just give you an error and say that it didn’t find anything. So I’m going to start and it’s just going to run automatically. It’ll say downloading. It’ll go ahead and pull out all this information. It’ll say downloading picture, hit any key to exit. So I downloaded this picture into y desktop. So if I go to my desktop, here’s the picture of the day. Pretty cool.

Fr. Robert: Yeah. And like the podcast catcher, that’s an incredibly useful bit of code, and a very useful class.

Shannon: It’s super useful, I love it.

Fr. Robert: Right. Imagine if you could just say, you know what, I want you to scour my favorite websites every day, pull down all the images and drop them into this folder. That’s a perfectly good use for this piece of code, and if you wrote it right, it means that anybody else should be able to interface with your class.

Shannon: Oh, absolutely. The next one I wanted to share is from Darrel. So Darrel has been an ongoing contributor as well as Joe, to our Google+ community, and he shares this one called sheep calc. which is a simple C Sharp OOP demo. So an object oriented program demo. Of how to use abstract base classes with subclasses and it explains polymorphism. Pretty interesting.

Fr. Robert: There are a lot of words there I don’t understand.

Shannon: That’s okay. Go along with it. So I’m going to go ahead and build this one real quickly. Make sure there are no errors. And there shouldn’t be, I already ran it on my computer before. So first thing it asks you is sheep area calculator. So this is the calculator that we’re doing. Is it a square or a circle? So I’m going to say I’m using a square. Enter the length of one of the sides. 6. So the area is 36. Same thing for a circle, I’ll say number 2. What is the length of the radius? What do you want it to be?

Fr. Robert: Oh, I don’t know. How about 12.

Shannon: Okay, 12. Area, 452.389.

Fr. Robert: That’s about right.

Shannon: So, then that’s it. Then we just escape out of here. Go ahead and close down that one. If we look at his code as well- so you’ll notice in his, we have an abstract class. Bam. Right there. Where it has get detentions and calculate area for both of the abstract classes inside of there. And then down here, public double get float. This basically looks for what you’re entering. So if you entered any kind of invalid number, it’s going to ask you to please reenter it. Pretty cool.

Fr. Robert: And then it’s just nice simple math. Now remember, the thing about an abstract class is before you can instantiate, before it can actually become an object, because its abstract, you have to fill in all the missing methods. All the missing data. And that’s what he does right here.

Shannon: That’s exactly what he’s doing. So then we get the actual detentions of the square or circle or whatever you might be putting in. it asks you to enter the actual length of the side, and then you get whatever the float number is. Yay. After that it just returns you the full value and he does a little bit of math in here. Now he does have a whole bunch of comments in here, so it looks like the code is really long. But in actuality, it’s pretty short. It’s only about 160 lines with the comments. So it’s not that long at all.

Fr. Robert: Which is what we want to see. You should actually probably have more comments than you have code. It makes it easier for the next programmer to pick it up.

Shannon: Yeah. So very easy to understand, really, really great examples this week. And of course if you guys want to enter our Google+ community too and join in and ask questions or help others, go over to bit.ly/twitcoding101.

Fr. Robert: Now Shannon, those are cool examples, now what if we could take those console apps, that little command window, and actually turn it into an app. something you can run on a mobile device or a tablet.

Shannon: What? I’ve been waiting for this moment for so long.

Fr. Robert: Well, we’re going to do it. Coming right up we’re actually going to show you how to take the example that we gave you last week, the podcast downloader, remember. We gave you the class that allowed you to mess around and pull podcasts off of any site. Well, Lou Maresca has done a little bit of work on the app and now it does more than give you a little console warning that you’re downloading, yeah. We’ll take a look at it in a bit, but before we do that, let’s take a little pause. Because we’ve been talking a lot about these projects. Very cool projects right. Sometimes you need a good way to present your projects. So that they pop, so that they catch people’s attention. I mean, think about it. If you were making the next app, you take the lesson that we have today. And you design the next great app, but you have no way to tell people about it. That’s not going to really do anything for anyone.

Shannon: I better have a nice place to put it.

Fr. Robert: You better have a nice place to put it. And that means you have got to have a good domain, it means that you have to have a good back end, it means that you have to have a good interface, and it means that you’ve got to do all that for a price that’s not going to break the bank.

Shannon: Where do we go Padre?

Fr. Robert: I’m glad you asked Snubs. Because you go to SquareSpace. Now what is SquareSpace? Squarespace is the one stop shop for all your web presence needs. Now SquareSpace is constantly improving their design, their platform, which is what I like about them. They’ve got new features, they’ve got new little bits and pieces that you can add to your websites. New widgets. And templates that are just beautiful. They do have those 25 beautiful base templates but you can also alter them to alter your needs. If you need something that’s going to say hey this is something to pay attention to. Hey this is a new app, hey this is something that’s beautiful, you can modify those templates to make it say what you want them to say. Squarespace also has the best mobile experience. This is very important. If you’ve got a website that just looks good on a desktop or just looks good on a laptop, you’re missing out on the mobile revolution. You want something that’s going to automatically adjust if you’re on an iPhone or a tablet. And that’s what SquareSpace does. Now it’s also easy to use. If you need help SquareSpace always has live chat and email support 24 hours a day, 7 days a week. But they’ve also got a completely redesigned customer help site and forums as well as self-help videos. So if you just want to get the problem solved by yourself, without having to call or email or chat, you can do that too. Now they include hosting. It’s not one of those deals where you have to buy every little bit by itself so the bills slowly pile up and eventually you have to manage 3 different packages in order to get your website running. No, you go to one place, you pay one price and they handle everything for you. It starts at only $8 a month and it includes a free domain name if you sign up for a year. Even their code is beautiful. This is important for us on coding 101. Squarespace takes just as much pride in their back end code as they do their front end. And they even have a developer platform. So if you are that programmer with the next great app, you can integrate your site into it. If you want to really dig into site customization and developer accounts, which never expire, they’ll let you build exactly what you need and host it in your SquareSpace. Now, here’s what we want you to do. We want you to experience complete control. To edit all controls that affect the display of your website. Every line of HTML, CSS and Java Script. We want you to use their Git and SFTP tools. Because every template is actually a git repository. They’ve got versions that come standard with the packages. We want you to try their developer tools. Which means less preprocessing, Jason templating, script comboing, retina ready responsive image handling, and more. And you can do it all with a two week free trial that doesn’t take a credit card. So go ahead and start building your website now. When you decide to sign up for SquareSpace, make sure to use the offer code CODING to get 10% off. And to show your support for coding 101. We thank SquareSpace for their support of coding 101. A better web awaits and it starts in a SquareSpace. Boop.

Shannon: Kind of is a webspace.

Fr. Robert: Everything is a webspace. Alright. So, as promised, we’re going to talk a little bit about how we’re actually going to make our first killer app.

Shannon: I’m ready.

Fr. Robert: Are you ready?

Shannon: Yeah, I’m super excited.

Fr. Robert: Now, do you remember last week, we gave people a class. A class that they could instantiate and it gave them a very easy way to download something. You basically gave it the name of the video and it would automatically start pulling the podcast.

Shannon: Yeah, and you could just save it wherever you want. Super easy.

Fr. Robert: But that was all done in the console and that was all hard coded. We thought well, why we don’t expand on that. Let’s show people the real promise of object oriented programming. So Lou Maresca in like, ten minutes, designed a program around that class, that uses XAML, that uses a new model that we’re going to talk about today. To create this. This should look familiar. Because we played with this last time. This is all of the code that we have from the podcast downloader. Except this time we’re going to do a little something different. When I start this program, and compile it, it’s going to create this. So this is going to access the RSS feed that’s been hardcoded. And when I retrieve it, it’ll tell me what’s on that RSS feed. This is very simple coding. It’s gone to the RSS feed it said, okay, let me access the server, let me find out what video podcasts are available. And it will automatically update. So it’s not like a hardcoded list. As the RSS feed gets updated, it will automatically update itself. One little more thing that you could do inside of a podcasting app, is when you click it its actually going to start the video inside the application.

Shannon: That’s awesome. And he did all of this in C Sharp.

Fr. Robert: It’s all done in C Sharp and it’s all done with the same download class. Now the cool thing about this is this is ugly right now. This is just a developer window.

Shannon: Well, it’s prettier than what I can make.

Fr. Robert: Exactly. But we could have rounded out the edges here, we could have given it a background image, we could have worked on the design. This is just to show functionality. And the functionality is simple. Put the RSS feed here, retrieve it and then you can play anything straight from that server.

Shannon: Oh man, that’s awesome.

Fr. Robert: Yeah. Now this is all going to be available to everybody. So we’re going to make all of these project files available for download. And if you download it and you compile it, it will run exactly like this. But the challenge will be can you add functionality to this? Or if you go ahead and watch the last episode of module one where we actually talked about the presentation model, can you do things like add your own background? Or add your own logo. Or make it useable on a mobile device?

Shannon: Ooh, I would love to see that.

Fr. Robert: Yeah. But let’s back up a little bit. Because that’s cool to talk about the code that goes behind it and we’re actually going to delve a little deeper as soon as Lou Maresca makes his entrance.

Shannon: I need to understand how to make this happen.

Fr. Robert: We have to understand how to make it happen but first, we have to go into the ivory tower. Are you ready for that?

Shannon: I’m so ready. Let’s do it.

Fr. Robert: This isn’t going to be some coding 102 stuff again, so I’m sorry if we lose you, but we think you’ve got classes, now we want to confuse you again.

Shannon: I will yell at you if you confuse me.

Fr. Robert: We want to talk a little bit about the Windows presentation foundation.

Shannon: What’s that?

Fr. Robert: That’s what we just did.

Shannon: Oh, okay.

Fr. Robert: But in order to assemble that, when we look at that application, it actually helps to bring out a point that we’ve been trying to make the last couple of weeks. Which is, why would you do object oriented programming. Isn’t it easier just to go ahead and write all your code and not worry about separating all your things into objects? Well, the podcasting app is a perfect example of why you would. Because we have that class. Because we have those objects, we had the ability to reuse the same code and turn it into something beautiful rather something that ran in the console right? It would take a lot of work around to do if you were just using structured programming and you had to try to remember, this line does this and this line does that.

Shannon: But more than that, it shows the basic break down of the real world. This is what we talked about. What is the primary purpose of Coding 101? It’s not to teach code, you can learn code anywhere, it’s to teach people that you need to take a real world problem, break it down into manageable chunks, and then solve those chunks with code.

Shannon: Right.

Fr. Robert: Okay, so. Thinking caps on here. Question. Go ahead and go back to my app. what needs to happen for this app to work? Because this is a basic app. go through the steps.

Shannon: Well, first it needs to find the website of the RSS.

Fr. Robert: Right. Very good. So it’s got to find the website, it’s got to find the data. And it’s got to bring the data in. but once the data is in, what’s it going to do with it?

Shannon: So, then you’re going to retrieve. So it’s going to pick and pull specific parts of that RSS feed and create this list for you.

Fr. Robert: Right, right. And once we’ve got the list... let’s say I’m interacting with the list, when I click on this list, it’s got to talk to the module that had pulled the data, and it’s got to say hey, I want this particular one.

Shannon: It needs to know exactly what file you’re trying to get and then it needs to know what to do with that file to play it.

Fr. Robert: Correct. Exactly. So what you’ve just done is you’ve broken down the basic components of what this program is. There’s two main parts.

Shannon: Huh! That was object oriented coding in RL.

Fr. Robert: There’s a part of the program that’s going to access the external data source right. So that’s the server that was pointed to by the RSS feed. And it’s going to get that data and make it available. And then there’s the part of the program that actually interacts with me. It’s not the same. I’ve got two different objects, at least. Two different objects, two different classes, one of which is responsible for getting the data, the other object which is responsible for presenting the data.

Shannon: That’s awesome. And that’s why you want to separate it out.

Fr. Robert: It makes so much easier. It makes it a lot easier when you think of it that way because then you can just code this class to get the data, this class, all it does, whatever data is given to it, it displays.

Shannon: That totally makes sense. It’s so easy to understand once you actually break it down.

Fr. Robert: Now let’s confuse you. I want to talk about something, it’s more the Microsoft programming world. But you can apply this pattern to a lot of different languages. So that is MVVM.

Shannon: I don’t know what that is.

Fr. Robert:  Model, view, view, model.

Shannon: Model, view, view, model?

Fr. Robert: Right. It’s not a programming language, it’s just a pattern. It’s just a way of thinking about how you’re going to write your program.

Shannon: SO is that kind of like classes and syntaxes….

Fr. Robert: No, it transcends all of that. So an MVVM is not something you code. It’s doesn’t have a language associated with it. It doesn’t even have an object that’s connected to it. It’s just like saying this is the way I’m going to write my program.

Shannon: So what’s that have to do with us?

Fr. Robert: It has to do with us because it’s the way that we’re going to do object oriented programming. It’s the way that we’re going to write our C Sharp application. It’s the way that we’re going to turn it into an app.

Shannon: So is it kind of like looking at different ways to interpret language?

Fr. Robert: It’s more a different way to look at how your program works. If you look at your screen right now, this is the MVVM model. So I’ve got the view up top. That’s me. I’m viewing. Then I’ve got some sort of data binding. Then I’ve got the view model. And below it I’ve got the model. So the model is the data. The model is all the stuff that I have to pull so that I have access to it. Then above it, you’ve to the object that pulls that data and decides what data has to go up to the view and what information from the view has to go back down.

Shannon: So it has several different steps to the process.

Fr. Robert: Different steps to the process. Now let’s break it down even more. So the model is the object that contains all the data. Just think of it that way. That’s where you store the data that you’re going to be using. The view is the UI. So I’ve now got the two sides. I’ve got the model here, I’ve got the view here. Some call it the presentation because obviously it’s presenting data to me. The view takes the data and it orders it in such a way that it makes it more appealing to me.

Shannon: This kind of reminds me of something that has to do with networking called the OSI model. Where you start with the data and you have seven different layers that get you to the presentation.

Fr. Robert: But it’s even better than that. Because we talked about how object oriented programming allows us to sort of separate out tasks. If I look it as MVVM, it means I can have one team and say your job is the model, you’re the back end. All you do is deal with databases, you deal with retrieving data and making sure that we have it available.

Shannon: Right. I don have to make it look pretty, I just have to find the information.

Fr. Robert: Right. And then you put the designers on the view module. You say you are my designers, you’re going to receive this kind of data, and you need to make it look pretty.

Shannon: Right.

Fr. Robert: Then I have a third team and they get that last class. And the last class is the view model. It’s the interface between the two. And it’s to say, your team is going to decide what data gets pulled up from the model and pushed to the view, and what data gets pulled from the view and pushed to the model.

Shannon: They’re like the middle man.

Fr. Robert: They really are the interface. Now something else that MVVM is really big on, is you want there to be some sort of data binding between the view and the view model. Because you want it to be interactive.

Shannon: It wouldn’t work if you didn’t have that binding between them, right?

Fr. Robert: Well, it would still work but there’s what we call passive binding. Like what we used to do in C Sharp where there’s a static menu. That menu will never change. If I’ve got my data binded, I can actually make my window change based on the data that’s coming into my model. For example, this part, this user interface, is not static. It’s active. It will always be changing based on the data that’s coming in the model in the back.

Shannon: Yeah, makes sense.

Fr. Robert: I haven’t lost anyone have I?

Shannon: Not yet. I will let you know.

Fr. Robert: So, the reason why we want that, the reason why we want to explain that is because when we’re designing an application, we want to have that in the back of our mind all the time. What part of the program am I writing that’s actually fetching the data that I want? Especially since the app is probably going to be a web based app. it’s probably going to pull something from a remote server, that model needs to be very good at what it does. Getting data. My view has to be very good at what it does. Which is creating a presentation. The view model is the smarts of the app. its deciding what goes where. If I break it down that way, it means I can change any of those components without having to rewrite the entire program.

Shannon: It also helps you understand if something broke, where that break happened. Like if the presentation was ugly, you know exactly where to go.

Fr. Robert: Exactly. If the presentation was ugly, but the data was getting there, it means that the model and the view model are fine, it’s the view that’s messed up. If the UI looks fine and it looks as if the data is getting into the database, but it’s not getting into the right place, it’s the view model module. Or if there’s no data coming in whatsoever, it’s the model that’s not getting it correctly.

Shannon: Wow, that’s such an interesting way to look at it.

Fr. Robert: And this is the power of object oriented programming. This is why we separate things out. Because, especially as the application gets more and more complicated, you need that separation. Or you’re going to end up pouring over thousands, tens of thousands, hundreds of thousands of lines of code, trying to figure out where you made your mistake.

Shannon: Code monkey 23 in the chat said it actually makes life a lot easier when you use these kinds of patterns. Every app is structured the same way so it’s easy to decipher without reading every single line. That’s great.

Fr. Robert: Exactly. Because it means that if I’m writing the view module, I don’t have to care how I got the data. All I need to know is that it gave me 3 parameters. It said, here’s the data, here’s the actions you can take, and this is what can happen after. That’s the only thing I can program. Hopefully our audience understands.

Shannon: But if you don’t, ask us questions.

Fr. Robert: Absolutely. But now is the time where we’re going to bring in the man who makes it all work out. Ladies and gentlemen you know him, you love him, back from the dead, Mr. Lou Maresca. Sr. product developer at Microsoft. Lou, so good to see you my friend.

Lou Maresca: Hey guys, it’s good to see you too.

Fr. Robert: Now you know this MVVM, this is not what I did when I was programming in college. But this is an exciting way to think about things and it does really sort of crystalize why you would use object oriented programming. You do it so that you can have those very neat delineations between the problems solving that takes place to make an application work.

Lou: Right, exactly. I think it’s our legacy at Microsoft to just put into acronyms behind everything. But like MVVM sounds like it’s really complex, but it’s just a really simple- you guys did a really good job explaining it, much better than I probably would have done. Around just explaining what that means, which is creating a model, which is a bunch of data, and creating a nice pretty view to create that data. But then how do we get the data to the actual UI, well, we do that by kind of gluing it together with the view model. So I think that’s exactly what that’s supposed to do. And like a lot of people were saying in the chatroom, this pattern is being developed and used across many platforms. Like Android does it today. They have a view, and then the model and then they bind it together. And same thing with iOS programming, Mac OS programming, Windows store app programming. Everything is kind of following a very similar pattern today, because of a lot of the advantages you get. One of the biggest ones that, as the app gets really big, is the ability to test those components. So like if I don’t actually have to show the UI in order to test the fact that I’m getting the data correctly, so I can just spin up, create a little test around the model side of the code. And then I don’t have to have a bunch of PCs showing the UI in order to run or test the app. you can just run against the model component. And same thing in order to test that I’m getting the right data and make it look correct so that when I show it in the UI, I can just test the view model. So it’s very important. And it doesn’t make sense in this point in the game, but once you get to a bigger app, like you were saying, it’s very important.

Fr. Robert: Right. I was just thinking that if you look at all the major developer platforms, so go ahead and developed in what is it now, Swift? For iOS? Look at their development platform, or go look at the Android development platform. They all are, in one way, shape or form, MVVM. Like Google Play services is a big MVVM playground. The whole idea is, why would you want to rewrite the back end? Use our back end, focus on the fact that we’re going to give you this data, you write the view model and the view, and everything’s good.

Shannon: Well it makes sense. Why would you redo something that somebody already did?

Fr. Robert: Right. Its taking object orientated programming and its putting the internet into it. And the internet, that back end can come from anywhere. It doesn’t have to come from- I don’t have to write it. Lou can you actually take us through your program? So take us through the program that you wrote to be the more advanced podcast catcher. Because there is a big thing in there. There’s XAML. XAML is a huge part- it is the view. So explain how that works.

Lou: Sure. So Joe in the Google+ was saying, hey I’ve got an easier way to download stuff from webpages or HTML. So I actually, I didn’t steal his code, but I basically used his concept to kind of simplify the podcast catcher download. Because I think I wrote the one that allows you to download in many different threads and asynchronies, and I was like that’s too complex. So I used his thought to use this other thing called web client. Which is a lot simpler. So that made this app a lot simpler and then we can kind of focus on the XAML side. The UI side of it all. This is the app. what I’m going to do is actually build another app version of it. So really quick, when we do a new project today, it gives you the option to do a WPFF which is a windows presentation foundation app. you can do a windows store app. you can do a blank app or a windows run time app or any time of pivot app. all of these use this thing called XAML. And basically what it is, is it’s just a declarative market language. Just like the HTML is. So if you’ve ever looked at HTML code where you have a bunch of XML in it, that’s exactly what XAML is. It’s just a way to describe UI using XML.

Fr. Robert: Let me pause for a second there, someone in the chatroom is saying people say XAML? He just says XML. XAML is actually different from XML. XAML looks like XML, but XAML. Xaml stands for extensible application markup language. It’s a type of XML that’s specifically designed for building the view in the MVVM model.

Lou: Yes, yes. So that’s important. Because that’s one of the things that even the Android version of this- so Android has their application XML, it allows you to do data binding as well. So they basically extended the markup languages of today, like HTML or standard XML, and they allow you to do application logic in them. So that’s kind of the key. So if I create this WPF app, the first thing that you’ll see is it will create a view. And it’ll be kind of sitting in front of you here in the designer. They call it the designer. And you’ll be able to see- its loading the designer so you can see there’s nothing here yet. But down here there’s a bunch of XML, or markup. And then a really easy thing to do in this is basically just go over to the toolbox to the left of your application over here, and you can just start dragging stuff up here. Like I can put a button and I can put label. And I want to change what the label says… so I can put whatever I want here, that kind of thing. Then you notice down here it’s actually changing this. So you don’t necessarily have to touch this code down here at all if you really don’t want to. So just like Squarespace, you can build a really cool app using their designer, you don’t actually have to touch the underlying code behind it if you don’t want to. So that’s kind of the key. If I wanted to make this button do something I can just double click on it. And it’ll say well okay ill create some code behind it and I’ll take you to where the code is at and now I can put some code in here to do something when somebody clicks the button. So it’s a really, really simple way of building an app. but there are some complex components to XAML. Like you were saying. Let’s say I didn’t want to put the code in the code behind. I wanted to say they let me bind this to some event somewhere else. And that’s called data binding. We won’t get to that today, but really the complexity behind this is like you said, separating those layers. Creating the view, get a designer to get here and use this really cool designer and build a really nice looking app. without really needing any code. And then someone builds the code and then at some point we kind of put them together, and we bind them together. And so that’s the important part. Because you don’t always have the same person doing both. The people who can do both are very, very talented. I’m not one of them. I can’t do the really fancy stuff.

Fr. Robert: Codemonkey23 in the chat room is saying this is all specific, its proprietary to Microsoft, but actually, Microsoft contributed XAML to the open assurance alliance. Or something or another. Which basically means that anyone can use this. They opened it up to the world. It’s not proprietary to Microsoft, anyone can take it, run with it and develop their own flavor. That’s fine as long as they contribute it back. So in other words, this is a really good way to develop applications and it doesn’t necessarily have to be a Microsoft application.

Lou: So one of the really cool neat things that- there’s a company called Zamerin and they’ve built this really amazing platform that allows you to build UIs and code in visual studio. And then for like let’s say a Windows phone app, and then it allows you to run it through their tools and actually generate and create iOS and Android versions of those apps too. It’s super powerful and the reason why they’re able to do that is because this stuff is all open source and they were able to build tools on top of it. So that’s a huge key behind this. A lot of people don’t know that tool exists, but it lets you build an app for multiple different platforms and you only really have to build the app components once. UI components might need to be tweaked a little bit, based off of the UI in iOS and Android, but the actual app code can be coded once. So it’s kind of cool.

Fr. Robert: Now I will say this. We will be giving you the entire package. It’s just like we’ve done for the previous weeks. Where it’s not going to be on GitHub, it’s going to be in a zip file in a link in our show notes. Which will allow you to download the entire project. Because you don’t just need the project file, you need all the associated files. Which means to be able to download, uncompress, open up the project, and run this immediately. Now what we would like you to do, Snubs you can join in on this here, now that you know that it works, we want you to take that XAML interface and we want you to poke around. We want you to play-

Shannon: Oh boy. You want me to break it?

Fr. Robert: Break it, break it. And then reload it, who cares. See if you can assign it to a different- right now it’s set for our podcast feed, assign it to hack 5, assign it to techzilla. Assign it to someone else. It’s all about whether or not you know what the different parts of the program do. We’ve done a lot on the theoretical today, but get nitty and gritty. Get in there, get coding, and see if you can figure out what is associated with what.

Shannon: Ooh, I’m so excited to do fun things.

Fr. Robert: Yeah. This is fun. And again, Lou, thank you for creating this. Because this is a really cool piece of programming.

Shannon: This is a great example.

Fr. Robert: Yeah.

Shannon: Object oriented programming.

Fr. Robert: This is everything that we’ve been talking about.

Shannon: Why you want it so much.

Fr. Robert: No Lou, before we go away, you did kind of want to blow people’s minds a little bit with something else. Maybe a little nugget of wisdom?

Lou: Yeah, so you want to talk about Nugget or do you want to just talk about concept?

Fr. Robert: We’ve got time, let’s go ahead and talk a little bit about nugget.

Lou: Okay. So one of the big things around development today is that you don’t want to do everything yourself. I mean, you really don’t. If you do, you’re crazy. Because there’s so many people out there that are running into the same problems that you’re having today, and in order to make sure that you’re productive in building your apps, you have to sometimes reuse that stuff. I mean, that’s the whole big thing. That’s one of the core things that Microsoft now is- we’re trying to find a way to reuse a lot of people’s work that they’ve already done. And so one of the ways to do that is obviously open source. But the problem with open source is that sometimes it’s really hard to find. Like where do I find the version of it, where do I find the code for it, what’s the right code? Is the correct version of that code? How do I get it into my project? That kind of thing. And so Microsoft created a way in visual studio to do that and it’s basically an open source package handler called nugget. And basically, if you show my screen real quick I’ll show you where you can get it. Underneath your tools menu, you can go into your extensions and updates. And in here you can actually just search for online. Search for 9 and nugget. And this will show up at the top, the nugget package manager. So if you basically install or download the nugget package manager. And what this will do, this guy, it’ll allow you to actually go through and search through nugget- and what nugget is, is just a big repository of open source code where people have done really amazing things. And I actually used a source of it, a version of it, in this social app that we showed last week. Which I used the link to twitter nugget project. So if I go into tools now it’ll actually show up this nugget package manager popped up here, and I can actually click on manage nugget package for solution and it’ll show me all the nuggets- packages that I have in here. And the cool thing about it is install packages is this link to twitter one. And I can click on manage here and it’ll allow me to download the latest update for that and it’ll add all the files I need for the project, it’ll find everything that I need. It does all the work for me. Because normally id have to go out and piece it all together myself. So this is huge and you can actually search online too. So let’s say I wanted to get like a Facebook app.

Shannon: I was going to ask you about that. Like how do I know if something I need is available on nugget?

Lou: Yeah you can just go to nugget.org or you can just go in here and do a search for online. And there’s a Facebook sdk nugget package. That basically simplifies that for your phone app or for your web app. and so that’s why I use the twitter- the link to twitter one. Because that simplified the ability to talk to twitter. That’s why that code was so simple, the one we showed last week to be able to host to twitter. So nugget takes a little time to get used to, but the coolest thing about it is it lets you stay inside of visual studio in order to piece your app together. So you’re like well, I don’t really understand how to write code on how to log into Facebook or twitter, and I don’t want to even learn that type of code. Then go out to nugget. Find out if there’s somebody who might have already written a bunch of classes, objects for you. And then you can bind that in your code.

Fr. Robert: Which is why you want to be using the MVVM pattern, because if you are, then you know, well, I get that class and that’s handling the model for me. And maybe this class is handling the view model for me. So all I have to do is do the view. And the entire app development could be figuring out where you want to put the boxes and the buttons.

Shannon: That will save so much time for so many apps.

Fr. Robert: It’s more than that. There are so many people who have good ideas for apps, but they’re locked because they don’t know how to program. What you can do with this, if you’re using these packages, if you’re using this pattern, it means, take someone else’s programming, and then just reorganizing it so that it does what it wants your app to do. And then as you grow, go ahead and go back through those classes and figure out, oh you know what, I can write this one better. It’s all about the tinkering and this give you- this is like Minecraft for programming. This gives you your Legos, drop the Legos together and try to make something.

Shannon: That’s exactly what it is. I love it.

Fr. Robert: Now, Lou, next time I think we’ve got to get into some data binding. We touched on it very, very briefly, but it’s important because you want your view to be beautiful. And your view can’t be beautiful unless it talks properly to the data behind it.

Shannon: Yeah, I would like to farther understand data binding.

Fr. Robert: Yeah. Let’s do that. But homework for the next time, download the example. Get our podcast catcher, and turn it into something else. Shannon will be waiting for you on the groups, see if you can impress us. See if you can make it something beautiful. See if maybe you can turn it into something that you would want to download.

Shannon: And remember, if you guys are sharing your codes specifically for this, you probably should put it into a zip file. Not just share the .cs file with us.

Fr. Robert: Yeah. It’s not like the old programs where you can just give us one page of code and it works. There’s a lot of classes, there’s a lot of associated files that go with the project. Zip it up, give us a link and we’ll try to throw it onto the show. Lou Maresca, thank you so very much for being our code warrior. It is always a pleasure to have you.

Shannon: Thank you.

Lou: Thank you guys.

Fr. Robert: Showing off your coding goodness and I’ve got to tell you, you’re one of a kind. Can you tell the folks at home where they can find you, where they can find your work?

Lou: Yeah. @LouMM on Twitter and LouMM on about me. And also all my work that we’ve been doing over the last couple years CRM.dynamics.com. You can check it out there.

Fr. Robert: Lou Maresca, from Microsoft, we salute you.

Lou: See you guys, thanks.

Fr. Robert: Now we know this was a lot of information. Especially since we’ve got an entire program that we’re going to let you download. It’s too bad that there’s no place that they could go to easily get our notes and the links.

Shannon: You know, I know a place. Yeah, it’s a website called twit.tv/code. Yeah. There’s links, there’s GitHub links, there’s show notes. There’s ways to contact us. I’m pretty sure they’ll be good over there.

Fr. Robert: Yeah. And not only that but you can find ways to go ahead and get our episodes automatically to your devices of choice. So if you want to subscribe to the show, go ahead and drop over there. Or go to iTunes and subscribe to Coding 101. We’re going to be bringing you some coding goodness every single week. You might as well get it into your iPhone, your iPad, your Android tablet, your Mac, your PC, your desktop, your Laptop, whatever it is.

Shannon: All the places. All the things.

Fr. Robert: Get all the things.

Shannon: And of course, we’re on the Google multiplex too. We’re at youtube.com/twitcoding101 and our Google+ community. I made a bitly link for that one. Its bit.ly/twitcoding101. So find us on there, subscribe and share. Hey that rhymed.

Fr. Robert: Also. We do this show live. Drop by live.twit.tv every Thursday at 1:30pm Pacific Time, and you’ll be able to see the pre-show, the post show, all the stuff that gets left out of the middle. It’s just kind of fun. We love having you. And if you drop in our chatroom.

Shannon: The link on the site for the chatroom is irc.twit.tv so you can join in and ask us questions if you need to know anything. And we’ll answer them during the show if we see them show up.

Fr. Robert: Yeah, exactly. You’ve seen us call stuff out from the chat room. You guys are on a TV right below our desk here. So we’re always looking to see whether or not you’re ready for us to move onto the next thing. Also, you probably should follow us on the twitters.

Shannon: Absolutely. I’m on there all the time. Ill answer any questions that you guys have. I’m @snubs.

Fr. Robert: And I’m @Padresj. That’s twitter.com. Until next time. I’m father Robert Ballecer.

Shannon: I’m Shannon Morse. End of line.