Coding 101 39 (Transcript)

Father Robert Ballecer: Today on Coding 101 we’re continuing with “build an app. “

Netcasts you love from people you trust. This is TWiT! Bandwidth for Coding 101 is provided by CacheFly, at chachefly.com.

This episode of Coding 101 is brought to you by Mandrill. Mandrill is a scalable, reliable and secure email infrastructure service trusted by more than 300,000 customers. Sign up at mandrill.com, promo code TWIT, and you’ll receive 50,000 free email sends per month for 6 months. And 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 2 week trial and 10% off go to squarespace.com and user the offer code C101.

Fr. Robert: Welcome to Coding 101, it’s the TWiT show where we teach you all the secrets of the code monkey/warrior. I’m Father Robert Ballecer. For the next 30 or so minutes we’re going to get you all learned up on the things that you need to know to become the greatest code warrior ever.  Now we’ve had a couple of changes to the show which we’re going to talk about, but first I want to welcome longtime friend of the show, great code warrior, Mr. Lou Maresca. Senior software engineer at Microsoft. Lou, thank you very much for coming back.

Lou Maresca: Hey Padre, thanks for having me back.

Fr. Robert: Now we’ve had you on since episode 1 of Coding 101 actually. You were our very first code warrior. So it’s fitting that you’re here for some of the changes that are happening with the show. Let’s talk about it. Let’s be completely open about it. We’ve decided to go in a different direction with Coding 101. What we found out was that people were starting to lose interest with the whole reset to zero every time we switched to a different language. So we sat down and a bunch of us said “how can we make this better? How can we keep people interested?” And what we decided was to make Coding 101 focus on projects rather than lessons and on the interesting people within the coding world rather than just the same basic topics over and over again. Now that doesn’t mean that we’re done with teaching. Doesn’t mean that we’re going to get rid of all the cool tidbits that you need to know about coding behind the scenes. But what it does mean is that we’ll be able to have more interesting experts, more interesting guests, who will show us their pet projects, and then teach us how they did them. Now thankfully we’ve got Lou Maresca because Lou is actually going to help us with the transition by finishing up our 4 part build an app project. Lou are you on board with that?

Lou: I’m totally on board. Ready to go.

Fr. Robert: Ready to go. But before we go though, could we spend a little bit of time addressing one of the questions that some of our audience members have had?

Lou: Sure, definitely. Let’s do it.

Fr. Robert: One of the things that has been asked over and over again, and we’ve never quite got around to answering this, or from fans, from audience members, who have asked about boot camps and coder academies. You’ve heard about these right?

Lou: Oh yeah, there’s a ton of them.

Fr. Robert: Yeah, and actually there’s a lot in Seattle of course. Its Redman, it’s near Microsoft. But the idea is, you have some sort of super intensive one week/two week/six week/twelve week/twenty four week long boot camp. Where you sit and you learn a language. Now our audience has wanted to know what we think about them. And specifically what ones might we might recommend if they wanted to get into coding. Into programming. On Coding 101 we’ve been very open since the very first episode that we will never be able to give you everything you need to be that super excellent programmer. We just wanted to get people interested in knowing what happens behind the scenes in their favorite pieces of software. So Lou, let me turn this over to you. What are your first impressions about a coder academy or a boot camp?

Lou: To be honest with you, they’re not necessarily for everyone, I mean I take classes even here. At Microsoft we offer classes internally where we kind of call them “coding academies” or primers to actually developing different types of solutions. Like I took one on type script a while ago. And those types of things, they’re very quick, they’re very fast and they’re very deep. And you can take them and you’ll learn a lot. But sometimes you don’t necessarily learn the experience of actually doing. And I think that’s actually the key to programming. You can learn how to the language. I could probably learn French, but would I speak French really well? Probably not. I could probably get by, by hearing things, but speaking it is sometimes a little bit tougher. So I think the same thing with coding is, academies are great, they’ll teach you the language, they’ll teach you the concepts and semantics and syntax, but to actually code well with them, you have to do and you have to do well. So that’s kind of what Coding 101 is all about is kind of doing. Using what we show and doing things with it over a long period of time.

