An Animated Guide to Ember Internals

Video in TIB AV-Portal: An Animated Guide to Ember Internals

Formal Metadata

An Animated Guide to Ember Internals
Title of Series
CC Attribution - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
Release Date

Content Metadata

Subject Area
Having a good mental model of how Ember works is invaluable, it allows you to be more productive and fully leverage the framework. With the aid of some slick animations, we'll take a look at some of the internal moving parts that make up an Ember application. We'll explore routing, data flow and actions, the run loop, event dispatching and DOM rendering and updating.
Area Theory of relativity Divisor Gamma function Multiplication sign Electronic program guide Code Maxima and minima Bit Cartesian coordinate system Mereology Area Product (business) Number Object model Videoconferencing Endliche Modelltheorie Videoconferencing Drum memory Metric system
Classical physics Group action Functional (mathematics) Mobile app Lemma (mathematics) Total S.A. Group action Cartesian coordinate system Element (mathematics) Medical imaging Type theory Category of being Wind tunnel Algebraic closure Different (Kate Ryan album) Personal digital assistant Lie group Single-precision floating-point format Algebraic closure Statement (computer science) Energy level Representation (politics)
Group action Multiplication sign Adventure game Phase transition Volumenvisualisierung Videoconferencing Line (geometry) Number Booting
Default (computer science) Group action Mobile app Process (computing) Doubling the cube Connectivity (graph theory) Phase transition Touch typing Set (mathematics) Event horizon Element (mathematics)
Graph coloring Template (C++)
Functional (mathematics) Focus (optics) Run time (program lifecycle phase) Just-in-Time-Compiler Multiplication sign Virtual machine Replication (computing) Code Element (mathematics) Template (C++) 2 (number) Revision control Data management Process (computing) Term (mathematics) Representation (politics) Contrast (vision) Communications protocol Compilation album Form (programming) Computer worm
Game controller Euclidean vector Electronic mailing list Web browser Cartesian coordinate system Opcode Element (mathematics) Open set Template (C++) Volumenvisualisierung Energy level Convex hull Software testing Mathematical optimization Resultant
Implementation Program code Dynamical system Euclidean vector Connectivity (graph theory) Virtual machine Open set Code Template (C++) Element (mathematics) Number Fluid statics Different (Kate Ryan album) Term (mathematics) Operator (mathematics) Single-precision floating-point format Endliche Modelltheorie Stapeldatei Arm Information Content (media) Cartesian coordinate system Opcode Sequence Open set Element (mathematics) Statement (computer science) Software testing Right angle Hacker (term)
Point (geometry) Game controller Greatest element Inheritance (object-oriented programming) State of matter Code Multiplication sign Real number View (database) Student's t-test Parameter (computer programming) Open set Web browser Mereology Code Element (mathematics) Attribute grammar Different (Kate Ryan album) Single-precision floating-point format Reduction of order Representation (politics) Social class Inheritance (object-oriented programming) Mapping Staff (military) Line (geometry) Incidence algebra Cartesian coordinate system Element (mathematics) Process (computing) Integrated development environment Personal digital assistant Function (mathematics) Network topology Social class Right angle Arithmetic progression Abstraction
Ocean current Frame problem Slide rule Context awareness Functional (mathematics) Group action Game controller Code State of matter Connectivity (graph theory) Parameter (computer programming) Event horizon Semantics (computer science) Neuroinformatik Number Medical imaging Hierarchy Algebraic closure Videoconferencing Computer multitasking Software testing Compilation album Condition number Stack (abstract data type) Line (geometry) Group action Cartesian coordinate system Element (mathematics) Open set Frame problem Connected space Category of being Arithmetic mean Uniform resource locator Positional notation Personal digital assistant Function (mathematics) Statement (computer science) Social class Software testing Object (grammar) Block (periodic table) Hydraulic jump
Dynamical system Just-in-Time-Compiler Code State of matter Interior (topology) Multiplication sign Source code 1 (number) Opcode Parameter (computer programming) Open set Database transaction Neuroinformatik Medical imaging Fluid statics Coefficient of determination Software framework Physical system Spacetime Block (periodic table) Closed set Constructor (object-oriented programming) Electronic mailing list Bit Opcode Element (mathematics) Open set Software testing Quicksort Block (periodic table) Point (geometry) Ocean current Frame problem Code Event horizon Rule of inference Element (mathematics) Attribute grammar Cache (computing) Statement (computer science) Hydraulic jump Condition number State of matter Cartesian coordinate system Frame problem Personal digital assistant Function (mathematics) Statement (computer science) Formal grammar Musical ensemble Communications protocol
Logical constant Group action Scheduling (computing) Greatest element Installation art Run time (program lifecycle phase) State of matter Set (mathematics) Parameter (computer programming) Database transaction Optical disc drive Mathematics Endliche Modelltheorie Social class Arm Closed set Database transaction Opcode Element (mathematics) Open set Data management Volumenvisualisierung Computer science output Right angle Row (database) Windows Registry Classical physics Frame problem Implementation Functional (mathematics) Game controller Patch (Unix) Virtual machine Code Event horizon Element (mathematics) Attribute grammar Goodness of fit Operator (mathematics) Compilation album Mathematical optimization Installation art Game controller Information Uniqueness quantification Expression State of matter Interactive television Group action Compiler Algebraic closure Personal digital assistant Function (mathematics) Statement (computer science) Game theory Object (grammar)
Ocean current Windows Registry Game controller Group action Game controller State of matter Multiplication sign Sheaf (mathematics) Attribute grammar Group action Cartesian coordinate system Event horizon Element (mathematics) Element (mathematics) Attribute grammar Category of being Event horizon Algebraic closure Personal digital assistant Summierbarkeit Electric current
Group action Game controller Functional (mathematics) Algebraic closure Natural number Function (mathematics) Instance (computer science) Lattice (order)
Medical imaging Category of being Group action Game controller Tablet computer Roundness (object) State of matter Group action Product (business)
Game controller Functional (mathematics) Scheduling (computing) Group action Key (cryptography) Multiplication sign Group action Sequence Type theory Mechanism design Process (computing) Loop (music) Different (Kate Ryan album) Order (biology) Synchronization Volumenvisualisierung Series (mathematics) Volumenvisualisierung Loop (music)
Web page Frame problem Group action Functional (mathematics) State of matter Multiplication sign Virtual machine Function (mathematics) Mereology Code Event horizon Medical imaging Bit rate Different (Kate Ryan album) Computer multitasking Loop (music) Hydraulic jump Mapping File format State of matter Counting Bit Group action Opcode Frame problem Category of being Process (computing) Personal digital assistant Function (mathematics) Network topology Synchronization Volumenvisualisierung
and without head and thank i n so when and enjoys uh I'm looking of doing it from the 3 years ago and b was also looking to get the
opportunity to make a case for eminent uh under certain about points that if we adopt a number it would enable us to significantly raise the bar and what was possible and in productivity and our emissions uh no at the time t colleagues and I said it to build a simple part of intercom amber and just provide productive we could be and 2 years later when a much larger companies uh 129 engineers as of today of uh made contributions to our main Amber applications just Collamer come and most engineers in gamma full-stack engineers so Amber's strong conventions and tilling are extremely valuable in helping them to be productive and to build amazing products for our customers which Marcus was so but we got many things I didn't come over time and not necessarily the most important metric is certainly a useful 1 we've grown our annual recurring revenue from no 1 million 250 million in the last 4 years and makers 1 the top handful of fastest-growing thesecompanies however generation but so we introduce cemetery is no coincidence the and of course we got a number of things right and we could quickly fix things that they know so well at but I'm recently been a big factor in our success and will likely continue to be as we go on to build even greater things and as we grow and I've been lucky enough to about my own role time to do some more bizarre stuff and work on number communities of also done double with making Amber videos and when you choose so when deciding to estimate the stock and I decided to stretches of little and lands by animation so that I could uh make better videos in future them also if uh when the number and related learning morbid and actually works and expand the areas of Amida like country to to In this talk might get a little bit technical at times but it's useful to you in Boeing of developmental model have to move things inside Amber work the the so here's a
simple lemma application which will go deeper dominance and the tell it's got an image into bottles the pink but news is a classic action the blue button uses the closure active you consider clicking the button simply ogles image and he is the JavaScript for our at this is showing is property which the false and true in a single type action which tunnels and show image property through voltage source or and here's our apps unaware someplace 1st we even if statements when show industry we ran a static image and ended 2 buttons the 1st uses the classic action 2nd uses a closure action at buttons toggle trigger faint election SMEs 1st look at some higher level differences between the 2 actions the classic action users what's truly called an element modifier in this case an action modifier that's the action total text in the races and the close actually right these is what's called that to help to assign a function beyond click actually the button uh the syntax of these 2 ways of defining actions are quite similar I had never had a operate is quite different
looking at the uh the final renovation relevancy for the differences in the classic action the left dated and we're save it and reaction had to be defined where's the closure but on the right allow tha and looking at a representation of the Brenda down you can see that the pink classic action button doesn't have a director can where the final where the blue closure action on the right those and you can see a clicking on the pink 1 triggers the handler on the body while clicking the 1 on the disclosure action triggers that on it and therefore interesting
phases of the actor which we look at the use initial render action this and we're under a
number of interesting things happen at the time in Anambra I was going to a line in here and in my talk
however weeks go might nor its release a feel which details and must be processed pretty much exactly as I planned to so if you're interested in very much recommend you watch that its regret um and if you like you should also follow also we encourage and maybe too quick mornings video from that's um 1 part of
the group process that will highlight is at the center of the set of event handlers on readout element for your app which by default is the body element these can be configurable by
default as 27 covering touch keypresses met movement and the set up in the body element if we were to define a double click events in a component it's the double click event on the body that's actually fired and within this event and the the target component is located in the event is then dispatched to it and so the 2nd phase
of initial and the uh to this would dive deep into tumor internals them so as an introduction will start with an even simpler at this whole I lower left
and run this spelling bees Sidex it's
templated color paragraph with a a b syntaxin however comes at builds
on the embassy like compiles this into a form known as there where from all templates and replication are compiled a little time to form like this and then the then packaged up into your jobs for payload for Iraq and delivered have to user In contrast with earlier versions of Amber rendering engines the were for for managers Jason don't and and compares very favorably in terms of payload size and and should past time to early attempt by representations which were the full-year JavaScript functions but a runtime there's then
seconds on just-in-time compilation step and where Amber composite templates from wire format into the runtime not codes which are then executed in a virtual machine the Buddha these compilations that's a very interesting themselves however just skip over those details and focus on the execution of the articles are on time for because in
the left the opcodes been executed 1 by 1 and 1 of the results of that execution is initial render of our application in the browser and his sexual list of opcodes they get rendered an unusual render for our simple static 33 in all I won't go into details this summer for the reader optimal for the application and controller at the top level lens he a 4 4 are
annotation template and on initial
render a single program codes is in sequence some of the the more complicated your application will be in terms of a small tides components helpers the if statements for each for each writers that the bearded was the barcodes will be reflected from start to finish in a single blast but and the glamor rendering engine actually made up of 2 different virtual machines depending on which is for rendering content on initial and the and then the update the arm which is rent for rendering content of data but so the append the ends on the left the update is on the right as the append fiom executes the commit emits but they don't because of the account any dynamic content and animal we were rendered sunny the updates but they should be on and operations are executed the has been has detailed information on what a static model dynamic you templates and those in detail which dependencies any dynamic content has developed a BN opcodes can describe preferably trade settles down operations and as well as schema to be so fast that dates when compared to even the fastest of Don different implementations like Inferno left about we have and so it's Siemens using the details of schemas append the m as it's a batch render the opcodes from our simple hollow at the of templates so
here you see 2 4 codes which will be executed open element blastoma text close element and the number of moving
parts within the and and a fellow student here which are interesting for a for a simple example yeah constructing is a simple variable which points to DOM element that we're building it on the on the stack a stack of Don elements in any single point of time is represented parts from the topmost on element to the DOM elements that were mammals recently inserted on the right we
the view of state tional for applications and as a representation of the dumb and I've simplified this little to exclude Donald just the body but so will step treaties from my 1 of 2nd well 1st of all just led by trees we can get a feel for the moving parts but any at the 1st of the approach open elements as a single argument which indicates which elements were an increase of progress in the states the at the job code maps to a simple function in good to In the 1st line the greater progress dumb nodes at this top down the abstraction which allows climate run in different environments interesting were running a nodes so we don't access to real so it's a representation of staff that we create a representation of a new paragraph note in the browser we do have access so it creates a real progress dominant and in line 2 we recess this new elements to constructing and reduction it on the bottom left you'll see that we put the paragraph there constructing and interestingly I mean inserted into the locked into the dominant if we had this additional operations such as attributes and our classes they would happen in subsequent codes and then we only more fish because we would incidence of this case we don't so the next quotas flush element and where we grabbed the parent node from the elements that which in this case will be the from surrounding controller grab the elements were constructing paragraph nodes and we insert it independent as 1st child and finally set the constructing snow were finished building the node Annex we that text Texaco's missing argument which contains the text and Syst integrates the text node and inserted into them and finally we have close elements and this pops an element from the elements that were finish rendering the and so let's look at the initial
render our for image following application in the event of and IBM
as before we wanted the animation once before step inches up to about code there's a lot more going on in in this that which relies treated that thank you so it's constructing the 2nd but no no constructive 3rd but this should be so much easier just like 1 slide and just talk refinements and so as before let's step through the code from my 1 the 1st is what are which has a single argument containing the compiled arguments for a statement um or a statement in this case is a single positional arguments show image and the compile self based represents this scope the worker and executing under which in our case is the context of the controller contains both the show image property and the target action In the 1st line we evaluate the compile Iet's wrapping and their role compile arguments and what references if you're not familiar with references and Godfrey new this talk uh from last year's the spoken detail about them and there's also some great technical ducks on the glimmer and and all twiddling cities and the video after the talk and phonetic you can consider references the simple rapid objects to value are some lazily computed value and in JavaScript if you passive really into a function it's possible value meaning that if you change in original location a dozen of data in the place opacity and but with a reference because an object the wraps values you can pass around and change the value of update everywhere and so we have these references and we grabbed for its positional reference which in our case is the reference which wraps the show image properties and we set the origin ground reference in the current BN frame uh frames capture the current state of art the atmosphere and there's a hierarchy of components and if statements and things that the next up code is tests uh 1st we the to just place in current frame which is the show image reference we then wrap this reference in a conditional reference uh when computed this reference simply cast the value of the show an interest preference into a billion and this is what gives number uh if statements the true the semantics so is the value of the operand was an array items this connection conditional reference would cut set to true love and no items with measles we can set this reference as the condition the friend Ch
but here and there so the
answer codes uh 1st captures the current state of the frame and then we construct a tryout uh which actually run on the updating the m I you think about it we're currently processing a statement which has a dynamic argument show image and that might change in future and what does change we note it wouldn't have debated on you to remove the image element of showing which flips falls or render a new image of the constrained so this trial code represents the bands of that possible work and we'll see how this works in a little bit later when we look at the event when we look at the take the but and the and the and the list of opening up codes uh 40 updates the an interstellar travel to us you can see it on the fly over there so jump less these next the it gets social image conditional reference from the current frame as references can represent the arbitrary compute computation of the value this computationally expensive we wrap the reference in the cash the work has a ticket based system which allows it to avoid recomputing reference values as necessary them for example for it to do an initial when there out and take a ticket and then do a rerun changing any dependent data we could simply skip all re-rendering work as a ticket will still be valid and they were also uses tickets recursively so even if some of the dependent values changed you can still avoid large amounts somewhere where I don't think it's still and as with the references dog blocks in they were B for this uh no that we have the cash we because its value if rules false we will skip ahead to some target 0 that the B and that go to that the space heater would jump over the assignment or if we have an ELSE statement he would jump to the details of codes uh when as shown just true over some don't jump the and we have finally in the pseudocode for the update the passing a cross-reference we'll dig into that we re-rendering sense so now we're entering the blocking of and evaluates uh could and this receives a block of wire formal statements so that comes the ones were delivered over a wire and in this case the statements describe the block within our if statements which is an image that we grab the arguments from current frame then just-in-time compiler the wire formats into new of backwards and we push a new framework friends I with these new articles this eonsonant smooth now we've got news of of some sort of their the and we've compiled injected these opcodes instead processing of uh we seen open element before constructs new down and set it to construction that static data sets an attribute the element for constructing this case of inner source 2 . 4 times the image but and then we 1st the element which you've also seen before it takes the nearest node and inserted into the DNA at this point are image will be visible through to the the application and close element of the image from the other elements act as refreshment and we x of a book now around this 1st column and so we all know there's element which is skipped over there and we reach a modifier up this
record represents the classic action toggle statement in our classic action but an which represents an element modifier and the this modifier good receives 2 arguments action modifier Manager which provides lifecycle looks for our at our action modifiers so for creating installing deleting them the 2nd argument is a compile arguments which contain the name of the action top this case see the notice right the patch of data so we grab the other elements are buttons we then evaluate the odds drops in references no we ask our action model for manager to create a new action modifier passing our own elements as the about the x and this creates a new action state object which contains enough information a runtime dispatching events to the to particular target so when the button is clicked members body fecundity will fire and if the target element of the ideas will get the infection state from some registry and then dispatched that action to its target in this case is the controller the modifier and manager and scheduled for installation and depends on the amount codes running from lecture and when the transaction is committed things the schedules are then executed with this 1 of cases then so we come back to that later finally of obtained modifier opcode and 1 of the benefits of the game were the and is that opcodes they're simple but in uh book conceptually and implementation in this case we consider are we know the right to modify it doesn't have any dynamic arguments it simply gonna follow strength and which is constant so if nothing is dynamic which you don't need to update an opcode are made up of so this is goes military or this tiny little change is the odds are constants dominance uh but they are we could do less work on initial render and update I think it's a real testament to ahead conceptually simple glamor is the someone like me with no computer science background or experience for compilers of virtual machines can make simple performance improvements like this so the next set of goods we seem for 1st about events in texts uh close the elements of open the 2nd bond as it is going to use the classic action which is kind of closure action which will function to the on click and so it received an expression in our case it's a compiled helper has some arguments that help a function which is His amorous built in action helper functions so we about our instructor references at then we call the action helper with these odds and this looks objection function on the target which is the collection again our fishing trawler and it returns a function that closes over the action and name closure actions and we'll see this again we look at how events the delegates and finally set this newly created function as the on the current frame and dynamic takes the reasons set operation was the operand which is our action function and set it to the and click handler for above and I think this is another upper opportunity 1st make an easy performance improvement and again if all the inputs are static which they are in this case and we could update the compiler to him in a static and there are considered dynamic mechanic because the adults so is it understands and we don't flush the remaining there is 1st abundant syntaxin close about From Austin With this initial rendered 1 final step remains which is uh I mentioned earlier that day uh around there he is the In the BE in opcodes is wrapped in a transaction so and we cannot commit but was were finished and this is going to install election modifier the created schedule earlier as for the classic action but the so look something like this we have our action states which we register and this gives access to data and the element was falling modifier on and unique ready for action we then restore the actions that objects to you in some interaction Amber which provides access to the list of premier registered actions and we set some attributes uh the bottom 1 the action of the so only ticket right we have enough information go look at this object here and with that Wikipedia append transaction and were done with the initial when the goes far back tha
the says if 287 of my imprisonment then tha 587 but I but if you think but it is not she um OK let's look at action of bunch and arms have so here's a class classic action but as the event handler is on the body on his reminded
of a but uh is the body take
about event handler that we register of the time I the sum to code here just to make it because it on the slide or and so on click we grab any attributes from the current target element so you know were firing events in the the body we've also got access to whatever element the the uh where the event occurred which called the prime target so that'll be the but in our case we then iterate over its element actually it's looking for actually begins with it and reaction and the final those we look for the arrested Action ID and then we look a lot from this registry of actions and this is this action state and again it's got knows where the target is what the name of the action is um within compare the abundance of clicks take and we invoke this action the so here's a handler for this section the 1st thing we do is get the targets which might this the application draw and then wouldn't release something all explains in uh we send the name of the action totalled in our case the targets target and this invokes the title action and toggles challenge property controller for but with the closure action as we've seen click invokes the click handler i which depend M attached to a 2nd but directly and this what the click handler
function looks like we essentially invoke the total function our controller instance that again what in a really closure actions by the nature of the embraceable functions allows the past them into components of open wherever we like also notice that these functions can have a return value something that plastic actions can't and the there are 2 things which make uh close and so attractive so finally let's look
at the of stadium uh so we were
looking at last the ends just after initial round considered Tomlinson an image and 2 buttons so let's click the X. the classic action but it does matter which will we click the broken at about the same the action as we just seen this dispatches the product and her controller which toggles the show image property and within wrongly so true false and to understand how this triggers around there are we render will just take a little the torrent only
so while it was a series of function keys which are processed in a particular order having this mechanism allows ambit schedule different types of work and from work to be executed in a controlled sequence so function Heuser
process from laughter rice and functions we achieved a Q of process will in time each time I run a loop is created so for example 1 next action embers schedules render function in the render Q and you can see this happens after our toggle action
is executed so top election 1st then are we the so that
this rerun the function will check of any dependent data has changed method has execute the update virtual machine I didn't animated here but the trial approach creates a new frame a page the and much like uh we saw with the a and B M Annex we have a certain codes this receives icaps reference which wraps the challenge property we do agreed that achieve check to see if modified the has more finished updating and in this case it has changed from into true false so we call the unnatural misses 2 things in for movies any down which should no longer be displayed in our case the image and it emits some wrongs append codes from any new dominance to be rendered so In this case will blow image from the dam friends in the tree opcodes and process them in the event via so changeable as before as part its initial render them we grab the reference Robin cash because its value at this time is false so we tell the antigen to its target and it 1st thing had an output as closely jump to the else clause as a dozen we jump over the remaining codes and were done the image been rates have no free trigger the action again we run the opcodes again this would blow landed on if we had the ossicles but we don't and again it's tree opcodes again as before In the jump unless this time here's a dozen jump over its renders a just-in-time count compiles where formats renders the image um and then were this brings us again right back to the exact state everywhere after initial and so that's all and it's been a lot from creating these and get to know Amber internals a little bit and dimmer is a really great technology so if use any of also uh directed towards UDA Godfrey and Chad and different people on the amber you a map that and build this relationship thanks uh
question uh