Coding 101 47 (Transcript)

Father Robert Ballecer: On this episode of Coding 101 we’re wrapping up Santa’s Little Helper.

Netcasts you love, from people you trust. This is TWIT. Bandwidth for Coding 101 Is provided by CacheFly. At cachefly.com.

Fr. Robert: This episode of Coding 101 is brought to you by FreshBooks. The simple cloud accounting systems that helps entrepreneurs and small business owners save time building, and get paid faster. Join over 5 million users running their business with ease. Try it free at freshbooks.com/c101.

Fr. Robert: Welcome to Coding 101. It’s the TWIT show where we let you into the wonderful world of the code monkey. I’m Robert Ballecer the digital Jesuit and I’m joined by my personal favorite code warrior, Mister Lou Maresca. Lou, thank you very much for coming back on to Coding 101. When we last left our audience we had just finished up the final rough cut code for Santa’s Little Helper. The whole idea was to give people an application that could go out into the internet, look for particular items or products that we want to compare through the holiday season, and then grab prices from different websites. Fantastic program but there was one thing that was missing: the interface. We’ve kind of fixed that yeah?

Lou Maresca: Correct. We wanted to make it more useable for a user to basically continue to maintain their database of items, be able to search through all the different minimum prices for each item that you’ve seen over time. So we’ve kind of added some of that logic and we’ve created a UI that makes it a little easier.

Fr. Robert: Fantastic. Now we’re going to get right into that. But before we do that lets talk a little bit about what’s going on in the world of programming. There’s one story in particular that has me very excited. If you have been keeping watch you’d know that Microsoft has been donating more and more of their code into their open source project. The idea is to let other programmers have a go at some of the core technology that Microsoft has been holding on to. Now the last one we heard of was .net, that was absolutely fantastic. Actually that happened at the start of this last module I had with Lou. They gave some of the most important parts of the .net framework into this open source foundation which means, if you’re programming for .net you can now take that same code and push it to Android, push it to Mac OS 10, to iOS. That was kind of a surprise wasn’t it Lou?

Lou: Well, it wasn’t a surprise, but it was one of those things you never thought was going to happen because it was so big that it was hard for them to do on open source, but I think it’s a huge step forward.

Fr. Robert: And I think it’s a sign of the changing times behind Microsoft.  They’ve realized that you can’t just make a lot of software and expect people to buy it over and over. You have to build up community. It’s all about community, about environment, it’s always about building up the good will between the developers and the monolific company that’s hosting. So to that, Microsoft has gone a little farther by pushing project Orleans to this effort to open source it. Now there’s going to be a lot of people who go, what? One word, Halo. Lou, what is project Orleans?

Lou: So it’s a cloud service, its platform really, to allow you to build really high scale computing applications with not needing to understand or learn about complex scaling patterns and distribution and distributing computing and cashing and all that stuff. It’s a platform to allow you to build an app that its single threaded but asynchrony’s, it allows you to basically scale the amount of users that you have without having to understand what’s going on.

Fr. Robert: Yeah. Now one of the things that’s just amazing about this is its automatic instantiation. So when we were talking about classes, in the last, last module, we talked about how you could create a class but it didn’t automatically become an object. You had to instantiate it. In other words, you had to tell it okay, I’m declaring it, I’m giving it these parameters, here we go. In project Orleans, when we make a similar item, it actually becomes real. So, and they call it an actor. And these actors are persistent. So once you create this actor, it’s always there, it’s always going to be working. Which means that scalability is through the roof. You can start with one or two actors and you can just keep building and building and building. For the lay person at home, what does that do for scalability in the cloud? This idea of persistence?

Lou: So let’s talk about it from the concept of Halo. So with Halo you have users that are multiplayer users that are in the game and they want to keep track of information about what they’re doing and consistently you can add more users, you can scale up to millions of users, so that’s really the concept. For instance, they have what they call static services which means that they’ll keep track of all the shots fired in the game and which weapons they’re using and all the achievements and personal information of that user. And that’s all scalable. It could be static for each player, for each user, for each actor, and then that can also scale up to millions and millions of users and being able to do that all concurrently on asynchrony in the back ground. So that’s really kind of the key aspect of the service, what Orleans can do.

Fr. Robert: Right. And those actors can actually communicate with one another. So it’s not as if you just have a bunch of processes that are running in the background. You can have them interact. That’s the whole idea behind using it for the Halo engine. You have to have that in the framework so that you can have different bits of AI or scripting interacting with one another. Imagine if you were to apply that to an application along with some deep neural networking which is what Microsoft research has been doing for Skype, and you can have actors that are actually modifying themselves and other actors to get essentially a learning cloud system that’s infinitely scalable. It’s very exciting. It’s kind of high level right now. I don’t think there’s a really good way for the beginner to jump in. but Lou, if people wanted to find out more about Orleans, what should they do?

