066 AiA How To Build Directives Around Another JavaScript Library with Uri Shaked

00:00 0:31:09
Download MP3

Submit a CFP or get an early bird ticket! Check out JS Remote Conf!


02:18 - Uri Shaked Introduction

04:27 - Uri’s Libraries

05:11 - Advantages of wrapping things around directives

10:33 - How do you wrap things around directives?

13:52 - Building angular-moment and angular-spinner

17:09 - Things to do to wrap a component in an Angular directive

The ES2016 Column Operator (Uri)Bullshit (The Game) (Uri)Angular — Introduction to Reactive Extensions (RxJS) (Lukas)Kamal Meattle: 3 Plants that Best Recycle Air (Chuck)Charles Max Wood: My podcasting setup #ufy (Chuck)


[This episode is sponsored by Hired.com. Every week on Hired, they run an auction where over a thousand tech companies in San Francisco and New York and LA get on JavaScript developers providing to put the salary and equity upfront. The average JavaScript developer gets an average of 5-15 introductory offers and an average salary of over $130,000 a year. You just can either accept an offer and go right into interviewing with the company and neither with that any continuing obligations. It's totally free for users, and when you're hired, they'll also give you a $2,000 signing bonus as a "Thank You" for using them. But if you use the Adventures in Angular link, you'll get a $4,000 bonus instead. Finally, if you're not looking for a job but know someone who is, you can refer them to Hired to get a $1,337 bonus if they accept the job. Go sign up at Hired.com/AdventuresinAngular.]**[Ready to master AngularJS? Oasis Digital offers Angular Boot Camp, a three-day, in-person workshop class for individuals or teams. Bring us to your site or send developers to ours classes in St. Louis or San Francisco – AngularBootCamp.com.]**[This episode is sponsored by Digital Ocean. Digital Ocean is the provider I use to host all of my creations. All the shows are hosted there, along with any other projects I come up with. Their user interface is simple and easy to use. Their support is excellent. And their VPSes are backed on solid-state drives and are fast and responsive. Check them out at DigitalOcean.com. If you use the code “Angularadventures” you'll get a $10 credit!]**[This episode is sponsored by Telerik, the makers of Kendo UI. Kendo UI integrates seamlessly with both AngularJS 1.x and 2.0. It provides everything you need to integrate with AngularJS out-of-the-box bindings, component configuration and directives, template directives, form validation, event handlers and much more and yet Kendo UI tooling does not depend on AngularJS. So if you want to use it with Angular or not, that’s totally up to you. You could check it out at KendoUI.com] **CHUCK: Hey everybody and welcome to episode 66 of the Adventures in Angular Show. This week on our panel we have Lukas Reubbelke. LUKAS: Hello. CHUCK: I’m Charles Max Wood from Devchat.tv. Quick shout out; early bird tickets and the call to proposals are both available for JS Remote Conf next January, so if you’re interested, go check it out at jsremoteconf.com. We also have a special guest this week and that is Uri Shaked. URI: Yeah, you pronounced it right. LUKAS: That’s Shaked to you. CHUCK: I only had to say it ten million times to get it right. Do you want to introduce yourself really quick? URI: Yes. I’m Uri and I’m an AngularJS JD. I also have some nice open source projects which we are going to discuss today. And since this is episode number 66, I think we can also talk about the new version of Internet Explorer – IE 6.66 because they’re [inaudible]. Yeah. Last week in AngularConnect –. CHUCK: Yeah, if you thought IE 6 was hell. LUKAS: Yeah. URI: Yeah, and I also organized the Israeli ng-conf. I organized it last year and it was awesome. We had 500 Angular developers attending. CHUCK: Oh, so you and [inaudible] are like best friends then right? URI: More than best friends. [Chuckles] LUKAS: They’re frenemies. URI: Frenemies. No, we are more than best friends. We even have dinners together sometimes. [Chuckles] Yeah, and then I also love robotics and electronics so I do all sorts of stuff with electronics. Like last year I built xylophone out of hard drives and beer bottles. You can sign [inaudible] you. CHUCK: Boy, you have too much fun. URI: That’s the plan. That’s my master plan, too. Too much fun. I also work for Blackberry. Wen is ay that, people always ask me ‘do they still exist?’ Yeah, they still exist. CHUCK: [Chuckles] Somebody’s got to help the antique shops stay open, right? URI: [Chuckles] Yeah. CHUCK: Awesome. URI: Oh, I forgot to mention. I also dance Salsa and teach people how to dance so if you’re up to Salsa dancing lesson, you’re invited. CHUCK: Oh nice. Alright, well we brought you along today to talk about how to build directive around other libraries. And before the show you mentioned that you have a couple. Do you want to talk about what those are really quick and what they do? URI: Yeah, so there is angular-moment which wraps Moment.js and I think the main feature that it provides is having to be five seconds ago, so if you want show user what was the last time something was modified, you could use that. There is also angular-spinner who just wrap around Spin.js and lets you show a nice spinner to your users while they’re waiting for their Halloween costumes to arrive. CHUCK: Awesome. So I’m just going to dig in to this because for the most part the Moment.js has some stuff to it; handling times and dates and that can be a mess so I can definitely see where you may want to wrap that with a directive or you can use all over the place, but the Spinner – I may be using it on one or two places on my app, so what’s the advantage of having that put into a directive? URI: I think that – if you have a spin.js in your application and then you have to –. It’s a few lines of code to wrap it into a directive but I think it run the same for both Moment.js and Spin.js. When I wanted to add them to my application, I had to either come up with my own directive and back at that time I wasn’t really familiar with all the directives options so I didn’t know what was the best way to wrap them. Then I had to glue it and I found several approaches and several answers and each of them had its own [inaudible] and then I decided – I thought to myself, “This might be some problem that many application developers face and Spinner is a very common thing that you probably needed in almost any kind of application so I decided to take it one step ahead instead of just integrating the directive that I came up with into my application, wrap it as a third party library and let other people start using it. CHUCK: So it makes it more portable? Is that really the driver behind this? URI: That saves time for other developers and I think the amazing thing about it is once you release those directives to the open source, to GitHub, you start seeing users adding features and making something that you wouldn’t even thought about. It usually starts with some bug fixes like with the Moment.js directive, the one that says how much time ago was something. I didn’t [inaudible] versions, I didn’t clear the scope – I didn’t destroy the time when the scope was destroyed. I got that as a pull request but then I see people adding also the features, having also the suggestions so I think it’s both about saving other people’s time and then also getting a better directive out of the community, a better implementation. LUKAS: If I could jump in here, on other thing that I thought when wrapping a vector party component in Angular is that you actually surface a more idiomatic way to actually leverage that particular component. So for instance, if you look at the spin.js website, the way to actually spin that up is you actually have to [inaudible] the spinner to some kind of dom element where with the angular-spinner corrective is that you can actually instantiate that in an Angular way which is going to basically promote consistency across the markup in your templates. And so that is, to me, one of the biggest advantages of taking a third party component. Having it in an Angular directive is now you can consume that directive with a component in an Angular idiomatic way that makes sense and is consistent across your entire application. CHUCK: Just to pile on that, too, I’s also in the place where you’re expected to be, namely in this case in the library but it’ll also show up in the controller instead of trying to hunt through a whole bunch of mess of jQuery to figure out where you appended that particular feature or function to your dom element. LUKAS: And that is the beauty of directives. One of the beautiful things is that a lot of times if you look at the documentation it’s like, “Oh, I have to query the dom, I have to find the element I want to append this to.” Whereas with the directive, they give you the element right injected into the directive. So then you can say element.whatever; you can just instantiate it from there. That’s really nice that they deliver the element that you actually want to instantiate this component on. URI: Right, and then I think another interesting point about the angular-moment library, now I’ve just started putting it into Angular 2 and when I started thinking about what it should look like with Angular 3, I realized that I no longer need to make it a directive. The reason it was a directive in Angular 1 is because we constantly have to update them as time goes by. Now, with Angular 2, we can use the new [inaudible] feature which lets us hook into the change detection and tell Angular ‘Okay, we need to update something because I know that something should be changed’. I think that when you come to wrap some kind of third party library, you have to see if that directive is a good fit because in some cases, filters or now pipes with Angular 2 or services can provide a better way of obstructing the third party library. CHUCK: So I guess the next question is, let’s say that I have my own JavaScript library – we’ll call it Chuck.js – and it does everything. It walks the dog, it does authentication and it shovels your walks in the winter. So how do I go about wrapping Chuck.js in the directive so that I can tell Angular that these dom elements need to behave in this way? URI: First of all, I think that it really depends whether this library does some kind of manipulation or is some kind of reusable component. I think the first thing I would check is whether there is some kind of jQuery plugin which already wraps these library – perhaps this library itself is already written as a jQuery plugin. If this is the case then it’s probably a good candidate for directive. Then the next thing I would probably do is find all the interaction points between the library and the dom and see how I can wrap it with the directives. So whenever I create a directive I get direct access to the element where the directive is placed. So I need to make sure that this element can interact with the library. In the case of a jQuery plugin, I’d probably instantiate a jQuery plugin and pass its dom element. Then after I have managed to hook all the dom stuff into the element of the directive, I would probably hook into all the events of the library and then try to hook them into the Angular digest cycle. If it’s some kind of Chuck library that can chuck wood, so whenever it needs to chuck some wood it will give me a chuck wood event and then I will add a listener and wrap it with the Angular digest cycle with roots [inaudible] and then I would probably call some user provided function to expose this event. Now there is also another part. I usually want to listen to the attributes or the scope of my directive and update the component accordingly. I think I can divide it into two subtypes of components. If the component is just displaying some kind of value or adding some kind of animation or something like that to the dom, I will usually use the scope to communicate values in and out. But then if it’s more like an input element such as date picker or some nice slider, I’ll probably use ng-model for that so I can tell Angular whenever the value changes and to be able to run all the recommendations and take care of the two-way data bindings. So I think that distinction is also important. CHUCK: So do you want to walk us through briefly on how you built angular-moment or angular-spin – angular-spinner? URI: Yeah, let’s go with angular-moment. So I’m currently looking at the GitHub for angular-moment and I can see that my first commit was two and a half years ago when I started building my first big application an di needed this directive. Then at some point, I decided it was 30 lines of code and I decided this can be useful for somebody else so I’m going to upload it to GitHub. And it was a really simple repository, just bower.json file. Angular module just, at that time, I go directive and it was like 30 lines. Then in order to help other people discover this directive, I registered it to ng-modules and then I also went to Stack Overflow to look for people asking how do I integrate angular-moment and showed a [inaudible] go component automatically updates and they put the link there. They also published it to Bower. It received some attention about – I think that the real benefit of publishing stuff on GitHub as open source is getting the contributions and the feedback from the community. What I learned is that you need to take some steps to make it easier for the community to contribute back to your project. In my case, I think that about a month after I published just the very bare boned directive, I started writing some stuff that would help people contribute. It started with unit tests. So whenever somebody contributed, they could run the unit test and see that we didn’t break anything. It also help to set standards so whenever somebody contributes you will see how the libraries are supposed to be used, what are the use cases and then also write his own tests.  Then I also added some [inaudible] using js [inaudible] integrated deep with the [inaudible]. Eventually, I also started providing, contributing guidelines so people will have a basic understanding on how they prepare their development environment, how they clone the project, how they run the test, what are the requirements from them whenever they send a pull request. I think those things are really essential once you go and publish you directives or third party libraries on GitHub. LUKAS: That was excellent. I know we were talking about components in Angular but that was actually a pretty interesting – I don’t want to say tangent but a parallel thought about just how to actually prepare a repository for consumption by the community so it’s excellent. Thanks for sharing. CHUCK: And contribution by the community I would add. LUKAS: Yeah, that was great. URI: Yeah, thanks. I think in [inaudible] my friend of me works, I would say, “Community, community, transpilers, transpilers, transpilers.” [Chuckles] LUKAS: So Uri, tell me somebody was going to approach this. I know we’ve kind of touched upon this in a few different ways but let’s say somebody had a great component that they wanted to use and they wanted to wrap it in Angular, just walk us through this checklist one more time about how they would approach this. So I know we have talked about bits and pieces but just give me the summary. So let’s say we’re in an elevator and you have one minute to give me the high level details of things that I need to do to wrap a component in an Angular directive. URI: Alright. I assume that this is like a component and you what to isolate these from the other parts of the applications to make it reusable. So first of all, you define an Angular directive with an isolate scope and then you figure out what were the inputs and the outputs of the component. If it’s like an input component, then you will want to use ng-model and ng-model controller to communicate in and out of the directive, otherwise you probably want to use two-way bindings or event bindings on the isolate scope. Then you need to figure out how the third party library interfaces with the dom and cook it up with Angular change detection mechanism and the directives elements. Finally, you sometimes want to add some custom logics in case of angular-moment. Moment.js does not really provide the functionality to automatically update the time. In my case, I just need to set up some timers and do the extra miles. So you can just use the component and enjoy it without having to think about the updates. LUKAS: And then? URI: And then our one minute is over. [Laughter] That was too short a minute. LUKAS: That was too short a minute. So just to add on top of that, I actually have, if you go to my repositories on GitHub I have and angular-chosen repository, so I was using the Chosen plugin which is this table that I select, drop down, I wrap it in Angular. A few people have actually used it. I actually – one company actually reached out and said ‘can we use this?’ And I went like – under the license and everything so I had a sense of paper work and I had a t-shirt that was pretty neat but I found that when doing this, first of all, does this component – what events does it surface. So for instance when somebody actually selects something in the chose drop down, there’s actually an event that fires. So then I have to listen to that in Angular and then as Uri said, I need to kick off a digest cycle. But occasionally, what’s interesting is something will happen in Angular and you actually need to refresh the component, actually let the component know that something has happened. So I’ve actually had to submit a view pull request to somebody’s components because they didn’t actually have a way to force a refresh so that’s really the big thing to focus on this – what are the outputs in terms of events so that you can listen to and update your Angular app. But also, how do you actually force an update within the actual component that you’re wrapping. Do they have an update method or refresh method or something like that to say, “Hey, something happened in Angular. I need this thing to redraw itself. It actually went both ways in terms of updating your Angular repository around the component but I’ve actually had to submit PRs back to the component to say ‘hey, you don’t really have a good way to update yourself dynamically because a lot of them were actually written to take existing dom elements on the page and then turn them into essentially components with the extended functionality. Whereas with Angular, things are definitely dynamic and you might have an ng-repeat with the component that’s not designed for that. It’s interesting to see that two-way contribution where you actually contribute back to the component to make it work well with Angular. URI: That’s a really good point. CHUCK: The author isn’t going to think of every use case and so when you have your own use case, that’s exactly where you want to contribute like you were talking about. LUKAS: So that’s even – one id the Angular community benefits but it’s really interesting to see how you can actually allow or update or contribute back to the component so that if somebody wants to wrap it in some other framework, those [inaudible] are already there for them to refresh because sometimes – but this I know for myself is if I’m riding a directive or something I’m going to release, it’s for a specific use case for a problem that I’m trying to solve and I haven’t thought of everything. So a lot of times these repository authors are very responsive to these updates and contributions; they just haven’t thought of it yet. CHUCK: Uh-hm. URI: Yeah, that’s a very good point and I also had case like this where I needed to update a third party component that wasn’t really built to be updated and I just ended up – whenever the Angular scope updated, I needed to remove the component from the dom and build a new one which is kind of a pain in the ass but sometimes you don’t have a choice. LUKAS: True story bro. [Laughter] CHUCK: Alright, well I know we have a hard stop coming up for some of the folks on the call. Is there anything else that we definitely should tackle before we get to the picks? LUKAS: I think we should do a pre-pick pick and that is Uri and I were in AngularConnect and I think we should just take really quick, a minute or two, and just talk about some of the unique things that we saw there. CHUCK: Sure. LUKAS: You’re first Uri. URI: Alright, so I really liked the connect part of AngularConnect. I really enjoyed the conference and I think the speakers were awesome. I met a few new friends from both speakers and participants. I wish it was one day longer though and I think that I was really surprised – positively surprised to find some talks about the soft skills. Those are my picks from AngularConnect. LUKAS: So my picks were – one is, I think this is the first time that I the community had really got a sense of ‘this is what Angular 2 is going to be’ and up to this point, Angular 2 had been this nebulous concept of the ether. We had some of hints, some ideas of what it looked like but it was from when you [inaudible] a shadow and you’re like ‘okay, I think I know what this looks like’ or ‘I think I know what it’s going to be.’ For me, since the talks and the Keynote I thought that it started to come together for me, the fact that we’re building TypeScript or ES 6 and we’re really leveraging this language features and these standards and we’re just decorating that functionality or those language features with the Angular framework. So it really, to me, clicked like this is a platform in which we can build some really, really serious applications. So the talk that actually Shai Reznik and I gave called the “Real” Angular Keynote was really a serious five minute talk but wrapped in 20 minutes of just nonsense. The point that we were trying to make is that we have better tools and a better language which makes for a much better framework that allows us to build better things faster. I just believe that more than ever is that with the modern tooling with ES 6 and TypeScript we have a much better language. And because of that, Angular 2 solves a lot of the problems that Angular 1 had that also brings additional features to solve problems that we didn’t even know we had. It was just a really exciting time to be. A front end, developer, a web application developer but also an Angular developer. So Chuck, what was your favorite part of AngularConnect. CHUCK: I wasn’t there. LUKAS: That was your favorite part. [Laughter] CHUCK: I did not have to get on an airplane. LUKAS: Yep, that was –. CHUCK: It sounded like there was a lot there. The last episode of this show that we recorded last week, we talked a lot about what happened there and what the announcements were and some of the other things, it sounded like it was a tremendous conference, so maybe next year. This year, we were just a little too close to having a baby here so I couldn’t leave my wife 8 months pregnant and go to a conference in London. LUKAS: It’s your own [inaudible], my friend. I think you made the right choice. CHUCK: I don’t know which would’ve gotten me killed faster – going to London without my wife or leaving her here with four kids while she’s 8 months pregnant. LUKAS: Death wish either way. CHUCK: that’s right. Alright well, should we get to some picks? More picks? Better picks? LUKAS: Sure! CHUCK: Uri, give us your picks. URI: So my picks from this week are first of all, the ES 2016 Column Operator which is supposed to replace the bind and [inaudible] stuff we need to code whenever we register an event listener or so.  It’s still a stay zero proposal so I have to – I really hope it will make it to the language at some point. Then I have another one. It’s a game called Bullshit which a few friends of mine are building with Angular 2. It’s still in early stages; they started – they [inaudible] during the Angular 2 hack night here in Israel last month. It’s a nice game; you get questions and you have to make up lies and then you need to trick your friends to think – to choose your answer instead of the correct answer. CHUCK: Alright. LUKAS: Are you telling me the truth right now or does that game really exist. [Laughter] Just kidding! See what I did there? So my pick is a post that I saw on Medium. It’s Angular- Introduction to Reactive Extensions. So Rob Wormald really got me excited about RxJS and just streams. So Ben Lesh actually think he gave a phenomenal talk at AngularConnect. And this post by Gerard Sans, it just talks about Angular and reactive extensions and I found it to be really well-written, really easy to follow and just super excited about observables, reactive extension programming and I think it’s excellent. So check it out; the link will be in the show notes. URI: Did you subscribe? LUKAS: Well, I see that you’re trying to lure me into a joke. [Laughter] URI: Did I succeed? LUKAS: You did. It took me aside. I’m like ‘Subscribe to medium? No – oh, I get it.’ [Laughter] CHUCK: Alright, I’ve got a pick here. I’ve got a couple actually. This one I haven’t picked on this show. I have talked about it on other shows but I really like having house plants in my office. I just like having some green and I actually managed to water my plats on a regular basis so they’re not dead yet. I did have my – I have a little – I don’t know what you call it. It’s like a palm tree. It’s got big palm leaves on it. It’s a house plant and yeah, I did leave it out of the sun for a while so it nearly died but I moved it back up on my desk and now it’s happy again. But anyway, I got these plant choices from a TED talk and I’ll just put a link here on the show notes. It’s called How To Grow Fresh Air. I just bought these plants and I like having them in my office. I am actually tempted to – so I have a big window in my office and I’m actually tempted to put a – get some herbs so maybe some basil or something and have fresh basil growing in my office; I think that’d be great and I think it smelled good in here. But anyway, so yeah, that’s one pick. Another pick, I get a lot of people asking me so I did this between my last two shows that I did this week. I’ve been getting asked about my podcasting stuff. So I did a Periscope about it and I’ll put a link in to that in the show notes as well. I need to put it up on my blog. Right now, you can find it; it’s on catch.me. But yeah, I want to embed it in my blog and then give people links to everything that I used. If you’re interested in that then keep an eye out. Those are my picks. URI: Okay, what about the directive for growing plants in Angular? I think we need one. CHUCK: Well, I think so, too. I think we need a watering directive and a sunlight directive. LUKAS: ng-water? [Laughter] Ha-ha. CHUCK: Alright, well that was awesome. Thanks Uri. URI: Thank you guys. I really enjoyed it. LUKAS: Thank you Shaked. URI: You’re welcome Lukie. LUKAS: You’re the best.[Hosting and bandwidth provided by The Blue Box Group. Check them out at bluebox.net]**[Bandwidth for this segment is provided by Cache Fly, the world’s fastest CDN. Deliver your content fast with Cache Fly. Visit cachefly.com to learn more.]**[Do you wanna have conversations with the Adventures in Angular crew and their guests? Do you want to support the show? Now you can. Go to adventuresinangular.com/forum and sign up today!]

Sign up for the Newsletter

Join our newsletter and get updates in your inbox. We won’t spam you and we respect your privacy.