The crew talks to Wijmo's Chris Bannon and Bernardo Castilho about replacing Microsoft Silverlight with Wijmo and AngularJS.

Special Guests: Bernardo Castilho and Chris Bannon.

 

Hey, everybody and welcome to Episode 24 of the Adventures in Angular podcast. This week on our panel, we have John Papa.

Hello, everybody!

Joe Eames.

Hey, everyone!

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.

Hello!

And Bernardo de …Castilho.

Yeah, Castilho is fine. Hey, guys. I thought you were going to call me “Bernicio”. I was all excited about that.

That would be a cool sounding name.

“Bernicio,” yeah!

And you got to say it like [mimics Italian accent] “Bernicio!”

“Bernicio the Awesome-icio”

[Mimics Italian accent] “I'm Bernicio of Wijmo. You must use our components.”

I was thinking more like “Don Bernicio.”

[Laughs] “I’ve got a special favor to ask you, very respectfully.”

[Chuckles] Do you guys want to introduce yourselves really quickly?

all right. My name is Bernardo de Castilho. I'm Component One CTO. I’ve been writing components for very long time since ActiveX days, .NET and now, JavaScript. And really excited to be here talking to guys today.

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.

Awesome. We brought you on today to talk about replacing MS Flash with… oh, I'm sorry,

Silverlight... [Laughter]

Wow, exciting new announcement!

They finally did it. They bought Flash!

[inaudible] All right.

Very appropriate scream in the background there.

Scream of excitement. Woo! …That was actually me, by the way. [Laughter]

Joe, you scream like a little girl.

It's how I learned to defend myself in school. [Laughter]

If it's enough, the principal come running? “Who’s dying?!”

Like, the attackers would grip their ears in pain, so.

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?

The idea really is just giving a Silverlight developer some kind of path into HTML5 and JavaScript. We hear a lot of requests for, “How do we do things now moving forward, that Silverlight has been kind of left on the shelf by Microsoft?” So you know we've done some development on our end and we just would like to share our experience.

So, Chris, you mentioned you know using Wijmo and Silverlight and things like that and kind of giving a path to those developers to what do they do now without Silverlight or Flash. But does that specifically mean Wijmo is only for Angular, or does Wijmo work with any JavaScript or can you describe who can use Wijmo and what benefit does it offer them over just plain old JavaScript?

Yeah, good question. Wijmo is certainly not limited to Silverlight developers coming to HTML5 and JavaScript, nor is it the only solution for people doing that. Wijmo is a set of JavaScript controls that we've written to kind of be comparable to what we've developed in .NET; so really comprehensive data grids, charts, things that really take a lot of time to develop yourself and can save developers a lot of time. So we’ve built those into Angular as directives. They also stand alone, so if you want to use them in any other JavaScript environment, you can. And our end goal is to save time. So if you're using them in Angular, we have full support for two-way binding when it makes sense; one way binding when it makes sense. And it's going to feel very natural when you’re using our components in Angular. But like I said, it's not a requirement by any means.

So I'm still not sure that I totally get what it is and why it's particularly applicable to Silverlight developers.

So the main thing I think we added that was missing from the JavaScript stack was things that already existed in the XAML stack and we're missing in JavaScript. The main example in my mind is collection view for example. So collection view is a really nice way for you to get your data and apply filtering, sorting, grouping and the concept of currency -- current add item, current edit item -all those things you can obviously do those in JavaScript, but if each person does it their own way, there’s no standard and it's more difficult for components to communicate and for the whole framework to work together. And this is something that existed in XAML. And I, myself came from the WPF and Silverlight and I miss those things when I was writing my first JavaScript applications. So I thought we need something like this and that's the main thing I think we bring over that really makes the transition easier. That’s what makes it different. We add collection view and the data side infrastructure. Does that makes sense?

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?

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.

So is there anything that's currently offered by Silverlight that doesn't come either in Angular or Wijmo?

Well, Silverlight is a very different beast from HTML5 applications. Of course, there’s a whole lot of stuff that we didn't mean to replicate at all. We're very careful to only write stuff that we thought made sense; that it was not obvious how to do it in Angular or JavaScript. And the best example is collection views. There’s other things you know. We have an eventing infrastructure. We have a control base class, control templates, those kinds of things that also come from XAML world. But I think collection view is the best example. It's the most obvious one.

And I'd also take a step back just from Wijmo, just to talk more generally about, you’re a Silverlight developer, you’ve invested all these time, money, resources into Silverlight, and you need to go mobile or you need to just move forward with development. What do you do? And naturally, a lot of people are moving to Angular. So just helping people see a clear path and MVVM is a key part in that transition. Silverlight was kind of built around MVVM. So following that same pattern makes the migration much smoother. You're able to take things that you were doing in XAML which would be the view and recreate those in partial views or views in Angular using HTML instead of XAML. You're able to migrate your view models, working with scope and Angular where you would traditionally be working with a view model in C#. And then a lot of times, if it's done right, you can use the same back end services. And perhaps Bernardo could talk a little bit about his experience. He took a Microsoft out of the box Silverlight data service sample and ported that to an Angular application. And you know, the Wijmo controls were complimentary to it, but really the process is what's important in helping developers kind of move into HTML5 and JavaScript, coming from

Silverlight.

