Ember Components Transclude My Directives
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 20 | |
| Author | ||
| License | CC Attribution - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/34989 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
EmberConf 201419 / 20
3
6
13
15
17
18
20
00:00
VideoconferencingEuler anglesDirac equationScripting languageJava appletFunction (mathematics)Template (C++)Execution unitAttribute grammarInclusion mapGUI widgetCross-site scriptingField (computer science)Element (mathematics)Point cloudOpen setTemplate (C++)Latent heatRaster graphicsElement (mathematics)Direction (geometry)Medical imagingPhysical systemStandard deviationAdditionComputer configurationParsingCASE <Informatik>2 (number)Figurate numberElectronic mailing listMereologyMechanism designSocial classSlide ruleWeb browserMessage passingDifferent (Kate Ryan album)Primitive (album)Multiplication signWeb 2.0MathematicsGUI widgetCategory of beingTwitterProcess (computing)Software developerArithmetic meanWordVideoconferencingString (computer science)Inheritance (object-oriented programming)CodeLibrary (computing)Cartesian coordinate systemGame controllerKeyboard shortcutVisualization (computer graphics)Power (physics)Web pageQuicksortInclusion mapTouch typingOrder (biology)Contrast (vision)Term (mathematics)TowerExtension (kinesiology)Mobile appAreaSurface1 (number)Design by contractProgramming languageMixed realityMatching (graph theory)Presentation of a groupDisk read-and-write headState of matterCore dumpSimilarity (geometry)Constraint (mathematics)Java appletBitExecution unitField (computer science)Bootstrap aggregatingCuboidBuildingGroup actionPersonal identification numberSelectivity (electronic)Functional (mathematics)Equivalence relationWeb applicationComputer scienceCurveFlagWrapper (data mining)Video gameFilter <Stochastik>SubsetUniform resource locatorDirectory serviceSpherical capView (database)Hydraulic jumpShift operatorNumberSemiconductor memoryDataflowParity (mathematics)Translation (relic)GodRule of inferenceHypermediaHeat transferEncapsulation (object-oriented programming)Data structureImplementationPhysical lawCompact CassetteBlock (periodic table)Jackson-MethodeUnit testingFilm editingLevel (video gaming)Observational studyStructural loadPolygonMoving averageImage resolutionBoss CorporationForm (programming)Data miningFood energyAngleSakokuSoftware development kitSoftware frameworkComplex (psychology)Metropolitan area networkXMLComputer animation
Transcript: English(auto-generated)
00:15
Hello everyone, how are you? Pumped to be at EmberConf? Because I'm actually at AngularConf.
00:22
I don't know if you know, I've messed up these slides, I thought, it's also Angular Direct, I didn't realize how wide this thing would be. So I'm going to be talking to you, actually, about Angular, but I am actually standing in front of you at the Ember conference. I'm going to be talking to you about Angular directives, what all they do, and especially around transclusion, because a lot of us have a tendency, as Ember developers,
00:44
to make fun of this thing called transclusion, but really, it's not that bad, and I'll talk to you about that soon. So, let me push this green button. I think that starts a timer? No. Ah, it is not. That's okay. So, who am I? My name is John Paul. You can find me online at all these locations.
01:03
If you have any questions afterward, please feel free to get in touch. I just tweeted my slides. If you would like, I tweeted them at the EmberConf hashtag, the EmberConf Twitter handle. If you want to follow along with me, I hope that you all have the Wi-Fi working. You can. I'm John Paul. I live in New York. I work for a company called Penton Media.
01:22
There's a lot of New York Ember developers here, so I wouldn't... Seriously, there's like 20% of you or something like that. I know so many. If you were there, I would try to hire you, but that's okay for me here. So I love JavaScript. I've loved JavaScript for a long time. It's the first time I was able to write code that my parents could actually see what I was doing.
01:43
I've had indiscretions and dalliances with other programming languages now and again, but I always come back to JavaScript. So, what am I going to talk... I want to start this off with... I have no jokes in this presentation because every joke about Ember has already been said by the two people.
02:02
This is not showing... Can you see the person over there? This is cutting off some of my slides. So, by Jen Schiffer and Tom Dale, I have nothing else for you. So if you're expecting comedy, there's nothing here. There's only code and hardcore understanding of Angular.
02:20
So, what is AngularJS? How many of you have used Angular before? Why are you here? ng-conf was like a month or two ago. This is really weird. So AngularJS is a toolkit made by Google and many others. It is hesitant to call itself a framework, because it really isn't.
02:40
It is a toolkit that is extremely flexible. It allows you to build very similar things in the end than Ember allows. But it does this because of its flexibility. It has a tendency to have lots and lots of knobs and switches and levers for a lot of its APIs to add complexity,
03:00
but also allow you to do pretty much anything that you want to do ever. So, AngularJS has a lot of knobs. And one of these particular knobs and whistles, or bells and whistles, I just messed that up completely, are directives. So directives are the Swiss army knife of the Angular developer's toolkit. What directives are, are there roughly a little bit of JavaScript
03:21
and a little bit of HTML template that 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. Directives have a very, very powerful and sort of complicated API, but it allows you to do almost everything that Ember components can do,
03:41
which I'll get to eventually. I'll start off with an example of a directive. A directive is, as I said earlier, in Angular world, it is a piece of HTML and roughly a piece of JavaScript that match that. So, this particular directive is defined to be JP alert message.
04:02
JP alert message has these properties called restrict and a property called template. And you actually use that somewhere in your HTML like we would for Ember and Handlebars. We would use that using this kind of syntax. And this syntax is, I made a new tag in HTML. I made a tag called JP alert message.
04:22
But why did I make a new tag? I made a new tag because this particular, one of these switches and one of these levers has the letter E inside of it. E means element to an Angular directive, so I'm telling the Angular system that I want to create a new element that I can use in my HTML.
04:41
In addition to that, you can have a special other letter called C. When I have C in my directive, that directive is then bound to whenever I use the class somewhere in HTML. So, this example, I'm creating another directive where I have a template that just says directive example. And it's being used here inside of my HTML that Angular parses and figures out what to do with it
05:05
because I have used this special thing called, because I've used the class called JP alert message that I defined earlier. So, there are a few different places here where Angular gives you an API that's really flexible. You can say you want a class, you can say that you want an HTML element.
05:23
There's actually many more options that I'm not going to go into here. And I know I haven't even brought up transclusion yet, but don't worry. I'm getting there because transclusion isn't that bad. So, the directive API is actually much, much more massive. What you can do in a directive is have, I think there's on the order of a dozen or two different kinds of special little options
05:44
and special little switches that make directives 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 developer, the goal of using directives
06:02
is to make a DSL in your application using HTML. If you want to make custom elements and 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.
06:20
An Angular directive could be restricted to element, it could be restricted to class, it could be restricted to attribute. It can't actually be mixed and matched between these things. It has isolated scope, it has attribute-isolated scope, it has parent eval-isolated scope. There are so many of these things that are pretty hard to all keep in your head at one time. But, what are we doing here? What are we doing at EmberConf?
06:41
We are trying to learn how to build ambitious web applications and all of the little nitty-gritty things that are there. Our applications are actually just as complicated as an Angular application. We are both trying to solve very, very similar problems. Just because they have a complicated API in one place doesn't necessarily mean that the learning curves are any different. They're both pretty large things to understand, Angular and Ember.
07:04
The directive API, though, is significantly more... There are a lot of very specific granular places where you could go wrong. But... So how many of you have made fun of Transclusion before? Okay, so... It's really not that crazy.
07:23
So what is Transclusion? I showed you this little directive example and all that was doing is take some HTML stuck in a template tag and use that somewhere else. So you have the basic building blocks, the basic primitives to create new tags that do interesting things like spit HTML out onto a page.
07:40
But Transclusion... Transclusion is really just some fancy big computer science term for the inclusion of one thing in something else. This is not even... So this is the Wikipedia image of what this is. If you actually Wikipedia... Oh man, is this like using the definition of something from Merriam-Webster? I shouldn't do that. So this is the Wikipedia article image.
08:03
All I just did is I have... This is a browser that I'm running these slides in that you might see if you actually click on the slides from Twitter. I have an image tag somewhere. That image tag references this thing outside and says, image tag, give me the data, give me the actual bytes for the bitmap that together comprises my image.
08:27
I don't actually in the same document have those bytes in there. That's all Transclusion is. Transclusion says, reference this thing over here and use it where I am. I have an image tag that's referencing some byte somewhere else and use it with the browser, pull it into where I am right now.
08:43
All in all, the Wikipedia article for Transclusion is like 500 words. It's nowhere near the longest article on Wikipedia. You could go read that and understand it. I'll show you an example in a second. In case you actually do want to know what the longest article on Wikipedia is, it's the list of judicial clerks from the beginning of the US federal court system.
09:03
It won't even load for me. There's got to be some interesting D3 visualization about this that someone can pull off. Asian, I'm looking at you wherever you are. Transclusion isn't so bad. Let's talk about what Transclusion actually is in an Angular application
09:20
because this is the last thing we really need to make fun of. Transclusion is when you have this special thing called Transclude True in your directive definition, which is one of those many, many switches and knobs that you could turn to make your Angular directive as precise and specific to your needs as a developer,
09:42
you can add this special thing called Transclude True, and all that means is take whatever is inside the element and basically copy-paste it just like an image tag. It takes the bytes from somewhere else and moves it into the HTML that you're using wherever this special thing called ng-transclude is.
10:02
Understandably, it's weird words, and it's words that are computer science-y and realistically I've never heard of before the whole Angular thing, but this is actually not that complicated. All it's doing is saying, when I use this, I'll show you an example of where it's used. Here I have my JP alert message directive. I have some text inside. Like, oh my god, I'm actually talking about Angular and EmberConf,
10:21
but no one's throwing tomatoes at me. I'm still really worried about this. So all this transclusion idea is is moving the HTML that goes inside of this tag and cutting that and copying it to wherever is inside the thing that's called ng-transclude.
10:42
This is really not that complicated. The name is crazy, I know, but it's not that complicated. And Ember actually has the exact same thing. The Ember API allows us to make something called Ember components, and I think that there's been name-dropping of Ember components throughout every single talk, pretty much, because this is the coolest feature ever.
11:01
I've gushed about this for months. The exact same feature that I just showed you in Angular, being able to create a new custom widget, a custom component that I can use in many different places in my application, I can actually do that with just handlebars. Using Ember, I don't have to go through the process of creating any JavaScript code
11:23
just to basically move around HTML so that I can make a little reusable widget that has particularly, in this case, the ability to paint the background red and make the color white because that happens to be how my non-designed self thinks that designing should work. What this is is a handlebars helper, or this is a handlebars component.
11:44
All I have to do is name my handlebars thing with the name component slash in the beginning, and then Ember suddenly realizes and understands, ah, this is a component, I want to use this somewhere, I want to reuse this thing, and I want to be able to use it in multiple different places. And what transclusion is, the crazy word from Angular,
12:03
all that is here is this little handlebars thing called yield. So the equivalent of all of the transclusion jargon and problems comes down to being able to move the text that's passed into, in this case, an Ember component, into somewhere else, which this is.
12:21
So we can accomplish very similar goals to much of the Angular directive API inside of Ember components. But why does that actually matter? So I'd like to talk to you about web components. So web components are a part of new HTML5 specifications. They're actually a group of many different HTML5 specifications. And the goal behind all of these things are to be able to extend the web.
12:45
How many of you have read the Extensible Web Manifesto? OK, so Google for this. And if someone can tweet this or something, I'm sure it'll happen. Retweet it a lot. So the Extensible Web Manifesto, you should look into this. It is about making sure that our standards bodies and us as advocates for the web ourselves,
13:01
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 reusable widgets, make it so much more than that, that the browser makers already have the ability to do. For example, right now, we don't have the easy ability to make an image tag ourselves. It would be pretty complicated for us to wrap up all of these things and make a new element.
13:23
Once the web component specifications are actually implemented in browsers, we have the ability to completely roll our own reusable widgets, like the image tag or like the video tag before video tag actually existed. 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 have the ability,
13:44
even if it wanted to, to affect the other parts of the page. That means that finally we're given the power that we can actually share these things because they're completely self-encapsulated. So where do web components work for us? For us, we are Ember developers. Ember has, not web components, but Ember has Ember components.
14:02
And Ember components 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, it 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 HTML. For us, it's handlebars.
14:21
It's not just any old JavaScript. For us, it's actually Ember components. 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 Ember components can do, we are able to build these reusable widgets and then build our own, just like how Angular Directives' goal is to build our own DSL and HTML,
14:40
we can build our own DSL for how we want to build specific pieces of our own application in Ember components. And the world is awesome. So what got me hooked on Ember components? There's a lot of documentation out there. There are a lot of examples. But what got me really thinking, oh my god, this is something that I really love and want to talk about and spread around,
15:02
notwithstanding the fact that the Ember community is utterly awesome. I had a particular use case that I needed to achieve at 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. What I call this is the dependent select box.
15:22
The dependent select box is something that, regardless of Ember or not, I have one select box that I click and I need to select, in this case a country. And when I select something from that select box, the next select box changes and has the values that are on the wrong coast, I understand. But I live over there. I'm sorry.
15:41
So then when you change it over to Canada, it gives some of the provinces that I actually know. I can't kid. It's true. So I built this in jQuery a dozen times in my life, I am sure. Maybe even more than that.
16:01
And it's not just states and countries. It is users and roles and job title and industry or something like this. There are so many different use cases for this exact widget. So what got me really excited about this is I was able to build this using Ember components with a completely reusable public API.
16:21
This public API here, this Ember component that I'm using in my handlebars template called dependent select fields, all it knows about is the fact that I have some particular standard for what my data looks like. It needs to pass in some options that are string mapped to arrays. And it needs to have particular values to bind to in the current scope,
16:42
either on the controller or something like that. And then this particular piece of component is able to be reused even across applications because it has nothing specific to the code that I'm actually writing here. It has nothing to do specifically with the application that I was writing. This is the core of the excitement about web components because we are then able to build all of these amazing reusable widgets
17:05
without worry about where these things will go. And a lot of the power here comes from the fact that inside of this Ember component, in contrast with how the Angular directives work, inside of this Ember component, you are not allowed to modify anything in the external scope
17:22
other than what is explicitly passed into this component. So I don't have to worry about, if I copy and paste this from somewhere online, or I use this from somewhere, I have a slight hope. Has anyone ever used Java tag libraries? JSP tag libraries? No? Okay. So I have a slight hope that we get to something like that sometime with Ember components, but I don't have to talk about it right now.
17:41
So once I pass in this thing country and this thing called state, which happens to be the values that I want to be saving from this web component, or getting out of this web component, or this Ember component, as I click and select on these things, nothing else can actually be changed. This is a completely encapsulated widget. This has all of the goals of web components except, so far, CSS styling,
18:03
because it doesn't have particular styles just for that component. But I can make sure that I have a very specified contract with the outside world. This particular Ember component can only change the values that I pass in and nothing else, which means that it's amazingly reusable. Later, I can talk to you a little bit more about the implementation, which is actually not that complicated at all,
18:22
but the idea here is to look at this and see, once we start thinking about our applications in terms of these smaller reusable components, there are so many exciting possibilities down the road. So, let's go back to Angular for a bit, because really I'm here to talk to you about Angular. What is this thing? Angular bidirectionally bind isolate-scope-transcluded-element-restricted-directives.
18:44
So, this is like... I don't even know all the words here, what they all mean by themselves. So, this is what is actually an Ember component. If you want to build an Ember component using Angular, which I encourage you all to do one day, you should build an Angular bidirectionally bound
19:00
isolate-scope-transcluded-element-restricted-directives. There's some misconceptions out there, and some people just say transcluded-element-restricted-directives-isolate-scope. It's not true. So, bidirectionally bound is one of the other flags here. The funny thing is, when you actually start building an Angular application, you pretty much always end up, or you very often end up,
19:21
with all of these options checked, because this is where you actually find all of the reuse that we're all looking for as dry everything off developers. So, if you want to try this with Angular, use this, and it will all work out.
19:40
So, how many of you have seen Ember Tabs? Okay, so this is another great example that, if you're looking, you should take a look at. Here is another example of Ember components in a way that we can reuse 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
20:00
not the Bootstrap HTML for all of the individual classes and little things that make, somehow, Bootstrap know that you're using tabs to render these things correctly, and then hide and show the right places when you're clicking. Once you have a component like this, called xTabs and xPane, you can just reuse this thing. I have copied and pasted from this particular JS pin a lot
20:23
over the course of my usage of Ember, because it has such an easy API. I want to make panes, I can 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 intensely reusable. There's nothing about this that isn't reusable,
20:41
and something that we all have to do pretty much all the time. Okay, so there are a few component lists out there. I have a component list. Eric Berry has a component list. He's sitting over there somewhere, and he's talking tomorrow. I think he might be, maybe, I might be pressuring him into it by saying this out loud, but he might be unit testing the really cool
21:02
What Got Me Hooked directive that I showed earlier. Make sure you go to that, see if you have an option. So there are a lot of, so you can go to these lists, you can find different places, different pieces of code that might actually help what you're doing, and hopefully we build up some sort of repertoire, just similar to, so web components have a few polyfills.
21:24
So right now, web components are not actually built into browsers, but Mozilla has something called XTag, which is a polyfill for their web components. Google has something called Polymer, which is a polyfill plus lots of other things for web components, and they have libraries with just lists of lots of different components
21:40
that you could use, that you could take off the shelf and mix and match in your application. I'm hoping that one day we get to a similar state with components where we can just go to these lists and find what we're looking for, take dependent select fields down and install it in your application. One day, I believe it will happen. So I have been on this soapbox for a while,
22:01
and if you see me on Twitter, I probably am really annoying about how great Ember components really are. I've also really been trying to use this really creepy GIF for a long time, because I actually really love karaoke, and I hope to see you all there tonight. But my heart sings when it comes to Ember components,
22:20
when it comes to components in general. It means that this is such an ideal, it surpasses so many ivory towers for me, that I really hope that you are all as excited about this as I am, let alone all of the excitement around the Ember community, because we're actually here at the first EmberConf ever. So, I'm done. What questions do you have?
22:43
No. So, Angular's API is significant for directives, it's significantly larger in terms of surface area than what Ember components does. Ember components does not support that particular use case. I have solved that in different ways that I'd like to talk about, if you want, we can talk about it separately. But Ember components specifically focus on the,
23:04
can I do this from memory, bidirectionally bound, isolated scope, transcluded element restricted directives. It is just that particular subset, which is very, very useful. You can use Ember components to wrap things, and write your own, for example, like a select field is a slight wrapper for an actual select field.
23:23
You can write things like that in order to accomplish that goal. Additionally, there are also Ember views, which you can use separately from components, that do not provide all of the reusableness guarantees, but if you write it correctly, you can accomplish that goal as well. So, the question was, how do directives communicate with each other in Angular?
23:44
Sorry, I didn't repeat the previous question. So, wow, you're really making this AngularCon. Just letting you know. So, there are a few different ways. So, one of them is using, if you use the bidirectionally bound isolate scope, the values actually update together. So, if you put watches on particular values outside of the directive, they will fire.
24:02
That's one way. You can actually require individual controllers inside of your directive. It's very similar to Ember has needs. Ember needs says I need this other thing, so make it accessible to me. Angular directives, I believe, allow a similar thing. There are a few different ways,
24:21
but we'll talk about it after. Yes? You mean in Ember world? So, what I have done so far, this is why I would like to get us to the world of a tag library, and old school Java people might know what this is. The way I have done that so far is actually by including, copying, pasting that component into the component directory,
24:42
and then adding an equivalent app.dependentSelectField component, something like that. If there is some better way, I'd love to hear, but I would do it the way you would normally make a component, whether or not you found it somewhere else.
25:02
Okay, thank you so much. I really appreciate it. Extensible web manifesto!