 guess we've reached the beginning of the end cool so I'll be talking about magnifying glasses I work at Etsy which is a marketplace for handmade items we have over a million shops and you can find almost anything and my name is Jason and you can tweet at me cool so I think this is kind of overused but I really believe we're that guy building something way too big and we're ready to do when we do web development we have a lot of new technologies we're constantly working our tools we'll constantly make them better but our ambitions far outreach what we're really capable of doing today in a safe manner so I'm gonna be talking about one piece of that pie and that we browser tools specifically around the Chrome Dev tools and some things I've been thinking about but that really extends to all the things we've talked about today from like GIS to react to just all the excitement things I began really thinking about tooling when I went to hacker school two years ago and was exposed to tons of ideas I worked on repels I fell in love with the idea of the repel exploring the language and the application I specifically worked on pride for two months and I loved it I realized you can do so much if you have access to that I was exposed to bread Victor and the idea of inventing on principle and interactive systems and saw a light table come about with Chris Granger and I'm really excited about what he's doing and then I was exposed to ideas like small talk programming languages that aren't even used right now but ran in a system where you can query the runtime for the classes and all the instances of the classes and I thought I was like the coolest thing and then I started working the browser and realized all these things could come together with a Chrome Dev tools or really any Dev tool in the browser so tooling is awesome some of the main takeaways that I had while working on pry and thinking about these things where that tools really just extract data out of structure the reason why pry works is that we can get data out of Ruby we can get way more data out of Ruby than we can JavaScript the reason why we can get data out of backbone is there's a structure to how backbone is set up and we can extract that data I also began realizing that tools are just code as developers were really good at writing code and really good at using tools but we often don't connect the dots and realize we can hack in our tools as well as an example that when people use repels they're used to like typing into the terminal and getting something out but they don't really think about where the repel came from it's really just a loop that reads something in evaluates and prints it the whole idea of a repel can be expressed in four lines tools must fit a workflow I saw tons of tools that were just technology and they were cool but you never use them you forgot about them and they just died so maybe I think about tools I realized they had to fit a workflow they had to be useful they can be powerful and also some people just will never use them some of the best engineers don't use tools as much as I do and that's okay maybe you don't as well a lot of engineers just print and that's fine and they don't deduce and they'll think about it and that works today I'll be talking about tools and if you aren't super into dev tools that's fine but I'll just show you kind of the world as I see it now how do we build an inspector for your application well the first thing is that it's going to be different than the inspectors for the DOM and just JavaScript you want a higher level so our inspector is just like the elements pane and the sources pane but we're going to make meaning out of the view layer the model layer and the events layer the second thing is we're going to focus on exploring the application in the same way that you can use the magnifying glass to search the page and find the DOM we're going to explore your application the second is we're going to tightly integrate a feedback loop so as we write code and see it running the browser a lot of things happen we don't see the effect of that but Brett Victor and a lot of people began looking at the effect of a feedback loop the effect of console login for example tighten that and what they realized that ideas can come to fruition much much faster if we tighten that feedback loop so maybe our tools can show you the effect of showing a view setting up the events shutting it down and taking away and just you can validate that everything worked the way it should lastly as we build more ambitious applications the inspector ought to help us communicate we have larger teams development the team sports not an individual endeavor as engineers working with product managers and designers as important that these tools help us communicate what's happening under the scene so that we can all understand it maybe the inspector can help us understand the application in a way that just reading the code doesn't maybe as engineers we've been focusing so much on great apis and great code that we've ignored that there are other ways of understanding the application maybe more visual ways so this inspector hopes to help you communicate what's going on and I've got some demos this talk is primarily demos and we are nearing the end so if you have any questions if something doesn't make sense just shout it honestly I've got 40 minutes and it'd be a lot of fun to share with you if any of these demos are cool any of the things happening the specter like surprise you and you're not sure how it works just shout let me know all right so the first step I'm going to show is Marinette wires actually before I start how many people use Marinette just curious show of hands like actively whoa that's great I did not expect that I thought like you you you I know you guys use it cool Marinette is just a set of view functions view classes and other utilities architecture that you can use and I'll kind of point out what's different about Marinette this is a Marinette inspector but like 80% of its backbone so it's cool we've got this first app which is called Marinette wires it was written by James Kyle that dude right there he's awesome he put tons of stuff in it put some great design into it and if you're interested in how to build a great Marinette app I highly recommend downloading and play with you so it's got colors app basic front stuff a books app that kind of thing and I could show you the code but it would take a really long time to understand it so instead I'm just going to open the inspector by the way you can download the Marinette inspector from the Chrome Reds Store and it will show up right here cool so the first thing you see when the inspector opens up is a representation of the application so I can hover over the header content and overlay if I open up the content I see that this is really just a layout with a library and a viewer so this is the first thing that Marinette offers and probably the biggest thing the merit offers that help you build your back one apps James point this out yesterday but Marinette offers a layout and a collection and it's not just that it's easier to do layouts and lists it's that we have structure for how to represent the layouts so with the inspector I can show you that there's a layout that has a header flashes and content and in fact contents just another layout with a library and a viewer and if I want to see what this layout is like or this library is like all I have to do is open up the library I see their bunch of items so the inspector is pulling this data out of the application and showing it to you I think this is really cool because as our app gets bigger it's harder to associate what you see on the page with what's running in the application all I do is click right here and it shows me this view so that's the magnifying glass once we have our view selected we can see what's going into it so is this big enough can you read this thing oh man I love this projector this is awesome so every view obviously has an element and you can see that right here it all says a CID tag name those kind of things one thing you might not be familiar with because you don't open it up that often is that views often have listeners and with this pain we can see all the listeners that are going in as well and this is kind of cool remember how we're showing an item here from a collection we can see that this collection view is listening to those events and that's just something that Mary had offers and we're just a show associating these views with other views so you can get an idea of how they're connected now as I move around I can jump to the books app as well actually colors app and it's just gonna update for us I can click around and it's all just there one thing I was thinking about while working on this is how this header was constructed so I looked inside here and I opened up the class properties now you should know that one thing marionette does I actually the only thing marionette does really is extend backbone classes so we have back one view here and back one view is subclass by marionette view which is subclass by item of you in this case and then subclass again for the header so when I mouse right here I'm looking at the template helper function that we wrote that James wrote for this header and template helpers is just a function that marionette offers to get some extra data to pump into the template so what I want to do is look at this header and see how it was constructed what data went into it and where the template is doing under hood so the first thing I'm gonna do is jump on template helpers so I can see the data sorry I'm also gonna set an alarm so I know how long I'm going cool all right so clicking on template helpers is gonna open the source pane and show us that function and by the way this is my favorite feature because now I don't have to understand where all the source is coming from like this is a big project but my app that I work on professionally is way way bigger and finding a function any function in a view in a file is kind of difficult even if I wrote it myself so I really love that the inspector can hyperlink between the view I'm looking on the page at instance it's underlying functionality and the source pane so here's the template helpers and we see that there's primary items variable this is gonna be really important and when I jump to the template by the way I know that the templates right here because I see he's James is requiring it in this folder we jump to the template there's an ally for each primary item and that's what becomes these links let me show you so we have a break point here when I refresh we can compute the value of these primary items and I have a little watch expression to do that the first render there aren't any primary items the second one there is one primary item and the second time there too which is kind of weird that this view is being rendered multiple times but I'm cool that and we see that the name is colors and there's some data as well I'm gonna release this breakpoint allow it to continue and then when I jump back to Marionette I want to see how often this view was really rendered because I think it's weird and sometimes you get in these cases where a views being rendered too many times and you don't even know it like often it doesn't really matter because so fast but it's a weird behavior of the application and it could cause some bugs down the road so going to the header I can look at this activity pane and the activity pane is collected all the events that are emitted from the view which is super useful if you want to see how often something was rendered in Marionette we capture a lot of events of the whole life cycle by emitting events like before render and render for each view and we see this is crazy like look how many times this view is rendered just on the initial page load it's it's okay it's fast but it was unexpected and it could cause bugs down the road so the inspector helps us see that and also shows a warnings pane saying like hey dude this was a little aggressive so if you're in this scenario where you're looking for like what could be going on you can check out the warnings pane and we have a lot of warnings coming things like maybe the render took too long like that it took a hundred milliseconds and that could be a problem hate um we have filters over the events oh sorry the question was how do we define our warnings and the answer is that we parse the events and we have some rules like this rule basically says we're two events or two renders happening in quick succession so at least two renders happen within 10 milliseconds in this case there were 10 renders all within 10 milliseconds so that's no good we have another one if like the duration of the event is like 100 milliseconds that's pretty bad and we'll like point that out as well yeah and you can configure them yourself that brings me to the activity pane I think this is this is really cool I think you know like this so remember how we clicked around a bunch of times well that result in a lot of actions we have this idea with the inspector that events that happen in quick succession are an action so when the application starts a lot of things happen and because they have been quick succession that's one action when I open let's say that book or that book app that's another action just clicking resolve some actions or some events which is an action and because events can be nested because events are synchronous one event can start before another one finishes with this idea of depth so this is all the things that happened for the application to load we just kept rendering and rendering and rendering and rendering and I can see what was being rendered at each point this is a show event this is a showing the header this show is the layout view which was destroyed at some point composite view probably also destroyed there's that blue violet thing being rendered and because we capture this whole life cycle and allow you to look at it after the fact you can find some really evil things going on here like maybe there's that render thing or maybe there's like crazy crazy things are doing that are hard to surface if you didn't have this because we now have this tree of events and actions I'm thinking we can explore this a lot more maybe add some watch expressions and that's the activity pain for wires all right so I'm gonna quickly jump to the other two examples and maybe we can circle back so the second example is an app called just book that a book or James Smith over there has been working on for a long time and the idea of just book is that as he writes about code and as he hopes we'll write about code we can tell kind of a narrative kind of a story and maybe an ipython notebook way about what we're thinking so in this case this is a simple story about calculating the norm of a vector and JavaScript is kind of geeky there's some JavaScript HTML and CSS hey James how do I edit this nice I knew someone's gonna go wrong cool so I've anonymous one that I can edit the way you build these books you can just write some HTML here do do do do do hit run and it'll be run some JavaScript here two plus two if I want to move a section around I just have to pick it up drag it I can add a new section it's kind of like a fun environment for writing stuff and it's already in Marinette so I can show you how it works and once again I can show you the code but it would take longer to look at the code than it would just to play around with it with the inspector so let's see here I'm just wondering why this is empty it's because we have no Wi-Fi hmm nice okay so the prom is yeah can I tether just come over here cool yeah I think this app is way more exciting so right away we can see that the way a just book is constructed there's a sections container with each section being its own view and a view having a wrapper with content so you just get a sense of the hierarchy of views the other thing you see is a section has a header and an output which is showing things and the just book containers probably just a layout now what I want to do is drill into how he edits his header so notice when I hit save it just closes it edit it opens this kind of thing and I think there are a lot of patterns for this kind of behavior but effectively what we're doing here showing either the header as a view or the form as a view and we're just inserting views into a region when I looked for the code it was kind of hard to understand how this was working so I just opened it up in the inspector clicked on the form saw the header and was beginning to play with the header I can see that there are a couple triggers I can actually see that there's some UI so there's an edit title and trigger is a mariner constant that says basically when there's this event clicking on the edit title we're going to admit an event called edit so we're transforming a DOM event into a business event now because we've admitted event we have to find who's listening to it the first guy who could be listening to is the view itself and if it is there's a method like on edit in here or another listener there isn't one so we have to see who else is listening to the event who else wired it up and that's really easy with inspector all we have to do is look at the listeners find the edit event and we know that layout view this whole gist book is listening to the edit event is just like that and if I want to see who's handling that event I just click right here and I'm taking to the show edit title function now if you don't believe me I'm just gonna set a breakpoint hit edit and we're there like that now how does this work this works by creating a view and shoving into the region and that's just the top two lines there's also this other line where it sets up a listener so that if cancel or save or fired another function is called and that brings us to this different view we do the same thing this time there's a form save cancel and then triggers like on save and on cancel we can look at the listeners and see that the gist book is also listening to save and cancel and our class is listening to on save so save is being handled by two guys both the edit form and the gist book looking at on save we see that all it does it's get the new title value and save it and then looking at the listeners again we can jump to this method which is the layout listening to the save event and we see that because we're done we can render the header view again and show it and go back to the original state and it's just like that we can begin playing with any part of just books see how anything works and it's all just kind of like explorable and that's just book okay so this is the Etsy app and I wanted to show this example because a I've been working on this for the past year along with a really great team at Etsy and I'm really excited about it and be because it's a larger app like this is something that probably looks closer what y'all are working on back at your jobs so this app helps shops manage their inventory and as we were thinking about it last year we wanted to go away from server side up to something client side so we had much much richer interactions it's great for browsing we have a visual mode a list mode it's great for editing I can let's say I want to edit this guy click in here drill into anything it's all kind of explorable I can select a bunch of items do and say renew that kind of thing or just edit that guy so this app does a lot there's a lot to it let's see how it looks in the inspector so the first thing to notice is that even though it's doing a lot in many ways it's just like marina wires we designed the app so that we have one shop app and then many subapps like inventory stats and orders just like the wires app has colors and books so we have one app one layout with a header and a page region and we can open up this page region and play around with it so there's a header body body has a list with table rows and these views are just like other views except it's just so much more in it we see first of all that like a row is a layout view a marina layout view which extends that with listing and then table row and there's all this functionality the next pattern I want to show you would be how we change modes how we go from this table view to the visual view I just think it's a cool pattern so there's a display type button and when I click it there's an on button click event and then that just changes a model so we use this idea of like view state and our view model has something like display type which can either be like list or grid and clicking it just changes it which is cool but when that model changes its value what happens I want to figure that out all I have to do is look at the model that's under this view click on it and I can see who else is listening to this play type value and might adjust I think it's so cool by the way of all these stats things like all these views are listening to the stats value and then there are three guys listening to display type value display type button and then this list view and that tells us what's going to happen when I click on this grid view the list view sees that and knows we want to toggle from table to grid it's just a way of connecting from a view to a model to another view the next thing I want to show you is how our buttons work to show overlays or drop-downs I think this is something that more people in the Marinette community are doing I'm just going to find this link here come on yep so that's a filter button when I click it it takes us to on click and we have this event bus in Marinette called radio that's been worked on a lot and what radio is doing here well first of all we create a new filter overlay what radio is doing is saying take this filter overlay can make it data and ship that data over to the application and tell it to show the overlay so we have an app channel and then this overlay show event so who's responsible for showing an overlay and where does that happen fortunately we have a radio tab and when I show you this radio tab it's going to look really extreme but you'll see what's going on we use radio throughout this app to do tons and tons of things for example we're often commanding the application to do things and when we do that we send that over the application channel so I'm going to open up this channel and you can see a ton of events and then we can look at that okay there's a lot of stuff here if we drill down to overlay show we'll see what we're looking for and that is when there's an overlay show command this behavior over here is going to handle that we also might command the application to navigate show a message start progress stop progress tons and tons of things let's just quickly look at what happens with the overlay and then we can jump back to the application so showing an overlay is as easy as shipping the view up and then showing it in this region I click on this button we can look at this pop-up it's just a view being shown in a region so in fact it's really simple now here's everything coming together when I click on this renew action it's going to show a renew action this is the same action for a listing as it would be for bulk edit so how does that work well to figure it out because I don't really remember I'm going to jump to this renew button and then we see all the handlers and follow the code through through the pipeline hmm all right cool so this is part of a button group called what's that called state transition actions I don't think I wrote this code so this is kind of an adventure for me too and when I click on one of these buttons there's this handler like on click state yeah probably just on click state is what we want and it takes us here so I'm just gonna set a break point and prove that cool so we're at this point and on click state is really simple all it's gonna do is command bulk edit to launch an action so let's see where that happens I'm gonna release this by the way radio what was the command it was bulk edit I think it's action launch so when we command bulk edit to launch an action it calls this function called on bulk edit action launch oh no it looks like on bulk action is just gonna trigger another event that's kind of crazy so we have to do this again yeah it just triggers another command that one is on the listings object and that's gonna be action launch we have a little bit of indirection to handle bulk edit and just listing actions that one was action launch do you guys anyone see it here yes that one cool alright so when an action is launched it initiates an action controller and the action controller shows the overlay so I mean the Etsy app this app has hundreds of view classes tons and tons of code more than 10,000 lines of code but we can quickly jump into anything we want to know and and figure out how it works. That's why I'm so excited about the inspector in a nutshell. And that's kind of the demos I have. Anyone have any questions? Cool. Ah, where does the configuration live for the warnings? Right now, it's not a, yeah. Right now it's just part of the plugin, but we'll expose that down the road. A lot of this inspector is still very, very beta. I added the warnings this weekend because I kind of want to show you guys. I'm glad it worked, which is a really good segue for taking you behind the scenes on how it works. So one of the things I want to leave you with is this idea that you too can work on inspectors. One of the things I learned while working on this is how accessible everything is. When you're working on an inspector, it's really just a Chrome extension. An hour extension, the Marinette Inspector, is no different than the other extensions like Elements. The extension is inserted as a webpage into an iframe in the Chrome Inspector. And because it's a website, and this is where the magic happens, it's just another website that can be inspected. So really, the art of working on an inspector is having three windows opening and navigating between them. The app, the inspector, and the inspector-inspector. I call it app I Want an I2. And if you want to refresh I Want, reload it, you refresh I2. Anyways, it's kind of like a hack, but it works. When the inspector opens, it will inject code into the window. I can show you that. So there's the inspector. And this is the app that lives in the Chrome Inspector. And really, it's just a Marinette app. It's the simplest thing in the world. They're four sub-apps, and it injects the agent and listens to agent events. I'll show you the code if you want. It's dirt-simple. This was not hard to build. Well, it was fun to build. I'm not gonna say hard, but fun was the agent. The agent is the script that we inject into the window, and it does all of the black magic that you don't want to do yourself. So the first thing it does is it listens for backbone and Marinette being defined. And once it finds it, and by the way, it should find it before the app starts, because once it finds these libraries and Monkey Patch is everything. So we Monkey Patch, like Backbone View, we Monkey Patch, Trigger. It's evil, but it's good, because we know everything that's going on in the window, and we keep a registry of it. We keep all the class instances, and we keep a record of all the actions that have happened, and we report all that back up to the inspector. Demo time. I'll choose Just Book. Okay, so we've got the Marinette Inspector, and what I'm gonna do is open another inspector, I2. I2 treats I1 just like another website. So I can click on anything in here, and because of the magnifying glass open, it takes me to those elements. This is not just for the Marinette Inspector. This is true for the Elements 1, 2. So I can click around and see how the inspector works. Right, right. When I started working on the Marinette Inspector, I wanted to show an element, just like how it looked on the Elements tab. So I dug through Google for hours to see how Chrome did it, and if there's a Chrome API for showing an element, and then someone was like, dude, just go to the Elements tab, use the magnifying glass, and get the HTML in the CSS, then you're good. No problem. I can even jump to the iframe for the inspector, and I'm just having fun, show you some cool stuff. Grab the inspector as an app, grab the UI pane, grab the view collection, and that's the list of views we're showing in the tree. The view collection, by the way, has all the views, even the ones that were detached. So you can do crazy things we're not doing already. And that's I2. The cool thing about the inspector is it has this agent object, which is the object that the agent script creates. And because it's exposed on the window, we can call cool methods like serializeView, serializeChannel, we can get all the things it knows about. Like for Just Book, we are listening to 36 views, 13 models, and one collection. We have all that data available in the agent, and that's how the agent works. It just patches the classes, detects new instances, serializes the stuff, and then detects changes on the view, on the model, just everything, and ships a backup. And I think that's the inspector in a nutshell. If you want to get involved, I highly encourage this. A lot of fun to work on these tools. If you want to work on your own tool, like maybe a D3 tool or something, I'd be happy to help you get started. So before I finish up, I just want to thank a lot of people and just talk about the team that went into it because it wasn't just me. The Marion inspector is built on top of the backbone debugger, and I've talked a lot with Manuel, who built the debugger, and he's done a fantastic job, and this would not be possible if it weren't for him. We've worked the project, we're working on his code, and we're going to contribute back. Etsy has sponsored me to work on this project. I've worked on it for the past two months full-time, and I'm really grateful to having an awesome team that's back in this project helping out. Etsy has been a really good sponsor of the project. The inspector is an official Marinette plugin, which means that Marinette Core is back in the project, giving a lot of support, and we're working really close with the community to make this better. We've built an awesome team for the inspector, so Christian's here, Ian's here, and many, many more people have come in and helped out. In fact, Ian built that activity pane in the past week. So a lot of things are going into it, and it's really, really great. One of the things that I've done a lot is try to encourage not just people to work on it, but the companies that employ these people to give back. So we've all benefited a lot from open source, and we've grown as engineers, and our companies have benefited. I think it's important to connect the circle and encourage companies to give time to their employees to work on open source, and as a project, we are working closely with several companies to set up programs where these tasks can go directly onto the scrum boards of the team so that we can connect the circle, and more people are working on these projects. And that brings me to you. We want everyone to work on this tool. The inspector has brought on more than, I want to say 10 contributors, about tons of contributors, and many of them are first time open source contributors. And a lot of that is because we're in the Gitter Room, next to the Marinette Room, and we're talking all the time. We also use Screen Hero, and I'm on Screen Hero about an hour or night. Screen Hero is a remote pairing platform, so we can share a screen and start working immediately. And if you want to get involved, please do. Lastly, we have a lot of GitHub issues marked as Help Wanted, so it's very easy to get in and start working on any of these. The typical Help Wanted issue will have a really detailed overview of what we're looking for with a clear specification so you know what to do. And a patch, so you can apply the patch and start working on it very, very quickly. Like clearly it's not done for you, but you don't have to understand the entire code base to get involved. So I think the inspector makes for a really good project to get involved, and even if you haven't done any open source before, if you like backbone and like Marinette, this is a really fun project to like understand how the thing works and start adding functionality that hopefully will improve the tools you use every day. And that brings me to the future. I still believe we're in like the early 20th century building a skyscraper that like could fall down and the tools aren't quite there and we're risking our lives doing it. But it's a lot of fun and it's so exciting to see these tools getting built before eyes and improving all the time. And I'm really excited about the future. So thank you.