Fr. Robert: Right. It’s the whole sampler approach. One of the things I’ve noticed about a lot of the coding academies is, of course they’re of differing qualities, but they all teach the same thing. I mean, as long as they’ve got a decent reputation, they’ve probably got a good staff, they probably have a good pedagogue, so they’ll probably be able to take you through the material. But unfortunately nothing, nothing, no amount of intensive programming lessons, no amount of great teachers, no amount of great material, will make up for lack of interest. And unfortunately this is one of those things- this is why I’ve been so reluctant to answer this. And Lou, maybe you can speak to this. I know people who really wanted to get into programming because they saw it as a future or they saw it as something that they want to do as a career, but that’s all they saw. They didn’t necessarily have the passion for solving problems in a coding language. And I think those are the kind of people who a coding academy or boot camp- and they can be really expensive, is wasted. Have you seen that phenomenon at all?

Lou: Yeah. I mean, that’s the problem with these things, is they don’t give you the kind of the meat of what’s going to actually going to happen, what you can actually learn. And so they kind of throw you into the deep end. They try to go through the basics in the beginning but then they will kind of take you really fast really far. So it’s kind of tough to kind of get the gist of everything.

Fr. Robert: Now I did want to give a plug for some of my favorite programs. These are programs that I’ve actually had firsthand experience of. I’ve seen their curriculum. The first one is, they’ve got programs here in SF, I think they’ve got Denver, they may have Seattle, I can’t quite remember. It’s done by Galvanize. It’s their G school boot camp. Now this thing runs 24 weeks so of course it’s for the long haul. But it is an immersive full time program, or a part time workshop, depending on how you want to run it. And they’ll take you through the full development process. Basically what we’ve done here on Coding 1. They’ll show you how to break problems down into programming languages. How to take those problems and break them into even smaller pieces that can be coded. And then they’ll take you though some of the languages that are popular. I like Galvanize because it’s like an all you can eat buffet. They’ve got so many resources and you get to choose what it is that you want to learn during the boot camp. It’s a pretty good one. Another one that I like is Full Stack. Now this is more of a shorter program. Its only 13 weeks long. Which is still quite long. But it’s the same thing. You sit down with other like-minded people, you find your skill level, and then follow along until you can build something. Now the warning that I have about Full Stack is that I know a few people who have gone through the program, some of them say it was exactly what they needed, it was exactly what they wanted. If you don’t have the passion, you can really easily get lost in that program and just kind of end up wasting your money. The last one, and actually we have these folks either on all about Android or on Floss, I’ll have to go back to the episodes list and find out. But it’s called The Big Nerd Ranch. This is a super intensive online location, one week crash course. What I like about it is that they have the secret sauce. They have the thing that I really like. They realize it’s not just about teaching you programming, it’s about getting you networked. It’s about getting you into the programmer culture. Think of it as sort of like a hippie camp for people who want to program. Lou, did you have any recommendations, do you know of any camps that you could throw your support behind?

Lou: So there’s one called Base Camp and its here in Seattle and it’s a much shorter one, but it just basically goes through the basics. That’s why they call it Base Camp. I’m not sure what the website is, I’ll have to look it up and put it in the show notes. You can find specific ones for iOS or C Sharp. And they’re usually 3-4 days and they go through the basics, the fundamentals. And they actually provide you with BMs and virtual images you can load up in virtual box or something. And you can test things out. So that one’s a good one too. I have personal experience with that one. But all these other ones are great too. I’ve actually looked through their sites and their content and they seem pretty good.

