Bestand wählen
Merken

Animations and Transitions in an Ember App

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
in the language the and I think the the the of high-handed and the
as time said I redundant that as an mobile and just about all the ball built a number of being used in a small number of a growing number of living of this is the facilities and it's probably 1 of the oldest and perhaps still in continuous evolutionary use because I started I struck Chrome when 6 I C 2 but
yeah as a and it has a long long remember
all the way and it's running Canary right now so that has not been easy you my question my sanity it because I wrote I kind a highly critical application on the emitted technology but I do think it is very often it's so that it stays now to see how in the media is now also you know we have I started using it even in its primitive state because I knew I was gonna write something very might give my scrappier by myself and I think a lot of other people of the same way and realize that together we can make something all of that so really gratifying stuff so and it's like today about the animation is and transitions and how those fit in with replication it's not obvious if you just come out of you know an introduction to amber kind of tutorial it hasn't really covered with little losing trainees of amber that you're going to have to interact if you want to have these kind of more dynamic behaviors so you know 1st I had a meta-level my my talk here my slides are amber out you can follow along could dissect them and actually really should they take the other the source to the things in the show is actually you're on your own time you could do it in the cell is actually a really good way to see what I've been doing you know J. feedback for me for everybody so other ways in the years of these bands in your application and and as I said my Apple has evolved over a long period of time on the phone long for 3 years is a a is into history of so the long time since i've action just start afresh member up steps so and Sunday night when I realize this really start putting it I yeah I said well I'm just a red you grab that would be my staff and I have to say I was so impressed at how easy it has become and a shout out to Joe but we just talked into stuff on you this is done embassy alliance though the broccoli and use the idea 6 years 6 chance pilot and I never touched any that stuff before Sunday night but I built this fall out from then to now and it went pretty again so I was you know the promise is real of so when we talk about putting energy into application I had to not talk about this very this is cool great indirectly side but it does not really much in the way value but it's like in the end and there's nothing wrong with that but if you were so dissenters since there is every day by up to 60 seconds to load you when you really complicated after you know so we value this is like this on the web for a long long time and by building new about putting based on the web if you're talking about that that's CA 1993 in Web animation right and so what I'm really talking about our our a new way under the way
put physical metaphors into computing right we can even talk about user interface design without using physical metaphor it's we talk about Windows time of boulders none of these things are real they're all metaphorical and that's the only way we can we as human beings can relate to something as we factors computing now what was it what was new in Iowa 7 was the big design flat exactly and so flat is this repudiation of being skeuomorphic they skeuomorphic is when you're taking it incidental things about an older medium and copying them into a new medium where not necessary but the just the comfortable right so when you know they're literally reasons the virus which very very skeuomorphic very texture you know that they're look like leather things move like their physical the and I was 7 alliances be repeat repudiation of being you more red and it's not just Apple to design trend in red you could've argued was it was ahead on being flat and I would argue though that were not actually repudiating being skeuomorphic being physical were word dropping some of them were gratuitous aspects of that which is things like the rich textures and some of the shadows of things but were actually keeping something that's really critical about being skew work in that I now ask you having appearance this Q of
behavior right so if you think about browsing never appear on your mobile device right why does it have momentum right moment in the physical thing it's not something that is fundamental to catch computed right we put it in because it it tweaks that little primitive these of of the brain that understands how the world suppose to behave and makes it just feel very natural and is a huge win feasibility and you that's just skeuomorphic as having a fake leather texture and arguably more usefully so and so these are the kind of behavior is what you have animations in physicians' applications that have a real payoff for users and I'm going to jump actually to another example of that you know another kind of behavior we see a lot a mobile device is the navigating to distill like this to we fly right and this is so simple but it's a very powerful metaphor that helps users not get lost who are again Our primitive primate minds they're not bill around and altered to perceive things just instantly appearing in easily disappearing where did they go where they come from or they don't go or come from anywhere I that's still metaphor we're still talking about of course but we need those metaphors to relate and in many nice certainly we in this room because we have an unusual amount of practice and years of training the think about abstractions to think abstractly and were kind of freakish like that most people don't encounter that underlies they don't ever have to spend as much time pushing around imaginary objects as media so and so the more you can related to the way they are the minority relates to physical things the better and so something as simple as this pattern that we see see again and again in you know your basic I was out powerful because there's a physical place so I know on go back to the left and so that piece of my mind that's super optimized for keeping track of where things are and space is held me keep track were the application if this is the invasion was gone all the functionality could be there I would is instantly go from screen to screen but he would get lost much more easily and have so that's the kind of compelling reason why we book animations and physicians into applications so on let's talk about how we have to do this in in in specifically and in amber of there's a couple classes of challenges into Guinea's in we can kind of emissions into 2 broad categories in a number of and like much of it all comes down to the centrality of routing so if you're talking a something that's within a single rout that's what I'd call the simple case and as the the kind of amber component component capabilities evolved they've gotten powerful enough to do really nice things but within within a given wrapped in animated so in this particular case you here is is the template for what I was just showing you right I made a little component called it changes so you could say any changes of ours imaging is a minutes and so I can write my template in this way that is very straightforward and clear It's not put a lot of action markup it's not flooded with CSS is an this other couple classes so I can see so we're seeing the times in which a moods because of styling them differently and so you see I've actually achieved the thing that CSS claims you can achieve that is the aspirational ideal alright which is separating your constant for your presentation and there's nothing in here about how I'm in a meeting it right the fact that I'm the fact that the hours and minutes whereas the moods fade that that's I CSS file and I'm not even going to go into the states of public is that standards that that's number specific that's just but in a time beta head against the brother to make it do what you want write and is that is is pretty but you know it's got this come a long way but there's still a lot of talent that's the cost of living on the cutting edge 3 in this particular case of played with 1 got shit and in it to make it so but 1 and show that so the component itself that enemy changes component it's template is also a simple it's just it's just the structure for having some disarray out and it's got next in the next value current died that's the tricky that solitary remember you not but the just can't came off of his EMBA 101 tutorial how would you actually show the old and new values of something bounded template the same time this is a very simple pattern for doing that you were literally can have a computed property that when you said it it's going to set the next value this category of the animation and I when emissions done it's gonna so the current value and so just by within the components of the component that had memory right the component here remember with the previous value was became the rendering it as current and whilst rendering the next value as next and then it we can find out we do in the components is toggle an animating class any emitting classes that's going to tell the CSS initials drop that job that Dieudonné vertically so that we get that nice little slide there an ancestors just open it said you know CSS 3 translation look at you what could transform translate and 1 of a kind a got she's not only due the foresight use annotations you'll set an overflow hidden so that the the letter the the numbers the falling off the bottom disappear and they won't disappear because welcome to the world of having accelerated context sources non-accelerated context the rather than the trick is you browsers can do these really clever and now any even on mobile where they don't have as much horsepower but because they're pushing up a lot of work out to the big sessions of the GPU right on to accelerate graphics and that has weird interactions and parts your pager accelerating finds art so can the 1st go to hack is to actually transform everything even if it's not moving so it's just a transform 0 the forces don't accelerated context and then you will at those those also inject properly so for in order for me to hide those numbers but the did that's hiding them has to also be translating those not going anywhere so that's see India I covered all that stores so now thinking about this panel annexing current this is the simplest possible case of that were just get a single value tracking but if you think about using this you know there's no reason that my value can actually be a whole model right there's no reason my component to have a memory for the previous model was the current model and be able to ensure both simultaneously so that I can between them so the powerful pattern and and as I sing this this easy facet of animation is very component Izabal so there's no reason we can't as a community good and good tool self of these kind of things so under the kind of reusable very basic component that by itself is not impressive but that enables us to do more interesting things is I've got a an element here and I have this sources which on is literally a component called measured box and I have a bad habit of measuring this red boxes solitude so far and so if I put some title here in had some text but you can see that my measure about steps using bindings to tell me exactly how tall my element is the distance between those 2 red lines so simple but
once you this is a very easily Backus of component you could dropping intently where n is going to create a bond property that you can use to observe the size of something that's important because a lot of the things that's CSSA meetings offer us don't really do they don't deal with high auto you know if you want economy a lot of a lot of properties if my something to go from visible touch from gain in anyone and its height you can just say go from order 0 you have to give it a high that is it's where the most annoying things about see if the family so this that's is actually take advantage whatever's breed out which is tracking in binding it to do that for us so we can actually binds that and always have this to know what the current state of that pattern is so that now as is going to build on other than the properties where we've got a form and we wanted to grow nicely when we change things and right and do at all in it without messing up their making art God the template complicated so really just have a tag called growing box that rats that and so just by dropping in growing box putting everything else inside of it so I get this behavior here no matter what I change inside that box it's gonna smoothly enemy up and down and so here's another example bombesin primitives you know we we we want to have a form that adapts and so in areas like this I'm using an animated if helper right so I literally have a helper that looks like and this if required license show Minister otherwise feminist right and so then in my control writers have a computed property that says well if if the renting a colony licenses of like they don't and so I can express very that you my controller only needs to know about domain things only needs to know that you know about the Khot Prize license them as the lessons it has a computer property under directly into in my my view there that template like actually gets expressed how to represent each the situations and and a couple of nice things about this you know and they're still stateful right so the started entering a driver's license number and then you act he so I checked I wanna buy clocks in 1 car at the data is still there really powerful studies get for free because Amber is you duality realities of data binding so there's a lot of opportunity to do clever clever things of without a lot of extra stuff in this case I'm talking us all the seven-time was is the kind of simpler case of animations within a single row and so moving on to antigens between routs is where it gets more complex today it's a very odd today it's now possible it was used to be kind of intractable a super and now that we have a fully asynchronous router with some good books you can do a pretty nice transitions wrapped around but you're not going to find a drop in library that solve this problem for you you know you really touches every aspect of the stack you need the cooperation between your views and your controllers and your edits and so I think this is an area where you know amber overall as we evolved to what will be the amber 208 yes yet and is the area where this support for this kind of stuff are you making a transition a first-class objects with the with his supporters and behaviors there's a place for that in the core and it's not there today but I can show you what we have what we can do it but we have this acted quite a lot so this is back to my example of sliding over and you can see you are alright so so this is actually a parent a child transition right so when I go into a detailed record I'm getting a new your out that person and parentage nested routs are actually really great really supportive antigens like this because the parent rout stays rendered so when I come in and render this paragraph but what I'm really rendering is it is a view place as wide as and on the right hand side has it's out right now there's nothing in the that because I'm a understand the paragraphs index right but when I jump to a detailed view I'm necessarily rendering that would just like I would that stock there's nothing specifically animations the only extra check is that my king my pair controller has a computed property that's watching to see a minor detail about or not just like the Uber's binding itself the application which always has a property so you are hearing and benefits of folks one-class straight into so the 1 passes enough to use the CSS rules to trigger the transition so that's that's enough of the story to explain how I get into this child around so it all just works it's really nice is because this kind of hierarchical pattern is very common you can actually find that it covers a lot of the Union about that fate the trick is they get back out of it because if you did the natural thing in number and you just transition to your paragraph again the child or do renders immediately it's so you would disappear before bedtime slide away so that's a this is where we need to take advantage of a book that you might not otherwise be using which is the will transit will transition action can on on Europe I so if we look at this is the root for the detailed view the child view right it has a simple model it's finding my simple person it has a back action that transitions back to the parent and it has this will transition him and so this is when it was a place where there's like in is probably 1 gnarly snippet of code my presentation you might want to no snag in use Fig. earlier this stuff because I was like This is the think about you know we basically want to put stall transition from happening long enough to away boil it would do in certain cases right so for example if before transitioning within art within our found out to 1 of its children we don't necessarily that's does invoke are in the back if a chat in a for similarly for transitioning from our child out to something far away so actually affect it can do that right if I'm looking at 1 of these details of people and I wasn't to a wholly different slide is the different highly I don't wanna wait for that slide back and then jump right there's no point to which is why I we we detect that this we can actually see if the destinations beyond our parents we don't do it because go but if we're actually doing it is is directly from the child to the bank then we had to tell the transition to abort and Canada glue stop the outer it's been which is going to do nothing and we're going to actually have you wherever mainly telling our controls the such slide back and were waiting for it to finish and then restarting the transition so yeah this is a little bit of a article internals because I think this is I mean will transition is clearly a public API right but all of the steps I think another area where as we as we as a community of all are at the eyes I think this is this is the kind of stuff that I would like to see get better and I'd love to hear your ideas on on ways to make it better so but it it has it has you know it as a whole but in this feature that what you got that straight it's still cued number in the sense that you know I can go to detailed view if instead of hitting my back when I get to just use the back button and it will work right because the ring's value It's and so a similar to that I'll go to my is my action a lasting peace the demo my life but then shows as a modal right and and it's a modal that behaves the way a modal
should in number at it has a real state in the l I can dismiss over the back button and it's truly model in the sense that it's not actually tied to this right and if you look at my in you
out there I'm using very grant programs you know bleeding edge teacher pressure but the modal of modals are actually a really nice natural match with great brands and I'm still thunder varies in other
programs ballots and yet so I won't go into too much it's all but the thing about them is that they can a bypass routing go directed you controllers and so you it is have a control it's watching is my modal patterns should I use to pop up in its so I'm render into a named outlet that's high enough up in mind on free it's going to go in the right place so this attitude amber features that you might not think of as related to emitting a modal its name doublets in great grounds but together they make it really nice and so because it's truly modal I can actually go directly into this model state from inside an active here and is that the
in the look at that so and and I did that all without kind of polluting all I've used by putting modal specifics that into all of them all I really did in this case and you could take a look at the search itself share with obtrusive in detail and you know again I said I have an extra names outlet in my application template just outlined and modal and I'm using a great grandma when it's true I'm rendering stuff into their and and what I'm rendering has its own CSS rules that make it come flying up beautifully raked make a shadow behind it and just like in the previous case the only Gotcha again is dismissing it because again if we just dismissed by transitioning away it would just disappear before a chance to and so to make a go at pretty we use that same exact will transition and so in its intercept the fact that we're leaving stop the transition trigger the animation with the emission of Finnish and then such transition back up and so so
that's pretty much all the demos I have to show as I said this is a number at and you should check it out there that the sources and get home I the Legacy said that's not the case in which he really want but year in year out of so because we have some time for questions and yes sir well with respect to any bindings Juris if you run into that case where I would you reuse so let's say the content is changing for review were using yeah this year something and you have a strategy for how to approach that yes so that's not something that can be a tricky issue if you're not careful so you the question is really it boils down to the fact that every assignment which is a good thing which is odd if you if you'd transitioning from say actually good of specific example and that's looking at person number 7 here right and I wanted and I just like his directly person number 8 instead where did my URL did it you know by link of that view the original view object everything I was out place a sustained place doesn't need a new view right out we body got binding set up so I have to do is swap the model out from the the controller stays the same we just put a new model in the controller the bindings to the work and the agendas and it's great of where that gets you as if you're going to have special animation B that only happen when the view itself renders they're not gonna run the and and so the the the kind of catches the individual the bindings like the into the birthday in the name of this page they are completely agnostic to whether they're changing because their own value just changed or the whole model gesture and trying to make them detector differences kind of mathematics and you could you could spend a lot of time messing with bows bugs and I've done it and it's it's better to find ways not to have to answer that question and so on you know so 1 idea is actually what I've alluded to you and I don't have this fully sketched out a demo but instead of instead of trying to track the individual properties to actually track the models themselves than to have to have a component or controller that hold on to the previous model you think of the properties it does its thing as that model changes so you can track at the 4 model level and not at the individual property level where it's too late to know where their you know whether my whole model the shifted out from under me or single property change and that's actually important you know he has come up from local times practically in my application where even if you just imagine enough where you want to make a field of flash it's the user changes it while looking at it and the naive way implement that it's also the flash every time you switch records and that's not what that's not really a gold so yes and so I did I do think the solutions that kind of problem is to try to move up 1 level and to try to keep track of the models' changing themselves and you know sometimes all you can do is actually as you can use some action can play you know you could even on this before sabi drive that's gonna force the view to every drive in the cases where you want to the new model you know what it was kind of things about CSS transition animation properties is you can set them up so there are things that happen when add-ons created not again so that's a great time to do the kind of things you want to only happen when mouse changing and and was gonna do not recreate that done Fumiyuki you force it to just strategically putting if blocks in the right place they're gonna can't get panic cause cascading rear-ended so you can play checks and it's it's again not you not is fully baked as as I think we're going to have all had to be but It's a good start and another thing I didn't actually go into any detail on but that we have a like annually about is the mobile specific concerns all you know everything I've been showing applies gray on mobile you know I might have is is it graph package up in the in the phone gap that runs on iPads and it's feels native it's very smooth and nice and I've had the when magic tricks to keep it that way I 1 thing actually that you might not realize is that installing at well you made if you've ever thought about the was installing event handlers at the top of the Gantry and some of them you might not even be using but they're there and actually have a cross even in a in a totally an intuitive way and because you might not actually do anything with say a scroll events you know there is there is literally a function that runs nothing when this column Phys which is the very existence that can learn prevents the the hardware from optimizing you out of the entire so that scrolling text scrolling might actually feel kind and janky Genk is the word for when it's just not you know you is the almost subconsciously wrong you know you know if you stop and think about it think the ads has its there's a subtle lag it's a of subtle stuttering in my stroll and you've you've encountered all the time and sometimes the you know is rifle level of this feel slow it's more like this feels crappy I don't get what the problem is and simply by making sure that there is absolutely no there on the relevant event and those in the loop but all lets the hardware take over and go directly from that the events of the user's finger to the hardware accelerated motion of the of the screen and it it's a It's a substantially different feeling which a gig appreciate the difference in your you can't on and you look for it and so I actually my app disable some of the Member Zone event Amazon only turn mind for the sub sections of the done more I need them and send you could do that but it's the packaging them up as components state so I have a little by the component that I wraparound pieces of the Don were actually do care about scrolling trade you care about such start events and and you know this is where you could spend a kind of you know unbounded amounts of time effort China micro optimizing again pick your battles because it does add to the complexity but I guess my if there was about 1 answered are you using doesn't so the doesn't preclude I think overall helps you in building these kind of its behavior it's and in in helping you vote web platform it's gonna go toe-to-toe with would you build the native apps on mobile so the I'm only hovering visit ice cream and it will not that you have a look at the array I time they used a lot of them want to have each the and the
end of the day on the the the and and and the the the the view of the law in the world and and a the and
Videokonferenz
Formale Sprache
Zahlenbereich
Benutzerführung
Rückkopplung
Stab
sinc-Funktion
Gruppenoperation
Zwei
Schreiben <Datenverarbeitung>
Zellularer Automat
Kartesische Koordinaten
Quellcode
Frequenz
Rechenschieber
Energiedichte
Benutzerbeteiligung
Rechter Winkel
Computeranimation
Gruppe <Mathematik>
Hypermedia
Datenreplikation
Aggregatzustand
Fitnessfunktion
Zentralisator
Impuls
Momentenproblem
Beschreibungssprache
Browser
Familie <Mathematik>
Kartesische Koordinaten
Element <Mathematik>
Raum-Zeit
Prozess <Informatik>
Mustersprache
Bildschirmfenster
Translation <Mathematik>
Gerade
Einflussgröße
Umwandlungsenthalpie
Schnelltaste
Lineares Funktional
Kategorie <Mathematik>
Abstraktionsebene
Template
Mobiles Internet
Güte der Anpassung
Quellcode
Kontextbezogenes System
Teilbarkeit
Rechenschieber
Verbandstheorie
Forcing
Rechter Winkel
Festspeicher
Ordnung <Mathematik>
Aggregatzustand
Standardabweichung
Computervirus
Quader
Gruppenoperation
Mathematisierung
Klasse <Mathematik>
Physikalismus
Zahlenbereich
Interaktives Fernsehen
Kombinatorische Gruppentheorie
Textur-Mapping
Weg <Topologie>
Informationsmodellierung
Reelle Zahl
Abschattung
Zusammenhängender Graph
Abstand
Primitive <Informatik>
Datenstruktur
Speicher <Informatik>
Bildgebendes Verfahren
Schreib-Lese-Kopf
Touchscreen
Benutzeroberfläche
Betafunktion
Feasibility-Studie
Einfache Genauigkeit
Routing
Imaginäre Zahl
Elektronische Publikation
Objekt <Kategorie>
Pufferüberlauf
Mereologie
Hypermedia
Wort <Informatik>
Maschinenschreiben
Bit
Demo <Programm>
Punkt
Quader
Natürliche Zahl
Gruppenoperation
Familie <Mathematik>
Zahlenbereich
Kartesische Koordinaten
Computer
Computerunterstütztes Verfahren
Kombinatorische Gruppentheorie
Code
Domain-Name
Bildschirmmaske
Informationsmodellierung
Datensatz
Unterring
Mustersprache
Volumenvisualisierung
Programmbibliothek
Vererbungshierarchie
Router
Zusammenhängender Graph
Primitive <Informatik>
Wurzel <Mathematik>
Tropfen
Zehn
Hierarchie <Mathematik>
Beobachtungsstudie
Videospiel
Sichtenkonzept
Siedepunkt
Kategorie <Mathematik>
Schlussregel
Routing
Objekt <Kategorie>
Rechenschieber
Modallogik
Druckertreiber
Verbandstheorie
Flächeninhalt
Automatische Indexierung
Rechter Winkel
Grundsätze ordnungsmäßiger Datenverarbeitung
Gamecontroller
Dualitätstheorie
Speicherabzug
Ordnung <Mathematik>
Brennen <Datenverarbeitung>
Aggregatzustand
Modallogik
Druckverlauf
Informationsmodellierung
Matching <Graphentheorie>
Natürliche Zahl
Zahlenbereich
Optimierung
Aggregatzustand
Umwandlungsenthalpie
Proxy Server
Freeware
Schlussregel
Kartesische Koordinaten
Euler-Winkel
Strahlensätze
Informationsmodellierung
Rendering
Mustersprache
Gamecontroller
Volumenvisualisierung
Abschattung
Optimierung
Aggregatzustand
Offene Menge
Demo <Programm>
Abstimmung <Frequenz>
Kartesische Koordinaten
Gesetz <Physik>
Komplex <Algebra>
Resonanz
Homepage
Übergang
Existenzsatz
Umwandlungsenthalpie
Schnelltaste
App <Programm>
Lineares Funktional
Hardware
Sichtenkonzept
Kategorie <Mathematik>
Theoretische Physik
Physikalischer Effekt
Mobiles Internet
p-Block
Quellcode
Zeitzone
Ereignishorizont
Datenfeld
Rechter Winkel
Strategisches Spiel
Garbentheorie
Aggregatzustand
Subtraktion
Mathematisierung
Gruppenoperation
Zahlenbereich
Systemplattform
Loop
Flash-Speicher
Informationsmodellierung
Benutzerbeteiligung
Datensatz
Weg <Topologie>
Zusammenhängender Graph
Inhalt <Mathematik>
Touchscreen
Mathematik
Graph
Einfache Genauigkeit
Automatische Differentiation
Binder <Informatik>
Programmfehler
Videokonferenz
Gamecontroller
Wort <Informatik>

Metadaten

Formale Metadaten

Titel Animations and Transitions in an Ember App
Serientitel EmberConf 2014
Autor Faulkner, Edward
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/35004
Herausgeber Confreaks, LLC
Erscheinungsjahr 2014
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Animations and transitions are fundamental to the unique character and feel of your product. With a few key ideas, you'll be able to build any custom behavior you want into your Ember application. Learn about reusable, well-encapsulated techniques that work reliably, play well with integration tests, and give native-app-like performance on mobile devices.

Ähnliche Filme

Loading...
Feedback