Bestand wählen
Merken

The } in You

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
the the the the the and I have to around the room the the really site
is is our next speaker I described in yesterday's the 2nd angriest man in JavaScript's Ryan is is simultaneously both the biggest fan and this header of Amber and in Brielle my what's side is really important I like it said yesterday did diverse opinions people have been around a lot and so I'm really happy today Ryan is going to time of components in the perspective of a mood tools core contributor a crime at the House'' alright we can hear me thank you very much so tools it's it's been a while don't send prototypes amber the right this was that the started the X. through and you but components are a new way for us to crude abstractions in the browser and they're a little bit different than maybe what we're used to and I've been doing a lot them lately and this talk surrealist and share with you where I'm at what that if anything is the wild west the number I think it's probably components were sometimes doing the wrong thing feels about as good as doing the right thing spend figured out all those things quite yet and so I hope to kind of show what I think a similar the right things to do with components follow the disk tags but have unique style and behavior sort of like some people it counting 230 in my head and that but so 2nd that it's a custom element with an optional template in isolated and review the controls that template and the view is the context rather words it's it's it has its own controller sorta kind and I had a jazz band that you didn't library much were made an application component that application you equals application component and application control equals application component and worked but I get a message from you today and I am that's like a will talk about your talk of it is like treaty but within party lines the Download those are alright so let's think about the
most common component that you learn new person the anchor tag you might not think of this as a component but it totally it's actually kind of confusing things that figure of the behavior of an acre tag if we don't have any interest it's just like it does nothing right you can get an underlying and styles Basiji dropping HF on it now turns blue you get an underline and if you click and the link is not in terms of the document you actually get a reload new page somewhere else if you have a hatch in front of the nature of all the sudden were saying it this is inside the document analysis scrolls down to that element if a confined as so what recreate data from a
doctor I the from a style here so X it's blue text decoration underline cursor pointer and then here I can say X is a tropical them adjust and about when I got this H to throw much margin on top so that we have to scroll down and how to implement this guy were going and on the gender of the component I think that this is a guy next one's a girl tag name as X that's match binding century bindings whenever you said a property it's going to keep that up to date on year elements CAD index I'm doing this because I want to be able to tap to this thing allows to be focusable so I added haven't experimented the role because I'm a nice guy to blind users so the spring a election think of this as a link as it should an ice age retinal as a default index you actually don't want they'd have index at all if there's no interest you don't want this thing to be tappable and so I do computer property manager Glavany traps set have been that's 0 which puts it in the tab a sphere and on all and an EMBA will just like removed that actually completely when a signal I go to a trust on when the great things about member of something to measure productivity and how much stuff they can do in a certain time Fermi building on the framework stuff and structure I think of productivity is how many questions can I not be asked by my team that like component does what it's supposed to do and if the code makes sense I love that with this click handlers you're forced to name things in amber like I'm gonna name this go to H. ref rather than just on collect and then some random function I have no idea what you're trying to do at least not I have a clue about what the developer intended to do by the name of the function and we all know how often comments that explain things still today so again my interest I check if I started with a hash and if so then I scroll to the nature of otherwise is of the trap if I strolled to it I go and select that element if I don't find 1 I just give up and if I did find 1 that I find the bottom of it on the page scroll my document down to and update the hatch otherwise I just doing the location so
here it is the 2nd tab to these things and if I click about a scroll down and the back 1 doesn't work with this wouldn't know how to make that happen and then if I click percent of timber so that's how the attack works it's a component that you're all familiar with then I thought what I
want to know well these were unicorns
imagine sparkling unit points of and why did not open it up and they don't that commitment of this guy we have a script so I thought well the data script is kind of weird component also and so I've got this X script the points to move our components brings in qualified and then here actually have a body for a script tag so script I'd also component that you have a source because of such as you have a source it yields the body and so now I've come expect component my layout is just a triple mustache to open up character yield the template and without escaping anything and I don't know what Chris is talking about will insert element I totally have an element here and I can say this displayed Chris anyway I don't know how I got this element must be magic hide the script I'd say don't see the code and then fact yield 1 inserts open and X Edgardo get the script you know the response types or yield get the text content and annual that and so the last thing is what you just saw creating a script I don't have
so this set is pretty neat Thomas was to make stuff that doesn't exist yet like Linux when whoa when is a where we're going and that the they'll they'll go there and way you that this guy back over among them so my controls are as they should be so moved the and way I shouldn't talk I just do this right the it is acting really fun of all the Wi-Fi and wouldn't the to turn this off and I'll show you the controls anybody know gyms and dance here just spoke about was stress put the but an Xbox controller knows like do that's the greatest component so you can see here when I had w I don't think even w that turns red which means I'm Maxpeed effect that s then it switches down and I can go 2 directions at once but I've got this concept of opposite directions right so if I'm going left and I hit right a center-left 0 and actually that is like stopped everything and then this side is the point of view which rotates or makes a go up and down and of course this launches I can I can put all these things to get the same the same effect what's check out this code so his own money when actions and so the X-Wing code
to use that it's just a simple little tag explain and then a URL to the eye and a better expressed server that actually controls the thing that's got a Wi-Fi chip and then I can add to its Wi-Fi which as we can answer can get connected really no my doctype appear it's kind of how I was flying that so now I've got the template for the X-Wing and I got another abstraction X-Wing action find a safe from so this action makes a for white tilt forward and I bind to the parent components valves dot fr and then about these icons like on I can rotate and and so you see that all these are
just the same I Commodus rotated around man left so those same thing with the flat point of view 1 same thing I connection of counterclockwise etc. and these are my icons just throws message and make a template you don't need any jobs script and now you've got icon luncheon I icon now let's look at the job a script what Happened excuse some focus the doesn't fly just I have my 3 year old fly and he kept by clicking outside and that would control and it's up on the roof of my in-laws two-story house just like walking across steep I was going to die the so the vowels are I keep track of light how fast it's going so from 0 to 1 and anyway persist for the speed of it when just opposites here from oxidase back etc. these are all the key things that I respond to like the know so then I have 1 keyboard action on key down to throttle throughout forget an action of that performance and then down here I can that the action form paired action of like left and right so the can switch other also happens animation that was the flow and then otherwise I just call some method of here was something of a defined and then there is chance of making a dash was this is the real magic is a goes often often-expressed server that express server has the drone library and that's the thing that actually controls yet so that is the same controls a for like any first-person-shooter shooter you've used before
greatest component or is it what is going on I hope some of you can appreciate the
quote doctype public offended space earlier now this by night to why my controller and this is bound the Y and so I think this and His SpaceDev component that image actually binds to source with high and then I said if they did too but that is a transparent gift of knowing 1 that there's there's a transparent before it so user this's this is practioner and the
so I communication and this is often a thing for both people and code specially put together so how do you get a component to talk to the outside world and I remember when the courting was sort of screw around with this idea of components we're actually making this function called show I call the component and we would get you would you initialize remnants of the star context equals this and discernment from that and I did a presentation back and you talk about our lunch jails and I made a slide show thing and I had no water no way to communicate how and then as components for getting better and better and actually shipped we've got 2 ways to communicate stated binding and actions and this is fantastic because now the Builder component you don't really even have to document like people know I've got some attributes that I can to a bind to or about some actions that might respond to instead of that in the days of other frameworks or just libraries and you've got to go and read the code or the comments or go talk to the author and you're the office who made the thing and figure out how to actually interact with this to go read the test that they wrote except that so let's 1st talk about data binding I've got me talking about I see patterns so and structure our main topic called canvas so all receptors prefix with see ISA campus and I see that people that comes in and so I see tabs is something that I just finished a couple weeks ago and it's kind of like the state of the art for me on how in build components the number so we're talking a lot about it so 1 of the use cases that I think is incredibly handy for a tab component is to persist to the quarry parameters so that you can in a refreshing the same tabs so they're still or you can link to a page in that state so here's my demo UIC tabs and say selected index equals such in my application template some application controller down here has query parents country and countries set to 0 so the 1st tab is what will show up what's see this action and could
Japan down here and countries and put Texas in countries people from Texas that's right I intended of like where we the now very freshness Japan is selected and the sun was a bound to the food on my up fishing trawler so also so I actually wanted an API for IC cavity IC jabs param equals in and the 1 and I've seen all courting was like more on and you just like I'm so happy with everyone right now is that yeah but what about me the that feelings so that's that's the binding which you can see will work all the way with all the other Member of concepts where you were controllers sets the context of your templates topics is modeling and then a query parents this is bound to those control properties and now you were components combined was control properties and so all of the the data and information is following the right direction and what I wanted to do that weird interface of having a creep actually on my tabs is really hard and I was like a poke around and send in their Alex messages and how I find the router is I don't and so again of productivity for me is making things that I can create and just forget about it and they will use them managers work and you get a board renowned for the most part people wonder if the thing is active because the pub that hasn't been updated for several months but it's because it's done works and ber provides for me by making the wrong thing pardon right thing using the solid repairing things really easy so actions the Stryker of these
work I got another 1 called I menu I was talking with another Ryan last night about popovers and were saying how it's kind deceptive it seems like a really easy problem and you just click a thing toggle property and having if in your temple now thing shows up but if you start to really think about how popover works I now you've got this outer click event that you need to deal with because it's open and you put somewhere else and so you think you really smart and so you put in even on the body on the document and then you plan on some of that bubbly up and then checking what was clicked enclosing enough but you forgot the select tags don't actually propagate the click even all the way up so that doesn't work and then you tab and focus on other elements you thing is still open so it's really complicated and so we have a component for this so that we don't have those kind of weird edge cases happening and I don't know what people want to do when a menu item is selected and so I just hand that to their apps with my own select but even so when I use I menu make an nice menu item I on select and that will the that will be of this kind of chemical article and that will go up on their mind because so my application trawlers here and I got actions on a controller removed so that's gonna call Thomas say that everything else FIL let's check this 1 out but this menu pops
up and then I clicked removed and I get my lawyer that and like I say this is a pretty tricky to think so and figure out how to deal with all that stuff so the thing is a simple path there's no such thing it's a point to a number which is actually hard thing but 1st of simple so Amber gives me the primitives to make the things that seem like this should be simple actress simple for people to use someone has to think about that anymore another consideration is an app tribute bindings for accessibility so when you open up this menu I'm setting a property called expanded true and that trigger so screener here this thing is open others also things like yeah has pop up up and you have controls and already controls needs to tell all of the spring era which element it control so it knows how to jump the user down there when do the right were combinations so there's again a simple things are not actually simple and with embers of primitives unable to just find out tribute to a property and sometimes it's just a bunch of aliases for me to get something accessible as inscription I talk about writing and refactoring large components components were originally thought of as templates and in fact the
1st version of components a number if you have a template you don't get a component of fortune I don't need templates so this might be would an X tabs component would look like if super writing the component you might just think this is the so this which is the extent as tabs are you're groups so maybe on a group page anionic a tab each group and not to do all the hard work down here and in your template you create this gives the new iterate over the tabs and you make the 10 absent you have a label and you or have again and the 2 panels and everyone's happy and it's really easy to use I will put my hand there again that there are some problems everyone is X taps component does everything from again with extensive what does everything so it's going to get unwieldy it's in a really huge and everybody's going to start saying things like and others abundant taps component of on on that to be accessible the tapenade some attributes that get changed a where you can do that when it does have 1 big component are you going to go get those other elements in a bid that tributes married and right back into decrease be getting where forcing tab panel tab got body on people this is just a tap input we shouldn't be down some sort of a data model and what will the tabs on the bottom of my template had them on the top but does this position the had have anything to do with the behavior or what if I don't even have any data and I just wanna make some static taps and discuss some static content was to get in there so or even worse off from what 1 static tab and a bunch of dynamic ones from data and there's just no way to do that when you build these large components within templates so instead with a little like that's we make next specs tabs and its apparent that when we have x tab list and that defines the data for the less and then we have an X tap component for the individual tabs now each 1 of the pieces of this component are separated by call this composite components to composite a bunch of smaller components together so now in this instance I could have just a static temporal default than economies than an tabs and 4 groups and I can now bound some sort of DataMover like just newsgroup that name instead of switching McGurk stuff into the label and stuff like that the other thing is for this we shall components can now manage their own state so if their act and its need to change when the selected the tap can just do that itself it knows that select the Dominican change it's actually you accordingly you know have have some parent big giant things using jake worry don't select things and then wondering why my using components this looks I when was writing decree OK OK get it was a real thing more convenient at the blood right watches stuff now so instead of doing a huge component I I make what are called convenience templates on top of those components so I do X tab stop and have so it's right back to that old the 1st interface but now I can compose the stats harboring need to this when I got temple the top tabs on the bottom I just make a new convenience template and you the tablets to the bottom and everyone else on the team can so these 2 X tab stop categories groups so the trick is and I know I have had the template and because the Ronald so doing this you get the composition flexibility with the scanning components without doing crazy hats keep a declarative keep a simple to these remember I I have a bias for no templates and as soon as likable has a temple I start thinking OK I'm I'm missing an abstraction in here and the best way to find were those abstractions or for the subcomponents this identify them by do they have events like if I clicker tab is something happened yes OK that should be its own component and so delegating from some parent checking any that . pardon and determine if it was a tab and performs an action and then the 2nd is that you need to manage its class for attrib u depending on the state of the whole component it should probably be on probably should did some components well and the best way that I found to talk about this with people and as myself is attracting about new developments in the Select option combination is just wonderful for this figure out what it is you get 2 different components and option tag which makes no sense outside of a selected and you have the slot tagging is gonna value with what you which often tag you interact with that of the body becomes on the parent and so on disagree reference of when you think about components and have abstract try to find a native things like a submit button inside of a form that changes the whole behavior of the form once you have an input types that down in there changes the behavior of hitting Enter inside of an input a text right so this input types of that the whole form reacts to that so
another tip is to test and develop a dynamic data the great thing about you get things updated just when you change a data and of the rovers wrapping bootstrap a daiquiri things I guarantee you yourself doesn't work when you go and change your data what tutoring iterating over an overreaching creating tabs with the straps you change the data but you then have a lot of teardown set of management but if you build these things native to and you consider the dynamic nature of the data that people did you you can and make them a lot more usable so to create verse tab interface work in discrete these dynamic tabs and then if I said delete that have that is active now it's gone like they're coding they're to say OK that thing is gone now which 1 should I select I should promise like the 1 produced so the the the the color code for me to build something that used to be really difficult with any other tab kind of components that when you build it needed a number you get this stuff almost for free but you need to develop with that in mind then you also get interesting things like this where I combined the data to the selected index and know anything on the control can bound the data and and the template can be validated and control which Tempe should be active of distributing or it's your stuff on a container with an application of Pfizer precompiler templates individually as the layout property the component I use a thing called IC style that we may infer minimal violent Bibleman of CSS for the component work that's for like 10 or 15 lines of CSS probit too much and then I use properly this year 6 model to publish to everything so this is I see
tabs so this my main script then everything initialize that reads the things on a container and then I export them all and then got my best that distributes all of these different formats and so in the case of browser 5 you can implement Starlight's attempts the application file require ice attempts and then go into your template indices it and it'll work and at so this is our distributors so if you're looking to distribute things on of this is the best way out but it's the most convenient that I found for us and structure we are working on a
lot of components you can find them at this address only Cabinet pages right now and more are going to be coming and of solid and we ever really needs like a few good library so we can point inside a Gaussian components that can use and they work with the data and that's it year
in the coming in and out of this thing in another and and and the leader of the new thing that you have there was the the the the this is really a a a a you and and again
Web Site
Subtraktion
Gemeinsamer Speicher
Zahlenbereich
Kartesische Koordinaten
Element <Mathematik>
Perspektive
Fächer <Mathematik>
Gruppe <Mathematik>
Mini-Disc
Programmbibliothek
E-Mail
Gerade
Prototyping
Metropolitan area network
Sichtenkonzept
Abstraktionsebene
Eindeutigkeit
Kontextbezogenes System
Quick-Sort
Videokonferenz
Rechter Winkel
Komponente <Software>
Gamecontroller
Speicherabzug
Wort <Informatik>
Message-Passing
Quelle <Physik>
Natürliche Zahl
Computer
Element <Mathematik>
Term
Steuerwerk
Framework <Informatik>
Code
Homepage
Eins
Minimum
Ordnungsbegriff
Skript <Programm>
Zusammenhängender Graph
Datenstruktur
Zeiger <Informatik>
Softwareentwickler
Figurierte Zahl
Default
Analysis
Lineares Funktional
Schnelltaste
Matching <Graphentheorie>
Kategorie <Mathematik>
Gebäude <Mathematik>
Cursor
Zeiger <Informatik>
Binder <Informatik>
Biprodukt
Funktion <Mathematik>
Rechter Winkel
Automatische Indexierung
Geschlecht <Mathematik>
URL
Cursor
Funktion <Mathematik>
Zusammenhängender Graph
Soundverarbeitung
Einfügungsdämpfung
Sichtenkonzept
Punkt
Element <Mathematik>
Quellcode
Code
Hinterlegungsverfahren <Kryptologie>
Datensichtgerät
Richtung
Einheit <Mathematik>
Menge
Rechter Winkel
Offene Menge
Datentyp
Endogene Variable
Gamecontroller
Skript <Programm>
Skript <Programm>
Zusammenhängender Graph
Inhalt <Mathematik>
Normalspannung
Meta-Tag
Kreisbewegung
Punkt
Gruppenoperation
PASS <Programm>
Zeitrichtung
Arithmetischer Ausdruck
Bildschirmmaske
Prozess <Informatik>
Vererbungshierarchie
Programmbibliothek
Skript <Programm>
Skript <Programm>
Metropolitan area network
Einfach zusammenhängender Raum
Schnelltaste
Sichtenkonzept
Krümmung
Template
Abstraktionsebene
Bildschirmsymbol
Fokalpunkt
Datenfluss
Gruppenoperation
Ego-Shooter
Funktion <Mathematik>
Server
Gamecontroller
Bildschirmsymbol
URL
Schlüsselverwaltung
Element <Mathematik>
Raum-Zeit
Reibungskraft
Element <Gruppentheorie>
Gamecontroller
Skript <Programm>
Computer
Zusammenhängender Graph
Bildgebendes Verfahren
Raum-Zeit
Cliquenweite
Retrievalsprache
Demo <Programm>
Bitfehlerhäufigkeit
Kartesische Koordinaten
Homepage
Richtung
Komponente <Software>
Datenmanagement
Mustersprache
Router
Figurierte Zahl
Schnittstelle
Softwaretest
Prinzip der gleichmäßigen Beschränktheit
Lineares Funktional
Schnelltaste
Parametersystem
Kategorie <Mathematik>
Template
Abfrage
Kontextbezogenes System
Biprodukt
Rechenschieber
Automatische Indexierung
Rechter Winkel
Ablöseblase
Information
Message-Passing
Aggregatzustand
Telekommunikation
Wasserdampftafel
Gruppenoperation
Zahlenbereich
Kombinatorische Gruppentheorie
E-Mail
Framework <Informatik>
Code
Whiteboard
Informationsmodellierung
Mailing-Liste
Vererbungshierarchie
Zusammenhängender Graph
Skript <Programm>
Attributierte Grammatik
Hyperlink
Quick-Sort
Office-Paket
Mereologie
Gamecontroller
Avatar <Informatik>
Quelle <Physik>
Aliasing
Schnelltaste
App <Programm>
Punkt
Kategorie <Mathematik>
Template
Schaltnetz
Gruppenoperation
Zahlenbereich
Kartesische Koordinaten
Element <Mathematik>
E-Mail
Fokalpunkt
Ereignishorizont
Komponente <Software>
Funktion <Mathematik>
Verschlingung
Rechter Winkel
Offene Menge
Gamecontroller
Skript <Programm>
Zusammenhängender Graph
Primitive <Informatik>
Innerer Punkt
Inferenz <Künstliche Intelligenz>
Natürliche Zahl
Bootstrap-Aggregation
Versionsverwaltung
Gruppenkeim
Iteration
Kartesische Koordinaten
Gradient
Element <Mathematik>
Homepage
Eins
Komponente <Software>
Datenmanagement
Gruppentheorie
Trennschärfe <Statistik>
Minimum
Figurierte Zahl
Default
Gerade
Schnittstelle
Präprozessor
Extremwert
Kategorie <Mathematik>
Template
Abstraktionsebene
Machsches Prinzip
Temporale Logik
Systemaufruf
Ein-Ausgabe
Konfiguration <Informatik>
Gruppenkeim
Menge
Automatische Indexierung
Rechter Winkel
Cloud Computing
Aggregatzustand
Instantiierung
Subtraktion
Ortsoperator
Klasse <Mathematik>
Gruppenoperation
Schaltnetz
Mathematisierung
Zahlenbereich
Hydrostatik
Informationsmodellierung
Bildschirmmaske
Determiniertheit <Informatik>
Datentyp
Vererbungshierarchie
Zusammenhängender Graph
Inhalt <Mathematik>
Maßerweiterung
Softwareentwickler
Demo <Programm>
Attributierte Grammatik
Schaltwerk
Diskretes System
Datenmodell
Mailing-Liste
Statistische Analyse
Quick-Sort
Binomialkoeffizient
Tablet PC
Gamecontroller
Funktion <Mathematik>
Browser
Adressraum
Programmbibliothek
Dateiformat
Skript <Programm>
Kartesische Koordinaten
Indexberechnung
Aliasing
Datenstruktur
Elektronische Publikation
Homepage
Videokonferenz
Offene Menge
Korrelation

Metadaten

Formale Metadaten

Titel The } in You
Serientitel Ember Conf 2014
Autor Florence, Ryan
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/35002
Herausgeber Confreaks, LLC
Erscheinungsjahr 2014
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract TDeclarative, evented, data-bound components will change the way you build abstractions in browser applications. The best part is, you're already an expert, you just might not know it yet. We'll discuss how to: Use a component Know when not to use a component Communicate with the world outside the component Refactor large components Test components in isolation Make components accessible.

Ähnliche Filme

Loading...
Feedback