Fr. Robert: Yeah. Over the last couple of weeks Lou has been taking us through a 4 part build an app series. The idea is to go from concept to finished product. Something that we could actually install on our devices. We have already talked about the logic train. We’ve talked about how we break down the features of our app. what we want it to do and how it would actually do that. How it progresses the logic. We’ve talked a little about the model. Like how would we actually process the data? How would we get it into the program? How would we decide what needs to go to the user and how would we decide what the user does to interact with the data. Today we’re going to talk all about binding. We touched on it last week but we didn’t get into it deep enough. Lou is going to show we how you bind your data so that a user can properly interact with the software, and the software can properly interact with the user. But before we do that, let’s go ahead and take a break and talk about the first sponsor of Coding 101. Now if you’ve been following tech, like I have, you know that social is all the rage. It’s always about the latest app, always about the latest service, always about the latest company that comes up with the newest, latest and greatest way to blah, blah, blah, blah, blah. But through all that noise there has been one constant for business and developers. And that is the number one best way to communicate has always been email. And we’ve got Mandrill to talk about the fastest way to deliver that email. Now what is Mandrill? Well it’s the easiest way to manage, integrate, deliver, track and analyze your email. It sports detailed delivery reports, advanced analytics and a friendly interface that makes it easy for your entire team from developers to marketers, to monitor and evaluate email performance across your business. Now you can use Mandrill to set automated one to one emails like password sets and welcome messages. That takes away some of the work that your IT group has to do. And it can also do marketing emails and customized news letters. Mandrill started as an idea back in 2010 and now they’re the largest email as a service platform on the market. Because they’ve G located their servers to maximize response time, Mandrill can deliver your email in milliseconds, no longer waiting for hours or even days for really messed up networks to get to every corner of the company. And they’ve given you the web hooks and analytics that developers need to check delivery rates. And the documentation to make that integration a breeze. Now speaking of integration, Mandrill is easy to set up and integrate with your existing apps. It comes with a beautiful interface, flexible template options, customized tagging and advanced tracking and reports. And Mandrill is the only email infrastructure service with a mobile app that lets you monitor delivery and trouble shoot from wherever you are. Mandrill is powerful, scalable and affordable, but you know what, you don’t have to take our word for it. Right now Mandrill is offering a special deal to members of the TWiT audience. Sign up today at Mandrill.com, promo code TWIT and you’ll receive 50,000 free email sends per month for your first 6 months of service. That’s mandrill.com promo code TWIT and we thank Mandrill for their support of Coding 101. Back to the action, Lou, when we last left our wonderful audience here for Coding 101, we were just getting into data binding. Now give us a refresher course, what is data binding and why do I need it?

Lou: Basically what data binding is, it’s the concept of what we call source and a target. For instance I have a source of data somewhere and I need to target it to go somewhere. So that’s kind of like what data binding is. You take data from some source, let’s say our model, in our case some web service like Google API, and then we’re going to target it somewhere, and we’re going to push it and actually show up that data to the view, to the user. And the way we do that is we use what we call one way binding, or rebinding. And that allows us to target specific fields. Let’s say a text box or a label or something like that on the view. So it’s kind of a way to target things. And there’s things we call a two way binding too, where you can take data from your model, your API, you can then show it or target it to the user. And then the user can change some of that data, let’s say a title or a name or something, and then they can hit save or they can just tab off that field, and then an action happens and that binding, that data binding then targets again back to the model to say hey, go save this data. So basically what we call a source and target kind of mechanism.

Fr. Robert: I’ve got to ask the question, because there’s going to be someone out there who asks, which is, we’ve been talking about this MVVM model of programming. This idea that you have one component that reaches out into the world, gets all the data. You have one component that turns that data into something useable and presents it to the user. And then the view module that actually takes that information and presents it in a useable format to the user. And then communicates back to the view model what needs to be seen. Why wouldn’t I just bind back to that module? That first module, why can’t I just skip the middle man and just have a two way communication rather than this sort of triangulation view of how the interface works?

Lou: So there’s lots of reasons. One of them is basically so you can kind of have a middle tier to do things like tasks and for instance if I have a failure and I call the API the user won’t actually see that failure, we could do something to the data, maybe return empty data or something like that. Or return a message back to the user and just say hey, just didn’t work or something like that. So we just have a middle way to kind of handle things like that. Another thing is you don’t want to necessarily bind directly to your model because your model might not really understand how to communicate to a view. So you’d have to put a whole bunch of logic in that model that doesn’t really make sense to basically communicate information and translation and all that stuff back to your view, your user UI. And so that makes the program a lot more complex, a lot harder to test and a lot harder to find problems. That’s kind of the key, is problem finding stuff. So when you create a view model it simplifies that because now you have a middle man to kind of handle and buffer any of those issues that come up. Anything you need to test, you can just test that one little sliver of the program. And then also any time you want to translate anything coming back from the model, maybe it comes in a specific form, the model doesn’t have to do that work, the view model can say oh, ill handle it for you. View, you just do what you know how to do which is get the data for me. And so that’s kind of the key to the view model.

Fr. Robert: Right, right. One of the things that I was taught was that you programmed with the console. And the reason why you would program with the console, is because it gave me better insight, better view into what was happening. I could have all the errors show up. I could have all the compile issues actually be spelled out on screen. And then I could switch it to a nice, neat interface later on when I wanted to push it out. Is that something that you do, or do you just go straight to the nice UI?

Lou: That’s a great question. So there are two ways to do it and there’s a religious word from that aspect of programming. I like to do it in two different ways. One, you can either do the console way of doing it, where you basically hook up a simple console, which I think we did with the original task application that we built. Or there’s another way. Most platforms allow this, Android or even in iOS and Windows, they offer a Unit Test projects. And unit test projects are basically the whole concept of what we call test driven development. And that means that you build a whole bunch of tests that will initially fail up front. You get a list of tasks and I expect that there’s ten items in that list, and I write a test for that. The test, when you run it, will fail because the code doesn’t actually do that yet. And then I actually go over to my view, my view model, and I write code to return ten tasks. And then that test starts to succeed. And so the whole idea is you build a whole bunch of tests around the things that you want the app to do, they start to succeed as you build up that app and then you can add more tasks around different functional components. And then the cool thing about that is later on, as you change more code and it becomes more complex, you can continue to run the same tests over and over again. And if one fails, you can say oh, I must have broken something, let me go back and figure out why this unit test is now failing. And so that’s kind of the key. It’s really easy, you just add a new test product to your application, and it makes it really easy. But console apps work too for especially smaller apps. When you get bigger, the unit test kind of works a little better.

Fr. Robert: One of the things that I’ve always found a little fascinating was that in the MVVM model, the data binding is intended to be bidirectional. So you’ve got the UI, which is communicating both ways with the view model, which is also communicating both ways with the model. There have been some programs I’ve seen that have been basically one way. Or very limited bidirectional communication. In other words, it’s a status screen. So the status screen shows whatever it is that the view model pushes to it. But in Microsoft’s view of how this should work, it should always be bidirectional and it should always be richly bidirectional.

Lou: So yes, I think that’s kind of the way that they- so when you set up a binding you can specify whether it’s one way or two way or which way it is, and I think the concept is yes, they do want you to reutilize the two way kind of thing. But let’s say you were writing an app that pulled down news information from a site and you were just getting the news content, or the text, you don’t necessarily want the user to change that text. So you’re going to show them a text box, but it’s going to be a one way binding. The data coming from the news site is just going to be a one way read only type thing. And so the platform allows you to do that. But normally yeah, they want a more interactive type app. so everything, the concept, the modeling, the design they want used in your application is kind of a two way street so to speak. And it makes it more interactive that way.

Fr. Robert: Now we know what data binding is, now we know why it should be bidirectional, and I’m hoping that you’re going to be able to actually show us some code that makes all this possible. Is this what’s coming up?

Lou: Yeah, let’s do that.

