Bestand wählen
Merken

Mastering the Art of Forms

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
but the this this is the
this in in fact there the only
thing that the as going spread and
cool so thank you all for coming to see me forms is not the most exciting pieces I on it's something that I've had to do a little bit but not all of it actually a lot of my current job so that's why I'm here to share with all the and not tilted started as a little about me and away I this is this like the only if anyone's fall on as it was in on inflectional so for those of you that like all anyway so a little about me and my staying out I was made for the handle and summer engineer from New York I I love animals so as goes in Australia and anatomy so I'm using the single best in life I also work a company called labor and so on and so for those of you that think that labor is just a contest sponsorship company I this and we did something to the other's double to our customers and so I would have a warehouse side of things and so what that means is that I billed tools for our warehouse associates to to do the jobs and so there's a lot of data that goes into what happens in our warehouses and so on there's a lot of pieces firm by tracking labor and work order units to turn inventory and on different things having to do with our incoming raw data crime Turing what I and so that's really talk about all the lessons I've learned having to build a lot of formants so forms are everywhere of form might be the 1st thing that user sees once it's a 1st impression of your product and so it really my determine whether they convert may become a customer or they enter any sort of conversion funnel so they're also how we connect with our with our friends and our family on Twitter and Facebook and whatever else people used for social media and then there are also used for really basic utility as a Google counter screenshot saying see there's a lot of input fields here all you need to be understood at an intuitive for the user so why did the developers that forms the stone porting he building form so much everyone I told you I was telling the stock you can like just like the winning work initially but it's sure that's a lot of people feel this is me a year ago I need this sweet I put it out into the footer universe and I got a response from someone on and reportedly relate talk about it thanks so I so I have myself and I literally conversation I don't I don't remember was because the on the conversation away mentally on by satirical will they talk to after I I realize that it makes no sense to complain I decided that they been 10 and 0 in on all these patterns that I've come to see and repeatedly and we make some decisions that's going to make building forms very firmly in better for my co-workers so there's 2 corpuses of this I would see they really good design pattern there is 1 and managing your data is another 1 in that kind of builds a foundation of what you need to build efficient and scalable forms and then so with those to be really clears the path for a great user experience and also building on an accessible web is accessible on the website so complete patterns and Saab about those so 1st off is example form but it is a sign page the page that I created by that has 2 basic inputs on radio buttons and then you can see there there's a disabled by 3rd implied that it has dependency on that really button so this is an example of for a form component it could be used and so we have that we we visitors used some hint of ours input helpers and some label times we use a couple different types in the input in so this pretty easy to read on there it's not necessarily reusable bytes against a job done and so considering the whites the code is that we would need to use force to create this component where the design pattern when design questions that we would ask before we would actually make something that is more modularized and are reusable by other developers so 1st of all I wanna look at what types of input using so as we I saw there we had a couple we had a text input and the numbers input all we were using a radio box not a check box and so these are the questions that we wanna think about also a reusing a password verse is e-mail on a reasonable numbers instead of you now so start thinking about those things and this is a required field this self-explanatory what is the dependent on other component so like I said before we had 1 component that had had bound property it to the radio buttons and so wanna see what's is dependent on each other then also do these components supplied functionality for other components so for example on 1 thing components is having an input and output monitors thing but functionally and so we have to put it in so an input would be never object model or a Boolean or something and then our output is a smell element so they the fictional element that is being output is that a custom didn't is not an element that is just another form item where we actually out so this is the 1st of code are they like to iterate over on over on this traceable just to highlight what we have obviously region we look at this and see that OK there's some common patterns all we have the labeled the label times that we're using odd reason that twice we have their ID tags were not detect the input it by helpers reason that twice and then the input that we are passing into the with and batteries they were passing into the input helper that's all pretty much the same so we can probably take this and make a component of it so it is something like this but we're we have in the scope of our application on an input text fields and so it's kind of customized to application and we build our own API so that the application goes and how to handle this type of element so this is what the input text field example would look like and so what we done is we meticulously label tags in helper and we've created art and in this dynamic element and so we have already using that translation library the heightened Tenon Fromberg in so we created a pattern that it can cats a strain that it creates an input label on and then we're using our input ID in 3 different places because were basically just using the same on string patch to to to create these foundational elements so we pass the required activity in the value of and so what is the benefits in doing this we don't see a a lot of lines space by and some will actually argue that the explicit in the pairing component is actually better I understand the argument bytes there is far as the benefits go on for doing it this way were standardizing in PI so the former elements and discovered application in among the codes components so we have the same in clay they were using for all of our text fields and so we're not giving anymore so we said OK we're gonna use label tags and were not using did for P of paragraph tags reasonable times and then we're gonna use input helper and so standardized that API on the next part is the worst in eyes you I and so we will make sure that from the user's perspective we also have a similar look across applications so we don't want to say this is on my username and play is blue but my I don't know my 1st name input is red or something because they're not inconsistent UI and in the user said they think OK what was do 1 thing in this place and this other thing in this place and they might not understand that which is a text field is taken that year about place but so this is the part of the talk I know it's late afternoon I won't give everyone an opportunity to get up and stretch if they need to wear like for clapper snap or week if your neighbor I keep talking by you guys can don't feel like adjusting to sit there and stare with me the idea but that right cool OK so the next
part is we have this form of performing similar we had before by sorting the snippet of code on as we saw before we have a little time on it and then a couple and the tags to which a radio buttons and 1 of which is by using a number the number and type so so this last line here we have actually binding that depends on the on the values from the radio buttons and so we want group this logic together so that a it's organized and b it's reusable but also so they were not completely constrained to what's the the layout of elements so my perfect like but so this is something that I would do I I I like by using elements using components to yield more components I think it's a really great way to create dynamic by dynamic components so that it's not bound to the U I and the parent component so in input of just a model and then we have an output of a couple elements so this is what of form hunger component might look like and so just yielding a reasoning yield helper of which is using hash over and then the house has a couple and a couple key value pairs so we have a question types and then we have 2 components that it's yielding out to the car component so is that here we're using that translation helper again and reason component harbors takes a then the minute component and then also some attributes to go with it and so this is for a really more ritual of this is that this is the what the structure would look like from that componentry to have apparent component which is the sign of form and we have the 2 inputs so forcing lasting than those rendered by that sign form component and we have and we have that period in input group component which yields a radio buttons and lucky number in it so this is different from the first one I didn't see we kind of such harassment and plates so that pattern just adjusted would that work with this so let's say we had for example just gives some context if we had a sign of gage and we want to use it in the same elements for an account bytes for whatever reason are designed designers product managers said wireless which everything around or put them next to each other and so we had a list so yielding those components with the groupings would actually work so we can that's what's great about building these components when we have these groupings because then we can kind of move them around the way that we need to apply classes to them as we see fit and so what we do yield components we have the same and benefits as we did from read that 1st we factor but also with these form groups we have like I said before we have this their reusable without being down to the initial layout and so like I said before we can yield these child components and move them around as we see fit the high classes to them and add more composer and elements into the block between yielded this is what a refactoring code would look like and so this is kind of inspired that this is how I like to think about components also kind of inspired you either cover on stock and the point fit together like to begin touches on land had helped output fits into larger application points might not from stacked on top of each other but just make sure that they all work together even if you have couples not somebody the pet so it's another activity on to false all data to be loaded once application complete a transition into a rat maybe true of this is a trick question it's fight so that's what and so didn't required by you should not be holding up a page when its rendering so I think that on because of the conventions in amber it's really easy to kind of get held up by state of everything gets loaded and round we can use it on the radio or whatever all settled promise or a promise hash and we just at all I didn't around the user has everything they need where it's not the best on user experience and I will explain why so we have switched our example of the 2 that the radio buttons and we now have a stay drop down to see this will just stay in the U.S. state whatever yeah U.S. states on the chosen option drop down and so of we don't have that information localize we need to make an API call but since it is optional we don't want it to hold up rendering the component but we also I make sure that were fetching it efficiently and we're also handling error because of somebody does decide that they want to populate that field we wanna make sure that it's on it works this is accurate construct again if they need to you so we're going to cure come questions now to figure out if we need to to be loaded into component partially law in the rat so is essential when user lands on page you know that moving on is it important in the scope of the wraps it is not is it a concern of the components yes and so because we have all the states that are concerned with this component which is responsible for creating struck down when it's expanded for the user to interact with it probably belongs in the component so this is example of how you can load India so we have this will render have really any are less of the hook further component could be useful I hear this season will render so that it happens before and but it is rendered and then also on Lorena is isn't walking so if something if the promises state has resolved by the time the page once slowed this isn't a blocking crop and so on so using will render so we said options ones that promises result and then we can use as a global so by serious and no service to send an error if for some reason the error the API call does not our combat successfully what comes back with an error so this is a little bit adds a little bit more complexity I would also recommend handling retries and component I am a member of currencies is a good library to use for this so we use the same art will render house and we can perform a task when the when will render is the call and we encountered this 5 is just trying to find times if it does work after 5 times in the day OK this is a field a guy cholera media services down ever but if 1st whatever reason it failed after 2 times then and then we have our options so the benefits of this is that the user is able to interact with applications in there which is what we want and then also relevant data is handled within the school with the component and and that just means that it's easier to use the component cost application rather than having the data the rout it to evolve on every models should always reflect the back in persistent true about Us the Davis can be used to represent clients and C so you that applications advantage so till the art just because we have a user models and what other models do we have an animal models and address is it doesn't mean that that entire database schema has to match what's going on in Anbar applications for any application and so let's say we have a form that we've been building but we can create a model that so we have been put in place in play all these implants are updating a form without simplified the in not sit behind a form no we have a couple different pieces they of some of a server-side model that need to be kind of odd consolidated for 1 API so this make it a little Hairer but if we have this model layer I were able to take advantage of every day this model state and so it's easily available ever Inspector and we can remove it and do all everything that we need and so this is pattern is otherwise there is a facade and so this is just taking everything taking a couple layers of complexity simplifying and for our trustees picture fast the data should be validated and modeled on the serial true bus you know the trick question test but
I'll tell you why but did you about it everywhere so here we have so 1st let's think about how on how we make this decision is design decisions as a validation specific to the type of is it if we have a text box and we want to validate e-mail addresses with a red X match can we do that all will be passwords is the pattern long enough to have at all the characters that we want to we do that so if it yes and what is there missing generic enough trees are can be blank of that that's stupid generic message so yes on the new user could probably be validated at the component level so I really like using ever validation sparked a very low level validation library and now it's really easy to use it creates this on extension on any of objects and it works with Member competed properties to watch any compute property in any other objects and say OK this is valid is not valid based on the way that the the validation has been set up these last 2 profs but never used to evaluate jury can include you guys that the so to remind you is not that bad and I know that we've I always try to avoid for the longest time you know they go did down action of on so that's not always the case that when it comes to forms and others in the do not egregious me so on so then we start thinking about what questions we have is element and input this that and the probably used to by here we are so we have so let's take the our sample or a model that we were discussing before and we have all these implied that are bound to be modeled on this model that we have on the model state so we can control that an application of all but we can still validated at the application level I didn't need to be moved to another the object to be validated and we can also debug its great because inspector has all of our models right there and we don't even have to tinker the rendering treat see what's available but it but I will say the 1 caveat is trying to handle data from this coming down from the server objects and so if you have form any party should be populated are you the 1 in difficult thing is making sure that they're in their form is a read-only and that going out the form does not update the original data source and so I can in the example of 1 way that I would solve that 1 with that and acid that doesn't allow apparently this is just 1 way to do it but so we have form like we mentioned for and so we're using the asylum for model in this kind of extracts the this application level the fundamental code that we want and so the same for me you I call and we can actually because of every data we can unload that model and then we have and we can update them model unchecked and so now we have this everything kind of goes up and then once the API call is resolved then it updates everything in unloads the son of former model it doesn't really have anything to do with the persistent data so nodes I have I'm just kind of concluding that section is to simplify until everything makes sense on the couple in your code design patterns and there's really always cases that hold up except for the OK so this is our last stretching moment Vinton wants stand up and stretch salinity talking and and so on but this last part this gonna talk about how these different patterns and the design patterns in dear management can help ice with user experience and web accessibility FIL memory this whole thing comes I think everyone here knows what is ability is found by the 1 thing I wanna highlight is that it's not it isn't just it's not just about for people with excessive with disabilities that also about people that are in other geographical occasions that might have access only to mobile phones slow internet connection to 1 make sure that we are designed for those people as well not everyone has you know Gray Wi-Fi high-speed or whatever and so things to remember in on those 2 topics on the labeling all of your inputs at so again will read this by aria is just another for its for all whether on all 18 elements to make it and accessibility better but luckily with forms we have labeled tax so we don't always but it's so this is just an example we have our little tired and we have input field and then so using the Ford actually had in our label tank needs to match 2 idea to be in a input and and that's how I those in interpreters can know OK this is the label for this in so in the required fields and make sure the browser is doing what is expected arts is an example of something that came out of that this is a group of young visible from on and so at some point who crown just kind an update and so the API for their inputs started showing these required tax which isn't that it's it's fine but it was unexpected for some users and for some on developers and so I just big make sure that you know the difference between requiring presenting an error message but then also requiring on additional element in a browser because that EPI make different were my change in my something different on which is another example this is a required field on on on Firefox if you just open the browser it already has a red thing around it so it looks like there's already an error when really the user has done anything wrong so use large what having an about you guys but I hate when a tab something I typed something in metabolism and I start typing and then I'm here and like why are we hold on where that's happening I usually this happens when developers had implemented some sort of form and there's a J. query and they intercept the on the key events and then you've got tablet goes over here and it goes down here and so we should be using logical tagging because I can be really confusing for for a user and then use their success and error messaging but so users if they don't receive any feedback could just be by matching of we know that the warehouse because where have we have applications on iPhones and up before when we were 1st prototyping stuff and letting people use them just have it and if something does happen just bond of them and then so we weren't walking ourselves from multiple that's an issue to make sure your age you are as a developer interpreting the what a user could do and so this is also called an potency and so we wanna make sure is that any input that is given to in the event of arrest service on anything and sent to the server who wanna make sure that it is if we send the exact same response multiple times that it is also not making multiple request you got this would and so just back to guide the user feedback part of is an example of a clear and come on and how you can model the pops out and user can probably change something and then but we could just save it and close the model that blue brand does like a toaster message I so that it says OK we already ceded to your need to update this again so I hope they will join me in the uniforms are that bad there's actually some interesting to something that you can do with them and there's actually this is just the tip of the iceberg that's a really cliche phrase to use my their actions I could and yet there's so much more and they to know about all the different patterns that make it easier for your application and for users and so on the human resources this is just a core resources that I have on these to really get past Comte tops because the Mozilla dogs and if you are Should you wanted to meet someone who had been a random tree out into the amber ecosystems someone will respond to you and why and yeah that's it thank you the Democrats
this the this was this then
and that the fact that the the name of
the movie you need a the how
it would be my hand and the the fact the fact
Umsetzung <Informatik>
Bit
Familie <Mathematik>
Datenmanagement
Kartesische Koordinaten
Element <Mathematik>
Geneigte Ebene
Raum-Zeit
Entscheidungstheorie
Homepage
Komponente <Software>
Arbeit <Physik>
Einheit <Mathematik>
Prozess <Informatik>
Vorzeichen <Mathematik>
Mustersprache
Speicherabzug
Translation <Mathematik>
Gerade
Funktion <Mathematik>
Lineares Funktional
Parametersystem
Datentyp
Vervollständigung <Mathematik>
Kategorie <Mathematik>
Gebäude <Mathematik>
Güte der Anpassung
Element <Gruppentheorie>
Entwurfsmuster
Strömungsrichtung
Ähnlichkeitsgeometrie
Ein-Ausgabe
Entscheidungstheorie
Rohdaten
Datenfeld
Funktion <Mathematik>
Twitter <Softwareplattform>
Forcing
Ein-Ausgabe
Ordnung <Mathematik>
Computerunterstützte Übersetzung
Zeichenkette
Facebook
Web Site
Subtraktion
Decodierung
Quader
Zahlenbereich
Gebäude <Mathematik>
Code
Bildschirmmaske
Benutzerbeteiligung
Informationsmodellierung
Perspektive
Endogene Variable
Datentyp
Programmbibliothek
Zusammenhängender Graph
Passwort
Softwareentwickler
Grundraum
Assoziativgesetz
Videospiel
Softwarewerkzeug
Quick-Sort
Videokonferenz
Patch <Software>
Bildschirmmaske
Hypermedia
Mereologie
Binder <Informatik>
Codierung
Boolesche Algebra
Momentenproblem
VHDSL
Browser
Idempotent
Aggregatzustand
Gesetz <Physik>
Homepage
Netzwerktopologie
Last
Client
Vorzeichen <Mathematik>
Code
Mustersprache
Speicherabzug
Translation <Mathematik>
Ordnung <Mathematik>
Gerade
Softwaretest
Kategorie <Mathematik>
Biprodukt
Kontextbezogenes System
Ereignishorizont
Entscheidungstheorie
Dienst <Informatik>
Zahlenbereich
Festspeicher
Ein-Ausgabe
Client
Server
Fitnessfunktion
Fehlermeldung
Maschinenschreiben
Subtraktion
Decodierung
Hash-Algorithmus
Klasse <Mathematik>
Mathematisierung
Content <Internet>
Unrundheit
Mathematische Logik
Homepage
Bildschirmmaske
Informationsmodellierung
Knotenmenge
Datennetz
Hash-Algorithmus
Datentyp
Endogene Variable
Programmbibliothek
Vererbungshierarchie
Datenstruktur
Maßerweiterung
Ganze Funktion
Attributierte Grammatik
Default
Browser
Datenmodell
Überlagerung <Mathematik>
Bildschirmmaske
Körper <Physik>
Schnelltaste
Attributierte Grammatik
ICC-Gruppe
Resultante
Bit
Konfiguration <Informatik>
Punkt
Element <Mathematik>
Selbstrepräsentation
Adressraum
Gruppenkeim
Computer
Kartesische Koordinaten
Element <Mathematik>
Komplex <Algebra>
Template
Eins
Übergang
Internetworking
Komponente <Software>
Datenmanagement
Gruppentheorie
Hook <Programmierung>
Uniforme Struktur
Tropfen
Funktion <Mathematik>
Umwandlungsenthalpie
Internetworking
Interpretierer
Datenhaltung
Element <Gruppentheorie>
Stellenring
Entwurfsmuster
Systemaufruf
Abfrage
Web Site
p-Block
Quellcode
Ein-Ausgabe
Rendering
Frequenz
Konfiguration <Informatik>
Arithmetisches Mittel
Mustersprache
Datenfeld
Gruppenkeim
Kategorie <Mathematik>
Garbentheorie
Information
Refactoring
Schlüsselverwaltung
Message-Passing
Aggregatzustand
Sichtbarkeitsverfahren
Rückkopplung
Server
Quader
Gruppenoperation
Zahlenbereich
Code
Task
Multiplikation
Benutzerbeteiligung
Rendering
Stichprobenumfang
Passwort
Zusammenhängender Graph
Operations Research
Softwareentwickler
Hilfesystem
Einfach zusammenhängender Raum
Fehlermeldung
Matching <Graphentheorie>
Validität
Mathematisierung
Routing
Mailing-Liste
Quick-Sort
Objekt <Kategorie>
Last
Hypermedia
Mereologie
Tablet PC
Bus <Informatik>
Speicherabzug
Modelltheorie
Mittelwert
COM
Binder <Informatik>
Quadratzahl
Sommerzeit
Datentyp
p-Block

Metadaten

Formale Metadaten

Titel Mastering the Art of Forms
Serientitel EmberConf 2018
Autor Adams, Danielle
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/35692
Herausgeber Confreaks, LLC
Erscheinungsjahr 2018
Sprache Englisch
Produzent Confreaks, LLC
Produktionsjahr 2018

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract "Building forms in @emberjs is terrifying because I'm stuck with decisions I always later regret." —me in another lifetime HTML forms can represent a time before JavaScript was an integral part of application development. Creating forms isn’t always the most exciting part of development and, at times, it may seem daunting. Fear not! I’d like to talk through some pain points of building an important piece of user interface: we will discuss what to do, what not to do, and which Ember addons have come to the rescue.

Ähnliche Filme

Loading...
Feedback