 It's written that we're actually going to be making donuts. However, there was a mix-up. We're not actually making donuts. We're gonna be making cats. So, so my name is Leslie. I work for Constant Contact. I'm a developer. I've done several applications using Marionette.js and Backbone. I've also done a few things with Angular and I've made several jQuery plugins. And I'm also a crazy cat lady. So, what is Marionette.js exactly? Well, it is something that extends from Backbone. Has everyone heard of Backbone? Most people, raise your hand if you've heard of Backbone. Okay. And have people heard of MVCs and they know the concept of MVCs mostly? Okay. So, it's a pattern for UI libraries for those who aren't familiar with it. So, Marionette extends from Backbone and it gives you a bunch of things out of the box that Backbone doesn't exactly give you. Like you can make views, but sometimes doing those views is a little bit complicated because like you have to put in a bunch of your own logic and your own rendering logic sometimes and like sometimes it's just too much to deal with. But what else does it give you? It gives you the ability to nest your layout and break up your view into smaller, more controllable code pieces, which is really great for code bases where it's like you have these enormous applications that cover many different kinds of views and things like that. So, it just makes it a little bit nicer to deal with. It also gives you some template helpers and helpers for event binding. So, out of the box you get underscore templates and you can manipulate your data with helper methods and then when you bind events through the views, Marionette will automatically clean up these things for you as it breaks down your views. It also has utilities, behaviors, radio and objects and behaviors will allow you to do UI interaction patterns and radio will help you with your messaging and objects allow you to extend anything that Marionette gives you and be able to just use everything out of the box. However, I am not actually going to cover that part today. I'm only really going to cover the views and some of the things that you can use with the views and walk through making the base views going forward. And to do that, I have some base code that I reference throughout all my examples. So, to be clear now, I'm just going to go over those pieces. So, I assume that in your main page you have a div with the ID of main and this is where all the views get rendered to. I assume that you have underscore templates which are always in script IDs, script tags with IDs that reference it by name. Some of my examples might have the script tags, some of them don't, and I was inconsistent about that. So, in case I forgot this in tags, that is what those look like. And then I assume that you have a backbone model which is a kitten where your ID is the name. I assume that you have a collection of kittens and I assume I create a marionette application which I bind my code examples to. So, I have a litter of kittens that has four kittens and my kitten of choice is the first one. And because I love kittens, like who doesn't love kittens? But also why Harry Potter specifically? Because as you notice, all of these kittens are named after Harry Potter characters. Well, my cat's name is Bellatrix so I thought I would go with that theme. So, why do I want it? As I said before, backbone views can get kind of crazy. So, here we have an example where we are just rendering a list of kittens and in order to do this in the model, the model view, we go through and we get information from our model. The model gets passed into that view as a model. And we have a view to render our collection and loop through that. And in that, we also reference it as this.model which is kind of confusing because you're dealing with a collection but it's called model but it's a collection. And so you're like looking at the code and you're like, I'm getting confused because was it a model or was it actually a collection? And so in marionette, you can bind, like you can reference things as a collection. You can pass it in as a collection. You know that difference when you're dealing with it. Today we are going to walk through making this example which is a simulation of like a cat shelter roster and a featured kitten of the day. And this will use all four of marionette's view types. And we will start with the simplest view which is the item view. Then we will walk through and do a collection view which will loop through a collection and render those as items. Then we're going to do a composite view which is kind of like an extended collection view and an extended item view. And you can do more things with that and we will finish up with doing stuff with the layout view. So we're going to start by making a view. So we start out with underscore templates but you can always, marionette allows you to override the template renderer with whatever templates you wanna use. So if you wanna use Hamel or whatever kind of templates you can just override that template renderer and put your own template logic in there and all of your views will now use that template logic. So here in our example, we have our kitten view and so we have one kitten that we are featuring in this which we are passing into the kitten view as a model and then we're binding that kitten view to the element main and then rendering it. And above, you will see the template where we reference all of the attributes on that model. And so we skip out here. Here we see the rendered out view and all of the code that's from the slide that's not as big as the slide, my apologies. So we have that view set up and that's cool but you wanna be able to interact with these things and click on things and be able to change portions of the DOM as you're doing your code. So marionette has these UI helpers that it has out of the box where it will bind a name of something to a jQuery selector for you so you don't have to do dollar sign selector, dollar sign selector all over your code and you can just go this.ui. Whatever you want to name it. So in this case, I've hooked the name up so that I can do this.ui.myname and be able to access that DOM element anywhere. And anytime you render it, marionette will go back and make sure that everything is freshly bound and all of that. Additionally, you can hook up your events by using those UI elements and see I have a click at UI.myname and then that goes into the helper function meow where it'll bring up an alert. So here we have the same example but we have our click handler on there and so when I click here, I'm going to get the alert. And marionette just handles all of that nicely for us and when I remove this view from the DOM, marionette will go through and it will actually unbind all the events for me so I don't have to come back and clean all that up or rebind them all. Marionette will handle it every time I call Render which is super nice. That's great but no one does anything with static data. Everyone has data that's going to change so you wanna be able to update your views when all of your data changes. So you can listen specifically to model and collection events. The model events on the item views, you can let everything that a model will emit to the add event, the change event, the remove event, you can bind specifically to that and you can say even if a specific field changes so change of any fields, you can take a specific action. Item views will not re-render by themselves when the data changes so you would have to bind to the change event and then render it yourself which is handy because you can have it come through and if you need to do some extra manipulation with that, if it changes before you render it you can handle that all in your model event helpers and these all get automatically cleaned up by Marionette which is also nice. So here we have an example with a click handler which is set up over here where all it's doing is doing a set on that model so then when I come over here and I click on the link it's automatically going to re-render that view for me but no one ever likes to have just one cat they like multiple cats so how exactly do we deal with that? Well, there's the collection view as I mentioned before and that you pass in a collection and it will go through and handle the rendering of all those items so if you want to have say a table of kittens your view would be the contents of a table row and you would set up your item to be that table row so here we're setting up a table where you have the columns for the name and the color and the collection view will loop through and handle all of these for you. The kittens class here is actually the table body element in the view we're not actually binding to main this time we're actually binding directly into the table and similar to the item views how you can have model events you can have collection events that go through and will listen to the things that happen in a collection the nice thing about the collection view is that if the contents change it will actually re-render that for you you don't actually have to do anything with the render but if anything happens like if something gets removed and you need to do some extra processing you can still handle that in those collection events so if you take a look at that example here on the left here we have our table and our table body down here and that is our collection view gets bound there and it will render the items in there for you as we can see down here and if we click on the handler we get the alert for everything before anything happens before anything gets re-rendered and then everything gets re-rendered after that handler is done but if you wanna do anything extra with them like count them or maybe you want to pair that collection with another model there's the composite view which will help you with that and so in this example I'm only using a collection to come in and do some extra stuff so in the top example we have above the table I've added a title and it's making a method call and that method call gets brought into the template helpers and when you go into the template helpers you get access to your model and your collection and whatever else you might have in your view that you can then read off of and manipulate to return data and similarly with the collection and item views you can do the collection and model events so and the one gotcha of composite views that collection views don't have is that if the collection changes you actually do have to re-render if the collection changes it does not handle that automatically for you so here we have composite view and the same kitten view that we had in the previous example and the composite view template is actually the table and that gets bound and put into the main div that we've set up in the previous examples so then when I click on the link it removes that row and the table gets re-rendered and your count at the top also gets re-rendered so that was only four of the view types but there's still the layout view that remains and you can use that to nest all the views into regions and so you can actually break down AUI like so into different pieces using different types of views so here we have for our original example at the start we're going to be using an item view for the right half and a composite view for the left half and the blue part represents the collection part of the rendering and the pink is on the left part is the item views of the kittens for the composite view and so for our layout view we have, we've set up a, the layout template which is the table from the previous, it's, sorry, it's actually, it's two divs with two classes on it, which I did not show and we've set up two regions for that and then when we render this view it's going to go and show the children view in their appropriate regions and pass on the data that it needs to. Additionally, in the initialize function we've set up an event to re-render that child view for the kitten of the day with the new model and we've, so I'm gonna go to the example because there's more code I did not show on the slide. So in our composite view, composite view, in our kitten view, when you click on a kitten it's going to trigger that event and then the other view is listening to that. There is a clear way to do that using backward radio but I did not include anything on that today. And so with the example you see that we can go through and we can highlight the different kittens and see the different information about them. So this actually ran through a lot quicker. So it's like a speed talk. So I can answer any questions. I can also go over some more complicated things if more complicated scenarios, if anyone wants to see if there's an application for this in anything that you guys are doing. Yeah, I was just wondering, have you used other MVC frameworks? I have, I have used Angular. Okay, I'm not very up on MVC frameworks myself but I'd like to know what are you seeing with some of the differences. Why do you prefer this one? That's a good question. So I like Mariana a lot specifically because Angular seems to have a lot of this black box magic that you can't really control. And I want to be able to like go in there and manipulate things a little bit more than Angular will let you because like you can do it with Angular but sometimes it's a really dirty hack and you just feel really gross about doing it. And I mean, we've all been there, we've done those kind of things but I'd rather stick with something that would allow me to do it in a slightly better, well, it feels better because it's less dirty because like it allows you to actually implement more pieces in there. I'm curious if you've done anything with two-way binding, brought in any other libraries for that and also after the questions definitely be interested in any other complex, more detailed stuff. Okay. So I know that Backbone has other, it's not built into Backbone but there are extensions that will allow you to do two-way binding. I have not actually played like stick it. Thank you, Steve. I have not actually played around with those myself so I don't really know a whole lot about it. Well, I mean, I've dealt with two-way binding in Angular just not with Backbone and Marionette specifically. Hey, back here. Thank you, great talk. It seems like Marionette and Backbone kind of abstract a way that things render and let you focus more about the state of your application. It feels a lot like React in that you could put in a transparent virtual DOM. I'm wondering in Marionette, is there any plans to do that? What's the state of virtual DOM and Marionette? So Marionette does not have a virtual DOM. However, there was a different extension that they might be looking at pulling in but they're still looking into it. They have a really great community in their Gitter which if you go to Marionette.js.com, that's linked right off there along with all their documentation and stuff. So. Would you be able to talk a little bit about how components are able to communicate or pass messages, I imagine. Radio probably has something to do with the event mission because we use Backbone in a project at work and some of the patterns that we use could be a little better fleshed out. So I don't know if Marionette's kind of solved some of those problems. So Marionette uses Rekker out of the box in the 2.0 version numbers. They have plans to eventually move to Backbone Radio for 3.0 and I have not actually dealt with Rekker at all because there is a shim that you can use radio with 2.4 and I have used that shim and radio is really super nice because you can broadcast, it just allows you to take the events and give them names and purpose so you can broadcast out messages and you can do a request which will send the request out and then you can return a value with it. There's a command where you can say go and do this specifically as like a one-way thing and it just allows you to break up all of those events in like a more structured way within your application. So I do highly recommend Backbone Radio. Cool, thank you. I have three questions. Okay, that's a lot of questions. One, for someone who's never used Backbone and Marionette, what would you recommend would be a good place to start like type of application to build for fun, to discover everything? That's number one. Number two, does Marionette and Backbone offer any challenges when it comes to testing? And three, performance. Same question with performance. Okay, so on the first question, if you have any projects that you were like, oh, it would be cool if I built a UI for this API that I know of that I've never done anything with, Marionette would be like, it would be a good choice for starting out with that because you can, like if you know the API well enough, anyways, you can just go and build that UI that you were dreaming if it's like simple. For example, if you have a matrix of Hue lights, student above your office, for example, you could write a UI that would allow you to toggle each one of those and set the colors on them and render little views and like a collection of the views in a grid. For example, and for the testing component, I have only written Jasmine tasks for with Marionette views and I haven't really had any trouble with those. It's mostly just remembering to pass in, like render the views with the different kinds of models you could potentially get to get into all those edge cases and making sure that like you could click trigger, trigger click events on everything and ensure that the right things are happening. With your click handlers, yes. And as far as the performance question goes, I actually don't know. I don't know everything. Any more questions or?