of you about how we can write idiomatic and perhaps they're both performance and productive we can see the cutsize clearly you can look them up on bitly idiomatic batch number that's the genetic bachelor but 1st with a heavy heart that suggest the elephant in the room what's an idiomatic talk without idioms they say time is money so I'm just gonna cut to the chase my name is lauren and I was born in the year of the Rabbit you can find me on the interwebs as you prepare for potato and you have when I'm not working on client work open-source I sometimes playful fancy 14 it's an animal that can be quite addictive but thankfully I have a little puppies although we keep me grounded in reality unfortunately she couldn't be here today to give the talk so you have to listen to me and said a year ago still living in Australia but I moved to Boston last year to work a document we work on a ton of embryonic traps as well as very many open source libraries encoding and bread on and in 2 days to be the end of my 1st year Dr. have to say it's been 1 of the best of the house and the best part is retiring senior and Virginia and so the talk to me Brian Martin Austell later if interested in finding out more they become speaking after my talk I'll give you a very limited edition sugar ParisTech now before we start talking about and this look at what it's like to the modern day it at MIT the year 2016 reactants sincerely gaining ground in mind share and for that reason some of its ideas some of the ideas have even made their and the other thing but despite how we've far we've come from early days modern the development is getting really hard I mean it used to be so simple right In the good old days all you needed to do was write some Haitian army of CSS slaps and J. Korean page news applied in our to 5 but these days we spent so much time configuring thing and we spend valuable time writing glue code and configuration instead of working out what matters for applications and you to make a ton of choices

02:32

for your finance stack which can be quite challenging and in some cases it's also really easy to build a tangled web of dependencies Stanley to alter the problems sending the fall victim to

02:46

justify and try to build your own nature framework mansoni down it has you have to make sure everything stays nicely together so why go through that but that's why we use an opinionated framework like amber right with Emma we opt into convention over configuration and problems are shared across the community because chances are your app is in a special snowflake the stock ended so given the amber committee had done the best tooling expands available we have things like the embassy alive and respect the warden 2000 Onsager's incredible number and all this will not have been possible without the use of the community I think it's fair to say that has the most welcoming and friendly communities up there are slack also always active and getting help is really easy there are few people in there don't seem to sleep so you have a question there is almost always someone available to help you out we now because Amoroso opinionated it also means there is an and a way of doing things instead of rebuilding the wheel and inventing a on Chechens we leverage the comedians experience in building web applications November 2 when all the release last year in august of quite a few things have changed since then and those changes are the main motivation we talk for example there has been a lot of discussion around data down 2 . this is a pattern for what we did a fully adopted this meant to make your apps year to reason about and maintain and the cover this in more detail later we've also established conventions that singleton state should live in a service that of a controller services are excellent for handling the longest state of things such as shopping carts beads and notifications no actions of been getting a little confusing and barely with the future introduction of grammar components these action calls will be thoroughly different although they may appear to be the same right now and we also know the control the going away and sometime in the future I'll talk a little bit more about what that really means and share and techniques you can use to ease the transition to a runnable component so in a nutshell things have changed and doing with changes can be hard these changes can be difficult to deal with because things that you see this practices may no longer be true and there is a general lack of updated information about the proper way of doing things by going forward we can expect to see ever become more closely aligned with just and for things to become more explicit and less magical yes these 17 features anionic play a pivotal role in every future for example you can already use decorators today using RW with X and have this is currently a stage 1 proposal

05:25

