Bestand wählen
Merken

Debugging Ember With Empathy

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
and the and the hi everyone every year me I think hear
so hopefully you can talking so on hi my name is by the he was a and talk to you about empathy so Webster's dictionary defines and the as the action of understanding being aware of being sensitive to and by curiously expect you know it and what this means I'm not actually going to read you the definition of empathy from Webster's dictionary instead of SLU my definition of the and to be honest it's actually not my definition he took it from someone else of I actually took it from 1 of the kids in this picture the so in a previous life before I ever written a single line of code I used to be the 6th grade teacher the the and I had 34 10 year olds in my classroom every day I'm just but I think an a lot of Middle School allowing and a member of 1 day in the middle of a lesson and a fight broke out in class and I was so pretty new I really know what I was doing the but it was really violent and the kids are being super aggressive and I just had to stop everything that had planned for that day so instead I throughout the agenda and I kind of decided to win and instead of talking about whatever we're going to talk about that day we all sat in a circle and we talked about the fight for about the class any what we ended up doing was trying to reconcile are differences and understand and talk through when it happened and we'll be talking about and and I don't really plan and bring it up and I have a hard time describing to the kids when it was the but and 1 of the kids in this picture just kind of looked at me a matter of fact and he was like both teachers that makes so much sense and the is just understanding how someone else feels any that definition I mean if I could trade market I would I think is the best definition for something over concept that is just a really hard to wrap your head around he has grown adults and it's even more difficult to try to identify and practice but after I left the classroom and think for now about the definition yeah I forgot about it until I started working with ever the so I think 1 of the pillars of programming and you know this extends beyond amber and JavaScript or anything really is that inevitably at some point or another no matter how good of a developer you are you are going to get stuck right please tell me it's not just me that really bad and like the next 22 minutes are every prewarning of did get stuck and sometimes hopefully the more you practice you can get unstuck on your sometimes you need a little bit of help from someone else and developers the term that we might use for this is of course the and for
some of us for those of who those of us have been doing it long enough and you're able to get unstuck on our own debugging Superfund and like exciting and like solving a puzzle the but here's where it gets tricky when you're trying to learn something new the and you get stuck so when I was learning and the very 1st and replication of part of debugging for me kind of a little bit like this and it FIL so that for him his trying so hard hard anyways of head but it's it's great because it Austin when it works and you're building things and things come out of the box and your grating things out of nothing and you feel like a wizard and then you fall on your face because you don't understand what's going on and you don't know enough about the framework for sometimes in the language to know where to start getting unstuck the and as cheap and as durable as the stucco isn't as much as I sympathize with him I think it's actually it's something really significant to hit upon the because when you're learning something you when you get stuck yeah things start to feel In possibly hard and that means you to feel unbelievably frustrated and at that point that you start to find yourself thinking and this is where it's really dangerous maybe I should give up median just knock out to do this maybe I can do this maybe this is not the right framework for language for a career and it's really important to acknowledge this because most of us in this room for all of us in fact have gotten unstuck we wouldn't be here if we had a great so how did I get unstuck at that moment and so there's a lot of good techniques that all of you in this room have and they're all significant and now but I someone technique while working with member that really surprised me and I have to extend it to you to whenever I'm building the application that's not ever or not even in Johnson and that is and standardizing with my code I know it might sound a little bit strange but stick with me when I start with my 1st replication I did exactly what I told my 6th grade students to do the when they have overwhelmed and frustrated with their code I tools and the vise site they would get frustrated that code and infested with each other and we made up assumed each other and tell them to empathize with each other and try to understand where the other person coming from so when I proceed with my code and overwhelmed with it I tried to the exact same thing mostly because I was at a loss of what to do so how to do that I put myself in my code should I tried to understand what does that have access to where is it getting it's information from and I think really hard on it unnecessarily because I wrote a really bad code probably most of the idea but I I think a if we think like our code instead of getting frustrated we could have a little bit of fun so hopefully in a few quick examples I'll show you find so the office and replication we run into above pretty early were building a recipe chapter at and it's not even really fancy just simple credit functionality you can keep track of your recipes you can update them and delete them but it's critical to really fast from but we hit about the the and the but is kind of odd the it's that I have a list of recipes and at the click on 1 I can change the ingredients and or maybe tweak it a little bit so when I click on a recipe call everything looks fine those but also that I would expect all the values of the recipe but here's something really weird when I refresh the page evidence just broken really really broken and was not expected behavior so the how we started but in unless when we start who we and the as the no OK was just start with where are code is being rendered the we just have a bunch of sorted recipes that were iterating through and we have this lead to help her and when we click on something we click on a recipe name we should be able to see a recipe but sometimes it works and sometimes it doesn't so let's think about where this view if we were that you would get our information from it had to be coming from somewhere maybe they're out well we have a recipe round that's using a dynamic segment nothing looks really complicated about this looks the way it should what what is around have access to it well it looks like it doesn't have access to very much pretty empty and but Our beholder would tell us would lead us to believe that we should have an object there what is that object not seen to render well it like the time it works in half the time it doesn't so have the time and you have object and half time doesn't so maybe we're making some assumptions about what pour out actually is doing so if we were around where we get our model for it doesn't magically appear right you have to come from somewhere we have to us that objects somehow well luckily there's a great life cycle for the model we can write it pretty easily just 3 lines we can use the idea of the objects these ideas coming from the URL and find the object that way but actually no visiting a fix it so which is put a debugger in there and see what's going on because this is kind of like me guessing because this is their work the OK let's try it again will this example no we can click on a recipe you can see that here a model of OK for those working before the nothing those broken when we refresh the page before there is no object that was rendered interview what about the regression now M. hidden model of and we up the consul we can see exactly what's going on here we can see our function in action received brands coming in and we know what's going happen in the next line of code with find the object that we're looking for so it seems like sometimes are was calling model can sometimes it wasn't so so do we need this to mean not at I think that the guides and find out and find
out what's different about how and entering my rough well the thing that's different between clicking on a recipe and navigating to it through its URL was that need to help her the maybe we don't know how link to the helper really works or have a case within the documentation to find out and the guides tell us that if we enter or out through a transition for example we were using online to help the the model context is already provided are linked to help a passes the object that we need the but if you just go to a rout and you expected to have a model and you get stuck with it and it really doesn't have it kind on us right never told are about how again How would announce cool so that lesson learned we won't repeat this mistake again well the problem of couple times this site model folks don't fire when reusing linked to help others the way you entered or out is always really important and significant worth considering when you're writing your code the but we did some refactoring end we add a feature to our application because we decided that we need a grocery lists I need to know what a packed with me for and on all the things I need to buy so I've been at the grocery list feature and then we hit but never to so when I click on 1 of my list for example the list of things I wanna by 4 and the cons something really strange is happening this is not the correct information actually this is information from a different list altogether how did end up there it's kind of weird because it's kind of like this lagging states 2nd ghost recipe of ghost uh grocery list is like hanging around from the last time I went to this page the well that can work kind of unacceptable let's figure out what's going on but think about what our code has access to well we're finding that our model in or around we learned our lesson last time and where the trace it backwards are out is definitely finding the model where we look next how about our controller there's some values from the model that we're pulling and setting initializing on our controller just to be not but clearly they're not known but they're coming from somewhere but they're not coming from the right object at all so but that those values again they're coming from another model entirely maybe our controller doesn't know yeah where those properties are supposed supposed to come from action don't really remember telling you that for controller we should probably figure out what's happening inside so where controller comes into existence where do you things get that on well all that has to happen it's out of the inside of the rout handler actually the docks tell us exactly what it is that we're looking for we're looking for something called set which is going to let us set the model property and do anything we want on so I let's right and just see if it works out of it will try it inside or outside will add a set of control the very very important we should call the full implementation by writing starts at and if we didn't do that this topic be 5 hours because I definitely lost a lot of time on that of the whole other the problem entirely once we cover the full implementation we can do any kind of fancy stuff wanted to like the set the properties the all were actually to are controller what it means to do with the model that's being passed the and the water it didn't have data that was up to date so didn't know I think this is a really good
opportunity question now are you work exactly the way we would expected to I think this is a bug in particular is a really good opportunity and hard formula was that controllers are singletons which means that they're not recreated in any state you have some members and persist it's up to you as a developer to like set up to reset but of course with that of edible components hopefully is above none of us will ever have to count again unless using an older version number but because good things come in threes we have to do when a bunch this on the early on 1 we refactored are application and now instead of just having a template we have 80 recipe added upon what but something really strange is happening which is that when I click on the delete button over here yeah no matter how many times I click on it and nothing happens which is at this
point I'm just like to bugs in 20 minutes I feel like a rock star is that the home yeah but we can power through this together so let's look at what that is coming into this component what is this component know about doesn't know about everything that's happening in the aperture free isolated its own little little little thing the so what does this component know about well we can see where it's been rendered that it knows about the the recipe model that's being passed in end and action but so there should exist but OK will where there was coming from the coming from our out we're finding our model and we should be passing it straightens work for and we have an action which we should also be passing right into our component theoretically but before when I could add delete button doesn't seem like endings happening so let's just look at but action on this when it was delete recipe thing where is it defined as clearly a very broken stop behaving the way it should well if we look at components that action that is attached to that but listener component and we're doing anything super raising were just finding the object finding a recipe asking the user if they were confirmed and then destroying it and calling the the exact same function we tested but it's clearly not working so let's try to get we miss something we click on this delete but again which is the a little bit more observant if we take a look at our JavaScript consul you will notice that we did miss something we have an air my favorite and it's really beautiful I don't know what a lot of that means and that's OK but there is 1 thing we have to get from this error which is that if something is not defined are after destroying a method that we expect to exist isn't defined the but we did define right we have still we defined in or out we passed a two hour component while it is our component misbehaving it has everything it needs right why prices computer on listening OK well if it's not defined maybe something about this component hooked up right the this component doesn't need doesn't seem to know about this action let's tell let's look at what is happening In our delete recipe action which is what fires when we click to eat after destroyed is not defined well I'm calling the function by what this machine once for me become defining it correctly here initial tried to way of defining it we after destroyed is
not work this code is where broken we also know that that this method is being passed in so we can't try something like this it doesn't live in this component this is the mean of work well were passing an action down doesn't live in this component when doesn't live it was outside the component so maybe we need to send it at try something like send action some action back to where it came from the no let's try it will change our actions 2 instead of calling it in the context of our calling it in the context of where it's to fight the known we pass that action that we pass that action down were sending it back up what happens when we click to it let's try again this time we could delete
we hit are confirmed stat and then from here will transition to a recipes rout yeah which is also because that's what we wanted to happen but it's also worth noting why it's happening like this because when you have other or you get an error it's important to figure out what assumptions you made that holds you can get to that point in the 1st place and again and regards to such a great job of explaining why they tell us that components have ascended action method that allows us to send actions back up when a component is used as a template which is really handy but it's easy to forget what you're trying to learn How on earth actions were of place you can do is a little bit differently and a bit more explicitly with the angle brackets way In this case when you pass an action down it's far more obvious that your calling something that's actually attribute that's been passed down to the point called so
now we know actions are fired on the current context so we always seem to think about where it's coming from the context that were currently in call cell computers right yeah God is highly work had no idea bone but the frustrating so frustrating immediately like this all the time but also With the honest they the only source of frustration I think human beings are also pretty hard to decode to it's hard to understand why people do things the way they do why people write code the way to and if you think about it as a community and has an industry we put so much emphasis on things like communication and collaboration and emotional intelligence teams with emotional intelligence are generally more productive we know that these are things that are significant at worth considering but what is all the things that we emphasize about interacting with human beings we thought about with our machine where we tried to build entity with and try to understand rose coming from a I think the 1st step to recognize that to seeing your codes point of view and see its perspective is recognizing it does have a perspective the and all this is to say that when I debug now I think back to what my sixth-grader told me those years ago and I try to understand how someone else feels like first-rate with that and in the same way I try to understand how something else feels when I get to that when I get frustrated with it and end then but I think it's really really easy to forget that's empathy for the machine is just as important as empathy for other people now as trying to be a little bit kind here as good reminder that we could all afford to be a little bit kind to the people that we work with to the people who build frameworks that we use every day and make choices about code to the developers that left the code base and may be made some choices that we can't quite understand we can track and the title of to our machines so and probably the most important of all especially when debugging to be kinder to ourselves and you get all that so kind to me thank you so much thank him for his money in any way with him
Videospiel
Bit
Kreisfläche
Punkt
Klasse <Mathematik>
Gruppenoperation
Einfache Genauigkeit
Term
Code
Gradient
Videokonferenz
Sechs
Code
Softwareentwickler
Optimierung
Gerade
Hilfesystem
Schreib-Lese-Kopf
Router
Bit
Einfügungsdämpfung
Punkt
Momentenproblem
CD-I
Formale Sprache
t-Test
Kartesische Koordinaten
Homepage
Gradient
PROM
Sechs
Gamecontroller
Code
Existenzsatz
Lineare Regression
Datenreplikation
Mapping <Computergraphik>
Elektronischer Programmführer
Gerade
Lineares Funktional
Bruchrechnung
Sichtenkonzept
Kategorie <Mathematik>
Gebäude <Mathematik>
Güte der Anpassung
Systemaufruf
Debugging
Kontextbezogenes System
Web log
Funktion <Mathematik>
Menge
Verschlingung
Rechter Winkel
URL
Information
Aggregatzustand
Web Site
Subtraktion
Quader
Wasserdampftafel
Gruppenoperation
Implementierung
Unrundheit
Framework <Informatik>
Code
Mailing-Liste
Weg <Topologie>
Informationsmodellierung
Schreib-Lese-Kopf
NP-hartes Problem
Videospiel
Diskretes System
Datenmodell
Mailing-Liste
Routing
Binder <Informatik>
Gerade
Office-Paket
Objekt <Kategorie>
Mereologie
Debugging
Dreiecksfreier Graph
Gamecontroller
Benutzerführung
Objekt <Kategorie>
Bit
Punkt
Sechsecknetz
Gruppenoperation
Versionsverwaltung
Content <Internet>
Zahlenbereich
Kartesische Koordinaten
Computer
Ausdruck <Logik>
Komponente <Software>
Virtuelle Maschine
Informationsmodellierung
Gamecontroller
Vererbungshierarchie
Zusammenhängender Graph
Softwareentwickler
Drei
Leistung <Physik>
NP-hartes Problem
Lineares Funktional
Template
Güte der Anpassung
Programmfehler
Warteschlange
Objekt <Kategorie>
Rechter Winkel
Gamecontroller
Aggregatzustand
Fehlermeldung
Bit
Punkt
Element <Mathematik>
Template
Winkel
Gruppenoperation
Winkel
Routing
Statistische Analyse
Kontextbezogenes System
Template
Code
Gruppenoperation
Homepage
Arithmetisches Mittel
Komponente <Software>
Poisson-Klammer
Prozess <Informatik>
Gamecontroller
Strebe
Zusammenhängender Graph
Fehlermeldung
Telekommunikation
Bit
Sichtenkonzept
Punkt
Kategorie <Mathematik>
Gruppenoperation
Virtuelle Maschine
Zellularer Automat
Systemaufruf
Quellcode
Computerunterstütztes Verfahren
Kontextbezogenes System
Code
Framework <Informatik>
Virtuelle Maschine
Kollaboration <Informatik>
Perspektive
Geometrische Frustration
Rechter Winkel
Code
Softwareentwickler
Auswahlaxiom

Metadaten

Formale Metadaten

Titel Debugging Ember With Empathy
Serientitel Ember Conf 2016
Autor Joshi, Vaidehi
Lizenz CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben.
DOI 10.5446/34693
Herausgeber Confreaks, LLC
Erscheinungsjahr 2016
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Denial, anger, bargaining, depression, acceptance. But I don't mean the five stages of grief—I'm talking about the five stages of debugging your first Ember app! Learning how to navigate the building blocks of Ember can be difficult, but the even trickier thing is knowing where to start debugging while you're still learning the framework. One approach that I use is to put myself into my code's shoes. In this talk, we'll connect with our objects to understand what's going on under the hood. Let's jump over some common first-time Ember hurdles together by debugging our code — with empathy.

Ähnliche Filme

Loading...
Feedback