Bestand wählen
Merken

Ember Components Transclude My Directives

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
the the the the the the the the thing we have to know about the Prize in the in a the home
or area to be a number of and I'm actually had a new I don't know if you know I I messed up the slide I thought that use directed realize how wide this thing would be so am only talking to you to actually about angular but I've actually standing in front of you at the Amber conference I may be talking to you but directives what all the do expecially Ramtron's occlusion because a lot of us have a tendency as ever developers to make fun of this thing called transfusion but really it's not that and all talked about so let me push this green button I think that's that's a time flow but it is not that so who my my name is John Paul I find the online all these locations you have any questions afterward please feel free to get in touch I just we did my slides if you would like that iodide like to limit the becomes hashtag the amber Contador all you wanna follow along with me I hope that you all have the Wi-Fi working so you can I'm jump I live in New York work for company called Penton media but if there is a lot of New York ever developers here so I was of that piece of the great vessels is revealed like 20 7 years of my kind of so many of you if you were there I would try to hire you but that's OK here Thailand jobs that I've loved jobs for for a long time the 1st time I was able to write code that my parents can actually see what I'm doing and had indiscretions and ounces of other programming languages down again but always come back to this so what I'm I gave a talk the the
path of evidence that this off with I have I have no jokes this presentation because every joke about has already been said by the 2 people this is not show this can you see the person over this is cutting off some of my slides so by J. Shiver and Thom Dale I have nothing else 40-city respecting comedy there's nothing here there's only code and hardcore understanding of angular so what is angular G so how media views then before why are you here as you car was like among the 2 go and this is really weird so Angular JS is that is a toolkit made by by Google and many others it is that it is hesitant to call itself a framework because it really isn't it is a tool kit that is extremely flexible allows you to build very similar things in the end an amber allows but it does this because of its flexibility it has a tendency to to have lots and lots of knobs and switches and leaders for a lot of it the the eyes to to add complexity but also allow you to do pretty much anything that you want to do that so I GeForce a lot out of 1 of these particular knobs and whistles are a bells and
whistles must completely Director so directives are the Swiss army knife of the angular developers Toolkit what directives are are there roughly a little bit of JavaScript and in the HTML template they can do many many things part of it is being able to make custom widgets for your application part of it is being able to decorate existing HTML with new functionality it's a lot of the directors have very very powerful and sort of complicated the but it allows you to do almost everything that ever components can do which I'll get to eventually turn so what is it now so you start with an example of a direct so a direct is as I said earlier in angular world is a piece of HTML and roughly a piece of JavaScript and match that so at this particular directive is defined to BJP alert message JP alert message has these these properties called a property called template and you actually use that somewhere in your HTML like you like we would for about us we would use that using this kind of syntax and this syntax is they can be a new tagging HTML I made a tag called GPL that message and but white I make a new tag I mean a you tag because this particular 1 of these switches in 1 of these rivers have a letter of the inside unions element to angular directive so that I'm I'm telling the angular system that I want to create a new element that I can use in my HTML in addition to that you you have you have special although letter called C when I have seen in my directive that directive is then bound to whenever I use the class someone HTML so this example I'm creating another directive where I have a template that just says directive example and i it's being used here inside of my HTML that angular you posses and figures out what to do with it because I've used the special thing called the I because I've used the class called GPL that message that I defined earlier so we're goin' so there are a few different places here were angular a gives you an API that really flexible you can say you want a class you can say that you want and you can see which 1 each to mull element is actually many more often than not gonna go into here I'll have even brought transfusion it don't worry I'm getting cassette collusion is that so directed that the directive API is actually much much more mass what you can do in the directive is have I think there is on the order of a dozen or 2 different kinds of special options and special little switches that act that make direct is extremely powerful but there's a lot to learn and there's a lot to understand if you want to be able to completely customize a directive for your particular use case in your application so as an
angular directed as a thing you a developer to the goal of using directives is to make a DSL in your application using HTML if you want to make custom elements for a custom tags for your particular use cases that's what you can do but along with that comes a lot of the burden of understanding all of the different little places in the angular directive API that you could make changes an angle directive could be restricted to element attributed to 2 classes of the shift action it can actually mix and match between these things it has isolated school that actually isolated scope as parity Valais it's good there so many of these things they're pretty hard to all keeping your head at 1 time but we what are we doing here what are we doing it because we're we're trying to learn how to build ambitious Web applications and all of the little nitty-gritty things there applications
action just as complicated as and you have the the we're both trying to solve very very similar problems with kids just because they have a complicated API and 1 place doesn't necessarily mean that the learning curves are in different they're both pretty large things to understand Angular and Ember during direct the directive API though is significantly more but there are a lot of very specific grain at places where you could go wrong but so how many of you have made fun of transfers OK so it's so it's really not that crazy so what is trans whose advice should use little directive example and all that was doing is take some HTML stuck in a template tag and use that someone else so you have the basic building blocks of basic primitives to add to create new tags to do interesting things like Spanish development of page but trans-Caucasian peace just this is really just some fancy the computer science term for the inclusion of 1 thing in something else this is not even though this is the Wikipedia at the image of what this is he actually keeping man like using the definition of something from Merriam-Webster chern do that so this is the Wikipedia article image all I just did it is I have this is a brow this is a browser that I'm running the slides and that you might see if you have to click on a slides from Twitter I have an image tag someone that image tag references this thing outside and says image tag give me the day that give me the actual bytes for the bit that it consists the that together compromise is the the together comprises my image I know actually in the same document have those bytes in there that's all losing its translations as a reference this thing over here and use it why I have an image tag referencing from bite somewhere else and use it with the browser pull it into to where I am now so all all the Wikipedia article for transfusion is like 500 word this nowhere near the longest article on Wikipedia you could go read that and understand it also an example in the 2nd case you have to do you want to know what the longest article on Wikipedia article is it he this the list of judicial clerks from the beginning of the US federal court system it won't even load from it so you can figure out my studies of D-3 visualization about this summer and fall asian I'm
looking at you wherever you are the pockets of translucent isn't so bad let's talk about what resolution actually is in an angular applications because this is like the last thing we really need to make fun of trends collusion is when you have this special thing called trans crude true in your directive definition which is 1 of those many many switches and knobs that you could turn to make a angular directive as precise and specific to your your needs as a developer you can but you can add a special thing called trans group through all that means is you take whatever is the inside the element and cut basically copy pasted just like an image tagged critics the bytes from somewhere else and moves it in to the HTML that you're using wherever this special thing called energy transfer understandably it's we words in its words that are computer science and and realistic I've never heard of before the whole angular thing this is actually up complicated all it's doing is saying when I use this Austrian example words used here I have my GP alert message directed I have some text inside like well like that and I lectured on when never come no one's going tomatoes still really worried about so so all of this trend seclusion idea is is moving the coat that moving the HTML that goes inside of this tag and cutting then copying it to where ever is inside the thing that's called energy transfer this is really not that complicated the name is crazy I know it's not that complicated and Amber actually has the exact same thing
the ever API to allows us to make some legal Pemba components and I think that the the name dropping of ever components right every single talk pretty much because this is the coolest feature ever I've added gush about this for months what in the exact same feature that I just showed you in angular being able to create a new custom piece that custom widget custom component so that I can use in many different ways of my application I can actually do that with just handed 1 using I don't have to go through the process of creating any jealous of code just to but basically move around HTML so that I can make a little reusable which that has a particularly in this case the the ability that in the background red and make the color white because that happens to be on my non desired thinks that designing should work with this this is the bars helper this is and the most component all I have to do is name I hand the bars thing with the name components slash in the beginning and that suddenly realizes and understands this is a component I want to use this somewhere I want a we use this thing and I want to be able to use it multiple different places and what would trends collusion is the we the crazy were from angular pitch is all that is here is this little and the worst thing called yield to the equivalent of all of the trans occlusion of jargon in problems is it all comes down to being able to move the text that's passed into this case Anambra component into someone else which this it's we can accomplish very similar rules to all of the in the gym much of the angular directive API inside amber components but what is that actually matter that I talked about web components
so well components are a part of a new issue of AI specifications are actually group of many different is to modify specifications and there that the goal behind all of these things are to be able to extend the way how many of you have read the Extensible Web Manifesto OK so Google for this something like eat this if something should happen between a lot so the Extensible Web manifestly should look into this it is about making sure that our standards bodies and and as advocates for the web ourselves to make sure that we are given access as much as possible to the primitives of the web so that we can put together these things and make make reusable widget-makers so much more than that that the browser makers already have the ability to do for example right now we don't have easy ability to make an image tag ourselves we couldn't will be pretty complicated for us to wrap up all of these things and make a new element once but the Web component specifications are actually implemented in browsers we have the ability to completely rule our own reusable which likely image tagger like the video tag before video actually exist this is this is a mechanism by which we can completely encapsulate HTML CSS and JavaScript give it completely its own scope such that it doesn't it doesn't have the ability to you that wanted to to affect the other parts of the page that means a finely where were given the power that which we can actually share these things because they're completely self and cap so where do web components work for us for
us so we and has not what components but component and the components had that give us the ability to roll these reusable widgets now we can build these things with much of the same constraints that Web components gives us but because of that allows us to make them so much more powerful and reusable to share around it allows us to encapsulate structure and behavior it's not it's not HTML for us at hand of ours is not just any old jobs before us it's as actually a component there is an API there for us to learn and for us to use in our applications but once we have a good grasp of what components can do we are able we are able to buildings reusable widgets and then below are owns just like our new directives goal is to build our own DSL an HTML we can build our own BSL-4 for how we want to build a specific pieces of our own applications in amber components and and the world is awesome
so what got me hooked on on the component that is a lot of documentation out there there are a lot of examples but what got me really thinking my god this is something I really love and want to talk about spread around not not withstanding the fact we have a communities of the OS I have a particular use case that I needed to achieve that work and this use case is I have something that every single developer probably in this room has built at some time in their life the this what I call it this is the dependent select by dependence select is something that I I wrote a member or not I have 1 select blocks like click and I need to select in this case the country and when I select something from that select by the Next select box changes and has the values that are on the wrong coast I understand but I live over there there so the they ways change over Canada give some of the promises that I actually know this you have do this said is that I and II KKK that's true so I I built this injury worry on a dozen times in my life I'm sure maybe even more than that it's not just states in countries it is users and rolls and job title in an industry or something like that there are so many different cases for this exact which so what can be really excited about this I was able to build it using amber components with a completely reusable public API this public API here this this the component that I'm using in my hand the boss template called dependent select fields all it knows about is the fact that I have some particular a standard for what my D. looks like it has some in nascent some options that are a string map to erase and he's have particular values to bind to in the current scope that beyond the controller or something like that and then this this particular piece of component is able to be reused even cross-application because there's nothing specific to the code that I'm actually writing here is nothing do specifically with application that I was right this is the core of the excitement about web components because we are then able to build all of these amazing of reusable widgets without worry about where these things will go in a lot of the power here comes from the fact that use side of December component in contrast with with how the angular directives work instead of December component you were not allowed to modify anything in the external scope although than what is explicitly pass into this component so I don't have to worry about a Viterbi copy and paste this some mine or I use this forms I have a slight hope anyone ever use like job a tag libraries JSP Thailand so I have this level that we get to something like that sometimes member complements last so once once I pass in this thing country in this thing called state which happens to be the values that I want to be saving from this welcome were getting out of this web component has this EMBA component as I click and select on these things and nothing else can actually be changed this is a completely encapsulated which this has all the Goals Web components except so far CSS styling is doesn't have particular styles just for that component but I can make sure that I have a very specified contract the outside world this is particularly the component can only change the values that I passed and nothing else which means that it's amazingly reusable but there I can talk to you a bit more about implementation which is actually not a complicated all the idea here is to look at this and the once we start thinking about our application in terms of the smaller reusable components there's so many exciting possibilities down so with good rectangular
forbid because you have you talked about in your what what is this thing angular by directionally bind al solu I scope transmitted element restricted direct so this this is like I don't I don't even know all the words here what they all mean by themselves so this is what is actually an amicable if you want to build and the component using which I encourage you also do 1 you should build an angular by rebound ISESCO presently element restricted to wreck this is this is a misconception that the phone will just say trans grew Deligne restricted directive Iceland so such a bi- directional about is 1 of the other flags but the funny thing is when you actually civilians and your application you pretty much always end up or you very often end up with all of these options checked because this is where you actually find all the reuse that that we're all looking for has no dry try everything up developers so if you wanna try this with angular use this and and work so how many
of views as he never tabs OK so this is another great example that if you're looking you take a few looking out on we take a look at here is another example of Member components in a way that we can we use something that's really really basic to all of our applications everywhere somewhere we have tabs and everywhere somewhere we wish we could be writing not the Bootstrap HTML for all of the individual classes in little things that make somehow bootstrap know that you're using tabs to render these things correctly and then hiding show the right places and clicking once you have a component like this called X tabs next pain you can just reuse this thing I've copied and pasted from this particular jest in all walk over the course of my usage of Ember because it has such an easy B I want to make pains like to just do this and suddenly everything just works when I click the right thing is shown at the right time this is another example of something that is in case we reusable there's really there's nothing about if it is a reusable in something that we all have to do pretty much all the time but there the component lists out there I have a component list Eric very has a component is sitting over there somewhere he's talking tomorrow and I I I think he might be maybe I might be pressuring him into it by saying this out loud but it might be unit testing my the really cool what got me hooked a directive that I showed earlier so make sure you go to the city of so there are a lot so you can't go on the list you can find different places at different pieces of code it might actually help what you're doing and hopefully we build up some sort of repertoire just similar to for for the action so Web components have a few poly feels right now WebCorp components are actually built into browsers mozilla has something called X tagged the poly feel for their Web components Google has something called polymer which is a poly plus lots of other things for components and they all they have what they have libraries which is list of lots of different components that you could use it you could take off the shelf and mix and match your application I'm hoping that 1 day we get to a similar state with components we can just go to the list and find what we're looking for take dependence select feels down installed in 1 day I live a so I have been I've been on this so box for a while and if the EC have where I probably really annoying about how great a components through the I've also really been trying to use this really creepy jet for a long time because I have to really love Carioca and I hope to see you all the tonight but my heart sings and it comes to hammer component becomes the components in general it means this is such an ideal that's this surpasses Sony ivory towers for me that I really hope that you are all X as excited about this as I am let alone all the side or the other community because we're actually here at the 1st ever come so I'm done what questions do you have know the so the components is not so angular API significant for directives is significantly larger in terms of surface area and whatever components and the components do not have does not support that particular use case I've sold that different ways that like dada view of redevelopment of but the but the component specifically focus on the the you can do this for memory by directionally I by directionally bound ISIS scope trends cluded held initiative directives is just that particular subset which I think is is very useful there are other you can use a components to rack things and write your own for example I could select filters is a slight wrapper for an actual select you know you can write things like an hour accomplish that goal additional there also ever views which you can use separately from components that do not provide all of the the reusable nests guarantees if you write it correctly you can you can accomplish that so other than the the question was how do directives communicate with each other so in angular and side in the previous question so while you're really making this singular spelling so the way they're future with a 1 of them is using view the buyer actually Ballindysert scope the values actually update together so if you put watches on particular values outside of the directive they will fire and that's 1 way you can actually require individual controllers inside of your hand inside a directed very similar to hasn't means I have a need said I need these other things so did make it accessible to me Amber Aguilar has a standard directors I believe a similar thing they're there for different about what you in that it world so I what I have done so far this is why I would like to get us to the world of a tag library an old school chum people I know this is there the way I've done that so far is actually by including copying based in that component into other component directory and then adding an equivalent the app it's that and select field component something like that there if there is a better way of love to hear that that is I would do it that way you would normally make a component whether or not you found it somewhere else OK thank you so much I really appreciate it the implemented methods of
the the and the the the the the the the and and and and the the the the the group and the law you got to go and and the the the the the you
Programmiersprache
Maschinenschreiben
Euler-Winkel
Applet
Zahlenbereich
Datenfluss
Code
Richtung
Videokonferenz
Rechenschieber
Dirac-Gleichung
Wechselsprung
Flächeninhalt
Prozess <Informatik>
Hypermedia
Vererbungshierarchie
Skript <Programm>
URL
Softwareentwickler
Bit
Subtraktion
Klasse <Mathematik>
Kartesische Koordinaten
Element <Mathematik>
Kombinatorische Gruppentheorie
Komplex <Algebra>
Template
Code
Framework <Informatik>
Richtung
Widget
Softwareentwickler
Addition
Lineares Funktional
Sichtenkonzept
Matching <Graphentheorie>
Kategorie <Mathematik>
Template
Physikalisches System
Software Development Kit
Quick-Sort
Konfiguration <Informatik>
Rechenschieber
Funktion <Mathematik>
Einheit <Mathematik>
Hypermedia
Mereologie
Ordnung <Mathematik>
Message-Passing
Magnetbandkassette
Bit
Browser
Gruppenoperation
Web-Applikation
Klasse <Mathematik>
Mathematisierung
Wärmeübergang
Kartesische Koordinaten
Element <Mathematik>
Term
Homepage
Richtung
Translation <Mathematik>
Visualisierung
Primitive <Informatik>
Inklusion <Mathematik>
Softwareentwickler
Kurvenanpassung
Informatik
Bildgebendes Verfahren
Metropolitan area network
Schreib-Lese-Kopf
Verschiebungsoperator
Umwandlungsenthalpie
Beobachtungsstudie
Template
Winkel
Gebäude <Mathematik>
Mailing-Liste
Ähnlichkeitsgeometrie
Physikalisches System
p-Block
Rechenschieber
Twitter <Softwareplattform>
Gerade Zahl
Last
Attributierte Grammatik
Wort <Informatik>
Inklusion <Mathematik>
Prozess <Physik>
Gruppenkeim
Schlussregel
Wärmeübergang
Kartesische Koordinaten
Element <Mathematik>
Äquivalenzklasse
Code
Eins
Richtung
Energiedichte
Benutzerbeteiligung
Abschließung
Twitter <Softwareplattform>
Widget
Wort <Informatik>
Softwareentwickler
Informatik
Schnitt <Graphentheorie>
Message-Passing
Bildgebendes Verfahren
Bildauflösung
Nebenbedingung
Euler-Winkel
Browser
Geheimnisprinzip
Kartesische Koordinaten
Element <Mathematik>
Videokonferenz
Homepage
Richtung
Benutzerbeteiligung
Prozess <Informatik>
Widget
Widget
Primitive <Informatik>
Maßerweiterung
Datenstruktur
Bildgebendes Verfahren
Cross-site scripting
Leistung <Physik>
Umwandlungsenthalpie
Kraftfahrzeugmechatroniker
Gebäude <Mathematik>
Kugelkappe
Mereologie
Standardabweichung
Bit
Quader
Element <Mathematik>
Mathematisierung
Implementierung
Kartesische Koordinaten
Element <Mathematik>
Term
Code
Data Mining
Übergang
Richtung
Benutzerbeteiligung
Bildschirmmaske
Prozess <Informatik>
Fahne <Mathematik>
Trennschärfe <Statistik>
Widget
Kontrast <Statistik>
Gleitendes Mittel
Softwareentwickler
Leistung <Physik>
Schnelltaste
Videospiel
Jackson-Methode
Template
p-Block
Konfiguration <Informatik>
Design by Contract
Mapping <Computergraphik>
Datenfeld
Körper <Physik>
Benutzerschnittstellenverwaltungssystem
Grundsätze ordnungsmäßiger Datenverarbeitung
Gamecontroller
Wort <Informatik>
Speicherabzug
Standardabweichung
Aggregatzustand
Zeichenkette
Offene Menge
Subtraktion
Komponententest
Quader
Browser
Gruppenoperation
Klasse <Mathematik>
Bootstrap-Aggregation
Gruppenkeim
Kartesische Koordinaten
Gesetz <Physik>
Term
Polygon
Code
Richtung
Benutzerbeteiligung
Flächentheorie
Trennschärfe <Statistik>
Wrapper <Programmierung>
Programmbibliothek
Mixed Reality
Turm <Mathematik>
Streuungsdiagramm
App <Programm>
Filter <Stochastik>
Sichtenkonzept
Jackson-Methode
Mailing-Liste
Ähnlichkeitsgeometrie
Quick-Sort
Videokonferenz
Arithmetisches Mittel
Teilmenge
Datenfeld
Flächeninhalt
Twitter <Softwareplattform>
Festspeicher
Verzeichnisdienst
Aggregatzustand

Metadaten

Formale Metadaten

Titel Ember Components Transclude My Directives
Serientitel Ember Conf 2014
Autor Paul, John
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/34989
Herausgeber Confreaks, LLC
Erscheinungsjahr 2014
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract I know this is out of left field, but I’d like to teach you all some Angular, and in the process, bring you to a love of Ember Components unseen since Leo sank into his watery grave for Kate. We all make fun of directives and transclusion, but Ember has very equivalent features, which much more elegant APIs. Once we have a basic understanding of what directives and components bring to the table, I’ll explain why Ember Components are awesome, unbelievably useful, and unparalleled in expressiveness.

Ähnliche Filme

Loading...
Feedback