Lou: So it’s also on Microsoft research, if you go to Microsoft.com and just search for project Orleans it’ll show up. Also it’s on coplex, which is Microsoft’s kind of open source library of data. Its real easy just do a search for project Orleans and it’ll show up and point you to where the codes at and how to get started. They have a ton of examples on coplex and they’ll give you a startup package and what to do and they’ll give you examples of how to do it. So try it out.

Fr. Robert: Yeah. And everything will be available by the start of 2015. They’re going to be releasing it under a MIT license. The code should end up on GitHub so even if you have no idea what we’ve been talking about right now, at least download the code examples and take a look because that sort of scalable cloud computing where you’ve got persistent objects, I think it’s a pretty good bet that’s going to be programming in the future. Lou, shall we jump back in to Santa’s Little Helper?

Lou: Yeah, let’s do it.

Fr. Robert: Okay but before we do that, I want to ask you a question. Did you spend any time, before you went over to Redmond, doing any sort of independent consulting?

Lou: Of course, yeah. Through college and everything.

Fr. Robert: It’s a rite of passage for programmers and geeks. And you always end up starting your own business and then maybe you go someplace else. Let me ask you this, because I know the answer for me. When you were doing independent consulting did you find it a pain in the butt to just get money?

Lou: Yes.

Fr. Robert: Doing the job is fun, dealing with people is fun, but the whole idea of accounting, and it was never my thing. There were a couple of instances I had where my invoices went out too late and they look unprofessional and I just didn’t get paid for the jobs that I had already done. This is not unique. You’re going got have people running small businesses all around the world who are going got have this issue of not having the time, resources, or experience to run a proper accounting office in their small business. Which is why we’re happy to welcome to Coding 101 FreshBooks. FreshBooks is the cloud accounting software designed from the ground up for entrepreneurs and small businesses. I’ve actually used this at a couple of our organizations around the country whenever they need billing. Now billing is troublesome and normally requires an accountant and you’ve always got errors when you’re entering numbers. Not with FreshBooks. What FreshBooks allows you to do is to generate professional looking invoices. To automatically bill customers and automatically enter in numbers into your accounting software. In other words, it’s like having an accounting department in the cloud. FreshBooks is built for a growing business and on average FreshBooks customers double their revenue in the first 24 months and get paid an average of 5 days faster. Figure that. 5 days extra with the cash that you deserve. Are you still using Word or Excel or Google Docs to create invoices? I’ll admit, I was doing that for the longest time. FreshBooks is the easiest way to create professional looking invoices in minutes so you don’t get an invoice that looks like it was scribbled on the back of a piece of a paper. Now you get to avoid those awquard emails and phone calls to your late paying clients. Because FreshBooks does it for you. They have automated late payment reminders that let you set a way to get paid on time. Worry free. Now you can set up recurring profiles so you can put your billing on autopilot and FreshBooks customers spend less time on paperwork. Freeing up to 2 days per month to focus on the work that they love instead of the numbers that they detest. Now do you still keep your receipts stuffed in your wallet to keep track of expenses? Do you snap photos of your receipts right after your phone and instantly capture expenses? That’s what FreshBooks is for. It lets you record billable hours and track your time with multiple rates. FreshBooks integrates with your apps like Google Apps, PayPal, Stripe, Mail Chimp, Fun Box, and Zen Payroll. FreshBooks even has an open API so developers can integrate with the FreshBooks platform and make everything nice and neat. If you ever need help you’ll talk to a real person every time. FreshBooks’ award winning support is ready to help and support is free forever. Now Amber McArthur of BNN’s App Central says “FreshBooks mobile allows me to quickly send invoices and check in on my business no matter where I am.” There’s no reason for you to not try it. Here is what we want you to do. We want you to try FreshBooks free for 30 days with no obligation and see if maybe it helps change the way that you do business. Go to freshbooks.com/c101 and enter coding 101 in the how did you hear about us section when signing up. Start your 30 day free trial today. Go to freshbooks.com/c101 and don’t forget to enter coding 101 in the how did you hear about us section to throw some support to coding 101. We thank FreshBooks for their support of this episode of Coding 101. Lou, let’s get into it. We’ve decided to make Santa’s Little Helper pretty. How do we do that?