but it's incredibly useful for trying to code and the most obvious example is a computer property as you can see this is a lot nicer than what we have to do today a single weight functions are also on the horizon and I one-stage away from being included into despair these letters right asynchronous operations as if they were thinking not very controlled by promises or eating programming like I have all the time so for example an RDB debuts are the for making tested again describes how we might make use of a single way to clean up our test and as a result of this will be a lot easier to read and follow up generator functions are also already apart at least 15 and they're really cool they allow you to write cooperative code means can pause resume you start them as well as in the early and these are so powerful they should check out not to use that on American currency which I'm sure you've heard a lot of allows each right tasks to do things you have a really hard time replicating without generate function so as you can see many years the you're betting on jobs for and we're going to become more closely aligned with the latest as features meaning inviable to write more drastic and less and the I think it's fair to say that ever is the solution to justify the t and that is why I really excited to get the stuff because the emperor we no longer have to sacrifice performance for productive so this talk I wanna adult might have about what the and the way really is and hopefully be able to take away some ideas you can use sharing your apps body obese thinking about patterns and anti-patterns in modern in rats 1st let's talk about an important concept data on action that is when the core principles that drive the modern and breath by Architecting on applications in this manner we can build apps that are easier to maintain and reason about data dimension that describes the flow of data through your for example this is what your app might look like once struggle component and the fetch data from the API which gets in minds that pushed into your video store these records thing and pattern is actually used to run of component and Chou components and actions up to modify the data you might have noticed controllers missing from that I am and that's because they can be deprecated and removed in the future the controllers if the only work while the courting found a component could easily take the place of the controller and view as components are superior implementation this mean the death of NBC no but there have been a lot of confusion on this topic something addresses in more detail later what react taught us is that the biggest problems of the frameworks that predated is the very thing that made them popular and that is to we went and the changes are hard to reason about thinking can very easily cause an infinite cascade of changes if you're not careful when glomerular angle bracket components and the abiding become 1 way by default and instead of meeting the we'll send actions up to the data and this becomes a really nice functional labeling applications they're so reactive and easier to reason about by going to we bindings instead of focusing on re-rendering not multiple times efficiently through we catchiness propagate immediately without using all the cascading semantics of the two week and this the made possible by the flow and making renders peer and idempotent which they did not acted out again and principles to ask who owns the data only the owner should be allowed to modify and this is particularly important when the data is applications they which we should strive to keep that single sources of true for example here is a diagram of what a simple and n-gram might look like on a given round let's say that component is only allowed to show 1 child component at a time and perhaps some after doing some configuration in the Chao component we need to program we show the next 1 now where where the best is the to do that the if we follow that the united principle we need to ask ourselves who owns the data and in this case which configuration component to render is a concern component a as it owns the shared state of all the sort so in order to mutate the crimes that property we need to send an action of 2 component a we must avoid doing is meeting the concept in the Chao component it's a subtle difference but it means an apple is needed to reason about anything and you want to spend hours figuring out who's really what because you know there's only 1 place it's being changed but the action is changing the property anyway so why not just do it directly following you change the state of somebody else on your stealing and effectively means that the owner no longer controls the data they bypass the owners interface however in the future luckily for us these problems will go away glimmer components will be 1 way by default so even if you try to encourage that in the Chao component it would not fall up to mutate the concept property of the parent component and you explicitly opt into doing so with the new topic the another thing to note is that services can also on known own data and this is important part of the on action that and the and the programming model and this will be especially important to know when components line as singleton state must be moved into a service because components are stateless the so that an action that the other components that are coming what we do with controllers so as I mentioned earlier controllers on concluded that yet and you should try to avoid them and this you really want to 1 important thing to note about is that the concept itself isn't going away however the implementation is changing essentially the concept of a controller decorating a models still exists but is going to be implemented as a lot of components that you might still need to use a control

11:19

right now if you need great parameters for instance cases of bubbling actions but these will be moved around eventually when routable component land so as as I said before don't get to created in China remove controllers you should only do it when it makes sense and 1 I know was a straightforward implementation of NBC we had a controller and the only dedicated views in their of components and turns out that but the controller and he was doing could be better handled by a component and service the so the battle component was and a major difference you to keep in mind is that a component is not a singleton like its control counterpart but conceptually they should still do the same thing which is decorated model a simple concept is to think of a random component as the unification of of of what we call a controller and the and the things you can do today to make this tradition easier again this is optional you're not forced to do it but it's a nice way to make your application of that future the 1st thing you can do is to move your level template into a top component when model components i and it basically does most invocation throughout the city the reason it's a good idea to use a public component now is that it forces you to seperate your stateful singleton logic out into a service a transition to a service for the fateful that's on a component for the state was this is most likely to be future-proof and all make the transition easier once another thing you can do is to move actions that with data to wrap his actions are likely better located the around status will eventually live when model components on however actions to deal with you wire a presentation logic should still remain highly erodible upon or control there's some got just moving control actions Toronto somebody share we introduce a little later but 1st let's take a look at action

13:13

currently and trailer greatly actions can be a little confusing in number for example you can define a classic action on the first one by giving a string property of the action in or you can use and you saw action on the 2nd

13:27

