Bestand wählen
Merken

Ambitious UX for Ambitious Apps

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
in and and the and and I have been doing a lot and then there is talk to you about how I remember the moodle which this is a case and so the mode of payment is my 1st ever talk so if I say the stupid please feel free to send me an angry retreat if so you might not have had a bit of a stranger I that because they grew up in Singapore and to show that 60 to go to college I'm that there since I started out as the itself part and my dad copy Petrovna being an active falling much detail the Web fond of design and where the general and I think of any reason I also some mathematical and I kindly worked as a fun developer at the which is real estate search engine in Australia I the working with and therefore allow close to 2 years and I I just like you so the fry begins when you mentioned introductory promise rather upon as prime of the gospel of there and the kids have had the donor undocumented designed to of the need a lot ever also work so we're hiring so if you wanna and the projects for the 1 I adopted work done think cool that you would want us the later not introduce you to the king and right as a think ever make it really easy to build and which is in and by this signing a user experience that leaves no questions unanswered the Web has evolved into richer and more interactive face it's a long enough to just fill a purely functional out initially designed to so this talk is going to go through the the things that will help us to build and they're like to start by addressing very common misconception about time of a lot of people obviously I'm not saying they're bad for I rather work on real problems because they the design is about how things look or feel or any but there are because designers and just how the hell it looks feels it's about by the and the we already made a lot of land use issues really data we decide how to name variables and classes is 1 of the hardest problems in computer science with the size of things like have bases conventional configuration API design that that's all part of all experience that which is really part of productivity and general develop methods which is why we all you member at the same time it's a small hole in the sense that the final before you read means that my coming within that is websites of With this happen because some of the questions that you out of when you get out every don't questions asserted don't get clear answers to those questions that we feel these people novels coping in its people that use main mn orthogonal to design a number of aggressive features of base on the video data not has the same picture of some sort of behavior again job and time you think the salt acres the 1 with 1 whole my head and how you think so papers on me whole the this interesting that something so simple as we kind of family and it's it's famous house where the the the but the answer is that it doesn't matter what you think what matters is what the person fulfillment the and and that's we have to consider is variable pass it is a man and people can find solid you that what's important is what people think and designed for people people's higher at specially on the web because unlike the physical world of people can only interact that you want to set sensors are some insight into the cell so designed to important any unified in tutorial and explain how works that's really bad that and I hope that you're doing that so what is the desired I think it was and is a number of things and you're of so 1st thing to design reactive and barrier to find an instant feedback when other words to use always aware of that of each interaction me as well the see the system at any and we this true reactive so to understand that programming it's reasonable to look at the spreadsheet is made of 2 cells the 1 and the 1 where you can input a value and the ones have like a computer property because it's just the value of the 1 plus the 1 and this value of immediately if either is 1 of the 1 changes I always maintain the relationship between those 2 dependent cell so in other words reactor programming is about the continuous flow of data and maintaining relationships between data if you do isn't the knowledge out before you have to explicitly wasn't a change of and automatically updates the alignment of dependent on his and that's no fun and it's only a really simple example world so and enables reactivity to the observer pattern this is implemented with the observable Nixon on every and object actually I think programming is reactive programming's functional haven't I mean in FRP in addition to being reactive it's also a function of now pure functional language has no that right but efforts to validatable other we did the behaviors that effects but retain that that so whenever interactions expresses the event streams and properties in event streams like a series of discrete events such as mouse clicks keyboard input pattern yeah I'm properties estimates streams that could be also have a high value in which some so here is a property that you all probably very familiar with the help of mouse when you move your mouse its position can be expressed in like or in and moving the mouse immediately updates in accordance as a clear representation between the physical position of the announced its digital representation of screen so every mouse MouseMenus value time expresses a string if you Madam that going to unary of events making is function of
like that will serve using contact to transform these ministries and companies make out the more if instead of working by how can you can make which is a fully featured part really but obviously this is a big on this is become so we regardless of how requirements the the which is the same way so we can use a few key tools to build the UI user pattern as mechanism for a copy in and we consume this pattern it properties observers on any of the the computer probabilistic 1 properties and yet we can't fund and some value while independence change it updates and relationships are always the same user for example when you will be seeing use a million times under full name computer probably observes 1st name last name are property and some objects and this returns a string that joins them together space but as a a larger and more complex we might find repetition of computer properties us order to make our code dry accessible we can factor this into a macro MacOS basically functions that return a definition of the property or under the memberships of some of these of loss that leads to take a look at how the graph we quickly so as I say joined together a bunch of properties is very common in our application a reading this everywhere I would like variable number properties so is everybody has all the time we can run a matter of this out and this is how we so pressing the final function at its arguments the separator and new array of anarchy is computed from this the computer function that maps those attending the values and venerate and destroying them together with its with surface but we can string again because it's not during anything so and evaluation of 1 day so we need to apply the property method on the computer company with the array of indices in order to observe although and now natural work on any number of properties in the past so here's there must you that mind so work when value change my chemistry them but you have the the leader to to go the so is it using the matter a lot better but we can reuse as on a number of properties from the and we can avoid repeating chair logic and its wages as I mentioned earlier versions of of the of the the the bars on and have a look at the product adaptation of 1 and the content of you want to keep you you to write on that's computer properties of the result returned values so that the observed changes on the properties are synchronously invoked when and how it's changed change all the values computed properties and observers point I want go into too much detail announced take a look at simple thing we can build an emeritus of who you in general and so in in addition to being reactive I think the lines full and has personality matter how many of you have his spot by reading on it helps and for those of you that don't slackers became cattle and of flight hours between and 1 of the things I like most about like lots of inner-city into it they would have lots of personality and never feel something's not right it's kind of an of the other have you read as they have their so 1 of my favorites evidence is shallow parts of 2 to of unity I don't know whether it is the kind of like a weak form and on shall that people post philosophical thought to get shot on the link below is the unique often reading some of you out of it's really funny if you have a look later miss very quickly that we my it what are ordered in Guantanamo Bay some cigarette you don't know where the of the thank and you the present you with proofread Hitler's speeches was a guarantee energy shortages time and you can then you can detect and you generate and so it has to make a flat loading message from but rather shall not that it's really the place to start really is the common but also this life with all possible Justin when we inevitably have to load something you out so a number in return a promise in their out the rather will cause the transition to result from example graph indicates we wanna go to the users rather if a loading graph find the right we transition to the promise of and the rather than storable that's the record of the API which will turn on and if the promises all the records we transition into the user's rap if not we reject and which vision into the air out of time so far south of willingness to do this clone building were present a service that such as pulse from the mid API and then we can build a simple linear such components component that retrieves such messages remember the routers so promises model Dorado and moving around station so 1st of service gonna use relatively fast hold mysterious this extension and on and we can easily inject this little information you inject helper because some of the basic properties of 1st of all and the rate of hold that messages in memory so we don't do multiple index homes and this some other properties for dealing with different press will define a simple method for getting Jason from the related AI as just a simple index for on and then when the service is created in focus calls we will observe the civilian and pop period of properties on the surface so we can do this and we can change eyewitnesses is printed on once and that was set the messages property to such so now I I using the index of the solver which has been stable since 1 and and you can easily inject the service this component so the component in I Cecil such messages on the surface and they were gonna right really simple popular accurate ran a message from here right yeah so this method really simple basically just observes all messages in the array of this which random 1 hour to computer problem set to be mortal and read-only so that they will occasionally get a message every time out the world in yeah so you think that long but
I want to do so he can see many
engineering getting of the you know and you get random and can change the period the recent fall but it's really nice gesture for users when I'm when when you have to build something right next to
citing few but I think this and also informative and people want old of what's going on at the time of the so 1 of the nuisance 10 heuristics for you that you why that is visibility of systems that whenever words keeping the user informed about the state system with appropriate and timely feedback the so the weather so rich and interactive narratives outside the standard due cities anymore it's become really important that this steward stick useful because we only have restricted to go to website and you get a quick bite explaining or click and nothing happens it's really frustrating so 1 way to keep users informed about what's going on job is flattered is or grammar applications of like how rails that's it basically will use this and formalisms this of what's going on during some interaction that so suppressing into the plan what we're going to build its and again a service that we're going to inject into controllers controllers stand out the service will contain a queue of messages and each message will be wrapped in a component that needs it because this is so again to the surface of this is basically how we want a guide to the online geologically messages from control out with a really simple API and for convening too bad who just style method names success mourning for data I We also want that has the message types and query messages on screen so it's not and of this sense of properties and they will hold it should messages in new recalled the q property and all weighted flesh messages the push into this Q and will be removed when the cannot for the public API successor a warning and then will carry the out the function with the title in acidic effects of the the use of use 315 syntax for default values and and I and this is very often and as well as the analyst should on hats I the response reasonable we just get the cue and the messing it and so for defining how we add to Q method where the work this simply creates a flashlight job and then show that the q and this function will create a new class such objects and all the reference the services that can remove itself you have and so so president has really simple no integration and brought that will represent the model for our last message physics 6 properties again convenient properties of using the computer macro wheels have attended property to hold a reference to these destroyed so when it and the objects created in it's called and what this functional do is use the emperor of to call this destroy message method of and often cannot have lacked of real at the time of property on flash message object to refer to all so that we can cancel it uses the stored is method for the time elapses otherwise we try to destroy message it has already been destroyed and member will he on the string message will simply remove the message from the queue and called and object destroy the system is destroyed like the true and once that's the set you can understand more properties on the object is and that is like so now we can expose the destroy message that as public API making call from the last message from region beta of to destroy the message only so there will destroy method is called when the member object is about to be destroyed and is all right with that we have time case that I had already been destroyed the non service and the last message model of roommates injector system controllers and out and in the future points so that we can use this so again we can use inject proper or we can also use an initializer to inject the service across all colors and rocks and this is pretty straightforward so I won't go into too much detail on this injection and then the component is going be presuppose allow that template would assume a templates and impossible to spot over and not rendered rations inch of the components reasonable distance finds 2 classes so we styles in the chat and whether the candidate so if you click on the component the flat essentially so the user can be annoyed by millions but you can think of a naive this renders the fastest is really in a template of for example in your application color on many can also an off for the last message if you want customs so again what could
form this useful especially if you use every day of on we can use of for example area a model that returns Parliament you can hook into the but then or don't catch own methods on the comments of north and you can return a flash nested so for example if the model salient rejects you can pop flash message and say hey know that goes so that's those reason I 30 lines of code like and the figure cited solids as an embassy on on today it's called embassy like lack of request some of them and finding the design is intuitive people are going to interact with the out in a way that included to them so of this and we we were going cases but it can be good interaction especially people going up like that fellow or who dragged up really good of for those use cases and it turns out this is really easy to do and this is like the 500 total so again to have much mobility a again the package we going to use the occasional 5 kind adopted the I unfortunately this is a have the best mobile rather support but it works fine on more investor brothers and we can augment this data with 10 to the library so we can do is to create a giant component reject 1 item component can be dumped into and then we want to be able to send an action plan adopted to some control are out of a radical on to handle the thank you don't have to set up the object of interest there's also because ever handles this rather about inside of any endocast extension and review which includes company and then as it turns out making something draggable indication of 5 it's simply going into the title of the true onto to any element and it becomes right yeah and as for actually transferring data between the drops on the items that you right that we can make use of the get they of event the look at the top of the 1st thing we do is handled the drag we track over and government back over variables of the passes were so we can visually signal for the the you know exactly actually dropped only substantive on an interrupt handler used to get the method in order to retrieve the data items that was dropped into it and I will call the components and actually had to delegate to something else like a controller knows it so simple the so now for the dragline himself on as mentioned earlier only need to assess tractable true that the about makes this tractable and those incident accident so when you just said Friday that component elements element we can use the set data that the 2 of you if the data from whatever content in the template and then pass it on to the top yeah because the monarchy this interaction history possible other templates for both of these components is just you know which in have passed some feature known to people help so this is a simple example of an example of that say we have to do is wonderful all believe there and 1 for all like to use for some which were like clean it quite so 1st certain set up the would often component and that will bind to drop action had to add new neurons which for rapid analysis iterate through those unfortunate users who have been in the toilet by of the fully the list and then for each available user that is ready for that task we want you to drag him surpasses development and then we just iterate through them and set the guidelines for its content properties to the university so we can retrieve the leader the people then on the controller we can add an action to handle on the of user actions that accepts user ideas and let's say this controllers model is all the the way users so we can find a document from the model that from is using its user ID that will just push that was erected into this like you today and that's it so we can veto the surface of all upon and in less than 51
article you had a super simple right up so these people expected time there have this think and you that right so it's how refreshing we looked at what design is and what it is and it's not just about how it looks for field it's also about how it works and sometimes that's more important and we also at 3 really simple idea we can build very easily member loading messages flat messages and drag of the interaction we looked at how big that is reactive people want you in control of the device the whole people feel delighted when apps show personality the design is also informative and people wanna know what's going on with the job and finally alliance intuitive and people are going to interact with the out in a way that's intuitive to them so we have it's important that we build interactions that will let do so insomnia and makes it really easy to build vicious these experiences I actually want to because Member bytes probably the best of all the I'm industries is to really think about the expense of the out we create a number so in closing and I to ask you to resampling rare design is not not how it works it works so it's not how it looks and feels it how it works on a shame for the following there to get 5 and I write about reports on the slide available at this throughout the lecture the hair on and all really highly layout so given the cascade on or if you wanna it's an information out there that is a major exactly which is coming around and make you feel us a new hobby and and
Bit
Selbstrepräsentation
Familie <Mathematik>
Computer
Videokonferenz
Eins
Streaming <Kommunikationstechnik>
Prozess <Informatik>
Suchmaschine
Mustersprache
Speicherabzug
Funktionale Programmierung
Stützpunkt <Mathematik>
Analytische Fortsetzung
Feuchteleitung
Metropolitan area network
Schnelltaste
Addition
ATM
Lineares Funktional
Kategorie <Mathematik>
Reihe
Ein-Ausgabe
Biprodukt
Ereignishorizont
Gesetz <Physik>
Tabellenkalkulation
Rechter Winkel
Digitalisierer
Projektive Ebene
Message-Passing
Zeichenkette
Objekt <Kategorie>
Rückkopplung
Ortsoperator
App <Programm>
Klasse <Mathematik>
Mathematisierung
Zahlenbereich
Zellularer Automat
Interaktives Fernsehen
Maßerweiterung
Diskrete Gruppe
Variable
Benutzerbeteiligung
Reelle Zahl
Luenberger-Beobachter
Optimierung
Softwareentwickler
Informatik
Konfigurationsraum
Hilfesystem
Schreib-Lese-Kopf
Touchscreen
Soundverarbeitung
Orthogonale Funktionen
Physikalisches System
Datenfluss
Quick-Sort
Mereologie
Wort <Informatik>
Resultante
Einfügungsdämpfung
Punkt
Luenberger-Beobachter
Kartesische Koordinaten
Computer
Element <Mathematik>
Information
Eins
Komponente <Software>
Puls <Technik>
Mustersprache
Mapping <Computergraphik>
Router
Maschinelles Sehen
Kraftfahrzeugmechatroniker
Parametersystem
Lineares Funktional
Addition
Schlüsselverwaltung
Synchronisierung
Kategorie <Mathematik>
Gebäude <Mathematik>
Digitalfilter
Biprodukt
Bitrate
Frequenz
Linearisierung
Mustersprache
Dienst <Informatik>
Lemma <Logik>
Einheit <Mathematik>
Rechter Winkel
Automatische Indexierung
Festspeicher
Anpassung <Mathematik>
Kategorie <Mathematik>
Information
Ordnung <Mathematik>
Schlüsselverwaltung
Makrobefehl
Message-Passing
Lesen <Datenverarbeitung>
Zeichenkette
Existenzaussage
App <Programm>
Mathematisierung
Gruppenoperation
Zahlenbereich
Sprachsynthese
Dienst <Informatik>
Mathematische Logik
Message-Passing
Multiplikation
Informationsmodellierung
Datensatz
Variable
Zufallszahlen
Lesezeichen <Internet>
Flächentheorie
Arbeitsplatzcomputer
Luenberger-Beobachter
Zusammenhängender Graph
Indexberechnung
Inhalt <Mathematik>
Demo <Programm>
Leistungsbewertung
Formale Grammatik
Trennungsaxiom
Videospiel
Graph
Vererbungshierarchie
Stochastische Abhängigkeit
Default
Indexberechnung
Mathematisierung
Frequenz
Binder <Informatik>
Fokalpunkt
Menge
Mapping <Computergraphik>
Objekt <Kategorie>
Energiedichte
Mereologie
Makrobefehl
Verbandstheorie
Rechter Winkel
App <Programm>
Frequenz
Demo <Programm>
Stereometrie
Punkt
Atomarität <Informatik>
Familie <Mathematik>
Formale Grammatik
Iteration
Kartesische Koordinaten
Element <Mathematik>
Computer
Information
Inzidenzalgebra
Template
Komponente <Software>
Hook <Programmierung>
Prozess <Informatik>
Hook <Programmierung>
Wärmeübergang
Elektronischer Programmführer
Tropfen
Figurierte Zahl
Default
Gerade
Schnelltaste
Lineares Funktional
Installation <Informatik>
Kategorie <Mathematik>
Template
Mobiles Internet
Heuristik
Systemaufruf
Abfrage
Dreiecksfreier Graph
Gleichheitszeichen
Ereignishorizont
Gruppenoperation
Dienst <Informatik>
Injektivität
Menge
Ordnung <Mathematik>
Makrobefehl
Message-Passing
Aggregatzustand
Zeichenkette
Rückkopplung
Luftreibung
Total <Mathematik>
Gewicht <Mathematik>
App <Programm>
Gruppenoperation
Klasse <Mathematik>
Physikalismus
Automatische Handlungsplanung
Interaktives Fernsehen
Code
Task
Flash-Speicher
Message-Passing
Bildschirmmaske
Variable
Informationsmodellierung
Flächentheorie
Endogene Variable
Datentyp
Videospiel
Programmbibliothek
Zusammenhängender Graph
Warteschlange
Inhalt <Mathematik>
Indexberechnung
Abstand
Maßerweiterung
Softwareentwickler
Ereignishorizont
Grundraum
Demo <Programm>
Touchscreen
Soundverarbeitung
Betafunktion
Default
Mailing-Liste
Physikalisches System
Objektklasse
Menge
Integral
Warteschlange
Objekt <Kategorie>
Flächeninhalt
Rationale Zahl
Flash-Speicher
Injektivität
Gamecontroller
Wort <Informatik>
Kantenfärbung
Luftreibung
Tropfen
App <Programm>
Luftreibung
Krümmung
App <Programm>
Abgeschlossene Menge
Interaktives Fernsehen
Zahlenbereich
Betrag <Mathematik>
Dienst <Informatik>
Information
Videokonferenz
Datenfeld
Rechter Winkel
Prozess <Informatik>
Gamecontroller
Information
Luftreibung
Ereignishorizont
Message-Passing
Verkehrsinformation
Demo <Programm>

Metadaten

Formale Metadaten

Titel Ambitious UX for Ambitious Apps
Serientitel Ember Conf 2015
Autor Tan, Lauren
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/34743
Herausgeber Confreaks, LLC
Erscheinungsjahr 2015
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract In the dark ages of web development, designing a beautiful user experience meant having to constantly fight with the DOM to get it to do what you want, when you want. With Ember, we no longer have to struggle with managing DOM state, and we are free to put the user experience first with reactive UI. In this talk, we'll discuss the ways in which Ember makes it easy to build delightful and reactive user experiences, and how you can build reusable components that even non-technical designers can learn to use. Learn about the thoughtful touches and interactions you can add to an Ember app.

Ähnliche Filme

Loading...
Feedback