Lou: Prettier. So one thing that we wanted to be able to do is consistently be able to list the items, lets quickly download the app. so pop this guy up here and we’ll zoom in. so really, really simple app, but functional. So what we want to show here is, one thing that we noticed is we get a list of our items, we get the minimum price and then I can actually scroll through the items. These are all the things I’m tracking now, and its showing me the minimum price.

Fr. Robert: Did the images come from the JSON blob?

Lou: Yes. so the kind of cool thing about it is that it actually didn’t come from the JSON blob itself, the links for the images came from it, and you actually have to make another call and say they go get me the images and display it.

Fr. Robert: But that’s a standard HTTP, that’s nothing.

Lou: Right. So that’s kind of the key here. So what we wanted to do is we wanted to build this out and make it look really nice. So one thing I wanted to show you is, this is the main form right here, and you notice it doesn’t have too much to it. All it really is, is just a square, and it has a list item control in the middle of it. And so the key here is I wanted to be able to display each item by itself in a specific format. So what I did was, I went here and I said I wanted to add a new control. So I went and hit add and I clicked on new user control. And it created this, what we call a product search result control. And so what this is, is a new control that I broke it up into different pieces. I have an image location over here and title and price. And then again, we used data binding, in this case I binded it to the title and price. And then you can make it look however you want it to look. Like I can put more information in here, I can put when it was created, If I wanted to put another label here and say, maybe when it was actually created or whatever, I can put that in here and then every time this actually showed the list item, it would basically look like that. So when I would run this, the list item would look like however I broke it up in—

Fr. Robert: You know Lou, we’ve actually had people who got freaked out by this. They were saying well, we don’t understand this whole data binding idea. Over the weekend, someone actually explained it to me in a way that I can explain it to others. They said if you’ve ever made a mail merge- if you’ve ever done a mail merge between Excel and Word, let’s say you’re doing holiday cards and you want to print out envelopes or stickers, that’s essentially what we’re doing with binding. We’re saying look, we’ve got these fields that have been indexed. Remember we took the big JSON blob, turned it into something that was readable and then we indexed it into individual pieces of information. And then we made a mail merge template. We said, this field will go here, this one will go there, and that one will go over on this side. It is a bit more complicated when we do it in programming because it is bidirectional, but if you think of it like a mail merge template then you’re not going to freak out when you start to see this code. All Lou is doing is saying, this is how I want the fields laid out and then it’s going to interact with my back end.

Lou: So when you’re building a UI, you start with the layout and then you worry about how you’re going to bind it to the data later on. Normally I just start with the layout and again, I’m not normally the best designer in the world, so I ask people what would you like to see and how do you want it to look? What’s the information you want to see? And then I just build my little control, my list item control and how I want it to view in that list. And then I put that on, I create the XAML for it and then I worry about binding it later, after the fact.

Fr. Robert: Right. The binding- once you get used to it, it’s not that hard. It really isn’t. And like Lou said, neither of us are designers. I can’t make a UI look pretty to save my life. But what we can do is give you the basic tools, and if you are a designer, and once you see how Lou has been binding these elements to the back end, you can make it look pretty and the functionality will be maintained. That’s one of the beauties of this approach. Okay, continue. So we’ve got the elements on the screen, and they’re starting to look the way that you want them to look. They’ve been bound to the back end, where do we go from here?

Lou: Well the first thing is, a lot of people say, well hey, I’m not a designer, I don’t really know how to code. So the thing about XAML is, you can use a tool called Blend. And what it does is it’s supposed to blend the ability of designing an app without really having to write the code, and then it’ll actually generate that code for you. And so what they normally do first is, first what you want to do is set the data context. And so what this means is, it’s like I write a letter of information on a piece of paper. And then I’m handing it to you and you’re displaying it on the big screen. To everybody in the room. And so that’s really what data context is, is I’m saying for this entire window, whatever’s inside, whether it’s a list item or a list box, or a text box or whatever, I’m going to give it a bunch of data, and the data is going to come from this one thing. This one thing being my view model that I created. Item search view model. And so if I go look at item search view model, this again is something I created before and it has like, in this case, the public thing that I have on here is a collection of, it’s a list or an observable collection of products. And that’s really all I care about. Because if you go inside the retail product it has things like the price and the item and all of that information on there. So that’s what I want to bind to because that’s what I want to display. So now that I have my data context, I say okay, now I know where the data I need to get it from, now how am I supposed to display it? And so that’s when you go back into your control and now it’s really easy. Now in the control yourself, when you want to actually- let’s say this specific label content- for the title. This control right here, the content of it, I’m just going to say bind to the title. And that title, let me go back to my object, it’s from this retail products, and if I go inside here, I want to bind to title. And that’s it. So I gave it data context, and I say I want to bind to the title of this object. And now when I go and run the code, if that title has data in it like a string, then it will display. As easy as that.