as a best practice you should always prefer to use the new style or closure action a new action is essentially just a job function which means you can do things like make use of return values partly upon arguments and 1 while class superstring actions of very implicit in nature and making started about example it would be really to mistakes than that for string property can be difficult to trace where the action actually lives and another thing is when you use classic actions you have to remember to use and action components which are kind flight and to me it's kind of like sending your action into space because the Senate summary Hope something's listening to it you know who knows where it's going and the worst part is it never comes back before can but on the other hand you saw actions there 1 of my fear editions and the and the been available since 113 nonetheless the red closure action on the size and shape it's really just a job function the as I said earlier you have returned values and this is especially useful when dealing with asynchronous operations like setting a record you can return is a promise and then handle it from inside the compliant example you may want handle success or failure states the the news items phagosome by out of the box you can only use them if they're defined your controller as they do not bubble like classic actions to but if you wanna move your actions that deal with data to about this seems kind of lame so ardently G blue and I the little and you can use and it's called the action of by using raw action in place of action is that you've new-style actions that work with rocks and when the time comes you can search and replace right action back to action not recall controllers without routs could be created and it was a common practice in singleton state a services along with singleton we can use to match 1 with the a great example for service is a shopping cart or it can be seen for things that I think is the modern can extract logic into a service and then injected into the objects he came to a shopping cart and that's an example of a service because it can only be 1 singleton currently application and he needs to have long state throughout the life cycle of yet and you can implement part as little assigning a property of service unary where you could do more the but we must be really careful about this not to abuse services if your main reason for creating service is to use it as a global buckets avoid passing things around that's really bad signed should up instead we should adhere to data on actions up and not use a service for something that doesn't need long with state now I want to talk about embodying something inches close all of our hearts up None of my fear anything the number is the new helper implementation this essentially and 113 and it's great for expressing presentation logic for example this people harbor can be found in each member to focus on which we pretty much use for all acts and we're itself also should have a bunch of really useful helpers like concat passion get helper and the best thing about harbors is it basically that's you power your template again because embers convergent worse just being drafted Hopper is kind of just like a regular job function and 1 of the reasons I help so much that it forces you to keep your functions small and free fatty he can basically create 2 kinds of helpers this 1 is a simple 1 that will we compute every time the parameters change but for more complex means you can also make a class the topic which is essentially an amber objects similar to the ones we've already been using and this means you can do things like define computer properties on user service and so on for example this is a helper that looks at translations on local and specifically you might wanna listen for a change in the cow and and all the translations using the full version auto matically update even though the locale itself was never passed into the helper explicitly the the so if you might have noticed I use an observer in my previous example class the covers are currently the only place it's OK to use 1 because helper they're still lightly implementation almost any p and its lifecycle hooks not meant a when when those become available time in maybe we can use that to because that and the reason why copper is

17:52

is because it means a lot of you I logic can be moved back to where belong for example how many times have you written something like this this feels a little dirty because remixing data and UI logic to so 1 thing you could do is with them up into 2 actions right but now I have a problem because it can invoke what I'm about to show you demonstrate how powerful hope can be

18:15

let's say we had a hypothetical topical pain it will think to return value from 1 action and pass it along to the next 1 any passing value down to each function in the paper it is used a programming language a little before despite copper is essentially the same as the pipe operator which led to express the above which really invariance to read as a series of data

18:38

and this is a lot easier to read and understand compared to the 1st example and since we use ellipses so much a doctorate was a language we want language feature we want to use a member so the type helper born to let you compose small pure actions to allow more declarative templating In this example the item argument argument again gets passed to defer action and then its return value gets passed into as you can see Hopper is a really powerful tools to extend bleeding in your application and together with my colleague Martin still strong we build an Adam called Amber composable hoppers which contains the type of the and other helpers now the best our copper composability helpers can do things that might be more complex to express in your company using the type copper example again you don't need to define 2 separate actions called saving quit and saving clothes and see the block you can just composed directly that said you should not get too ambitious with nesting helpers inside of each other and when you template looks like this you're better off using a computer that I it can be very easy to get carried away with using helpers and much logic you 1 having the templates and comfort level and experience so please use them of caution and exercise best judgment but the point is helpers are better suited for dealing with you I am presentation which quite often is highly abstract and unrelated to the data in question In contrast to computer properties which are highly often coupled with the but the biggest 1 expression when we do need to perform computations what is the best way generally speaking we have 3 ways of doing so you can express it as a computer property user hopper and a template for user component hook each approach has its pros and cons solicited when we should prefer to use 1 over the other the compare the properties of 1 of the 1st things you learn about and we can be really powerful or really simple and a nice way of keeping some competition up to date but these are these can be a double-edged sword because during changes are implicit so in computer property recomputes you don't always know why did the best analogy for computer property is an Excel spreadsheet it would be really painful to some 81 and B 1 by placing event listeners on cell and getting a dominant use the computer probability declaratively expressed logic the changes automatically when the dependence change and I would recommend using computer properties for expressing business logic 1 of the best things that be a properties is that they can become usable macro and you can extract computer properly into macro by creating a function that returns a computer property you can then pass in any arbitrary keys are values into the macro and you can import it and use it like you would any other and like the ones that ship with computed and computed for a set of and this is a great way to drive code and test a business logic the another us something about computer properties is that they are cached meaning expensive work is only done when he needs to be done the basically computer properties are are great for business logic and the potential for reuse in other projects the update when dependence change but he can subscribe to these explicitly by specifying the keys at the computer prompt however it can be sometimes difficult to trace why computer property recomputes the helpers can be simple functions or plastic and you don't have a dominant but the symbols and about you know what goes in what comes out and just like computer properties we should strive to keep these pure and free of helpers are best suited for generic utility functions and are especially useful for you I logic for example with little Hopper repeats the block entitled it 3 times it's not really related to the business domain and all but helped is dry our code and templates so you can use this nice marker conserve copy-pasting bunch of feature in all x number of times another thing to note about helpers that and the doesn't guarantee that multiple uses of helper will actually run at any given point for example is capitalized Albert will only run once even though it used twice and this is a good thing is that means ever can optimize rendering but what that means for you is that fopperies must be carefully written to not rely on side effects you may also be surprised to note that helpers can even use as an action if that help a returns a function again this is really useful for expressing EY logic and we might use this tell the hopper to toggle drop down or pop over or something else and then you can use action helper like this which is a lot nicer than defining it another toggle is expanded or toggles displayed Apollo whatever action in your point so Hopper a great for you while presentation logic and they're inherently composable with some expressions and nested helpers and also really easy to understand and can be used as an action which is really cool and because they're still lightly implementations we sometimes have to use the service to trigger the recomputation in the class the helper component books are also a nice explicitly of handling computation for example when properties change from the outside we can handle it really evil however computed computer component codes can be quite tricky you say should prefer to use a computer property unless you know why we need to use a life cycle lifecycle