Fr. Robert: Okay, but before that, let’s go ahead and thank the second sponsor of this show so that we can continue on uninterrupted through all the coding. And of course it’s got to be SquareSpace. Any time you need to get an idea out to the public, any time you need to push out that newest website, that newest portfolio, you’re going to have to think about what you want to spend your energy on. It’s not just about money, it’s about your time. It’s about your resources. It’s about your thought processes. Now you could get yourself a backend. You find yourself a host. You could get someone that will get you the right domain. Or you could go to one place and have them do everything for you. That’s what SquareSpace is. The all in one platform that makes it easy to create your own professional website or online portfolio. Now I’ve been using SquareSpace because I need to give this wonderful tool of the internet to a lot of my organizations that aren’t that tech savvy. They don’t have people who understand how websites work, they just have people who make content. And that’s what SquareSpace is for. People who just want to create and leave all the programming to somebody else. Now they’re constantly improving their platform. They’ve always got new features, new designs, and even better support. They’ve got 25 beautiful templates for you to start with, with a recently added logo creator tool that allows you to create your online identity. Really simply and for free. They’ve also got a very to use interface. It’s incredibly easy to use, but if you need help they’ve always got help just a chat away. 24 hours a day 7 days a week. Plus there’s a completely redesigned customer help site for easier access to self-help articles and video workshops. Now SquareSpace will give you ecommerce, available with all their subscription plans. Including the ability to accept donations, which is great for nonprofits, for cash wedding registries, and for school fund drives. And just $8 a month for everything, it’s not going to break the bank. The new SquareSpace metro app for iPhone and iPad also allows you to check site stats like page views, unique visitors and social media follows. That means you’ll always know how your content is performing. And if you sign up for a year, you get a free domain. With the blog app you can make text updates, tap and drag images to change layouts, and monitor comments on the go. It’s really that simple. Even their code is beautiful. We’re a coding show, we care about what goes on behind the beautiful veneer. And if you look at the code that SquareSpace provides you, that builds automatically around your content, you’ll see that they pay attention to detail. Hosting is included so they’ll take care of it. You don’t have to worry about who is going to host your pages or whether or not you’re up to the bill, as long as you’re paying your one subscription fee, they’ll host it and they’ll make it beautiful for all the devices that access it. So here’s what we want you to do. We want you to start a free 2 week trial with no credit card required and start building your website today. When you decide to sign up for SquareSpace, make sure to use the offer code C101 to get 10% off and to show your support of Coding 101. We thank SquareSpace for their support of Coding 101, a better web awaits, and it starts with your new SquareSpace website. Lou, take us home. How do we do this binding? What does the code actually look like?

Lou: You bet. So if you show my screen real quick I’ll show you. So we talked about a while back the concept of what we call a view model. And so I think in our original app we built a task class that was able to do a couple of things. One was able to get a list of tasks. And it was able to get a list of lists. And authenticate itself, and then be able to return that list. So that’s kind of what you could call our model I guess, in that case. Because that’s accessing the Google API and then its returning that data to the user.

Fr. Robert: Right. So this is that third piece of the MVVM model. So all this is doing is this is reaching out to the internet, grabbing the data and pulling it back in, in whatever format it comes.

Lou: That’s right. In this case I’m then transforming it into just a standard concept in C Sharp called a list. And it’s usually in the Google API Task, what we call the task class or the task object. And that gets a list back. But then I have to find out a way to basically send that over to the view. The view has to understand what that is and that user experience. So I built a little wrapper called the task manager view model and it has a couple things. And really the main thing we want to pay attention to here is the public ones. The ones that are visible to the view. And so I have what we call an observable collection. And that means that it’s a collection for a list of things that then any time anytime anything changes in that list, whether it’s an added or removed item from that list, it will send out an event or property changed event. And that’s where then the view listens to that event, says oh, there’s a new item in this list, I need to show it to the user. And so I have two of them. I have one for the task and one for the task lists. So I have two different observable collections. And you’ll see in a second, I’m going to actually hook the UI up to it and so any time I add items to that, it will make them aware using what they call a property change event and it will make the view aware that It needs to go and refresh itself so that it can show you what it looks like.

Fr. Robert: Lou, this is interesting. So you’re telling me that the view is actively listening to the view model to find out if something is changed. Is there a way to do it the other way? Can you push out the changes from the view model to the view? Make the view more passive?