Fr. Robert: Nice. This, again, just as a refresher, this is our MVVM again, right. Because we built out the back end. We built out the view model, now we’re building the view here. And the model. If I remember correctly, this is actually a pattern called the presentation module right? That’s where this comes from?

Lou: That’s right, yeah. The infamous legend in the object oriented development world, Mark Fowler, came up with a thing called the presentation model. And again, the gentleman who actually created the MVVM pattern, actually generated it off of the PM model. It’s almost identical. And the key here is, if you notice a lot of the things around the web, like knockout JS and Kendo and all these other frameworks are trying to bring this pattern to something like a web application. Or even native applications in Java and Android are doing this too. And the reason why is, because it’s allowing you to separate your code from your concerns. From your view. So your view from your concerns. And that’s really kind of the key. And its newer, MVC is a little older and its – an old asp.net thing. And this is a lot newer and it actually works a lot better with today’s technology.

Fr. Robert: Right. It’s a little bit of an update for the newer languages. So Lou, are we done now? Is this fully functional, is this where we want to leave it? We’ve got it bound, we’ve got the items where we want them, it will go out into the world, look at those webpages, hit those APIs, it will pull in the products that we’re looking for, what else do we need to make this functional, complete?

Lou: I think one of the things you want to do is make sure that your – for me what I was doing originally is I was just displaying all the items on the screen that I got and that was it. So what you want to do is add a bunch of logic to it that makes sense to you. For instance, In my case, I didn’t care, in this case I might have an entry in this underlying database that’s behind this application, that has a line entry for every time I pasted a URL in there. So I could go to Newegg and paste a URL to a TV and then it’ll go get the price and insert it into the database. And so every time I loaded the app up id see like 50 different lines of Newegg and all the different prices. But the key here is, why is that useful to me? I guess for me what I wanted to do is I wanted to display what the minimum price it ever was and what the price it is right now. And that’s useful. Because I can say oh, at some time it was a lot cheaper, why would I buy it now? So that’s kind of the key. So now you have to think about how you’re going to manipulate that data, or the data that you have, and how you’re going to return it back in a better way so that it’s more useful to your application.

Fr. Robert: Right. And again, this is where a designer, a UI person really comes in handy. Because most of us can do everything we need to make sure that the data is there, and it’s tabulating properly. But you need the UI person who is going to say okay, now that we’ve got all that, lets change the view so that it actually presents useful information, instead of everything. Because right now, if you look at the interface, so it’s properly pulling the item off of Newegg, it’s getting the thumbnails, title, price, a link so if we’re interested we can jump over, but a UI person may look at this and say you know what, we need more interactive functions for price. We want to be able to say, okay show me lowest price, show me vender with lowest price. Or show me products similar to this. This is all functionality that you can bake in with the existing information. You just have to move things around in the view itself.

Lou: That’s right. Another thing is you might have to manipulate the data a little bit. So as a developer you have to manipulate the data a little bit more. So what I did in the back end, and again, this will be part of the code that you’ll get, is I actually added a special method called retrieve minimum prices. And again, it’ll generate a query that will go and get the minimum price for each item and return that. So now I’m building up a retail product and returning that from the database. And then what’s displayed to you, again, is just the minimum price of that product. So this way you can display it a lot differently and I can even get the historical data and display it as a nice pretty line graph or bar chart or something like that.

Fr. Robert: Because that’s the thing. You have that data. It’s there, it’s just not being displayed right now because you didn’t call for it. If you felt as the designer, as the UI person, that that’s the data that the user wants, or maybe there is another screen that will show that data, it’s easy for you to pull that forward and it’s not that hard to program because all the really hard programming has already been done. All you’re doing is setting up that mail merge. You’re saying I need this field and this field or maybe I need these two fields in relation to a third. That’s the beauty of this MVVM model. The nice thing is this program probably showed off MVVM better than anything we did in the last C Sharp module.

Lou: I think so. I think one of the things that I kind of pride myself in, is this is what we call the code behind in the file, and there’s nothing in there. And that’s when you know you’ve used MVVM correctly.

Fr. Robert: That’s the way it’s supposed to look. When it looks like that, it means you’re doing your job right.

