095 JSJ AngularUI with Dean Sofer
The panelists talk to Dean Sofer about AngularUI.
Special Guests:
Dean Sofer
Show Notes
The panelists talk to Dean Sofer about AngularUI.
Special Guest: Dean Sofer.
Transcript
AJ:
This is the home of the mommy bloggers. The mommy bloggers are the smarter than average moms that come up with these weird theories like letting your kids suck on their feet instead of pulling them out of their mouth because that introduces germs into their system. But that also happens to be true other than just really weird. And so, we grow up with better immune systems in Utah and hence, we’re immune to these viruses but we carry them. And so, when people like you come around, we give you the one-day flu because we’re carrying it and we’re okay with it but you’re not.
[Hosting and bandwidth provided by the Blue Box Group. Check them out at BlueBox.net.] [This episode is sponsored by Component One, makers of Wijmo. If you need stunning UI elements or awesome graphs and charts, then go to Wijmo.com and check them out.]
[This episode is sponsored by Peer60 Incorporated. Peer60 Incorporated knows that the best JavaScript developers hone their skills by listening to JavaScript Jabber podcasts. If you’re looking for a frontend or full-stack development opportunity, helping Fortune 100 companies understand their customers better, email jobs@peer60.com.]
[Do you wish you could be part of the discussion on JavaScript Jabber? Do you have a burning question for one of our guests? Now you can join the action at our membership forum. You can sign up at JavaScriptJabber.com/jabber and there you can join discussions with the regular panelists and our guests.]
CHUCK:Hey everybody and welcome to episode 95 of the JavaScript Jabber Show. This week on our panel, we have Jamison Dance.
JAMISON:Hello friends.
CHUCK:AJ O’Neal.
AJ:Coming at you live from the same place I always come from you live. Earth.
CHUCK:Joe Eames.
JOE:Hey.
CHUCK:I’m Charles Max Wood from DevChat.TV. I’ve never sucked on my foot. And we also have a special guest. [Laughter]
CHUCK:And that is Dean Sofer.
DEAN:Hi. [Laughter]
DEAN:How’s it going?
CHUCK:So Dean, since you haven’t been on the show before, do you want to introduce yourself?
DEAN:My name’s Dean Sofer as you mentioned. I go by ProLoser a lot online. And I founded AngularUI pretty early on when AngularJS was in its itty-bitty infancy stages. And I used to be big into CakePHP and I work for a small startup in Redwood City, California called Paxata where we deal with big data. And yeah, that’s pretty much it.
CHUCK:Cool.
JAMISON:Can you tell me what big data means?
DEAN:I would love it if I knew what that meant too. But large multi-hundreds of thousands or millions of rows and records, and Paxata’s like a data preparation company. So, if you need to run a report or analytics across a bunch of different departments and nobody really keeps track of that stuff properly, we automatically figure it out and mash it all together and let you run reports. So, that would have taken six months and we do it in 15 minutes. But I tend to me more focused on the tech and the people I’m working with than on the vertical I’m working in. [Chuckle]
JAMISON:I noticed you spoke about big data and you didn’t say the word Hadoop.
DEAN:Oh.
JAMISON:I don’t know if that means you lied or I’ve been lying to you. [Laughter]
DEAN:Well, I was just at Strata conference where it was a giant Hadoop booth. Honestly, I space out when we start talking about big data stuff. [Laughter]
DEAN:We try to make our software usable for consumers and non-tech people, which is cool because you don’t see that in big data or business to business companies very often. So, I get a good amount of entertainment from trying to build the interface in an intuitive way and not spending all of my time focusing on what the backend or the other guys are usually dealing with.
JAMISON:That’s cool.
CHUCK:So, I’m a little curious, before we get started talking about what AngularUI is, what’s your relationship to it? Are you the guy? Are you one of the guys?
DEAN:So, I think of myself as like a chairman of the organization. When Angular first popped up, a bunch of people were like, “Check out my date picker widget I made,” and everybody was doing it. And I have this general personal policy like forking is only useful if it leads to merging. So, I wanted to get up all these redundant efforts put together. And I hit up a bunch of people and created an org. So, the original team was Dan Doyon, Peter Bacon Darwin which is the greatest name in open source history. [Laughter]
DEAN:And Pavel and a few other people. I apologize if I’m forgetting your names. And we all had pretty prominent projects and we put them together. And we wanted to be to Angular what jQueryUI was to jQuery. But lately, I try and keep an eye on all the projects, make sure they’re moving along. I try to make sure projects don’t die out. Or if people want to take over, things like that. Or I’ll do a lot of consulting internally and review the code or architecture and give advice and input, in addition to the few widgets or projects I myself personally created. And occasionally, I’ll dig into other people’s projects and help them push things along. But lately, I’ve been mostly focused on my Paxata work. So, I haven’t had as much time to do that. You get burned out when you work in open source as much as I’ve been doing lately. I spent more time on GitHub than people spend on Facebook.
AJ:Sounds healthy.
JAMISON:So, is there a unifying theme to all of the things that are in AngularUI? Because it seems like it’s -- do you apply to join it like a foundation type of thing? Or is it all stuff you’ve made?
DEAN:If you sneeze, I’ll give you commit permissions, generally speaking. [Chuckles] There’s no formal process. It’s just if you are contributing, if you collaborate or are interested in collaborating, I’ll open it up. I tend to also ascribe to the, “Ask for forgiveness rather than permission.” This is Git. If somebody blows away everything, I can just re-push. So, if people express interest and they have two good pull requests and show us it’s not a fluke that they can push good code and they’re interested in maintaining it, I’ll give them access. And I was one of the early proponents to get Angular out of Google and more into the hands of the community because they were getting bottlenecked and overloaded with documentation and help requests. And we tried to offload some of that work. But as for main focus of AngularUI, our projects are all over the place. We’ve got Bootstrap, we’ve got utilities, we’ve got a router. I mostly try and make AngularUI as like a community organization to bring people together and get them to work together. So Angular Router, which I know you guys actually namedropped in a previous post, that was started because people kept asking me for a recommendation for nesting router and there were a few blog posts and a few libraries. And I pretty much couldn’t stand behind any of them because I didn’t use them all. So, I just created a new repo and created an issue thread and pinged everybody who created a project or written a blog post and pulled them all together and pretty much locked them in a room and said, “Come up with a solution everybody agrees to and we’ll make that the official AngularUI,” and using our own backing to push their project forward and helping them out when we can. [Chuckles]
AJ:God, or deity of your choice, bless you. [Laughter]
DEAN:It’s a lot of people. Pete and Powell are really big in the project. They actually got into the Angular core project from there. I feel like the recognition and their work that started off in Angular UI and a lot of the people who started off helping us ended up getting into them. And some of our widgets actually got indoctrinated into the core of Angular. So, that was pretty cool.
JAMISON:Sweet.
CHUCK:If your widget gets indoctrinated into the core of Angular, do you take it out of AngularUI?
DEAN:Yes, also because there’s just so much work and not enough time. I wish we can have a more official release schedule. And one of my personal early dreams was to get Google to pay me to keep working on AngularUI full time.
AJ:That would be nice.
DEAN:And all of our related projects. So, by saying that I mean I don’t make it, we’re not doing proper regression checking or prevention. So, a lot of our stuff is unstable and you’ve got to bear with us because we just have no time. But yeah, so ng-If in Angular used to be in our library. And when it started showing up in their code, we took it out because they’re able to keep it bug-free and more up-to-date than we are. And even though it was on a prototype branch, we knew it was going to go into the core. So, we were like, “You know what? You’re better off using their version.” And it’s just a continuation of ours. So, yes. [Chuckles]
JAMISON:So is that like the rapture? Like you die and get sent up Angular heaven when your stuff gets into Angular core? [Laughter]
DEAN:It’s pretty cool. It’s weird. I’ve always been a subversive individual. If a manager doesn’t like something, I’ll just go create a prototype and show it to him and it’s a lot harder for the people to say no to something they can see and play with. So, if we want something in Angular or if we want to see the Angular team or the framework to do something, I can just go build it in AngularUI and enough people will… I didn’t even request it to be in the core. I did initially, but other people just pushed it. And they realized it brought in features that were fairly core. But as far as [Chuckles] I don’t know. It’s very cool, yes. It’s nice to get that recognition. But the conferences show that this is just, there are so many more people than just AngularUI. And we tend to assimilate, like the Borg.
AJ:That is good.
JAMISON:Can you talk about, oh go ahead. Sorry, I interrupted.
AJ:I just said that’s good is all. [Chuckles]
JAMISON:So, I have more experience with Ember than with Angular. But I’ve used Angular Router, ng-router. You can tell how familiar I am with it. [Chuckles] I’ve used ng-router once and it felt a lot like you guys were influenced by the Ember router. Is that the case?
DEAN:Yes.
JAMES:Or did you just arrive at similar looking designs?
DEAN:If you’re curious about the design discussion, you should go to the UI-Router project and check out, look up issue number one and that’s the entire discussion thread that I pretty much brought everybody into. And yeah, a lot of influence was taken from Ember. We had all these things like what are we trying to accomplish and what are the features we want to have? And some people were talking about should it be backwards compatible or should it be a similar API? And the cool thing is who, Nate Abele, I’m probably pronouncing his last name wrong as I usually do, he’s currently maintaining the router and he used to be really big in CakePHP and now he’s really big in Lithium which is another PHP framework. And I believe he rewrote the router for CakePHP. And I’m sure he had a lot of work done on Lithium. So, it was very cool to have him working on the router now. And so, he’s just indoctrinated all of his experience too, to help keep future iterations of UI-Router moving forward. But yeah, Ember’s got a lot of influence in there. [Chuckles]
CHUCK:So, one thing that I’m curious about is how much work do you have to do to just keep up-to-date with the latest version of Angular?
DEAN:I personally don’t even bother. [Chuckles] They’re pushing releases every week now. If it was bad enough before when we barely had time to maintain our projects, keeping up with the weekly release schedule is like… They say they don’t have regressions but they have occasionally had small pockets here and there. And I don’t know. Each project gets run a little bit differently. I give people recommendations and suggestions on how we’d like things to see and we try and share utilities. But everybody does things their own way. So, different projects maintain a different degree of compatibility. It’s not very exact. We need more help. [Laughs]
CHUCK:Yeah.
DEAN:Even though we have 40 members, we need more help.
AJ:Well the good news is that you found all the mistakes in Ember and perfected them in Angular. So, we know that that’s the superior platform despite its few regressions. [Laughter]
DEAN:Yes.
JOE:Nice AJ, very nice.
DEAN:Angular is better than all other frameworks. And if you go to TodoMVC and count the number of lines of code, that will be the [chuckles], the truth.
JAMISON:That’s actually what customers do before they spend money on your stuff, right?
DEAN:Count the number of lines of code we…
JAMISON:Yeah.
DEAN:Yes. Actually, that’s one of the main bullets on the homepage. [Laughter]
DEAN:Least number, 12 lines of code. It’s all HTML. [Laughter]
DEAN:It’s actually really cool, working with Bootstrap and AngularUI and Angular. You can prototype, and the router, you can prototype ridiculously fast without having almost any JavaScript.
AJ:So, question. When is Bootstrap 3 going to officially make it? Or did it already and I missed it?
DEAN:It landed, yes, Bootstrap 3. A lot of people have been complaining about Bootstrap because it slowed down. What happened is Pavel, who has been one of the main guys pushing to that repo, he got married recently.
AJ:Awesome for him.
DEAN:A couple of months ago. So, it died down in activity. But I checked on it and he’s still pushing a couple of days, up to the last week, so as long as things don’t go six months without activity. So, he’s chugging away. And that project’s got a lot of popularity. But not only is it Bootstrap 3 compatible, it’s also the latest version of Angular compatible, their most recent release, got that in there. And there are still small pockets of edge cases people are complaining about that they’re trying to deal with. And it’s architecture and design concerns, like what’s the right way to go about doing things.
AJ:But now if I just go to the GitHub page and I download the latest release, I get the release that’s Bootstrap 3 compatible not the Bootstrap [inaudible] compatible one?
DEAN:Yes.
AJ:Sweet.
DEAN:I believe it’s officially, the last two releases I think have been Bootstrap 3, because the most recent one was an Angular compatibility release.
AJ:Okay. Because last time I used it, I ended up just doing the little build process, which turned out to be really, really simple. It’s just the one line of how to build it was buried in the documentation. It took me forever to figure it out.
DEAN:Yeah. The weird thing is I don’t… I use half of the widgets in there and half of them I just wire up myself manually because Angular takes so little effort to make a popup or an overlay or something.
AJ:Right. Are you a CSS master?
DEAN:I’d like to think so, yes. I wrote a Flexbox library before anybody else was using it. So, I’d like to think of myself as one, kind of.
AJ:Awesome. I’m not, so I admire people like you.
JAMISON:[Chuckles] I was just trying to understand the point of that question, AJ. I thought you had a follow-up.
AJ:No, no, it’s because he says it just takes so little effort in Angular to make a popup or to make this or that. And I’m thinking, “That has nothing to do with Angular. That’s all CSS.”
DEAN:No. If you’re using Bootstrap, say you’ve got Bootstrap and you’re using that for prototyping, since it has a lot of great scaffolding. I didn’t like it at first because I felt like everybody was bandwagoning it like WordPress. But it’s actually pretty solid.
AJ:Yeah, I like it. It makes it easy for people that can’t understand CSS, like me, to be able to have a hope of making a box that’s square. [Laughter]
AJ:Because mine always came out crooked before.
DEAN:With Bootstrap, it’s just class toggling. And class toggling in Angular is so easy that if you want a popup, you just throw the HTML on the page and you have this button trigger this variable that’s a true/false flag and that turns on a class. And that’s all it takes. So, it’s pretty much using Bootstrap without their JavaScript file is really easy because of how Angular works.
AJ:Right.
DEAN:So, I don’t even touch the CSS to do those sorts of things.
AJ:Right, okay.
JOE:Interesting. So, when you’re doing stuff, do you do that a lot? Do you just grab Bootstrap, completely ignore its JavaScript, and have Angular handle all of what Bootstrap’s JavaScript would do?
DEAN:So the AngularUI Bootstrap project was specifically based on the fact that they wanted to drop the jQuery and the Bootstrap JavaScript dependency because it takes a lot less code to do the same thing with Angular. So, if you use the AngularUI Bootstrap then you don’t need any of the Bootstrap JavaScript. And it’s just occasionally when that library has weird bugs or I just don’t feel like wiring it up in the way they did, I’ll just put the HTML on the page and toggle some classes in my own code.
JOE:Gotcha. So, is now a good time then to talk about AngularStrap? DEAN:Oh, AngularStrap. That is a little bit of a contentious topic. [Chuckles]
AJ:It’s never a good time to talk about AngularStrap because all you do is confuse people and lead them away from the truth and light which is AngularUI. [Laughter]
JOE:If you’d like to hear more.
CHUCK:Jamison brought up Ember. I think anything’s fair game here.
DEAN:AngularStrap is the opposite direction. And I’ve been known to not be super polite in regards to that. Everybody in the AngularUI org, or else they will be kicked from it. No [laughs], everybody in the organization recommends our solution. A simple example as to why is because if you open up their alert.js and our alert.js, we’ve got ten lines of code and they’ve got 200 lines. They’re wrapping the Bootstrap JavaScript. So, AngularStrap is another library that got really popular really quickly because he was just wrapping the already created plugins. And to wrap a jQuery plugin is really simple. It takes very little time. So, he could push out new updates and patches all the time, whereas we were re-implementing from scratch. But we spent a lot of time working on the code and we didn’t even think about posting on Twitter or Google Plus and advertising. We spend zero time marketing our stuff. And nowadays, it’s like we generally want people to use our solution because since there’s less code to deal with, if you need to fix it or hack it or work with it, it’s a lot less for you to dig through. And yeah. [Chuckles]
JOE:Right.
DEAN:But it’s an alternative direction, you want to go in, just remember if you go with AngularStrap you’re now loading up Angular library, jQuery library, Bootstrap JavaScript, and the AngularStrap JavaScript. And way back before I liked Bootstrap, I actually didn’t recommend either solution. I didn’t really agree with having a Bootstrap because when somebody asked for a Bootstrap Angular library in AngularUI then we’d have to do a foundation one, and then we’d have to do this one and that one. And it was like, “Where do you put the end? Where do you put the limit?”
JOE:Right.
DEAN:But if I got to choose between the two, it’s all the way, we just tell people go with AngularUI’s version and just collaborate. Also, we’re on an org. We tried to actually get him to join our project, as I do with all my projects. I went to him. I said, “Hey, you got some awesome tools and you’re getting some notoriety. Would you be interested in merging efforts and we can help each other.” And the general reception, the unspoken thing was I got the finger. And he was like, “You know, just help me. Fix my problems if you’re noticing problems.” I’m like, “I’m already busy fixing our own.” And we have a non-individualistic organization where anybody can step up to the plate. And we don’t want to have this under one person’s namespace.
JOE:Right.
JAMISON:Can you talk a little bit more about that organization? You already mentioned it a little bit. But the more you talk about it, I feel like there are some different things about it than how traditional open source things are run.
DEAN:So we’re unofficial. I don’t know how normal organizations are run. We’re not really run. We’re like, if you volunteer and put in the effort, you get commit access. It’s mostly I personally just try to make sure nothing falls apart. I actually yesterday was in an ng-grid meeting which was being run by somebody who really liked ng-grid but the original team became really busy because they changed their jobs. So, he organized the meeting and he just invited me to chime in. But they pushed it themselves. But with all the projects, it’s really just if you ping me or any of the people who have founder permissions, we’ll generally be happy to add you to the org. I’ve tried to make sure everybody knows that this isn’t my organization. If you want to add people to your team because they’re a good help to your team, go ahead and add them. And I don’t know. It’s very much just commit as an individual and if you break something, it’s easier for us to fix it than to scare people off from committing in the first place.
JAMISON:That’s really cool.
DEAN:But it does introduce less stability and we don’t have somebody paying any member to push this stuff forward. So, I wish we could get a more reliable release schedule. If we had something more reliable or some form of income where, it’s not even the income, it’s more like somebody needs to quit their day job and focus on this. Then we’d be able to make it a more official capacity type organization.
AJ:So, I wanted to jump back just a second about the AngularStrap and AngularUI. So, I didn’t know all that stuff about the simplicity of the code in AngularUI versus AngularStrap’s wrapping. What I noticed is that as an Angular developer, I don’t think there’s any way you can get away from using components of AngularUI. And some of the components in AngularUI are more up-to-date I think. And you can’t use both AngularStrap and AngularUI Bootstrap. So, if you have to pick one, it makes more sense to pick AngularUI because you already have to use other stuff in that namespace that takes up names in that namespace. If you try to add AngularStrap, then you have modules of the same name that conflict with different APIs.
DEAN: I don’t know about that.
actually believe if you choose not to use AngularUI Bootstrap but you want to use the router and things like that, you shouldn’t have any conflicts. But it’s not an official statement and we’re not going to make any effort to be compatible with his library. But you should be able to swap out our Bootstrap library for the AngularStrap one and use everything else. Unless the AngularStrap conflicts with other stuff.
AJ:I think the issue is you have a couple more things that work as expected in AngularUI Bootstrap and the AngularStrap one has a different API with the same names. Like alert is called alert and modal is called modal, and et cetera, et cetera.
DEAN:Yeah, you definitely can’t use them both at the same time.
AJ:Yeah, and I just ran into some issue where I’d started using the one. And so I don’t know. To me, it just makes more sense to pick, since you have to use the AngularUI stuff anyway and you have to be in that community anyway, it makes sense to stick with that one because you can’t have both. You have to pick one or the other for the Bootstrap stuff. And from my experience, the AngularUI Bootstrap seemed to be working better.
DEAN:Yeah.
AJ:When I was playing with it.
DEAN:You really shouldn’t have a need to use both. If you’re looking for, he’s changed his feature set a lot. And one thing I personally have tried to tell most of the teams, it’s cool, the one thing I like about having such a huge org is I actually get to use GitHub Teams for the first time. So, we have a UI team, a Bootstrap team, and a Router team. Anyways, I told them try to focus on preventing scope creep. When you’re working in open source, you get burned out a lot so do not just fill in features just because people ask for them. Fill them in because they make sense. They’re relevant to the project. So one of the things I didn’t like about AngularStrap and I actually mentioned it when I talked about him joining efforts was he was adding things that weren’t in Bootstrap like a pagination utility and stuff like that. And my major point was that people who don’t use Bootstrap use pagination and it’s just a little bit of CSS and HTML but the rich part is working with arrays and splicing and iterating and keeping track of all this stuff. So, why don’t you do this in a framework agnostic solution? And then anybody can hook into it and then people can have a template that comes packaged with Bootstrap that if you use that pagination library, it’s ready to go and already styled for you. So I know the AngularUI Bootstrap has a few solutions at that. For example, it has pagination and a few things which are fairly just visual that they implemented as directives. But I find that AngularStrap’s got a lot of weird, the selection of directives is random to me. They used to have a date picker and a time picker and then they removed it. And now we had to bring it in a date picker because people were complaining about, “That one has a date picker. Why don’t you guys?” and ugh.
AJ:I made that issue actually, I think. [Laughter]
DEAN:Cool. [Laughter]
DEAN:I’m weird. I’m obsessed with you should always code for the greatest versatility first. So, we had UI date picker, UI date. It’s got problems, but it works great for people. But people want a Bootstrap-skinned one. But a really strong example is select2, which is I’m pretty sure pretty prominent in the community. And even if you don’t work with Angular you’ve probably heard of the library which was a version of chosen. And that is a dropdown type ahead widget and it was coded, the Bootstrap team wanted to introduce type ahead and we already had the standalone select2 widget. And both of them had different styles but they were both essentially the same thing. And I got annoyed at both because we’re wrapping a jQuery plugin and the code is such a mess and so broken because I wrote it personally. [Chuckles]
DEAN:It was the first thing I wrote. Everybody’s been talking, the best thing is to build one from scratch. So, we started a new repository. And one guy just took some code I threw up in a gist and didn’t even test it. And he started implementing it the way I originally envisioned it to be implemented. And it’s HTML/CSS agnostic. So, you can just mix and match templates together. And the cool thing is you can switch out a Bootstrap theme for a select2 theme. But it gives you the utilities you need to generate a type ahead type widget. And I’ve been trying to tell the Bootstrap team, cut out your type ahead widget and use this one and just skin it. And then other people can mix and match. So, the one point I’m getting to is I’d like to see these things not pretty much married to Bootstrap because everybody could really benefit from them. Build an abstraction that is, it’s like skin agnostic and then just provide a skin with it. Or if Bootstrap comes, if you’re packaging Bootstrap, be like, “Hey if you use this with that widget, automatically we have a theme ready for you to go and it’s just that much nicer.” And people don’t realize you can do layering of directives and apply multiple different things onto the same widgets and add on visual layers.
AJ:Well, those are new concepts that didn’t really exist before. So, even though they’re kind of simple, they’re still a little bit further away from what I’m used to. Because it’s something maybe I’ve always dreamed of but never really thought about how it’d be implemented or how it would actually work.
DEAN:It’s definitely, I know it’s been around for a while. It’s just even I personally, we’re all learning Angular. The whole community was. And that’s why [inaudible].
AJ:Like the Angular team for example.
DEAN:Yeah. They don’t even talk about layering. And I actually wanted to give a talk about it on how different ways to extend or layer on directives together and trying to modularize everything. But [chuckles] yeah. The thing is with the select2 example, if you look at the Bootstrap library they got rid of type ahead. And I believe that was a nod to the point I’ve been making which is the whole select2 widget, they whole type ahead feature, it’s such a large feature that it is a project in and of itself. You can’t just make it a part of a suite. And the Bootstrap type ahead has now been separated into a separate library. And so I’m trying to push my Bootstrap team to remove theirs and instead come up with an AngularUI version that they just skinned. But they do their own thing.
AJ:That type ahead is like, there are so many different features that you could want so quickly with a type ahead.
DEAN:Yeah.
CHUCK:So, one thing that I’ve noticed with this is that there are a lot of different pieces that get lumped into AngularUI. And when I looked at it initially I was like, “So, is this like jQueryUI?” except with jQueryUI it seems like you can just pull everything in in one jQueryUI minified JavaScript file. Is it the same approach with AngularUI? Because it seems like you have such a varied set of tools here that I don’t know if it makes sense to put it all into one library.
DEAN:It started off that way. When it first started, it was going to be like a one-toone of AngularUI to Angular with jQueryUI to jQuery, in so much so that you can check out one of our old projects. It’s still under the org. It says old repo at the end. And it used to be all these different widgets merged together. But then modules came out and people didn’t want a Google Maps widget. They didn’t want a date picker widget. It was a large amount of overhead of code that you really didn’t need. And our build system, which I’ve never been happy with the build system for frontend frameworks and libraries since day one. And I’m still not happy with any of the solutions we have in place now. It’s very, we had a hard time trying to get a good build system where you could mod, using components, pick which ones you want and get some nice compiled build. But we realized it’s just getting too big and people want the individual components. So, why don’t we break it apart into multiple projects? Because the issue tracker became one giant enormous issue tracker. So, when that happened, I broke down the organization into teams. And yeah, they all run independently. It does not make sense to run it all together. We used to be that way. And things started to happen where it used to be I work on UI Utils which I think is a very underrated project. It’s a bunch of utility. I feel like everybody who installs Angular needs Utils, more so than Bootstrap, or using all three together. It’s just a bunch of small features that really should be in the core but aren’t. And then there are things like date picker and a type ahead. And those are widgets and third-party plugins that you may or may not want. And so we still have a small suite of simple utilities. And then we have individual widgets or widget wrappers. And then we have the Bootstrap suite. And then you have the Router which doesn’t fall into anything. And I’ve tried starting an organization for a community project and an aliasing project, which handles how you pretty much compile your application. But [chuckles] yeah.
AJ:So, you said that you don’t really like any of the build tools that are out there. I’ve used the Yeomen strap or whatever they call it, the Yeoman Angular tool. I don’t think that it’s perfect, but it seems to be pretty simple in terms of there’s a special comments section where you put all your script tags. There’s a special end comment. And then you run it in dev mode and everything’s easy to debug and then you run it in production mode and you turn off the minifier and it will work.
DEAN:I need to clarify. By build tool, I’m not talking about building my app. I’m talking about a redistributed library, like for Bootstrap. If you look at the Angular project, it’s a perfect example. They’ve got the Angular source repository and then they’ve got 20 Bower repositories which are just build files. And I hate that. It drives me nuts. And I don’t like how Bower works. That’s just how you have to distribute your code.
AJ:Because Bower is super agnostic and doesn’t really take any opinions or provide any sort of help.
DEAN:It’s all about, there have been lots of discussions, even the Angular core team. And I’ve chimed in several times. And it’s how Git works, it’s how these package managers work. But redistribution of libraries I don’t think is done very elegantly. For instance, say I check out a date picker widget and I Bower install it. And I have maybe the build distribution files. But there’s a problem with this library and maybe I’m savvy enough to actually dig into it. So, I want to switch to the source code version. So, I’d like to be able to do bower checkout source or just git checkout, well probably bower checkout source. And then I can poke around the code and then maybe hopefully it’s identical to the Git repo and I can just git push the code back to the source project. But you can’t do that because you’re on a Bower module that’s distribution-friendly only and only has six files. And it has to do with how projects are tagged. And I also didn’t like that, personally I hate that you have to have the entire dev setup on your machine in order to push a new release. And that might seem kind of silly but when I was really mobile or when it’s a really asynchronous multi-collaborative project, eight other people would push features and bug fixes where I just use GitHub to merge in pull requests. And all the tests would pass. Now I have to push a new release and I’m at a conference and somebody’s nagging me. Instead of having to spin up everything and make sure all the dependencies are run, I want to be able to just push a Git tag and then everything just pushes a
new release itself. Everything should be a hook attached to a Git tag. So, one guy named Douglas Duteil I think, he’s been working in AngularUI and his main focus has primarily been build solutions. And every single time I suggest something, he builds it. It’s awesome. And he came up with this solution that I discussed with him where if you commit and you tag and it builds on Travis, Travis will actually have permissions to commit the build files back into your repository. So, if you just push a tag onto GitHub or if you tag it through the GitHub interface, that will trigger a build and the build will trigger a release. And you don’t have to have all the dependencies or everything on your local machine. So, I can do it from anywhere. And it’s all associated in hooked tags. So, one of my suggestions was what if we had source tags and distribution tags tackle this whole problem of being able to play with the distribution code on your Bower [inaudible] module or the source code. And since Bower is all about tags, I thought what if we had a series of distribution tags. And he got the Travis script to do that. And I actually thought, you know the best package distribution system isn’t Bower the way it is now, because Bower just looks at your Git tree. I thought the coolest distribution system would be Travis. What if you pushed your code to your distribution center, which was the Travis. Because you’re already putting in the scripts and the configuration to build your whole library. So, if you’re already bothering with that much effort, it knows how to create a distribution file. And then Travis would see all the tests pass and everything. And then it would keep the distribution files. And since that’s a tag, people would just ping Travis. So, the point is, with Bower you can only make available code that’s versioned on your history. But with Travis, you can make code that isn’t versioned. And it’s snapshots. NPM uses snapshots. It copies files that aren’t versioned by Git. But with Travis you don’t have to have the snapshots on your local machine or don’t have the whole build process on your local machine. Travis builds for you and creates snapshots and distributes the snapshots and deals with caching and management like that. Sorry, it’s a little long. I have a lot of random concepts I’ve been wanting to [inaudible].
AJ:No this is really cool. I like listening to your rant so far.
DEAN:So, that’s my solution. I proposed it and [inaudible] is one of the big JavaScript guys. I forget his name. He was like, “Yeah that sounds like too much work. So, if you want to implement it, go ahead.” But I think that would be the cool future, merging Bower and Travis together. That’s the build solution I want.
JAMISON:You know, it makes sense because there’s a history of building apps in a CI server and then distributing them that way. So I could totally see doing the same thing with libraries.
DEAN:It just doesn’t make sense to version build files, like minified files. Because when you work locally and you minify your CSS or your JavaScript and another coworker minifies it, and if you’re committing those files and you’re working on two branches and you go to merge the branches together, even though there are no conflicts in the source, there are always conflicts in the minified version. And I don’t like the idea of adding distribution code to a Git repo. It should stay out of Git. But the source code should stay in Git.
JAMISON:I feel the same way.Cool.
JOE:I got a question for you, Dean. For the AngularUI components, what are the ones that you feel like are the real winners out of the list?
DEAN:Well, after I stopped hating on Bootstrap, I’m talking about the original Twitter library, and realized you can scaffold really fast with it since Angular lets you scaffold fast, AngularUI Bootstrap is just the awesome glue. So that one’s definitely cool. And we actually built it because originally we were saying, “No, no, no. We’re not going to build it.” And then the core team came to us. They were like, “Look. We’ve got coworkers here at Google who are saying you need to build a Bootstrap suite.” So we’re like, “Fine.” We relented. So that one’s awesome. I’ve actually recently refactored my entire application. And I gave a talk about my refactor. I snuck in a talk at a conference at the very end. But if you look for AngularJS ORM, and it’s about the refactor I did. I realized that UI Router is actually a hundred times more powerful than any other thing we’ve got going on. So Bootstrap’s cool but UI Router is the bomb.
JOE:And you have to use UI Router if you’re using Angular. I just don’t see how you could get any way around it.
DEAN:Yeah.
JOE:There’s no equivalent tool.
DEAN:Really, you should be using, unless you’re building a super simple prototype or static or flat application, you need UI Router for scalability. If you plan on doing any scaling and application structure, you need to be on UI Router. If you check out my talk, I talk about some lesser-known ways to wield it so you can actually have very a modular dependency thing. UI Router is so cool that another thing I want to see in the future, and I mentioned this at my talk and I was talking to the team, I don’t think anybody realizes. In CakePHP you can package…
JOE:You’re right, nobody realizes that.
DEAN:[Laughs] You can package routes into plugins. So you’d have the model layer, the view layer, the controller layer, and widgets and components and things like that. You could all package it to one plugin. But you could also package route definitions. And it made it cool because you have an entire branch of your application you could break off and distribute to other people or reattach this branch to multiple sections pf your application.
JOE:So, you’re saying a component that is both backend and frontend code?
DEAN:Well, no. So, what I’m saying is if people…
JOE:Because that would be cool.
DEAN:In my talk, you can take your route definition, and most people put this in the main application’s Bootstrap, if you distribute your route definitions across your modules and you do proper module breakdown, module breakdown as the MVC, they’ll do a service module and a model module and a view module or controller module and directive module, it doesn’t make any sense. Because if you tear out one of those modules, the whole application falls on its face. But if you do it feature based, like this is the user module and the project module and the administration module, then you can tear out users and you still have projects and the ability to administer projects. So one thing I talked about is if you distribute your routes using UI Router into a module, so all your user related routes are in the user module and the project related routes are in the project module, you take it one step further. UI Router has path relative in addition to path absolute routes and route traversal, which means it can say use the dot representing the current folder or current path and go deeper or go shallower, go up and down. And if you think about it this way, you can create an administrative module with, it’s just dot slash edit or dot slash admin. And then you would take this module with these path relative route definitions and you attach this module to your user module and your project module. And now all of a sudden, I have one module that allows me to do administration across all my other modules. And it contains the routes, the subroutes for administration inside of there. So I thought it’s a really awesome potential for redistribution. And I don’t even think. Other situations, you get a lot of reusable code in that way, that people just have this administration thing that’s super implementation agnostic and you just plug it in in multiple places. Hopefully that makes sense. In my head it makes sense.
AJ:I think it mostly makes sense. I would love to see a little demo app where you demonstrate the separation and how it could be distributed.
DEAN:Yeah. Check out my talk. Hopefully it expands on it, and the slides that go with it. But the main thing was you can append routes to other modules. Sorry, I’m just reiterating. But yeah.
AJ:Cool. Well, hopefully we can get some of that in the show notes, those links.
CHUCK:Alright. So, one thing that I’m wondering about this is you keep bringing up the time and money issue. Have you thought about joining one of the software foundations out there? Or something like that and seeing if you can actually get some monetary or otherwise support for this?
DEAN:I didn’t know I can join a foundation. I didn’t realize they’re paying people.
CHUCK:Not all of them do. I was just curious if you had…
DEAN:It has been brought up before, where should… People have offered to donate or the idea’s always throwing up a Kickstarter or something to pay the organization. But the problem is I tell people it’s appreciated sentiment but you don’t need to donate. Or at least donate to the people who are working on the project, because I personally am not super involved at the low-level anymore. But the thing is, it’s really time. If I spent time collecting donations by having a telephone TV show entertainment hour and then going and coding for the rest of the week. But everybody works for a full-time job. And it’s freelancers I think, and consultants, that tend to have more free time. And I no longer do that personally. So, I don’t know. It’s an idea. But unless you can get somebody to step away from their current job to do it, I don’t know if it would happen. [Chuckles] And would I do it personally? I’m on the fence. It’s not something I’m super excited about. [Laughs]
CHUCK:Right. It’s nice of you to think that freelancers have more time. [Laughter]
DEAN:I was a freelancer before I started working for startups. And I just feel like you have a little bit more freedom. If you’re going to waste a whole day working on an open source project and you can tell the client it’s for him, and it’s not. [Chuckles] But yeah, I
understand how it goes. You guys are probably working 20 hour days instead of 14 hour days. [Laughter]
CHUCK:Alright. Well, let’s go ahead and get into the picks then. Joe, do you want to start us off with the picks?
JOE:Oh, sure. Alright, so I’m going to have two picks today. First pick is a series of novels by Glen Cook who is my absolute favorite author, called The Black Company. And there has not been a new Black Company novel in a long time. But these are all written through the ‘80s and ‘90s. But they are fantastic novels. It’s a fairly long series, sort of military fantasy series. And one of my favorite fantasy series of all time. So that’s going to be my first pick. And then my second and final pick is going to be the TV show White Collar, which is on USA network or TNT. I don’t know. The DVR knows. [Laughter]
JOE:And it’s a really, really fantastic show about a con artist who’s working with the FBI. And it’s a great show. And we do not have enough awesome shows on TV, except for I’m going to actually add one more final pick. Because there’s another show that just occurred to me and that is the BBC show Sherlock which just had three new episodes come out, which is an amazing show. So we need more TV like that, and less Real blank of blank shows.
AJ:Word. [Laughter]
JOE:That’s my picks.
CHUCK:Okay. AJ, what are your picks?
AJ:So I’m also going to pick a TV show. I don’t think I’ve picked this before. Chuck…
CHUCK:Yes?
AJ:Is actually kind of… No, the TV show, Chuck. [Laughter]
CHUCK:Sorry, couldn’t help it.
AJ:So, it’s actually a funny show. And I like how especially in the first couple of seasons, their computer jokes are actually legitimate. Not quite as good as The Big Bang Theory where all of their science and math jokes are completely legitimate, but pretty good. Much better than what you see in most other shows. Like when they talk about a hard drive, they’re actually talking about a hard drive, not a fan or a keyboard, you know? And it’s similar maybe to Psych meets, I don’t know. It’s not quite really Psych-ish but it’s just a cool show and I like it. It’s about a guy who, the one unrealistic element of it, other than all the other unrealistic elements, is that he downloads a CIA program into his brain and that makes him a human supercomputer.
JAMISON:No biggie though.
AJ:Yeah. And then the fifth season’s terrible so far. The first three episodes are great, but this season was like the season where they weren’t sure whether or not they were going to do another one and they should have just stopped and let it be awesome. And then they kept going. So the first three episodes are pretty good. And then the rest of it, I probably wouldn’t recommend watching it because your opinion would just tank. Other pick, also Sherlock. I guess I’m just into TV this week. And any type of multi-tool whether it be a Gerber or a Bear Grylls or a Leatherman. Always got to have a multi-tool.
CHUCK:Alright. Jamison, what are your picks?
JAMISON:So, I have two picks. They’re both books and they’re both pretty good. And they’re going to make me seem really pretentious because neither of them are fun books. One of them is called ‘The Making of the Atomic Bomb’. It won the Pulitzer Prize way before I was born. But it’s basically about the history of science in Europe and America up from maybe the middle of the 19thcentury up through the end of World War II. And it all centers around the discoveries in Physics that helped them discover how to make the atomic bomb. And it’s pretty amazing. I always thought science classes were boring in school. But they do a really good job of humanizing the characters. The people that you just know of their discovery like Einstein, theory of relativity, you know about it. And then you read about how he is and how he interacts with people and the relationships between him and all these other scientists and stuff. It’s a really good read. It’s pretty long too, though. And my second book is called ‘Thinking in Systems’ and it’s hard to describe what exactly it’s about. It’s about how the world is made up of systems that are interconnected and complex and have inputs and outputs. And much of the interaction, much of the effects that we observe in the world around us are from these systems that we don’t really look at and we should look at the effects. It’s trying to help you analyze what’s going on underneath to figure out why you see the effects you see. Yeah, so those are my picks.
CHUCK:Awesome. So, I’ve got a few books that I want to pick as well. The first one is, I want to point out that I’ve been reading these on Audible. In other words, I’ve been listening to them. The first one is called ‘The Millionaire Mine’ by Thomas Stanley. And it was really interesting for him just to talk through some of the things that he had learned as he talked to millionaires and studied them. And I just really, really enjoyed it. The other book that I recently read or listened to was ‘The Lean Startup’ which also has just been a really positive thing for me. And finally, the last book that I’ve been reading is called ‘Basic Economics’ by Thomas Sowell. And I learned in the first two hours of listening to that book more than I learned in my college economics class. So I highly recommend it. It just made sense to me. So anyway, I’m going to pick all of those. And we’ll throw it over to Dean. Dean, what are your picks?
DEAN:My picks. I think I’m going to be weird and be the only one who’s actually going to talk about JavaScript. [Laughs]
JOE:No.
JAMISON:Weirdo.
DEAN:So, there’s this awesome resource called JavaScript Zen Garden or JavaScript Garden, bonsai garden, something like that. I make all new frontend devs, before they even touch JavaScript, read the whole thing. It’s really like a GitHub repo that’s pretty much formatted like ‘JavaScript: The Good Parts’. It goes into all the weird nuances of the language. And it’s an excellent resource for new JavaScript devs dealing with weird bugs and behaviors. And another pick is the network button on GitHub, because people don’t realize how unbelievably powerful and useful it is to check out other forks of a Git repo. If you check out a project and it looks super dead at six months old, I always tell people to check out the network graph. Just look for the one with the most dots on it. You might find other people who are actually maintaining a project and took it over because the main guy died. [Chuckles] And those are my two picks. But since this is all books and TV shows, I’m going to mention this. I’m working on a web show with my friends. And we wanted to open source it. So we put that on a Git repo and we were hoping people could help with the screenwriting process. And I’m just going to mention, ask you guys to put my Goodreads account on my links instead of just mentioning all the science fiction/fantasy books I like to read [chuckles].
CHUCK:Oh, there you go. Alright. Well, thanks for coming. It’s been a really interesting discussion. And hopefully folks can pick up some of the useful things that you guys are working on over there at AngularUI. And yeah, we’ll see better web apps because of you.
AJ:Only you have the power to prevent crappy web apps. [Laughter]
CHUCK:Awesome.
JOE:Nice.
CHUCK:Alright. Well, thanks for listening. We’ll catch you all next week.
095 JSJ AngularUI with Dean Sofer
0:00
Playback Speed: