Bestand wählen
Merken

selecting Good Ember Patterns

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
fat fat fat fat
in and so as I said my name is brenda I am opponent in year forward at talks where we're at a lot of our kernel acts and tools and in other they're looking for evidence that come talk to me if you're interested in how can II however feeling that some of the code may be hard to read so there's a link to my slides available at talks stop when O'Brien dot com slash and burn dash select if you wanted to follow along and so I had that was built the number of the what off and who has use the select element and and and it Keegan the if you have been frustrated by the select
element a number before right why hands and keeping my way up but I because when I started to a number of a year ago this was the bane of my Amber existence it haunted me from project to project and consistently and gave me a lot of trouble so about a year
ago that this is how you did a select element in number but it is a built-in view that the did a little something like this and it didn't
magic and made a sort for you and so that it can be really good at a lot of the times where it reduces the overhead that you as a developer and need to go to to do common tasks but I think we need to also be where magic
sometimes basically it's great when it does what he wants and and then when it doesn't do what you want it's extremely frustrating the so the 1st thing that I
found really difficult to deal with with and that select is the fact that it was to be bound by default so when we make to a binding and this is a
simple example where I say in your select elements the and value in the selected is reflected in the UI elsewhere those values are coupled the two-way bounds unchanged to 1 and the being a change to the other in a lot of situations where you have some kind of isolated information this is totally appropriate in a good way to go and it simplifies things a lot but I ran into some use
cases is actually something that is a spilled where the select state didn't match with what it reflected in the walk here's an example of a filter that when a choice is made the select images update a running list and elsewhere so to a mining was an appropriate there and I had to jump through a lot groups basically wrapping my area and members selected some component to sort of and simulate a 1 binding and I'm not have my dad leaking out
the other thing that I found really difficult was I had no idea of what it should know what Don this thing was actually rendering I had a simple request to make some elements in a select the fabled and part of the solution I found and here's a quote
from StackOverflow this is a simple approach for rendering a disabled option with Amber selects but basically you have to reopen the built-in view of and and had the support for disabled at the new developer that's a scary thing to do to go kind of modified and extend core code it's not super approachable and if you're used to writing a selected HTML uses starting actually on there and so this is a bit of a barrier the so like I said
and this haunted me on several projects that I worked on is a real quote from fire and Amber JS chat at 10 and this went on and on and on and on light in the tunnel later
in the year when I found out that inverse like is going to be deprecated and so I was happy about that and I took an interest in learning about what my alternatives were basically so that's what I'm here to talk to you about today and is not you
about building a better selects and with modern ever patterns so
we're gonna use really out so that we have almost complete control over what we want to do were going to use the data down actions of pattern and along the way we're learning about a lot of cool new and features that have landed and sense that select element was deprecated also at the so let's take a look
at 1st building of that with plain old HTML and if you've ever done this in HTML it should look pretty familiar we're just getting use I'm a little convenience with so buyers and and using each loop to iterate over options to make that a little less tedious so this kind of assumes that you've got I again array of objects that you're going to use for your options list that can come from from a static lists or a model in your have ends were just access something like uh you doing a dropped and languages we use the language code for the value and we use a language name for a and the label on our options the and so
that's what this is data down actions up part this is a a a kind of Montrose in every lately you might also see DDE you UN confusion non-member colleagues for that happened in in somewhere a so what basically means is we want our data flow
to the and sending data down like into components into and stuff that were rendering and then we want respond actions that like bubbling up so this is actually really great because it's similar to what you might be used to dealing with if you're just using little JavaScript's origin query with a select and how we usually deal with form elements changing we respond to an untrained action in that that action bubbles appear on so that's exactly what we're gonna do with our relational rendered member better select so what is that look like and all we need to do really is add to existing code this on change uh actually and we can tell that to fire an action and political call that action language to change and along with that action I can go ahead and send the value of whichever option dispatched the change of ends so this will be in wherever template your rendering the selects and then in the controller or a component of the later you gonna catch that action and grab the value of the parameter and then you can go ahead and do whatever you want with it so in this case I'm just going to use so I'm set a property called selected language code and to whatever value and you end up with something like this so I put my mind wench the code sends action up and then I'm handling it in this particular template by just displaying value so that's the actions of part
of this let's also makes recent action I doubt down so the most common use case for this is usually when you once you and send in something like an initial value when you get to the pages that selects already holding some existing value you also might wanna send out a down if for some reason this updates in another part of your app you can also do the same thing so and in regular rates you mouth we indicate that a select elements and an option is selected with the selected attribute the and this is 1 of key attributes where uh no matter what you put in um quotes you can say selected equals false and you'll still be selected it's just the presence of it needs to be there alone buy it itional Mars is sophisticated enough now that we can do something like this where in a set the selected actually equal to some Curley's and you can write a really simple is equal helper here but just compares the 2 things that you give it and will this is equal helper it I the currents language in the iteration overlooked is equal to the selected language that were passing n and that's going to return a Boolean and it's smart enough to know too and either render out that selected atom you're not depending on what you're currently evaluates to on know this is powerful and some of you might have remember that not too long ago any time we wanted to do a dynamic actually we needed to use the bind attribute syntax and this works out OK most the time of something like the value is pretty easy to simulate with find Nash but what if verified replicate that selected and how would you do that and that turns out to be not a straightforward and so having the power to evaluate stuff in mind here is really awesome so that my friends
is dynamic attributes so by that you would is actually deprecated way back in the number 110 hopefully and I don't think too many of you are back there but I so is all backwards on the side of I think my nephew something's we're with the version because of a new feature can come before the deprecated remove or maybe at the death of word that about being nice of them and we removing them so that they don't actually it's are available as a 110 and bilateral actually was deprecated 113 encourage you use those because it gives you a lot of power and to do some simple logic within your templates and cleans up the kind of the ability of your templates quite a bit the the so the Panel
together we had something like this where I'm able to have an initial selection here but I can I past that initial selection and started down and I can make changes with actions that and you'll notice that that original value does not get mutated by my select anymore so there's really analyze all sorts of flexibility to manage a data flow as you see fit so remember my 2nd problem dealing with selects with that has the disabled option this trend that again to be pretty straightforward with our new tools and so let's return to the idea of having a model that we're using to and generate our select options a really easy way to do this is to set a computed property on your model that evaluates to a boolean to use a flag for something being disabled are not the same as during the example of fruits and let's say we wanted for some reason you disable all the fruits in list that are yellow we can go ahead and use a computed property that such that flight and then we'll use a dynamic actually together to say I'm disabled is equal to that for a dot is yellow properties again this is clever enough to know whether or not to display that actually based on the Boolean value of what your Curley's evaluate but so something like that no real
friends with a lot of so this is great
and we built something that is way more flexible we have complete
control over the DOM and
the only drawback to this is we've
lost the reusability of a magic and and the sometimes it's actually nice to have a bit of reusable code that you don't have to go through the arms longer avoid writing out a lot of someplace for and so can we have a kind of happy medium between having code that's very flexible for us to use and having pulled that's reusable we absolutely can but
components commit the as well a favorite images ever on the internet like that but it that's my what screen background and the happy every time I at of the if and so yes we can have it both ways and a great solution here if you find yourself reusing the select code within your apps and let's say there's multiple places around and your apps that you need to have a selector to and choose the fruits of that something where component is really powerful CU and extract that had been away into you and your own reusable bit of code so without
actually don't have the to manage to a change what we've got into its own component were going to move it into its own component file and the and go only thing we need to do now is make sure that that action actually bubbles up out of our components so they're kind of like way that problem is here is used to doing this and is by a within the components of the blue code were going to catch that effort to change action again and warranties the stocks and actions and its you send that up out of our components the and then wherever rendering the components and we need to pass in the name of the action that we want to be bubbles so I usually if you just go with the same thing that straightforward and then you're in that the scope you gonna then handle and the bubbled up action and since this is a good pattern but it's actually 1 of the things that I found really confusing and when I got started having an an action named in just as a string um was kind of hard for needs to keep track comes because it does look like another property of time and and this also starts to bite you when
you started nesting component several levels deep because you have to bubble actions up and up and up and up and up and
it's it's yet the pain in the butt and 1 of the great tool us but passing actions wasn't really known as an easy process the luckily we have contractions that so this
landed in 113 available in any version after that I n
the wet contractions work is this allows you to and instead of having to bubble up in an internal action handler and you're actually just going to be able to wherever your rendering the components and so you can in instead of a the z of giving it a named actions are sort of the name is all mismatch there you gotta tell it that I want you to use action called update for it that I love this because not only is it when more explicit in your template what's happening here you know that this is going to do an action run function and you also do not have to bubble this on your own it's just gonna look for anything and in that they're the so called update fruit and it's going to be able to take on the values that you sent out from your deeply nested component so you can go ahead and start layering things in and as like many layers between as you need and that's gonna bubble up without having to repeatedly send action you just needs you and path of the name in your templates so this is really fantastic and again I think a lot more readable the so that's the action when we've turns into a component how about doing died down once we turn this into a component so if don't actually pretty similar but that were so then iterate over and our fruits and this time we'll just leads to wherever the template of the component is called where in that array of fruits and the pass in the selected fruit I'm as an initial value and we haven't really had to change much of our template were just making sure we send in good data but what about something like this the what if we wanted to make that disabled key something dynamic and it's conceivable that in multiple places where you using this for it selects that you might wanna have a different type of fruit through the disabled so I you know what if I wanted a pass in disabled and I t is rare I got this these yellow hard coded in here so previously whenever I needed since you dynamic you look up like that resolution is usually to render a nested components so instead of just doing that option straight within each loop I would set up something like a efforts selects option component and this is going to allow you to and they can actually finding within that the option component and you can do something like set the value of the disabled um attribute with a computed property in that 1 and you compare the be able to dynamically look up that disabled key with this line up here were were and using Amber got that with the this target group in the stock at disabled key so this works but it's got a lot of overhead just to get a dynamic he you up pass a lot of extra stuff in so that the component knows about it gas and everything in there and you templated is a little less readable and then what we're used to seeing which is a simple options so is actually a really fantastic solutions of 5 and
that is our friend you get helper and so this landed in amber 2 . 1 the and the way that this works is is is going to allow you to kind of bypass all that extra work to and get a dynamic IP lookup and you can do
it right in your template here so for the stable that's you I using get helper I give it an objects and energy and it's going to go ahead and do that never got that under the hood and I just for that in their nicely without a lot of extra overhead on my part and now I'm free to pass in a dynamic and key to my component for so the we built an awesome that an actions of select component and that's tailored to our act but still really flexible but if you
wanted to and binding back and I know that I'm to a binding of kind of really bad rap and I think maybe we all got burned by early on when I framework community was super gung-ho about that but but in some cases like it's a it is appropriate if that it is dealing with uh a local at state and you actually have state that's tightly coupled sometimes to in binding is just of the easier better choice for that so and there's actually really great weights you again have the best of both worlds and that is the new helper
so this come along with closure actions so it's going to be available anywhere that close reactions are so that's going to be and 13 and the way that that works is instead of passing in permanent action you're gonna be able to just say hey I want you to take this value instead of so you look at the top here you'll see in
using that on change closure action syntax again but this time instead of putting them an action name of function name and there are no actually just tell it to me you take a value called selected for now we just need to do a little extra work here to get this to kind of play nice with what we want but right now existing code sends in a free objects the data down part their actions of this something of value so this isn't gonna work really awesome as a two-way binding because are member mismatch between the data that we're using so we really want is to be able to stand up if through action so that I can be properly mutated with some piece of data of the same format but the freezing work around here or what you know unable to do it is this is sort of like the power and flexibility and that you have with actions is instead of just and letting that bubble straight up you can go ahead and catch your free did change action within the component and you can do what you need to do so here we're going to take the value and we're just gonna do look up on by Aidid to find the corresponding objects and then we'll use the closer action and kind of inside here instead of doing the start send action because an aura action is passed in as an active we can just go ahead and use of this object look up for whatever output and on change and that function is the run they were also able to pass selection as a parameter up to that function so what a power what the flexibility when you're working with closure actions and in fact it's very used to feel more natural and to having no functions JavaScript's so this is fantastic putting that together and this is a quick example of using the same component seeded do 1 layer to a binding so the culture German binding adventure and same code in the component but as the and consumer of the components you can choose what your dad flow and needs to be just by passing either and any function or the new helper with the value that you want me to really out some what are we done we've built our and
select component that uses custom HTML we you allowed completely Custom data-flow as we see fit in or out and we also learn about all these really awesome powerful features and like dynamic attributes close reactions and needs and again helper the about
altogether and I say you have a I'm selects in your app that is flexible reusable in modern and that is exactly what your Amber absent things in your and perhaps should be and so it could play choose your level of abstraction here and pick whatever and whatever is getting the need for you in your apps and as a select code it's 2nd and component as you see fit of and like do whatever you do need to do that works for you
but as an example all of our internal are built in amber so we worked on in a little reusable component that sits on the that 10 content select and so some the features that we wanted were and allowing the options to be sortable allowing multi-select versus single selects and this handles that it doesn't handle everything and on you know there's a lot of things that you can make a select do but I think choosing the right level of abstraction for your needs is from a great profit we can follow moving forward interacts so how did I figure this and this is your friends on average as
what the release posts every 6 weeks are really fantastic for keeping up to date on some with evolving um things within the framework of this is where I found out that the inverse what was going to be deprecated and I started reading up and getting excited about new ways to do this and I keep up with this whenever a new post comes out and stuff that this framework is evolving to do and I really think it's fantastic i've seen in just a years time aiming at the paintballing is actually getting solved and even this morning hearing about the vendor performance and gains in limits to like that's been 1 of the other things that I have been having trouble with and just to see that from this level of some action in the community and the core team to and bring us what we need and continue to grow Amber is really fantastic so do encourage you all to keep up with this and hopefully you'll get excited about you ever features and can be incentives to upgrade your apps in keeping up to date and so I leave you with that I hope
you can all take away and stuff from here to build Austin select elements and hopefully other things within your app thank you so far
Videokonferenz
Rechenschieber
Code
Trennschärfe <Statistik>
Zahlenbereich
COM
Binder <Informatik>
Code
Kernel <Informatik>
Sichtenkonzept
Trennschärfe <Statistik>
Existenzsatz
Zahlenbereich
Projektive Ebene
Element <Mathematik>
Task
Konfiguration <Informatik>
Overhead <Kommunikationstechnik>
Quick-Sort
Schnelltaste
Mathematisierung
Content <Internet>
Digitalfilter
Information
Element <Mathematik>
Default
Gebundener Zustand
Matching <Graphentheorie>
Gruppenoperation
Mailing-Liste
Digitalfilter
Element <Mathematik>
Data Mining
Schnelltaste
Flächeninhalt
Trennschärfe <Statistik>
Mereologie
Zusammenhängender Graph
Bildgebendes Verfahren
Auswahlaxiom
Aggregatzustand
Bit
Konfiguration <Informatik>
Reelle Zahl
Chatten <Kommunikation>
Element <Gruppentheorie>
Kategorie <Mathematik>
Projektive Ebene
Speicherabzug
Maßerweiterung
Softwareentwickler
Code
Feuchteleitung
Konfiguration <Informatik>
Mustersprache
Inverse
Äußere Algebra eines Moduls
Konfiguration <Informatik>
Gruppenoperation
Gebäude <Mathematik>
Formale Sprache
Mailing-Liste
Element <Mathematik>
Code
Gruppenoperation
Konfiguration <Informatik>
Objekt <Kategorie>
Loop
Informationsmodellierung
Formale Sprache
Trennschärfe <Statistik>
Mustersprache
Gamecontroller
Parametersystem
Konfiguration <Informatik>
Kategorie <Mathematik>
Template
Gruppenoperation
Mathematisierung
Formale Sprache
Systemaufruf
Abfrage
Element <Mathematik>
Datenfluss
Code
Gruppenoperation
Konfiguration <Informatik>
Differentialgleichung mit nacheilendem Argument
Bildschirmmaske
Formale Sprache
Code
Mereologie
Gamecontroller
Zusammenhängender Graph
Bit
Konfiguration <Informatik>
Existenzaussage
Gruppenoperation
Formale Sprache
Iteration
Zahlenbereich
Anfangswertproblem
Element <Mathematik>
Mathematische Logik
Homepage
Code
Leistung <Physik>
Attributierte Grammatik
Leistungsbewertung
Schnelltaste
App <Programm>
Template
Gasströmung
Strömungsrichtung
Bitrate
Konfiguration <Informatik>
Formale Sprache
Mereologie
Attributierte Grammatik
Wort <Informatik>
Boolesche Algebra
Konfiguration <Informatik>
Kategorie <Mathematik>
Default
Gruppenoperation
Mathematisierung
Datenmodell
Mailing-Liste
Computerunterstütztes Verfahren
Gleichheitszeichen
Datenfluss
Quick-Sort
Gruppenoperation
Konfiguration <Informatik>
Zeichenkette
Informationsmodellierung
Twitter <Softwareplattform>
Trennschärfe <Statistik>
Fahne <Mathematik>
ATM
Boolesche Algebra
Modelltheorie
Bit
Konfiguration <Informatik>
Gamecontroller
Code
NP-hartes Problem
App <Programm>
Bit
Kategorie <Mathematik>
Güte der Anpassung
Gruppenoperation
Mathematisierung
Elektronische Publikation
Code
Gruppenoperation
Internetworking
Komponente <Software>
Multiplikation
Weg <Topologie>
Mustersprache
Zusammenhängender Graph
Bildgebendes Verfahren
Zeichenkette
Touchscreen
Komponente <Software>
Prozess <Physik>
Algebraisch abgeschlossener Körper
Gruppenoperation
Ablöseblase
Zusammenhängender Graph
Gruppenoperation
Design by Contract
Übergang
Proxy Server
Subtraktion
Algebraisch abgeschlossener Körper
Gruppenoperation
Anfangswertproblem
Netzadresse
Loop
Komponente <Software>
Multiplikation
Korrelation
Datentyp
Zusammenhängender Graph
Gerade
Bildauflösung
Attributierte Grammatik
Lineares Funktional
Schlüsselverwaltung
Diskretes System
Kategorie <Mathematik>
Template
Gasströmung
Quick-Sort
Schlussregel
Konfiguration <Informatik>
Design by Contract
Gruppenoperation
Schlüsselverwaltung
Message-Passing
Gewicht <Mathematik>
Template
Gruppenoperation
Gleichheitszeichen
Framework <Informatik>
Objekt <Kategorie>
Komponente <Software>
Energiedichte
Schnelltaste
Trennschärfe <Statistik>
Mereologie
Zusammenhängender Graph
Overhead <Kommunikationstechnik>
Auswahlaxiom
Aggregatzustand
Parametersystem
Algebraisch abgeschlossener Körper
Schnelltaste
Lineares Funktional
Konfiguration <Informatik>
Algebraisch abgeschlossener Körper
Gruppenoperation
Mathematisierung
Abenteuerspiel
Gefrieren
Datenfluss
Abenteuerspiel
Code
Gruppenoperation
Objekt <Kategorie>
Schnelltaste
Trennschärfe <Statistik>
Mereologie
Dateiformat
Zusammenhängender Graph
Leistung <Physik>
Funktion <Mathematik>
App <Programm>
Diskretes System
Algebraisch abgeschlossener Körper
Abstraktionsebene
Abgeschlossene Menge
Datenfluss
Code
Gruppenoperation
Übergang
Trennschärfe <Statistik>
Zusammenhängender Graph
Datenfluss
Leistung <Physik>
Attributierte Grammatik
App <Programm>
Abstraktionsebene
Gruppenoperation
Framework <Informatik>
Web log
Konfiguration <Informatik>
Übergang
Gotcha <Informatik>
COM
Rechter Winkel
Mittelwert
Inverser Limes
Zusammenhängender Graph
Speicherabzug
Videokonferenz
App <Programm>
Trennschärfe <Statistik>
Gebäude <Mathematik>
Dienst <Informatik>
Element <Mathematik>
Ereignishorizont

Metadaten

Formale Metadaten

Titel selecting Good Ember Patterns
Serientitel Ember Conf 2016
Autor O'Brien, Brenna
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/34699
Herausgeber Confreaks, LLC
Erscheinungsjahr 2016
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract What's in an Ember element? For a long time, the answer was two-way data binding, observers, and an obscured DOM, along with the challenges and bugs that went with it. Today, we can move beyond the } helper and render this common UI element using native DOM and one-way data flow. Through the lens of the select element, both as standalone code and a re-usable component, we’ll learn how and why to use good Ember patterns like data-down, actions up (DDAU), plus some handy new Ember features like closure actions and the mut and } helpers.

Ähnliche Filme

Loading...
Feedback