Lou: That’s right. so I think the key here is, one of the learning experiences I have is there’s a lot of parts to even this very simple utility, and so being able to kind of separate them and then test them separately is really kind of the key to MVVM. Is I have a piece of code that just calls the database and gets the products out of the database and then – some tests around there. And that’s my model. And my view model is being able to get that data and binding it or putting on my objects, called my retail products object. And then taking that and displaying it to the user and that’s where the view jumps in. so separating those concerns made it a lot easier to build- it’s actually a very complex app now that we’ve done all these different providers and everything.

Fr. Robert: Right. And remember, this was all built up from the first episode which was just calling APIs. So from calling APIs to formatting it into useful information, to manipulating that information, to presenting the manipulated information to the user. And I think that’s a really, really good summary for how you make a useful app.

Lou: Exactly.

Fr. Robert: Now if you were going to prove this, I know that you’ve already stated a few things that you’d like to change, like the historical, so on and so forth, but what are the things that people should look for as they’re perusing the code? Because all this code will be available to every user who is watching the show right now. What are the things they should look for and what are the things that you would suggest they tweak? They play with on their own time?

Lou: So right now a lot of the code is a little bit static and it will go and say okay, go get me this item and then you know, parse this URL and to get the item ID off of it. I mean, what it could be done is it could be a lot more dynamic, so you could continue to add providers very easily. Like I have all these products from Sam’s Club and Walmart and so on, but you can add some more in there very easily and making that dynamic for the UI too. Because right now the UI is kind of bound to these different providers. And so the way you can do that is you can use data binding even farther than I’ve already done. And starting adding new providers, and then just by default when you put a URL in there, the items will just magically just show up from whatever provider that you wanted. Whatever new store or whatever you wanted to add in there. I think that that would be kind of the key. So look inside the providers and look inside the data binding code and find out a way to make it more dynamic, more useful to you. As well as check out some of the controls, like the chart controls. I think that would be the most useful for me, as a data presentation, is just being able to take all the data, all these listing that I have every day that I’m getting from all these providers and displaying it in a much more useful manner. And then that would make the app even better.

Fr. Robert: Fantastic. Lou Maresca, senor programmer for Microsoft, it is always an honor. It is so much fun to have you on the show. We’re going to have you back again and again and again. Because I got to tell you, I learn every time you come on as a code warrior.

Lou: I appreciate you having me, and in fact, I learn every time coming on this program.

Fr. Robert: You say that, it’s funny though, because sometimes as you’re repeating it, you’re going, oh yeah, I remember that, I’ve learned that before. This is a shorter abridged version of Coding 101, because this is our last live show for 2014. We will be prerecording this Friday for the new year, but next up is the best of, and then Coding 101 actually falls on Christmas and on New Year’s and we’re not grinchy enough to have shows on Christmas and new year’s. But we will definitely have you back when we’ve got another project cooked up for you. Could you please tell the folks at home where they can find you, your work and you elsewhere on the interwebs?

Lou: You bet. Twitter, always LouMM, and of course my work here at Microsoft is all found at crm.dynamics.com. And look out soon, check me out at LouSM.com, it’ll be up and running soon. For some of my other projects I’m running into.

Fr. Robert: Again, we’ll have you back on. Happy New Year, merry Christmas. We bid you farewell code warrior. Folks, I know that this has been a lot of information, but here is the fun thing, we’re actually going to give you all the code. You will have the exact assets that Lou designed for this module. It will be available on the coding 101 show notes page. We had an issue last week, the upload didn’t go correct, but this one will be there and we hope that you’ll take it and tweak it. It will work as is, but add those features that Lou talked about. Play with some of the controls. See what kind of joy you can get out of modifying his code to make it look a little bit better, work a little bit better for you. That’s all part of the joy of being a code monkey. Also, please stop by our show notes page at twit.tv/code in order to automatically subscribe. It’s not just a place for show notes, it’s a place where you can get every single episode automatically into your device of choice. Don’t forget that we also do this show live, every week on Thursdays at 1:30pm pacific time. You’ll find us at live.twit.tv and as long as you’re watching us live, jump into the chat room at irc.twit.tv. On most episodes I’ve got you right down there so I can see what you’re talking about. If you have questions we can normally answer them right on the show. Don’t forget, you can also follow me on twitter, at twitter.com/padresj. That’s @padresj. Until next time, and until next year, I’m Father Robert Ballecer, and my TD is Mister Bryan Burnett, who I’m surprising right now.

Bryan Burnett: I did not have a camera ready for that.

Fr. Robert: Where can they find you?

Bryan: On Thursdays at 11 Pacific Time we’re doing Know How, so check that out. Oh I do have one on here. Been doing a lot of quad copter stuff so check that out. I finally fixed mine so I’m excited about that.

Fr. Robert: Until next time, I’m Father Robert Ballecer. End of line!