Lou: So yeah, there is a way you can do that. That’s again, another camp of way of doing things where you basically- there’s a concept called the visitor pattern where you basically pass the view to the view model, and then the view model hooks itself up to the view and then from there on out, anything that the view needs to do, it can just automatically access the view model event and stuff like that. And same thing with the view model. It can access the view. So you basically send in here like if I had an item page object or something like that, I would pass the item page in here and then I would store it and then I would hook up any of the events in here that changes the view model and it would let the item page know that it’s changed. So there’s a way of doing that too if you want to do it that way.

Fr. Robert: Why wouldn’t you do it that way? Because it sounds like you’re collapsing the view and view model.

Lou: Yes. So by doing it this way you’re basically decoupling the two. Breaking the strong coupling that you would have if you had done that. So like for instance I don’t have to pass- the view model doesn’t have to know about the view at all, the view has to know about the view model, but the view model doesn’t have to know about the view. And that’s kind of the key, if you were testing this now, if I were to test just the view model, I could run a whole bunch of tests to make sure that the lists were repopulating correctly, but I would have to worry about the view at all. I wouldn’t have to get my emulator for Android or for Windows phone and make sure that the view is showing up correctly. This, I could just test this by itself. So by making sure that the view model doesn’t have to know about the view, it isolates it.

Fr. Robert: Right, got it. And so in other words, again, you could do it that way and you could make it so that the view is a little less complicated. It doesn’t have to actively call back. But then you’re breaking that MVVM usefulness. Which is, if I design the first two modules right, the model and the view model, the view, the interface could be anything. And I don’t have to change.

Lou: That’s right. And I think the key here is, it gets a little confusing, so obviously ask questions on Google+ if you guys have questions, or even in the chat rooms. I think one of the things that its confusing is, like you said, the view knows about the view model. And the view model knows about the model. But it’s never the other way around. It’s always that one way understanding of things. And so that makes it so that everything is kind of decoupled in that sense. Yes, the view in order to show stuff, has to access the view model. But for the view model to operate, it only needs the model. So that’s kind of the key when you’re building these types of apps.

Fr. Robert: Fantastic. Alright. Take me through it.

Lou: Okay, so let’s pop over to the view and so there’s different views. I built just a standard application that you can build from Windows phone and it basically has these pretty much blank sections. But if you kind of see if I zoom out, you can kind have see the outline of the Windows phone here. And I basically built a simple app. I just chose a hub app, a universal app. and these are just the standard stuff that comes along with it. So it’s called a hub page because it actually looks like a hub on the inside. Like where you can basically pin stuff. And so what I’m going to show you really quick is how to bind things. I’m going to bind it to my list object. So this looks very complex because there’s a lot of – but I’m going to try to make it a little bit smaller for us so we can kind of see just what I’m actually doing. So this is the page markup. And in there there’s a grid and there’s a hub. And each hub has a section. So if you’ve ever used a Windows phone app or an Android app, when you swipe left or right there’s what we call a panoramic view and they have different hubs and different things in that hub. So in this case, I’m going to mess with the first hub section here. And I need to make sure that I can bind to that view model it’s the first thing I need to do is set a data context for that page. So you’ll notice here I’ve actually added up here a little name space that says hey go look at the assembly and name space. If you pop over to the view model, the name space and the assembly that it’s in, in this case it’s in this little portable DLL that I built. This PCL file that I built. And it’s in that name space. And it’s called the task manager view model. So if I pop back over to the hub, I’m going to say they go look at this name space inside this DLL, inside this assembly. And then set up what we call a data context and this means that the data that I’m going to get is coming from it.

Fr. Robert: Could you zoom in a bit because some of our audience- it’s a little small. There we go.