Yeah, I think Chris made a point there. Like I said before, I made the transition myself from XAML to HTML5. And I really started taking HTML5 and JavaScript seriously when I first saw Angular because I really love the ability to use MVVM and that rich markup to separate my concerns and everything but I thought a few things were still missing. And like I said before, collection view was the most clear one, and really there's no reason for it not to be there because it's really relatively easy to do in JavaScript. But then also the controls, if you can use your markup and you have the same controls to similar object models in Angular that you had in XAML, that really makes your job a whole lot easier. And we did decide to prove a concept by taking an existing app. We decided not to create a new one because that would be a little suspicious; you know we could create something that was too simple or too complicated. So it took to an existing Microsoft sample, typical line of business, just a very simple app but that illustrates, touches up on the main points that Silverlight has to offer. And we decided to port that. And it was a lot of fun. It took about two hours to port. The HTML5 application is responsive; it runs on tablets and on phones, and it’s about 10% the size of the original app. It was very interesting. It was a lot of fun to do.

I think I misunderstood you. You said took two hours to port, but what exactly did you port in the two hours?

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.

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.

It could be. Let me take a look.

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.

It's certainly in our list of samples. We have a bunch of samples there. It’s one of those.

Maybe we can get a link to it later and include it on the podcast notes.

Sure. Yeah, it's called Migrating from Silverlight.

Yeah, I saw it.

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.

And it works in all browsers and it takes no plugins, right?

Correct.

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.

Yeah. Business is going well. We’ve been in the JavaScript market now for five years. We’ve just had an anniversary. So just some background: we first started building JavaScript components as jQuery UI widgets. We kind of decided that we needed a new front end library to complement our ASP.NET controls, so we chose jQuery UI as the framework. We built a bunch of widgets. And we kind of took a step back and said, “Hey, these are good on their own. Why don’t we release this as a product?” We did that. We had success with that. And we ended up wrapping those widgets in Angular directives. And it was kind of an afterthought because Angular came along after we had developed those. So it was, to be honest, a little awkward. You’re taking something that exists and kind of shoehorning into another framework. So it was a much more successful Product I would say.

So what are the common struggles or…

What are the common struggles that people have making the switch, I think is probably what John is after.

The common struggles of people going from a Silverlight environment to HTML5 are probably that they are missing a framework that kind of gives them a very clear path of how to develop and where to develop them and what to do and how to organize things. I would definitely say that's the biggest one. And then the other is probably working with data. And that's what Bernard called out earlier with collection view being a really critical piece to have in JavaScript that you would normally have in .NET.

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?

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.

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.

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.

Whaaat?!

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.

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.

So what’s the best way for somebody to kind of get started with doing Angular and Wijmo?

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.

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.

Bernardo, would you like to talk about the roadmap, how you see it?

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.

So, I'm looking at your directives now. It's actually JSFiddle like browser in your site on how to use some of the Angular directives of Wijmo. And it looks like, obviously in this example here, it's just pulling down all of the Wijmo grid chart and then Angular. And I'll put a link there for the users. But when I look at this, I'm wondering, “What if I just wanted to use just the chart or just like two or three of the directives?” Is there a way to just pull down the CSS and JS just for those particular ones so I don’t have to take the weight of the entire JavaScript for my transport?

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.

Right. So if I heard you right, the way I would do this is that I’d always get the Wijmo common core of the JavaScript and CSS and then on top of that… that’s basically how Wijmo works. And then you grab the js file just for like let’s say a chart and that makes the chart work. And then I would want the third file with the Angular directive's list which is that it looks like a very small file.

Yes.

And if I didn’t do Angular, I would just leave off with Angular directives file, correct?

If you did KnockoutJS for example, you put in that KnockoutJS file instead of Angular.

Gotcha. So there’s multiple files, but they are multiple because you can module or pick and choose how you wanna make them.

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.

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?

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?

Well, one of the things that makes our components unique in my opinion -- or our suite of controls unique – is that we have very, very mature controls. Even though they were released in October, our grid for example is the flex grid and we’ve had the flex grid controllers existed in so many different incarnations. It's pretty much the same object model and a very faithful legion of users. So we had ActiveX and WinForms; we had the Silverlight and WPF; and now, we have the JavaScript control. It's a very, very powerful control. And it's the same object model.

So in that sense, we expect a lot of people to come from the JavaScript world and get into Wijmo. We also expect to get a whole bunch of users form WinForms and Silverlight into Wijmo as well. And for that crowd, there's really not much competition because we have the only grid that is the Flex grid. But the same thing applies to the chart as well and most of the input controls, they come from XAML world. And they are all suite of controls. They are very powerful. One of our samples on the site is a benchmark sample. We are aware that there are the companies that do very cool controls. Some have strengths. We all have strengths and weaknesses. I don’t think there’s the best control for everybody. I encourage everybody to go and test them out and see what works best for them. I think we're very strong in a lot of areas. I hope that a lot of people will choose our controls.

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.

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.

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.

Yeah.

All Righty. Let’s do some picks. Joe, do you have a pick and a tip for us?

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.

Cool! Dude, I'm going to buy one like right now. That’s awesome!

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…

As long as somebody doesn’t steal it off the front of your house. [Laughs]

[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.

Dude, that’s awesome! [Chuckles]

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?

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.

Sweet! Chris, do you wanna go next?

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.

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?

Sure. I just have one. Something that I was just browsing the other day and I found this natureofcode.com/book. I don’t know if you guys have seen this. I love Physics. I love JavaScript. I think it's definitely worth a read. It's very interesting: natureofcode.com.

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!

Thank you.

Thanks a lot, guys.