Bestand wählen
Merken

Immutability is for UI, You, and I

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
and
it was a time of darkness the it
was a land Spain usually world without selfish text it was 2012 I lived in
the I was there I was actually busy writing applications using a technology called backbone and for those of you are the time this is going to be a little bit of a trip down memory lane if you worked it might be a little bit involve a little bit painful but I really really really enjoyed working with background because it allows you to build these models centric applications and because the models were rich in the rendering could be this from this wrote mechanical process whose outcome was just predetermined by the content of those models and with the backbone did this was with property observation the you could add observer to model the notified whenever property chains on that model and you could do any updates to anything that depended on the property and this allowed entire trees of objects to be reactive as a single property change anywhere in the system that change could ripple throughout the tree and the Don can be updated via that wrote a mechanical process that I was describing and I was really quite happy with this approach and I felt generally good about acts like a deliver with this style the that is until I didn't so as my applications became more complex I started running into more and more friction and I just couldn't seem to eliminate the the bakelite you observe a single property of a single object but what if you needed layer multiple dependencies as the applications grew and this distressing amount code just say started to grow there was dedicated nothing but setting up and tearing down observers and most of those observers were doing nothing but just copying 1 value from 1 place to another and things got worse when you're trying to react to collections of objects and background never really did get a satisfying answer to this and a constant source of pain for me to so I know what you're thinking at this point December why are we spending time on questions that were settled for us years ago the and the reason that I think it's important to include in the story is that because the pain I was feeling with my backbone so was acute enough the why wasn't fully conscious of it I was seriously open to a complete change in tools so I went out and was looking for alternative approaches and this is of course where Amber Anderson story the specifically Amber object this single class up there had everything but I was missing in background and then some it had nested key-value observations wouldn't have to manually construct these huge chains of observers it had or a observation so I finally got those reactive list that I was after it had these things called computed properties that blew my mind with their power and it won me over almost immediately we started using it we so in this strange hybrid phase where we end up using Amber object pretty much is a drop-in replacement for backbone model and with the turbocharged observers in computed properties it turns out that Amber was actually better at doing backbone the backbone was not only the member objects have everything that I needed also came bundled with a whole lot more than I really had bargained for in the 1st place had this incredible rather have this nice system for decorating model objects in what was still makes the time had is unbelievably warm helpful community and background in the offer me anything that Amber didn't and so we never never really look back through our lot whatever enormously it's so it's been great never thought of looking back and because of that I got to inherit nearly for free all the wonderful things that came later later by glimmer embassy all I just to to to bring up a few the so that brings us up to 2015 is run and the Conf 1 year ago an exciting stuff was happening nuclear war had just been announced data down actions up was being codified is kind of the community best practices and this you know the height machine was Europe and was in full swing and overall I was really quite happy but with Amber and I felt generally good about apps that I could live with it was until I didn't is the problems that I was trying to solve became more complex I started running into more and more friction I just could not seem to eliminate and ironically it was related to amber object which is the thing that had kind of stolen my heart to begin with for the and the pain I was feeling with my camera setups was acute enough that why wasn't fully conscious of it I was actually open to complete change tools so again I went looking for alternate approaches I spent most of the time with 2 frameworks 1 called home and 1 called on the ship some these were react based frameworks for the the fact that they use react was literally the least interesting thing to me but what really set them apart in what intrigued me most was the unique take on application state they were able to to solve of many of the problems I was having very very neatly and the things on going up my Amber code to seem to fall away as if they did exist so this leads me to the question the do I change my tool set completely unlike when I made the transition from backbone where there was a lot that alternative didn't offer I still have a class rather but since I adopted in the 1st place there is even more great stuff that had originally not least of what which was the promise that the platform could upgrade and sometimes change radically in the course of a very short time there will always be a path forward and the community would support you so I did well I and standing here that that's an answer to the question what I wanna give up on like great stuff it's mine it makes me productive I wanna keep it makes me happy so as not to see that have it both ways if I can't bring back this thought tool that I discovered when working with Oman on missions and use of whatever it turns out that you can have your cake and eat it too more than that it turns out that it was really really really well with member right now today In this thought tools what I wanna share with you it's called immutability and unlike what you might have heard in the past it's very approachable it somewhere more intimidating than it really is well my name is Charles law and cowboy be on Twitter and get home and I submit this talk in the hope that you can walk away today with the same tool Your tool belt that has so dramatically improved the way that we write you i at the front side and to be clear I'm not talking about a piece of code or a library that you important use in your Member application and talking about an organizing principle for thinking about your you a principle that will just that made so many of these problems that I was facing just melt away so anyway it was early 2015 glimmered then announced add-on ecosystem was really starting the flourishing great things were foot and at the time I was heads down and I was working on a
general-purpose form library this was an any form library there's a lot of them out there I tried all of them at the end there's just a whole gaggle problems that you always run into with user input and I want to solve them in 1 place once and for all and so the scope of this was pretty big and I've written a lot of forms of 4 and there's just a long list of things that go into a truly sweet form experience and as a result can be a lot of work to do every time and instead of feeling like tired and exhausted I wanna feel excited every time the we were asked to build a complex form experience I knew that we would be excited if by can reduce the cost of making all these things happened get it's close to free as possible and that's where the problem started it In order to juggle all of those things at once the model had to be pre teen Ali some of you have this massive tree values this massive trees input buffers massive true of but validations all of which have been intermingled dependencies may have to be kept saying can react to each other and you know what even as a pretty experienced and developer and procesing you I develop at the time I just could not make it happen I can get closest I could get really close like even that couple times right you this false sense of security but then always some little edge cases some little something would happen that would just kind of shake the wheels right off the whole endeavor and I never got there then after a while I studied the time asking myself why why was I so bedeviled by this is this a particular problem the in particular why was it difficult to come up with a a a general solution for something even as simple as this now this is a really really from a simple example but it does have validation states ready states of of depend both on the client and server is where things that rough the because was highly asynchronous somebody to handle updates from the keyboard there were server validations form the form submission itself and they could fired almost any order and they could return in almost any water in keeping the entire form stayed intact was a real headache and I was using 1 way by means of I was using computed properties but the values that were backing them could change made computation which introduced this non determinism into the system and the problem is determining exactly when that bad value is introduced because as your system continues to change the bad state begets more bad state and when this happens tracking down was really really difficult the problem I see that I was having were with timing and so I to determine the sequence I want to for example a lot of things to the Council which is crucial but have you ever tried actually logging a really complex data structure but that's that's happening in real time uh to the Council if its member object did you see a lot of this and pretty rough and in fact when your graph is constructed with computer properties it's pretty well useless because you can read those computed properties from the Council but but there was a deeper issue with the computer properties and that's for the 1st time that I could crook all keeping the dependent keys in sync that I changed and kind of give all the library became really onerous i in the form data structures I was just driving a few extra fields to present to a template I was actually computing mapping entire trees to entire treason in computing your role of of of those trees and figure out the rights that depending keys was always possible but it was just this endless source of paper cuts especially as I refactored and change the data structures it was like there was this shadow data structure that was chasing me of the of the the the hierarchy of the depending keys so the and if they didn't match the actual data structure precisely it might appear work but that would fail and really settle so always when I did get a stacker trace later the bad dependent he's a lot of times it would just be completely and totally buried inside you know the vendor JS was no no revenue single line referencing my application code as some of these problems were really new to me after all I've been doing nothing but member for 3 years before this and I've encountered each 1 of these in isolation but what was new was the way they came together in this kind of perfect storm adjusting the block me at every turn the and so I was in the same place there was a backbone and that's what I stood up from my desk and decided to start looking around the I heard good things about of the these closure script and then there's a pure JavaScript cousin article on mission so I spent some time with them the what I found was that they had a very simple very unique take on state management and when I tried applying the same techniques that they used back in amber but pretty neatly sidestepped all the problems that I've just been describing to you so we'll get to that versus do a quick review of the way they handled stated back then then and was and remains today an embassy framework and without getting too bogged down on specific some definitions this is the essence of NBC me you have a model and the content of that model guides the rendering process repeatedly it's deterministic if the model contains the same properties that's going to yield the same Don every time In other words the view is a pure function of the model this is true in amber it's true angular it's true in react it even true in backbone that is just MDC done right the difference so how we go about changing that value of em up there were used to doing is updating the model we change some portion of the model by erasing 1 of its properties and then replacing them with new values that we want the view is observing this and react accordingly and for a lot of use cases this is a very workable approach but the that's not how these frameworks today the when it came to updating the model rather than editing the properties in place they always generated a completely brand new holy state to replace the old 1 no exceptions and by replacing that model each time it ceases to become a single object the model so much is strewn medium of discrete states that when rendered in succession yield seamless experience that it turns out there's a very precise word for this sequence of discrete states in computer science and category theory holding moving and we observe the moving as a single experience but we know in fact that the content of the movie is subdivided into discrete static frames each frame
has clearly defined balance it has a start it has a Finnish at each frame of content exists completely and totally independent of all the others it's only when we take
the static content and render in succession through a player that the human experience emerges a key point I want to
stress here is that even the case where 2 of these frames contain the same information that information is faithfully replicated in both and what I
mean by that is if you look at these 2 frames only things that are different are the positions of Charlie Chaplin and that weird scary Mrs. of the walls of the towel racks the sink the Fossetts they're all in exactly the same place and yet each is individually represented in both and because of this any frame but you can take it contains all of the information that's needed to render and I
can print out I can hang on a wall or I can take a piece of state that was generated almost 100 years ago and I can render it for you now and so at some
level on movies and immutable JavaScript framework share the same architecture they both work by separating this content from the player the content or the stream of content is static each frame is unchanging it's immutable while the player is the thing that changes in rearranges itself in order to render their content and when we play the content that's when
we we see the experience the so how do we go about harnessing this pattern that in our Amber applications that's actually trick question because the answer is you already do every
single member application is at its core a player of your else those your else that's the stream of immutable content and application itself is the player so finger rearranges itself in order to render the content and like a real movie you can use the browser back button and for but to rewind and fast-forward it works well it works flawlessly in most cases because of the way it's models so we use it here announcer Kelly might apply this concept to an area where it's not so it's not something that we do by default had we take that
password form that we were looking at from earlier and had we we factor that to be a movie while it's pretty straightforward as it turns out we want break are component apart into 2 pieces the content and the player and we can do it in 2 simple steps the 1st step is to disentangle the properties that we use in the template and bundle them into a single object and that single object is going to represent 1 of those static frames of content and so here In this template you
can see I here before the the intrinsic component properties there is it long enough and what's the rating the weak or moderate password and what we're doing is we're gonna hide those inside this object called the model and and then were a bundle them up in a in a single object and that's that's step 1 it's really easy found and then step 2 is replaced the
whole model with every change so whenever an event happens like an action that might change a update the state we always 1 generate this this brand new state is fully-formed state that represents the next frame of content and you're moving so how we do that well here
we've got this hypothetical action inside of our the controller where we can set the password text and here's how we might have done it before overwrite that password property on the model instead what we're gonna do is we're going to replace with a set the whole model with this new object were creating this this new password for model which is going to encapsulate the entire state now
the this tricky little odd at 1st I to use the the new word keyword to create plain old JavaScript objects in the middle of ah component i it's entirely possible that so you may have never reaction even seen this in other and replication before it is a small bit of heresy but but 1 that I think pays operators will see pretty shortly because now that's
it are component is now moving following those 2 steps that's really all there is to it but
sometimes the tiny shifts in thinking can open the door to an entire new avenues of possibilities the 1 of these the presented itself immediately the was a past within much much much simpler runtime and so to review we extracted our model into the stream of states comprised of static frames of content and like a single frame of content in a movie this content object is effectively is still it will never change because change is represented by generating another content object not changing the old 1 and so because because of that these individual states these contents do not have to be observable themselves they can be just plain old JavaScript objects so for example warning just works I have a lot of problems with the the the jobs the consul was in a terrible thing but it was it was constantly a paper remember this monstrosity right here what if that were to look something like this study pretty nice and that's what that's what you get from using a a plain old JavaScript Object the same thing applies to tree structures those tree that was vexing me so completely and that was just incomprehensible inside the Council 1 that's no problem what about those other things that were kind of giving you those troubles those computed properties well it turns out we don't need those eater and anything really as I know that's what I was thinking I was thinking really computer properties of the like my favorite things well yes and no I'm I'm only telling half the story because it turns out the JavaScript already has the concept of computer properties the getters the parts back for a really long time and most of the the the browser support them on because the static content objects are never can change you can pretty much just properties in anywhere that you would have used a pre computed property before and as you can see their really really easy to look at and they're completely and totally immune to all the problems that I was just describing there are no dependent case because the dependencies adjust implicit to the computation and when something does go wrong we get this instead of this error being buried in a you know 3 levels of chain observations get the single simple synchronous stack that ends in your application code and not inside the framework so you get the stack to get the logging you get the simple properties all because your browser deeply understands PO Joe's in a way that will never understand Amber object which means you're speaking to it in its native language I can help you out directly because it doesn't have to have talked to you through an interpreter like the Ember Inspector this enormous weight off it wasn't even expecting this part but to feel like a platform is really really you pushing forward but whether using EPO Djoser not because they did this this part of it is optional the real case that you get when you split your system and the player in content the relays is knowing with certainty what happened when and why because you meant a fresh state every single time there's an event that causes a change there is absolutely no doubt about what the event that gave rise to what states they are effectively 1 to 1 and what that means is that when you're trying to track down this tricky sequencing problem what was formerly murky waters become crystal clear in concrete terms before we had 4 events acting upon 1 object but now the were 1 2 1 we have 4 events that are paired with 4 objects and it's very clear what happened and why we can just put our finger right on it and say that's it the 2nd stay up there that is the 1st add value and what's more it was the 2nd event that caused that 2nd state and as a matter of fact if we were
caught each state as it happens we can actually go back and examine it the and see that the 1st corrupt state and look at it under a microscope and find out exactly what went wrong with it it's just like having a bug suspended in amber when we
re-conceive about model as a stream of unchanging states and not just a top water properties were really doing is preserving information the we preserving information about both sides of the state transition the state before and the state after has really makes it easier to make decisions and not only that but were preserving information about the precise boundaries of an event and the implication is that that that has on the application state and the state that that that produces In other words the consequences of an event will never leak outside of that single well-defined state it turns out in our line of work information is really really useful stuff uh we shouldn't be intentionally destroyed it because the more of it we have the more powerful we become by default for example undo redo that impossible dream but it actually comes nearly trivial within new the immutable system it's easy to see why when
you sequence your model like a movie then undo operation is just a simple exercise and storing in rewinding the tape and a reader is nothing but a fast forward that's it and again you're already doing this style undo redo in your Amber can applications today every time you use the browser's back in 4 but with the amber applications were just taking the same concept and apply it to the state that's buried deeper within your application the and so undo really
wasn't really part of my initial requirements and because I wasn't even attempting it a was experiencing pain for associated with it but hey you know there's like a gold ingot uh in the condiment bar next to the pickles and public from I'm which brings us up to now I feel really good about the way we go about the way embers headed and I feel confident that I'm going to be able to solve a class of problems that once all that and I really couldn't be happier as number role today so and that's it that's that's the end of that narrative but the story of amber and mutability is really just beginning but there are so many more techniques and so many more tools and so many the more wonderful consequences to programming in this style they didn't even get to talk about because 30 minutes is such a short time but exploring those things this something that I would love to do that together with all of you in the time ahead starting you know right after the stock and all that will come eventually but my goal for today is that you can walk out of this room with 2 things 1 is the philosophical underpinnings of an immutable you architecture OK the moving and to some concrete steps that you can use to get started with it in your Amber applications today because member is really ready for it right now it works so well with glamor to review your application a new components are players of static frames of content and to realize this you 1st extract the model into its own object and then make a commitment to replacing that object with every change you make if you can do that you can do those 2 things then you will set her free on the path the same path that I've been walking for for a little while and you will be ready to both understand and benefit from all of the tools and techniques related to this that are coming but in the future course it always helps to have some samples of this technique in action and we use it in a pagination library as well as our library for doing reactive XML HTTP requests right your hand worse templates and finally I would like to thank my company side forces supporting mean this these explorations especially my
team but rather suffer through my problem about immutability for almost a year now and had to suffer through the kind of the the trenches of of grinding out and figuring out what the but the best way to get these things to work in a member of the amber applications was on you guys are you guys are amazing and and finally I would like to
thank you member comfort and the and the community at large and when I look at other communities out there it really is hard for me to imagine myself being happier anywhere else so thank you very much through v v e sh tha each
Videokonferenz
Code
Router
Reibungskraft
Luenberger-Beobachter
Aggregatzustand
Gesetz <Physik>
Netzwerktopologie
Client
Perfekte Gruppe
Skript <Programm>
Elektronischer Programmführer
Gerade
Phasenumwandlung
App <Programm>
Datentyp
Vervollständigung <Mathematik>
Sichtenkonzept
Kategorie <Mathematik>
Computersicherheit
Ruhmasse
Sinusfunktion
Konstante
Einheit <Mathematik>
Rechter Winkel
Festspeicher
Server
Programmbibliothek
Ordnung <Mathematik>
Objekt <Kategorie>
Algebraisch abgeschlossener Körper
Folge <Mathematik>
Subtraktion
Spielkonsole
Wasserdampftafel
Klasse <Mathematik>
Mathematisierung
Diskrete Gruppe
Systemplattform
Open Source
CLI
Virtuelle Maschine
Informationsmodellierung
Bildschirmmaske
Datennetz
Netzbetriebssystem
Determiniertheit <Informatik>
Programmbibliothek
Abschattung
Äußere Algebra eines Moduls
Inhalt <Mathematik>
Datenstruktur
Ganze Funktion
Informatik
Datenmodell
Systemplattform
Menge
Codec
Bildschirmmaske
Echtzeitsystem
Wort <Informatik>
Streaming <Kommunikationstechnik>
Resultante
Bit
Punkt
Prozess <Physik>
Gemeinsamer Speicher
Gateway
Kartesische Koordinaten
Computerunterstütztes Verfahren
Computer
Komplex <Algebra>
Synchronisierung
Datenmanagement
Schnitt <Graphentheorie>
Figurierte Zahl
Schnelltaste
Lineares Funktional
Prozess <Informatik>
Template
Quellcode
p-Block
Ein-Ausgabe
Arithmetisches Mittel
Verkettung <Informatik>
Datenfeld
Twitter <Softwareplattform>
Kategorie <Mathematik>
Schlüsselverwaltung
Aggregatzustand
Rahmenproblem
Gruppenoperation
Hierarchische Struktur
Framework <Informatik>
Code
Physikalische Theorie
Physikalisches System
Puffer <Netzplantechnik>
Multiplikation
Rendering
Luenberger-Beobachter
Passwort
Hybridrechner
Softwareentwickler
Hilfesystem
Schreib-Lese-Kopf
Leistung <Physik>
Fehlermeldung
Graph
Zeitabhängigkeit
Eindeutigkeit
Validität
Mathematisierung
Einfache Genauigkeit
Mailing-Liste
Physikalisches System
Sichtenkonzept
Schlussregel
Objekt <Kategorie>
Mapping <Computergraphik>
Puffer <Netzplantechnik>
Vollständigkeit
Modelltheorie
Hydrostatik
Summengleichung
Rahmenproblem
Punkt
Volumenvisualisierung
Inhalt <Mathematik>
Stochastische Abhängigkeit
Ortsoperator
Rahmenproblem
Information
Normalspannung
Gerichteter Graph
Mustersprache
Streaming <Kommunikationstechnik>
Rahmenproblem
Gemeinsamer Speicher
Content <Internet>
Computerarchitektur
Inhalt <Mathematik>
Ordnung <Mathematik>
Framework <Informatik>
Übergang
Aggregatzustand
Streaming <Kommunikationstechnik>
Informationsmodellierung
Flächeninhalt
Browser
Content <Internet>
Einfache Genauigkeit
Speicherabzug
Kartesische Koordinaten
Inhalt <Mathematik>
Ordnung <Mathematik>
Default
Kombinatorische Gruppentheorie
Rahmenproblem
Kategorie <Mathematik>
Template
Datenmodell
Einfache Genauigkeit
Bitrate
Objekt <Kategorie>
Hydrostatik
Bildschirmmaske
Bildschirmmaske
Ein-Ausgabe
Kontrollstruktur
Zusammenhängender Graph
Passwort
Passwort
Inhalt <Mathematik>
Faserbündel
Informationsmodellierung
Kategorie <Mathematik>
Mathematisierung
Gruppenoperation
Datenmodell
Gamecontroller
Mathematisierung
Passwort
Menge
Ereignishorizont
Gruppenoperation
Aggregatzustand
Objekt <Kategorie>
Nichtlinearer Operator
Bildschirmmaske
Rechter Winkel
Datenreplikation
Wort <Informatik>
Zusammenhängender Graph
Passwort
Objekt <Kategorie>
Folge <Mathematik>
Gewicht <Mathematik>
Rahmenproblem
Wasserdampftafel
Browser
Mathematisierung
Formale Sprache
Sprachsynthese
Kartesische Koordinaten
Computer
Computerunterstütztes Verfahren
Systemplattform
Term
Code
Framework <Informatik>
Übergang
Netzwerktopologie
Hydrostatik
Streaming <Kommunikationstechnik>
Informationsmodellierung
Prozess <Informatik>
Luenberger-Beobachter
Passwort
Inhalt <Mathematik>
Datenstruktur
Ereignishorizont
Ganze Funktion
Verschiebungsoperator
Physikalischer Effekt
Beobachtungsstudie
Interpretierer
Kategorie <Mathematik>
Systemplattform
Mathematisierung
Rechenzeit
Einfache Genauigkeit
Physikalisches System
Ereignishorizont
Programmfehler
Objekt <Kategorie>
Bildschirmmaske
Verkettung <Informatik>
Rechter Winkel
Mereologie
Aggregatzustand
Fehlermeldung
Nichtlinearer Operator
Folge <Mathematik>
Kategorie <Mathematik>
Browser
Wasserdampftafel
Magnetbandlaufwerk
Gruppenoperation
Kartesische Koordinaten
Aggregatzustand
Physikalisches System
Information
Ereignishorizont
Entscheidungstheorie
Streaming <Kommunikationstechnik>
Randwert
Informationsmodellierung
Wort <Informatik>
Passwort
Information
Ereignishorizont
Default
Gerade
Aggregatzustand
Objekt <Kategorie>
Rahmenproblem
Template
Klasse <Mathematik>
Mathematisierung
Gruppenoperation
Stichprobe
Datenmodell
Content <Internet>
Zahlenbereich
Kartesische Koordinaten
Hinterlegungsverfahren <Kryptologie>
Objekt <Kategorie>
Hydrostatik
Informationsmodellierung
Forcing
Stichprobenumfang
Mereologie
Programmbibliothek
Zusammenhängender Graph
Inhalt <Mathematik>
Computerarchitektur
Optimierung
Videokonferenz
Dienst <Informatik>
Ereignishorizont

Metadaten

Formale Metadaten

Titel Immutability is for UI, You, and I
Serientitel Ember Conf 2016
Autor Lowell, Charles
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/34704
Herausgeber Confreaks, LLC
Erscheinungsjahr 2016
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Immutability. It may sound like an ominous something from the far-off galaxy of math, but in practice, it's one of the most pragmatic tools for thinking about UI. In this talk we'll explore the problems that an immutable style solves, and how you can use it as a thought-tool to both design and implement more powerful and composable components. Throughout we'll see just how deeply Ember supports this mode of thought at every step of the way.

Ähnliche Filme

Loading...
Feedback