AV-Portal 3.23.3 (4dfb8a34932102951b25870966c61d06d6b97156)

HTMLBars - The Next-Generation of Templating in Ember.js

Video in TIB AV-Portal: HTMLBars - The Next-Generation of Templating in Ember.js

Formal Metadata

HTMLBars - The Next-Generation of Templating in Ember.js
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
The Ember.js community is ablaze with excitement over HTMLBars. Not only will it give us great syntax in our templates, but it will also usher in next-generation rendering performance in an upcoming 1.x stable release. Erik and Kris will walk through the design decisions and usage examples of how HTMLBars will alter the landscape of HTML templating solutions.
Receiver operating characteristic Performance appraisal Presentation of a group Software developer Chain Correlation and dependence Right angle Videoconferencing Resultant Formal language
Interpolation Scripting language Multiplication sign Real number Web browser Function (mathematics) Plastikkarte Event horizon Template (C++) Element (mathematics) Number Attribute grammar Mechanism design Roundness (object) Different (Kate Ryan album) String (computer science) Ideal (ethics) Fiber (mathematics) Alpha (investment) Scripting language Dependent and independent variables Physical law Keyboard shortcut Content (media) Attribute grammar Bit Markup language Process (computing) Spring (hydrology) String (computer science) Right angle Library (computing)
Computer virus Code View (database) Multiplication sign Source code Mereology Stack (abstract data type) Neuroinformatik Digital photography Medical imaging Mathematics Bit rate Programmable read-only memory Software framework Recursion Error message Fundamental theorem of algebra Scripting language Block (periodic table) Electronic mailing list Airy function Flow separation Category of being Digital photography Process (computing) Order (biology) Artistic rendering Right angle Pattern language Recursion Point (geometry) Connectivity (graph theory) Online help Electronic mailing list Web browser Machine vision Element (mathematics) Number Template (C++) Programmschleife Natural number Term (mathematics) Address space Key (cryptography) Inheritance (object-oriented programming) Physical law System call Network topology Cloning
Complex (psychology) Group action Context awareness Source code Water vapor Software bug Medical imaging Different (Kate Ryan album) Computer configuration Core dump Cloning Information security Collaborationism Touchscreen Constraint (mathematics) Structural load Keyboard shortcut Sound effect Staff (military) Bit Web application Buffer solution Artistic rendering Figurate number Point (geometry) Web page Slide rule Computer file Connectivity (graph theory) Streaming media Event horizon Element (mathematics) Template (C++) Number Goodness of fit Term (mathematics) Hacker (term) Hierarchy Data structure Router (computing) Booting Alpha (investment) Default (computer science) Focus (optics) Standard deviation Scaling (geometry) Server (computing) Physical law Plastikkarte Cartesian coordinate system Frame problem Word Uniform resource locator Personal digital assistant Query language Network topology Table (information) Library (computing) State observer Building Beta function State of matter Code View (database) Multiplication sign Primitive (album) Function (mathematics) Mereology Web 2.0 Query language Pattern language Vertex (graph theory) Endliche Modelltheorie Logic gate Position operator Stability theory Scripting language Data mining Volumenvisualisierung Website Right angle Row (database) Game controller Server (computing) Implementation Mobile app Functional (mathematics) Web browser Theory String (computer science) Proxy server Noise (electronics) Consistency Planning Database Template (C++) Cache (computing) Logic Routing
Planning Videoconferencing Open set
and language the I if you have a the
America and as a result in where all members of the court TV and I we're here to talk about it you know bars and I'm just curious how many of you have heard of a chain of hours before the right raise your hand if you have not heard evaluation of our right you guys need to get under out from under the ROC living under a because we've been practicing this style of development that I like to call EDB which is the brain driven development and you see the 1st step is to find something often to build the 2nd step is
too high pipe height the 3rd step is to announce an idealistic really really ideally added nice big events such as agriculture that law is to proceed the for pressed to neglect his responsibilities as a husband and father that helped you shouldn't and of course fibers to think
his wife Patty very much so you know the the round of applause for caddies so let's talk a little bit further 2 or 3 of you in the room that don't know anything of art it was popped recap what it is it's a new templating library built on top of animals so the difference is that it understands your mark up where is handlebars was just a really sophisticated string interpolation mechanism right and I think it will be interesting to watch to see what comes out of yes 6 string templates because we were finally going to have real string interpolation in the browser in JavaScript which is amazing I and II a whole bunch of other cool features as well but but issue numbers can be really smart about how it does its job of issues so I'm it understand your mark up you can be smart about how it does its job and what we mean by that so we'll get into a little later but but basically the let's talk about what excites people about edition of our people like you guys in the crowd syntax right it gives us our ideal syntax right now today but really we ideal syntax right we should just be able use pearl even fight of attributes inside of elements but you can do this with plain handlebars today and unfortunately number because because of data binding need we have to use helpers to achieve this as so we have binding right but but with a single bars we get the syntax that we wanted and the reason for that is because Emerson doesn't understand a mock up it can only just turned mustaches in the spring output whereas ational bars knows exactly where mustaches are being used whether the inside of the element itself whether the inside of an absolute or whether they're inside the content of the known and ation of ours also builds down fragments instead of strings and so this lets us hold a reference to those things where your putting those mustaches so that we can update and later right at the bank and so what does this mean well it means no more script tactics right the Here's an example before after right We've got all the script tags you know we thought it was a pretty clever solution at the time we started with the span trapping based approach anatase fell on its face so after shipping I don't know when it what when we figure that I was like the 1st the 2nd alphas of when we're sprocket to its time of and so we we figured out scripts were valid everywhere so great we this because at that time we thought stink Inc. was the way to go but so what's the other big feature that people care about the dreaded performance
of long list was so in Asia numbers were able to solve this problem several and that help solve this problem by being able to rapidly cloned down so when you've got a and each you're defining a set of mock up that point be repeated over and over and over again so we actually are able to do with vision of ours build that down once and by bill that I mean appalled back rate element dative you know of a lot FIL that up and we actually don't filling in the parts the dynamic part to that template and so what we do is we catch that fragment of nature now that's inside of your each other for example or any template block this works everywhere and we can now clone it which is 4 followed deep deeply cloning and this is basically the fastest way you can build rather that so we don't have to continually keep calling back back read element for the whole tree we did do that once the me cloning for every subsequent run and we go in we fill in the dynamic parts Afterwards public hydration and so that's what everybody's excited about variation of ours that the killdeer but what excites us but irrational birth
it's our chance to fix some of the fundamental performance from the numbers so Kristen I we've been talking the 14 everyone's talking that it's not bars but actually ation of ours is kind of become a blanket term actually he is a large rewriting of the interview layer that and review layers what underlies components as well and so and let's talk about some of those things so what's going on here is that so this is less patient of ours more view layer 1 of the things that the always bothered me about and is the binding update order has no understanding of the higher the order of priority and what happens in this example is is once it's rendered and where you really want to have happened is photo to be notified before part of Europe because you're going to destroy what's inside of that terms balls currently this is the issue problem because in amber we notified passed before keys and so this all of the source before removing the whole year and that is even worse it's a lot of you this is something that we are and in the process of fixing and our rewrite the view led to an this is a virus so the TLB of how this works is basically instead of immediately going and when photo changes in this example instead of just going in updating everything that is observing photo we actually just do kind of what computer properties do we don't we tell everybody hey we know this thing's going to change and we basically know what the highest priority but the parent most you know view is that cares about photo and then we just say OK everything in that some tree doesn't need to be touched until we update photo Oregon on so photocharge turns false then we just know we're to destroy the DOM but a photo just stays true the then we know that we're going to just go and update the individual binding here in the resource so this is like a nefarious problem right like you of the photo to all and then you actually see probably an image and HTTP request for you know what like an old URL so was worth examples yet sometimes we need and because errors and so so this is z nefarious problem that you know think hopefully most of you have not noticed in billing address vision with his 1 really exciting things and this is not unlike what the browsers do this is actually a very common pattern in UI frameworks so were taken that were still those ideas and were giving it told you inside a member review the next thing is with I don't know let's just go to the next and right now so this the flame chart for those of you who have not played with the prom DevTools this is basically representing the stack of currently executing code and this was during a renter basically so now focus the law of removing recursion the current that this is the much slower than the time and I worked really hard to try and it builds up the if it didn't do a lot of practice part because I was trying to have and it it's really close most the path for passing but this part is done and not only is the view rendering of not worth pursuing when you have something to contain in another item gets added to the collection all this kind of you know that the the 1st thing he the templates we under although moving during compile time so you 3 compatible templates and shit in this call every all the helpers in the right order no no loops and that's that's important for performance because of job script doesn't optimized with they can also help you find the so so the nice thing is that that that this is the before shot we don't have an after for you but the after aftershock is going to basically be you know small stacks ended actually see like individual views getting rendered base right so that's in the Austin performance the budding ideally you won't have to worry too much about formants right the magic bullet but when you do you'll be able to use the tools that we have to do Miller
they know the more for us is and but really what is something that we wanted his findings and we just want to be fast and currently what happens in and vertically changed the underlying contest of the whole new we writers It's element is destroyed and we have set up all these findings and observers but we basically strode out and redo it and this year and this is the layer where working so that but it worth to and and really not through the context and you updated the contacts all the bindings will stay in place and it won't terror anything that yes so the deal the as you change if do you that have anyways so I see for example with 3 rendering like right now and it is you have a view object you call set context for set controller there's an observer and that observer calls this that rear-ended right and so right so we've done all that work to to ever have everything in the template nicely bound and now instead of that those templates though that you having a re render itself now the bindings will be able to just update all the content right through so if you you might have noticed this and trying to think what a good example of so we using hacks right now with dynamic segments right like we keep the view hierarchy around when you're switching from like 1 router to another router but we're just swapping out the model so actually Edward Faulkner that's that or quest to do that which was a nice performance is an unknown words though because you're going through prosody so when you have a proxy that because of the the the stable model but context the template of the controller so when you switch the model out of the controller views stays in the binding of days so can you touch to contact directly it renders another point this slide is that people we render also as a performance thing the template is slow and each is slow of that like you people make your own render right you so you then render stop unbound what 1 thing rewrite the law and hoping that you won't do that again but also we have so so the hope is so the hope is actually and if we you know if we succeed in our mission the idea is any of those were custom render our method you might have in your views are actually going to be slow work now using nation of ours to template because each of ours is doing the smart caching in cloning of the down for you so really if you're using if you're doing custom render methods like I think are good friends at this course are doing in some places really hot code have they're going see it actually using templates again be better than an old code you would be yourself and random so that's really cool so it's also just down right so why you know refund that's the 1 thing is I there we have a hope will insert elements probably nobody uses because you don't actually have the element of a random search of it but that consistently at least frame will now this is actually a huge deal of so what you get the end after example I think there's so many of you have a plug-in right you doing animation you want send it out before the Don it the element is actually in the down because you don't wanna be visible so you wanna set you know off the screen before it actually comes in the door on what science is better yet how theory of 10 the server that so yep emissions yeah and they're in it and so you're doing custom of custom rendering like discourse so if you do happen to do that you know which is OK I you know the leaves of view that doesn't have any children it is just going to be you're interacting with DOM there's no more pushing strings get normally when the only thing that we forgot the slides is this is secured by default you have to do extra work to other during the sense of XSS and a note that almost everybody is like the little jester snippet of custom rendering death has staff were they push a string and yet so what we mean by state by default is that you're actually the your your your views are just going to be your will you're you're dealing with a domino there's no more render buffer if anybody's ever have render buffer of 4 so inside of your render method you don't of random before you actually get the elements that belongs to your review right and so when you're doing manipulations to that Al-Manar adding children you're doing things like in our text right and if somebody's injecting HTML and two year you know by your application you VLB formant water something right using the browser is built in but you know security by in those arrests right that you created text the browsers can escape most work is no words does no new duties template in the building a database to now putting and we try very hard to be careful about it right now but when people submit new features really part to review everything and get we let quite a handful small now I think we're pretty good for a very quick to respond to the and summer defines the security thing but that's so that we give a good image did you give a good image example we get interrupted so basically the idea of this rewrite it will answer on like let's say you wanted to and you've got something that's going to get rented out and you wanna like let's say move screen I will answer element is a great place to do that now because you have the element reference right you can just say put screen and then it did answered element you can move it on-screen in your CSS transitions of this work for you right so that's going to be a really nice little primitive for animations obviously you know I loved Edwards thought I I think we need to do more to enable that import in an animation sporting core but just this basic thing is going to help a lot of people out and of course there's some the structures that we do as well but there's but something another thing to do happens slides that it on the other hand 90 minutes if if they could get we are also this is related to animations and and the thing about binding to the context of our findings at contextualize you interview is managing these strains would I have time to get in this frames so is the main thing is this we're going to be a belated gate data coming into the view layer so thin animation should be able to basically turn off the binding like let you I made terms that hollywood at the transition and we should be able to hold this the streams and not let them hit the views and in the template in will worst my national you animate and and then you kind of data so that would be really awesome but basically we've got a place 1 place
now where we can add a switch and now animating it's your templates are going to get the data mining updates when you're done animating turn it back on and boom though only get the last values right we won't replay every so this is really cool stuff and you know this this just comes because just now and I right so and so I will then say about simplicity that that that was simplicity I think so I basically the ideas with this rewrite of the view layer were actually we've actually written as a micro libraries and so like the idea is that it's super easy for you guys to step through the render path so it should take away a lot of the by the complexity in what some might call magic of what members doing to get your templates out into the DOM and so my hope is that it will be a lot easier for people to step in to you know render function of the inside and review step through it and be able to reason about what's happening right I think that's really important for people who get stuck in weird situations in the figure out what's going on so I think we're always always looking for better and simpler primitives in number and you can rest assured row is going to there's always gonna be an internal by you know desire underscore T noise finds and was simple solutions to these complex problems so that not only will they be fast because it got script turns out doing less work in doing easier things tend to be faster than doing more complex stuff right and it it also be good for the but abilities well so on another or something is that were speaking in support for server-side rendering of these templates as well so right now the plan is basically focused on of the SCO use case and less than the it has been referred to as fast who use case on and the idea is you'll be able to do this inside of node you don't need a headless WebKit or anything like that ideally the way this there's a little bit where we haven't done we have actually done implementation work we've done the architectural design to make sure that this is possible in some of the actual implementation work is setting up for request then you to review on but basically the idea is this doesn't rely on any fake non-implementation either like there's bound basically we will have a fake render a fake don implementations so H a number is not actually does actually use document that create elements but explicitly it calls to a helper that those great element for us and so the idea is you to swap out that help a layer and now when you're running your rapid site node that just go build the tree of dominance and you can call some like to strain your tuition method on the route you in that hierarchy and you'll get the HTML from your view and so there's some gotchas in some you know there's some constraints wrongness right like if you don't want to use something like JS DOM you can't do things like execute the bit insert element callbacks that might be triggering J. query functionality on your server but this is pretty much the you know 80 to 90 % use case for solving as CEO and so the idea is you you boot up no do you can like load up your application source code you can say go to this work URL so like navigate the application and you can say basically serialize the current state of the did the of the rendered output and show bled off the 2 Google but or embedded into your page that the really cool were all excited about that and of this last and at least there will be an optional decree dependency as well so we traditionally use J. also right now we really use japery primarily for that delegation and I we do use it still I think in a few places for browser blood avoidance in this mostly traditionally came out from the problems of like but you've got in each and you're there's a T. R. inside of it and you can't just like upended t or at anywhere it means that you can't just like build a fragment from a 2-yard needs to be inside of the of a table tagger T body right in my decree had all that logic in it which kept us from having to worry about the inconsistencies and browser bugs of across different browsers and so that was the main reason and it was really you know heavily a side effect of using strand template and so now with ation of ours we don't need J. pretty that stuff I so basically the only thing we need it for any more was event delegation and it turned out delegations isn't too hard to do so we just built in to the the view layer my collaborator so so so that means if you're on mobile perhaps we have to shed with the 30 K about if dependencies so should be good why not if you're using J. date there's nothing stopping you from using it's still in your application there's also really a lot of people don't know that you can actually do custom builds only take the pieces integrate that about in if you're conscious about file size a need to be conscious of so and those are really the things that the person I in the core team are excited about its 2 numbers I n I think I just wanna reiterate that what differentiated amber from its heritage of stock or was all our focus and all are bad on templating being the right tool for building complex Web applications today I think that I'm you know are goal is for additional bars to set the new gold standard for templating libraries in the browser and I think we're going you know with a little bit luck and some elbow grease were going to I think to achieve that goal and it's going to be on really a night and day a perform performance improvement I think from but you know today's number which is already springing fast due to a lot of the work that Kristen stuff that bond and I am really excited to see in the very near future should you guys AI and alpha beta build of amber with each signal bars and ideally you drop it in your app NEC see something on the scale of 2 to 3 X performance improvement without having to do anything so that so that's the goal were really close sorry I'm sorry I over oversold and under delivered new mistake and but not work were really close and really really excited and to give to you guys so so thanks very much only awake this could not be the ending Talk of the Day without 1 more thing so I just wanna posit something everyone here what would the world look like today the Web it on the world if we could build wet components now with the technology that we are at think a component but without a number 2 dependency function for and the
and the other thing that the the the kind of thing you know plan in this way the the and a lot of people agree