24:08

codes of best use when you need a side effect and they should be preferred over an observer for example you might have a component that wraps the tread library and which has some kind of random method you can use a whole collected receive matters to update the chart whenever new data flows into the components the this is a simple diagram showing the order folks that firemen components render or even and when using this these folks it's really important to think about whether the changes in your book are idempotent In other words you cook should work and how many times a call in the initial or updating case as you cannot easily controlled order and timing of these folks the for example with this this might look fairly innocent and you might wanna toggles some property after component has rendered but because the spoken side effects they will call you re render which fires that didn't again which we windows and so on until your browser explodes so in a nutshell lifecycle

25:06

folks are useful for replacing a variance and for controlling side effects however they can also the potential for guns as you can if in you can easily cause an infinite loop or cause sink issues if logic is an idempotent so please use them with caution and finally the age-old question should I use an observer this topic is then cover quite detailed already but basically you almost never want to use them to their level primitives used by inverse so you don't have to and as I mentioned earlier the only place it's OK to use 1 right now is in the class the because no life books are available to use it so please remember every time use an observer defined paradisal inside that don't do and please watch this we be out the top of the Institute I wanna close off the top by briefly mentioning what we can learn from game renders and what the future might hold for the way we build web applications game members are surprisingly summer to web applications this diagram shows the Reading architecture for doing 3 a popular first-person shooter there is an idea of a front end and a back end as well as an intermediate representation that sits between the final and captures the see the world and determine its what contributes to view this is then expressed as an intermediate representation which is then passed on to the backend raigo through high retraction they're like the x for open GL before reaching a graphics card and then your screen similarly the number out captures the state of your application and determines what to render attended through Haitian evolves and women then to Don API eyes and this is then given by the browser and rendered on onto spring but it games and web applications are so similar outcome games there so much more complex and graphically which sometimes run faster than way that the answer is that games are highly optimized to to make use of your graphics card and he was a bunch of tricks like occlusion culling to optimize for any performance I'm really excited to see the trailblazing work Chris tho grand awe-inspiring is doing you should fall for and in fact Mozilla's actually working on an experimental would render for servo that aims to draw web content unlike a modern game engine does an early prototypes of this render are able to render existing websites and hundreds and hundreds of times per 2nd which is very exciting the now I will go into too much detail about this but you can check this video for more information but I think we're maps have a lot to learn from rendering I'm excited to see is moving in that direction to optimize performance to summarize we looked at the state of JavaScript and we saw that embers gonna closely aligned itself to new features from years 2017 and beyond we then looked at what they did actually means and how to implement it by keeping in mind for the owner of the data and to avoid meeting data directly then include the error controllers model components and services sourced superior implementation and also played a part of controller which is to decorate a model we also looked at using the emperor action helper freezing right action in your temple and finally we looked at ways to pop abolished templates Hopper is a great are great we are performing you logic in a composable and easily testable way you can write own or you can use every composable hoppers to make templates more declarative I thank Dr. for allowing me to give this talk and for being in awesome his work at were organizing the wicked and the conference distance so please check out our website for more information once again please get in touch if you have any questions and remember to speak with me if interested and in working at war with Dr. or if any questions about the top now also give you a stick us should positive thank you all so much for listening thank you in the in the you know the reason

Inhaltliche Metadaten

With the release of Ember 2.0, many best practices established in the 1.x series are unfortunately no longer relevant. Lessons learnt from the React and Flux communities can help guide the path toward The Ember Way, with "Data Down, Actions Up" being one of the core philosophies. In this beginner-friendly talk, we'll discuss patterns and anti-patterns for bringing Ember applications into the 2.x paradigm, and discover how ideas from Functional Programming and game rendering engines can inform us. We will also look at the roads ahead to see what future versions of Ember will bring.