[Does your team need 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 — AngularBootCamp.com.]
CHUCK: Hey, everybody and welcome to Episode 24 of the Adventures in Angular podcast. This week on our panel, we have John Papa.
JOHN: Hello, everybody!
CHUCK: Joe Eames.
JOE: Hey, everyone!
CHUCK: I’m Charles Max Wood from DevChat.tv. Quick reminder to go check out JS Remote Conf at jsremoteconf.com. It’s an online (in the evening if you’re in the US) conference and it should be pretty good. We also have two special guests this week. We have Chris Bannon.
CHUCK: And Bernardo de …Castilho.
BERNARDO: Yeah, Castilho is fine. Hey, guys. I thought you were going to call me “Bernicio”. I was all excited about that.
JOE: That would be a cool sounding name.
BERNARDO: “Bernicio,” yeah!
JOHN: And you got to say it like [mimics Italian accent] “Bernicio!”
CHUCK: “Bernicio the Awesome-icio”
JOHN: [Mimics Italian accent] “I’m Bernicio of Wijmo. You must use our components.”
JOE: I was thinking more like “Don Bernicio.”
JOHN: [Laughs] “I’ve got a special favor to ask you, very respectfully.”
CHUCK: [Chuckles] Do you guys want to introduce yourselves really quickly?
CHRIS: I’m Chris Bannon. I’m also at Component One. I started here as the lead web developer and have moved into product development where I now manage the web products that Component One develops which includes Wijmo.
CHUCK: Awesome. We brought you on today to talk about replacing MS Flash with… oh, I’m sorry, Silverlight…
CHRIS: Wow, exciting new announcement!
JOHN: They finally did it. They bought Flash!
CHRIS: [inaudible] All right.
CHRIS: Very appropriate scream in the background there.
JOE: Scream of excitement. Woo! …That was actually me, by the way.
CHUCK: Joe, you scream like a little girl.
JOE: It’s how I learned to defend myself in school.
CHUCK: If it’s enough, the principal come running? “Who’s dying?!”
JOE: Like, the attackers would grip their ears in pain, so.
CHUCK: Oh, there you go. So I guess the idea is you can replace Silverlight with Wijmo and Angular, or do a fair approximation to that?
JOE: So I’m still not sure that I totally get what it is and why it’s particularly applicable to Silverlight developers.
JOHN: It does. And just kind of to set the foundations, if somebody were to use Wijmo and they go to your site, it says “MIT, GPO, Apache.” What kind of licensing is there?
BERNARDO: These are commercial controls. We actually thought about making the lower level, the collection view and those support classes open source. I don’t think we’ve moved in that direction yet. Nobody asked us to do it yet. That’s still on the table. The controls are commercial. The infrastructure for now is also commercial.
CHUCK: So is there anything that’s currently offered by Silverlight that doesn’t come either in Angular or Wijmo?
JOHN: I think I misunderstood you. You said took two hours to port, but what exactly did you port in the two hours?
BERNARDO: Right. That was we took the existing Microsoft app. I don’t have the name of it here, but it’s something like Silverlight data application something. I can give you a link later. And what that does is it hits the Northwind Service, loads up some customers and then it shows a UI where you can pick a customer and you can see the orders for that customer and the dates and the amounts and you can edit some of that stuff. And it actually shows the requests going in and coming out. So that’s application that we ported. It’s a simple app, but it does the main things that Silverlight is supposed to; it shows binding; shows loading of data; shows using control — the whole MVVM thing. And that’s what took two hours to port. We basically took XAML code, rewrote that using HTML and the Angular directives that we have. We used loaded into collection view and just bound that to the controls. It’s a very simple app. It’s just a proof of concept but it was fun to do.
JOHN: Is this the app that you have up on one of the videos on your website? I’m looking at the “Introducing Wijmo” videos here.
BERNARDO: It could be. Let me take a look.
CHRIS: Bernardo wrote a whole white paper about this subject. I know that’s up the blog somewhere. I’m not sure about it being a video or not.
BERNARDO: It’s certainly in our list of samples. We have a bunch of samples there. It’s one of those.
JOHN: Maybe we can get a link to it later and include it on the podcast notes.
BERNARDO: Sure. Yeah, it’s called Migrating from Silverlight.
JOHN: Yeah, I saw it.
BERNARDO: Yeah. If you click the “run AngularJS demo” you’ll see it. It’s a very, very simple app. It actually looks a lot better than the original one. It uses Bootstrap too.
JOHN: And it works in all browsers and it takes no plugins, right?
JOHN: Cool. So obviously, you guys went down this road for a reason. And I’m assuming that reason is that there was a market, since it’s a commercial product, there’s a market for Silverlight and therefore those people had to do something. How’s business overall? I mean, there are people moving in this direction, is the uptake kind of going as you thought or have there been a lot of questions along the way about the things may be people have wanted the guys didn’t think about. I’m curious how that’s been moving.
JOHN: So what are the common struggles or…
CHUCK: What are the common struggles that people have making the switch, I think is probably what John is after.
CHUCK: So looking at some of the samples on Wijmo5 on the page, one of them is actually an Ionic something rather expense tracker. So these actually work in the Ionic framework for building hybrid applications?
CHRIS: Yes. The controls we’ve built, they are stand alone. They have zero dependencies. And that’s why I kind of brought up our history is we first created things built on top of other frameworks like jQuery UI and this new product we have is just completely stand alone and independent. No dependencies even on jQuery, so it’s very lean and it is targeting modern browsers where other products targeted very old browsers. So when we did this, we also kept in mind we wanted to be friendly to other frameworks so you could just plug in to things like Ionic; we could plug into things like Angular. And it just so happened that our Angular directives work flawlessly in Ionic. So that was like just kind of an added benefit to having all the Angular directives built in. We love Ionic, by the way. I mean, it’s just a stellar framework for making mobile hybrid applications. We even liked making web applications even though it’s not officially supported, but it’s really nice for making Mobile web stuff as well.
CHUCK: Well, it seems to me that it makes sense to… I mean, you can essentially build in your data model however you’re going to manage that using the HTTP service in AngularJS. And then the rest of it, your visualization for the widget, whatever it is – the chart, table, whatever – looks real nice. You can use that on your website and you can use it on your mobile app if you’re building a hybrid app with Ionic and you don’t really have to change a whole lot.
CHRIS: Yes. And I mean, that brings up another point which is directives. Directives in Angular, even though they are probably one of the most awkward APIs I’ve ever worked with, the end result is really powerful.
CHRIS: Yeah. I mean, Bernardo can talk more about this, but from my perspective those are something that any company can really benefit from starting either their own directives or at least using other directives provided. We work with some really large customers here and almost every one of them wants to build up their own internal official framework of UI components that they can use. And directives are an outstanding way of having a small team — or a separate team — make those and hand them out to all the developers that they can use. So they can be business components, like, if it’s a financial company, they can make stock chart that has a limited API and it meets a very specific UI criteria, and they can just expose what their developers internally need. That’s very powerful concept. It’s now coming in HTML5 with web components and custom elements, but it’s something here now in Angular. And I feel that that’s a huge opportunity for companies to invest in.
CHUCK: Yes, it’s definitely nice to have that go-to set of tools you just pull in. I need a pie chart and we just know how to do it because we’re used to doing it that way.
JOHN: So what’s the best way for somebody to kind of get started with doing Angular and Wijmo?
CHRIS: The best way would just be to probably visit the site. And under the “demo” section, we have these 101 samples. So for example, Flex Grid 101, which is just like a “getting started” tutorial that walks you through the most basic scenarios and then starts adding to it, like you want to data bind a grid and display information, then maybe you wanna add filtering capabilities to it, editing capabilities. Those to me had been really helpful. I’ve seen tons of customers really get a grasp quickly on how things are structured; how to get started on how to start modifying things to their liking.
CHUCK: So what do you see is kind of in the future of this suite of tools? You know, AngularJS plus Wijmo? Are there things you are looking at adding in the future? Are there directives maybe that you might add in that do different things that you don’t currently have? Or is that more along the roadmap of just Wijmo itself and then obviously we’re going to add directives for this.
CHRIS: Bernardo, would you like to talk about the roadmap, how you see it?
BERNARDO: Sure. We plan to do both things. One this is Wijmo is still relatively new. We released version 5 in October. So we have, I don’t know how many controls we have in there, but we know that the need to add a few more. So whenever we add a new control or new capabilities, there’s new directives that come out with that. And like Chris said, we ship directives for AngularJS. We have them for Knockout as well. We’ll probably add some for Polymer or something. But those go hand in hand with the controls. Ad even though a lot of companies want to develop their own custom directives, most of them want to be able to hit the ground running and start out something comes in the box and just extend that. So we’re going to keep adding directives to match the controls in the box.
But the other thing that we wanted to do that we’ve been doing lately is creating directives that are not really part of Wijmo; they are just samples that show how to add things like , filtering for example, to a grid. So this little custom directives is really, really simple. It uses the grid’s object model to extend it and something that’s specific to Angular. So those directives or not, you know, going to be part of the other platforms. It’s just going to be Angular. And like Chris said, directives are kind of hard to use at first or to write. They are easy to use. They are kind of hard to author at first. But that’s changing. It’s becoming easier or so I understand, the new versions of Angular are making that easier and more powerful.
BERNARDO: That’s a great question. We have a core that’s the Wijmo.js file and that contains our control base class and the eventing and it contains the collects the collection view and that is required. Every control uses that. That’s the only… well, that and the CSS are the only two that are required. Then if you wanna use the grid, that’s wijmo.grid.js; the chart is in its own module; the input controls are their own module. So we have granularity that way. You can pull in only the stuff that you want. The directives, they are one module; they are all bundled two together. You can’t just bring in the directives for the grid because they’re also based on a base class. It’s all table-driven, so the directives for the grid, they are actually very, very small. It’s basically a list of the properties that you have and the methods and events, their names and their types. And then there’s a base class that does everything for every control. I don’t know if that was clear. So there’s a common core that’s required and then the controls are as needed basis — just load what you want, what you need.
JOHN: And if I didn’t do Angular, I would just leave off with Angular directives file, correct?
BERNARDO: If you did KnockoutJS for example, you put in that KnockoutJS file instead of Angular.
JOHN: Gotcha. So there’s multiple files, but they are multiple because you can module or pick and choose how you wanna make them.
BERNARDO: Precisely. And we expect most people to put that in their build process. If they want to, they can just grab the files they want and merge them and deploy them as a unit.
CHUCK: All right. We’re about at the end of the time. Are there any other questions we should ask before we jump into the picks?
JOHN: I think one last question that I have (and this is maybe an unfair question [Chuckles]) but I’d like to ask, how do you guys see yourselves up against other choices that people can make? I don’t wanna say “competition” because some of them aren’t at the same level in some ways. And I’ll let you guys discern how, but there’s Kendo out there, there’s Dev Express who are also selling products and have open source. And then there’s a freeware that’s out there; things like the bootstrap and the Ionics and some others that are going on. Where do you see you guys fitting in this particular landscape?
CHRIS: I would definitely reiterate to check out the benchmark. It’s pretty cool. It does exactly that. You can load in a million records, five hundred thousand, ten thousand and you can compare our grid – even with our previous jQuery UI grid that we had — and you can compare it to ngGrid, Kendo Grids and there’s a couple others in there, just so you can see how the features work and performance works and decide for yourself.
BERNARDO: Yeah. And like Chris said, it’s not all about performance — even though I’m very happy about our performance — but it’s also features; how do you expect the grid to work? How do you expect the selection to work when you drag your mouse to select a range of cells? Not all grids do the same thing; some do very interesting things; some do boring things. Boring is pretty good sometimes [laughs]. If it works like Excel, it’s pretty boring but that’s what you want in most cases. That’s what I would want.
JOHN: Yeah. I’ve often found that if you know, if you just basically need a basic grid, sometimes all the other features can get in your way too. So I agree with you. Sometimes a basic, boring grid is what you want; and other times, you want something with a lot of pazzaz.
CHUCK: All Righty. Let’s do some picks. Joe, do you have a pick and a tip for us?
JOE: I have a pick and I do have a tip. My pick today is going to be the SkyBell. I just found out about this last week and I thought it was too awesome that I ordered one. The SkyBell is a replacement for your button on your doorbell. And it’s a little module about the size of kind of like nest. It’s like three inches in diameter, circle. And you plug it in and it’s obviously has a little button to ring the doorbell. But it also has a camera and a motion detector. And there’s an app that goes with it and it hooks to your Wi-Fi. So if it detects motion, it can take snap photos and send you the photos on through the app and notify that somebody is on your front door. And if somebody pushes the button, then you can get notifications. And I think it even does live video. And it has a microphone on it too, so if you want to talk to the person without coming to the door, you can talk to them through the app.
JOHN: Cool! Dude, I’m going to buy one like right now. That’s awesome!
JOE: So I thought that was way cool. A friend of mine is actually having the problem with the app, so I don’t know what’s going to happen after…
JOHN: As long as somebody doesn’t steal it off the front of your house. [Laughs]
JOE: [Chuckles] Right. But you’ll still get their pictures, as long as it snapped a photo. In the holiday times, when they make deliveries and people come and steal the boxes and stuff, the motion detector will snap pictures of them.
JOHN: Dude, that’s awesome! [Chuckles]
JOE: Yeah. So that’s my pick. And then my tip is going to be to learn the new ngMessages in Angular 1.3. That’s my tip. And that’s it. John Papa, do you wanna go next?
JOHN: Why, thank you, Mr. Joe. My pick is the Hobbit, the new movie, The Battle of Five Armies. I took my two older girls to see it who are a huge Lord of the Rings fans — much to my delight — and they both loved it. And even with all the fighting and the action, it’s basically big battle scene for two hours, but they loved what they did with it. They the both read the books. And I think they did a very good job keeping true enough to the books, but also adding a little bit of flair to help kids and adults alike kind of like get into it. So, pretty wicked cool.
And then my tip is going to be in the same vain as Joe, I’ve been playing a lot with a new module in Angular 1.3 called ngAria. And don’t get too excited because my tip on this is that use it because it’s awesome, adds all the aria tags for you but also beware because it doesn’t solve all of accessibility. Accessibility isn’t just aria tags. There’s a lot more to it. So definitely check out ngAria though. It will save you a lot of time from adding those aria dash tags.
JOE: Sweet! Chris, do you wanna go next?
CHRIS: Sure. So my pick would probably be Minecraft. My seven year old daughter and I play it together all time. it’s something great where you can sit down and still do some gaming and it’s kid-friendly and you’re building and creating things. So I’ve been enjoying that a lot with the kids. So that’s my pick. My tip would be to write your first directive. So take the time and write a directive even if it’s a simple one, just so you can see how the reusable components work and see if they can save you time in the future.
JOE: That’s awesome, Chris. It’s actually a good place for me to interject and do a little self-promotion. My course on Angular directives has just been sent into PluralSight and will be published within like a week of this podcast coming out. And it’s 3.5 hours on how to build directives. Bernardo, wanna go last?
JOE: Cool. I’m going to check that out. Awesome. Well, Chuck had to step off, so that will be it. Thanks everybody for listening. And thanks you guys for showing up. We really appreciate having you on the show. It’s a great episode!
BERNARDO: Thank you.
CHRIS: Thanks a lot, guys.
[This episode is sponsored by Mad Glory. You’ve been building software for a long time and sometimes it gets a little overwhelming; work piles up, hiring sucks, and it’s hard to get projects out the door. Check out Mad Glory. They are a small shop with experience shipping big products. They’re smart, dedicated, will augment your team, and work as hard as you do. Find them online at madglory.com or on Twitter at @madglory.]
[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 want to 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!]