Lou: Alright. So the whole idea of data context is just hey where am I going to get the data from? What’s going to be my source of my data for this page? And so I’m going to say page, data context is using the name space task, which is from what we already set up here. We declared that. And then I’m going to look at the task manager view model. And so now what happens is, as soon as this actually builds and shows, it will actually create an instance of that task view model. And so it’ll call like to this default constructor, and it’ll create an instance of this and it’ll kind of stand and be ready for me to use it. And so then I can basically build inside the hub. Say the first time I initialize, the first thing I want to do, is I want to go set up the data context and make sure that I get all the data from the view model and set it up and bind it to the view. So that’s kind of the key. Is that the view knows about the view model, but the model doesn’t know about the view. So now what’ll happen is, when it loads up, it’ll initialize that view model. But now I actually need to say hey, I’m going to list my tasks. And so the way to do that is I need to bind some kind of UI element, whether it be a list box or something, so that it will show it. So ill pop over to hub here again, and I actually have a hub section where I can actually create for the list view. It’s just a list of items. I can bind to basically a list of tasks that I have. So if I look down in here, I have a task block and a text block. And that text block is going to bind to the title of my tasks here. And so if I pop back up here I have data context again, on that list view. And I say I want to bind to the task lists. And again, pop back over here. Tasks list over here. This guy right here. Its public observable collection. I’m going to bind to that. And for each item in that list, I’m going to bind to the title. And so if we again, pop over and we look inside a task list, I go to the declaration here, it has a property called title.

Fr. Robert: Lou, we’ve got some people in the chat room who are kind of freaking out. I will say, all of this code is going to be available. We bundle it up as a zip file so that you can download it. I understand you’re not going to be able to write this from scratch, unless you’re already an expert programmer, which means you probably wouldn’t be watching us. Don’t worry about that. What we’re trying to do is to get you to understand this concept of binding. What Lou has been showing you, is how you can bind the view model to the model. The model is the part that’s getting all this data in from Google. It’s just putting it into a big list. The view model is binding lists within itself to those lists within the model. So that it can bring it over and turn it into some sort of usable information. Then the view binds itself to the lists that the view model has made. In other words, the usable information. So imagine if you’ve got three parts, that third part, the model, the outside part, the liaison between the outside worlds is connected to the middle part. The middle part is doing some mojo. It’s doing the business logic, the magic. And once it’s done with that, it’s bound to the view. So there’s this three way communication. The view doesn’t know the model, the model doesn’t know the view, but they both see the view model. That’s what Lou is trying to show you. You’re going to have all the codes, you don’t have to know how to program it, but just try to picture in your mind what’s happening because that’s the important part.

Lou: One of the key thing is again, data context, data binding, these things are really large concepts and they can take probably 5 or 6- this isn’t the show for us to kind of figure it all out. The concept here though, is you basically have to set up a source of data on the view and then you bind that source of data, each element, and each UI element. We didn’t really go into XAML how to build a view, again that could be another session entirely. But when you build an app for the first time they give you kind of a default view. And then you can kind of just throw a textbox or something on there and then learn how to data bind. And so that’s kind of what I did, I took the default view and then I have a list box and I’m just going to kind of bind to my view models so that I have all the task lists names listed out in there. And we kind of showed that in another version of an app that we have. I think it was the podcast catcher. We went and got the XML and we binded it to that. So that was kind of a very similar concept.

Fr. Robert: Right. And remember, you can just go back a couple of episodes and you can see that happening. Where if the RSS feed changed, what showed up in the view changed. And the view itself didn’t have to go back out to the outside world, it was the model that was getting that information, turning it into something that the view model could understand. Which was the actual podcast itself, which then pushed it over to the view. So again, its concepts. Pay attention to the concepts because we’re going to give you the code. Alright Lou, we’re running really close here, so what are the other things that they need to understand about how you bound this data between the three modules?

Lou: So there’s lots of different concepts. For one thing is like there is the concept of data provider data context and then there’s other concepts around static resources and so go look those up because those are important too. And that means that static resources, you can create classes that are static. That are always there. And then you can kind of pump data into them and then the view will then listen to them. Or there’s way what we call instance context, where we basically create instances. Meaning every time the view needs something, it will make sure that there’s an instance created in that class and it will go and create an instance of it. There’s also a great example, I think it was Joe who shared it in Google+, he said he had a view, a XAML file and it was actually bound to an XML file, and it was just showing a bunch of XML on the screen and it didn’t have any view model or model at all. It was just the model bound directly to the XML file. And the key here is that’s what we call static binding. Because you can go in and bind to that static file and then list that stuff. Some things you want to go look at is data context, static binding, static resources, and just understanding binding in general, and then once you get that concept, it’s really easy to kind of understand where you can hook up the view model side of things.

Fr. Robert: Fantastic. Lou, next week we’re going to be finishing up the build your own app segment. And this is actually a view of things to come. We want to give you projects. Within those projects we may be covering multiple languages, we will still show you how languages work. We will still show you basic concepts like MVVM and data binding. But we want to give it to you within the context of having something at the end that you can say I did this. And we do still need one major piece before we can call this application closed. Lou, can you tell us a little bit about next week and XAMRIN?

Lou: Yeah, you bet. So the whole idea behind XAMRIN is you build what we call a universal app in visual studio or in XAMRIN studio. And then that app has a universal or portable class libraries that have all of your logic in it. And then you basically can load that up in the XAMRIN studio and you can specify hey, I want this for Android, I want this for IOS and then XAMRIN studio you can compile it right in there and actually build a quick little UI for all of them. Or you can reuse what you have. And then it will actually pop up an emulator. For instance Android, it’ll just deploy it to Android, and then boom, all of the logic you wrote in C Sharp, will then show up and work inside the Android emulator. Really cool stuff. So go to XAMRIN.com and go get the XAMRIN studio installed and the cool thing is, the last three projects I’ve been showing you that were portable, the portable classes, the social one, the podcaster, and the task one, you can actually load them up in XAMRIN studio and then compile them and we’ll go through how to deploy them to Android.

Fr. Robert: Fantastic. Lou Maresca, senior software developer with Microsoft, we thank you so very much for being part of this show. It’s always a pleasure. Could you tell us where we can find you and your work?

Lou: Twitter at @LouMM, and about me .LouMM and you can always find my work on Syrem.dynamics.com.

Fr. Robert: Lou Maresca, thank you very much and we will see you next time. Now folks, that’s the end of this episode of Coding 101. Again, it’s going to take us some time, bear with us as we switch our formats. It really is going to be more interesting. I know there’s a lot of people upset that we’re moving away from our old format, but what we’re really trying to do is to incorporate this idea of learning new languages, but give people something that they can actually walk away with. I promise you, it’s going to be interesting. Now I will say this, if you’re worried about where we’re going, or if you want to give us your input, I want to give you the opportunity to speak directly with me. Tomorrow at 5pm pacific I will have having a Google hangout. Anyone is invited to come and talk. I will sit there for an hour and listen to everything, maybe your idea will become part of the new Coding 101. Make sure you go to our Google+ group at plus.google.complustwitcoding101. Join the group. I’ll be posting the invitation there. Join the discussion and help us create the next program for those who want to get into coding. Don’t forget that you can find every episode of Coding 101 on our show page. Go to twit.tv/code and you’ll be able to find every episode of Coding 101. If you want to check out any of our old modules, if you want to see our show notes, if you watch our show make sure to go to the show notes page because you’ll get all the accompanying assets. It makes so much more sense if you’ve already got the code right in front of you. As long as you’re going to get there why not follow me on twitter? Follow me on twitter.com/padresj. That’s a great place to tell me what you want to see for future episodes of Coding 101. In fact, just this morning I had two people who gave me great names for future guests of the show. Finally, don’t forget we do this show live every Thursday at 1:30 pacific time, at live.twit.tv. If you watch you can see us in our pre show, in the show and in the post-show. And don’t forget that as long as you’re going to be live, come into our chatroom at irc.twit.tv.  So if you’ve got questions or comments or frustrations during the show, I can see you as we go along and it helps us to guide where we take every episode of Coding 101. I want to thank everyone who makes this show possible. Lisa, Leo, Brian Burnett. Until next time, I’m Father Robert Ballecer, the digital Jesuit, this has been Coding 101. End of line!