The panelists discuss the Ionic Framework with Max Lynch and Tyler Renelle.

Special Guests: Max Lynch and Tyler Renelle.

 

  Hey everybody and welcome to episode 126 of the JavaScript Jabber Podcast. This week on our panel, we have Joe Eames.

  Hey there.

  Jamison Dance.

  Hello friends.

  I’m Charles Max Wood from DevChat.TV. And this week we have two special guests. We have Tyler Renelle.

  Hello.

  And Max Lynch.

  Hello.

  Do you guys want to introduce yourselves really quickly?

  Go for it, Max.

  Sure. I’m the co-creator of the Ionic framework and also the cofounder and CEO of a company called Drifty which makes Ionic in Madison, Wisconsin.

  Awesome.

  And I’m Tyler Renelle. I’m the creator of HabitRPG. And as we’ll talk about in this episode, the mobile app for HabitRPG is built on Ionic.

  Cool. So, why is it called Ionic?

  Because it’s the only name that we didn’t hate. [Laughter]

  Nice.

  It was the only unregistered name on the internet.

  Even then, we got IonicFramework.com, so that wasn’t even true. [Laughter]

  Oh wow.

  So, teach us about Ionic. What is it?

  Sure. Ionic is basically a totally web-focused framework for building native-style mobile apps. So basically, you can use Ionic to put together an app that looks and feels pretty darn close to native but without actually having to become a native developer. So, it’s really targeted at web developers who maybe are just getting into mobile or never really did mobile, or companies that don’t want to have to put in the time and money and build multiple codebases for different platforms. They can do that with Ionic.

  So, there’s the whole hybrid app development space on things like PhoneGap and Cordova. And this allows people to cross-compile one codebase to multiple platforms by simply using the web view of the mobile device you’re on. So, instead of having to write a mobile app for iOS and a mobile app for Android and a mobile app for Windows Phone, you use PhoneGap and you crosscompile it down to all these devices. So, it saves you a lot of time and effort. And then like Max said, Ionic is the web UI framework for that so that it looks and feels like a native-ish app across those different platforms.

  So, I’ve never built a hybrid mobile app before. And I know lots of these tools work at different layers of abstraction. So, can you outline what the different tools do? So Cordova, is that the piece that handles running your code on a web view? Does that make sense?

  Yeah. So, Cordova is basically, so what Cordova was, was PhoneGap. And then it became the open source core when Adobe bought the company behind PhoneGap. And PhoneGap is a better name for it, because if you think about that, there’s this layer between a browser and the actual native environment underneath. There’s a gap. That’s where PhoneGap fits, and now Cordova. So, it’s basically a web view with really convenient plugin APIs for hooking into the native layer underneath for basically doing anything you could do with a native app. It’s just, there’s this protocol for passing data back and forth from the native layer and calling native functions. That’s really all it is. 

So, historically when people were building PhoneGap apps they basically had to rebuild a native UI from scratch, which is a ton of work [chuckles]. And people would do it with varying amounts of sophistication and success. So, we were really trying to normalize that. So, you can just start with our UI kit that have gestures and animations and navigations for native apps, which is a little different than in a browser app. And so, you wouldn’t have to hack all that together every time you build an app.

  So, Ionic then is the UI layer that sits on top of Cordova or PhoneGap, whatever. Is that a good way to describe it?

  Yeah, yeah. That’s perfect. I think we’ve started to go down a little bit into the stack where we also have a sister project we released called ngCordova, which just makes it easier to use the native APIs through AngularJS and JavaScript. So, we started with just the UI but now we’re expanding up and also expanding down. 

  Can you talk a little bit more about that? I’ve heard about that, but it’d be nice to hear more about it.

  Sure, sure. So basically, using the native plugins through Cordova is pretty easy but it’s very vanilla JavaScript. So, you don’t get nice things like promises. It just becomes a callback mess. And because Ionic, I didn’t really mention this but we are pretty much 100% Angular-focused, we wanted to make it a lot easier to create services that you could mock. For example, test geolocation or accelerometer or Bluetooth, you could mock a service through ngCordova. So, you could test on the desktop and provide fake data, things that Cordova didn’t really have built in. 

So, that’s on the client side where we also have some tools for doing live-reload testing, which we’ve just released. So, you can run a local library load server and actually update your app in the app whenever you change the code, like actually running on the device, which is pretty sweet.

That’s further down the stack. And then going up the stack we’re actually about to release a visual design tool for drag-and-drop building Ionic apps. And then also some backend stuff like analytics in the next month or so. 

  So, the visual design tool, that’s the Xcode or the, I don’t know what it is for Android even.

  Yeah. It’s more like, yeah, it’s not really meant to be an IDE, more like the iOS storyboarding tool but much simpler.

  Okay. That’s awesome.

  So, could you explain the relationship between PhoneGap and Cordova?

  [Chuckles] Yeah, I actually wrote a blog post about this.

  Is that the one titled ‘The Last Word on Cordova and PhoneGap’?

  Yeah. Yeah, evidently it’s not quite the last word. [Chuckles] So, PhoneGap was the, or Nitobi was the company that made PhoneGap. And Adobe bought that company and then open sourced the core part. And that became Cordova which is part of the Apache Software Foundation. So, underneath they’re both the same thing. But what Adobe has done with PhoneGap which is very similar to what we’re doing now is you can use PhoneGap proper and actually start to get into the Adobe-specific stack. Like PhoneGap Build, PhoneGap Hydration, those are things that are not part of the core Cordova project because it’s just an open source core. And we’re doing the same thing as PhoneGap is with a slightly different focus but with our own tool that uses Cordova underneath. 

  One confusion I have is when using Cordova CLI. So, you can build your apps with Cordova and then deploy them directly to your mobile device via USB, using Cordova CLI. But there seems to also be a PhoneGap CLI. Does PhoneGap add additional CLI tooling? Or is it like an antiquated version and we should all be using Cordova?

  So, it adds those Adobe services like PhoneGap Build. So, you can type PhoneGap build iOS or whatever and it will farm out a build to their servers and give you back a binary.

  Oh, cool.

  So, Cordova proper doesn’t have that functionality.

  Got it.

  The flipside of that is then you’d need an Adobe account, theoretically pay Adobe for the services.

So, just a different strategy. 

  So, another I think interesting point on this whole hybrid mobile app space is that on any level there are competitors. So, on the web UI layers, that’s the high level, top layer stuff, I think of Ionic, and you’re probably going to hate me for saying this Max, as the Bootstrap for mobile. 

  [Chuckles]

  But when I say that and people say, “Well then, why would I want it? You know, I want a customthemed mobile app” and I usually tell them, “No, you don’t. You want your mobile app to look native. Otherwise people are going to know that it’s a hybrid app.” And a lot of times when something looks or feels non-native, those apps will typically get poor reviews, especially if it kind of looks clunky. 

If you remember back to those jQuery UI mobile apps in tandem with actual real mobile apps and the jQuery UI mobile apps were like just a red-headed stepchild for the company whose main property is the website. So, you can always add custom branding via Ionic, of course. But you want almost all the elements to look native. And so, yeah I always think of it as the Bootstrap for mobile UI. But unlike web where you want a lot of custom theming and branding, you don’t typically want that quite as much on mobile. 

But there are a lot of competitors in that space. So, I think Ionic is the coolest one. But there’s a whole bunch of others, like Ratchet. And Ratchet was the biggest contender for us at HabitRPG when we were comparing these frameworks. We came from a framework called Topcoat, which was much, much more minimal. It didn’t do very much for you. That’s by Adobe. So, I think that is the Adobe-sanctioned framework. Adobe’s the one who owns PhoneGap. But Max, do you want to talk about maybe some of the competitors in the landscape?

  Yeah, sure. So, Ratchet was actually one of the big, okay so well jQuery Mobile which we’re big fans of. But jQuery Mobile’s really the reason why we wanted to build Ionic in the first place, mainly because we saw a diversion in our values where jQuery Mobile wanted to be something that ran on every phone out there, regardless of whether or not it was the new, shiny iPhone. We wanted to be in contrast, something that was going to run on faster phones and compete with the more standard native stacks like iOS and Android. 

So, that was how we started compared to jQuery Mobile. But Ratchet was what we looked at next. It was like, “Okay. These guys see that you can emulate a lot of the native look and feel and it’s pretty good.” But we weren’t happy with it because the project was very, the messaging and everything was all about prototyping your apps. And this is something that really bothered me because it felt like the taboos were still there such that the only thing you’d ever do with a hybrid framework is prototype your native app. But we thought you could actually build a real full app using web technologies and make it your flagship product. So, we didn’t end up using Ratchet for that case.

And the code underneath was not really focused on actually being a UI SDK that you could build your application on top of. And then Bootstrap, which is obviously awesome for responsive website design but doesn’t really have much of a native story for actually making the app feel native. And there’s all these little things that people don’t realize you have to do when you’re building a hybrid app, like dealing with click delays, with fast click, which there’s fast click implementations out there that get you some of the way but miss a lot of important things like form inputs and keyboard issues. 

So, we realized there was nothing comprehensive that was open source that people could just use today that fixed all these little things but was also something you could build a real application on top of and was going to stick around for a while. So, that was really the genesis of the vision behind Ionic. 

  I think those little things you mentioned at the end like the click delay are as very important reason why somebody might use a mobile web UI as well. Sometimes when I see people getting into hybrid mobile app dev a la Cordova, they custom design their mobile UI because they think that they’re going to get faster performance that way and a better branding experience. But while they’re building, they come across all these little issues that you don’t know until you hit them. 

So, one is like you said, the click delay. And the way that works is when you click on a mobile website, you have 300 milliseconds between which it’s going to determine whether you click again for a double click. And after 300 milliseconds it says, “Okay, it’s a single click,” and it performs the action. But on a mobile app, that looks like lag. It doesn’t look like it’s waiting for a double click. And then another thing is scrolling is really slow on the mobile web. And so, Ionic gets around that by a hack, right? By loading it into GPU. Is that how it works? The 3D transform scrolling?

  Well, scrolling can be pretty fast using overflow scrolling. It’s a little buggy. But on older iOS phones specifically, the built-in scroll system wouldn’t send scroll events while it was doing the inertial scrolling, maybe after you’ve flicked it. And this is a problem because doing things like pull to refresh or collection repeat which is something we built to handle huge lists by only rendering a subset of them that are visible, you can’t do that unless you actually are getting events every time the page moves. Otherwise, it’s going to look terrible. 

So, we decided to use a JavaScript scrolling solution for the short term, specifically Zynga scroller which was the best one that we found. My hope is that with iOS 8 and some of the new Chrome on Android, we will be able to drop some of the JavaScript stuff which uses GPU compositing through WebKit transforms. We’ll be able to drop that and use the native overflow scrolling. 

  Nice.

  So, that’s something that we’ve had to work around. 

  So, the end result is all of these little mini issues that you might bump into in custom building hybrid mobile app is, they’re all taken care of for you by a web UI framework like Ionic. And in the end, the app actually feels more performant than anything you could concoct yourself on a oneweek project. The scrolling seems faster. And then of course Ionic has all of these widgets like slide-out menu and buttons and modal and popovers and stuff. And they’re streamlined to work with high performance on mobile.

  Yeah. Actually, the side menu was one of the big Aha moments because I’d seen that UI a lot, actually. And I was spending time with the HipChat app and I was playing. They had this nice side menu effect. I was like, “I wonder if you could do that using JavaScript and CSS animations?” And I built that. And it was the first demo and I sat there playing with it because it felt so smooth. If you use webkit-transform: translate3d, it’s really, really fast. And I looked over some of the other things out there that weren’t doing that. And I realized someone just needed to put this into a reusable package that other people could use and it would be awesome. Then we started building Ionic.

  That’s awesome.

  That is. 

  As a tangent, on a layer down, the next piece of the puzzle being Cordova and PhoneGap which is simply, like you said it gives you native access to device capabilities. But actually, HabitRPG doesn’t even use device capabilities. We just need a packager. And what PhoneGap does, or Cordova, is it allows you to take your mobile web app, HTML, CSS, and JavaScript, package it into a downloadable APK file for Android or whatever the equivalent of it is for iOS, you can actually deploy it to the app store. And you can use typical HTML5 APIs such as local storage for offline access and all these things. So, it’s got all the capabilities of a native app. It’s not actually like a bookmarked website or anything. And that’s a big thing that Cordova does for users. It just packages an app so that you can download it through the app store. 

But there does seem to be some competitors on that front as well. I just listened to the episode on Chrome Apps, the JavaScript Jabber episode on Chrome Apps. and there’s a new project called Mobile Chrome Apps which uses Crosswalk, from what I understand, is as forked Chromium implementation. So, you have Chrome packaged with your downloaded app alongside the app itself. It adds some megabytes to the file. I think it adds another 20 megabytes to the file. But then the benefit there is that you get WebKit on all the devices with better performance and more standardization, because I know that on Android, older Android devices, the default web view is very bad performance and doesn’t follow a lot of the web standards. 

So Max, do you have any experience with Mobile Chrome Apps or any of the other PhoneGap competitors? 

  I don’t have a ton of experience. I think this is actually something that we are looking to on our end too, specifically because Android has been really, really not so good pre-4.4. And that’s being really nice about it. [Chuckles] So, being able to use Chrome instead for the web view is a huge win. Right now, Mobile Chrome Apps as far as I know is still very, very prerelease, not quite ready. Crosswalk doesn’t have perfect interaction with Cordova. But that’s something that we’ve been looking into. 

There was another one and I’m trying to remember. But it was really, really limited on iOS to the point where I don’t even know why you’d ever use it. And I’ll try to dig that up. But I think it’s really important, I think. We’re going to see much faster hybrid apps with Chrome coming on Android.

And that’s something that we need to put into our tool chain for sure. 

  Cool.

  You’re talking about competitors, right? What about Xamarin? What do you guys think of Xamarin?

  Xamarin’s awesome. It makes great apps. They’ve got tons of people using it. We’re not trying to give you another thing to code in that really doesn’t apply outside of the world of Xamarin. The reason that we picked web technologies and AngularJS and HTML and CSS and JavaScript is because at the end of the day, it’s the most successful stack. You can have not only developers who know JavaScript, but you can have designers building the app, putting the markup in, which has been one of the big dreams of Angular, is just separating that all out for a diverse team. I think that’s going to scale better long term. And so, we’re really putting our bet behind that stack and trying to be a leader there. 

But Xamarin’s great. We definitely are inspired by them. And they make our jobs easier by pushing non-native, or non-default iOS and Android technology.

  So, are you saying that not everybody in the world knows C#?

  Yeah. You know, it might not seem that way, but yeah. [Laughter]

  C#’s a great language. But I think at the end of the day, it doesn’t to me seem like something that’s going to be growing long term, whereas web technologies are increasingly growing strong.

HTML5’s one of the top number of jobs on Indeed.com. It’s just quite a bit bigger. 

  Well, I think it’s also interesting and it speaks a lot towards what you guys are doing, because more options are coming out where people don’t have to build their mobile app five times. And it’s obviously superior, right? But I would be interested to hear what your take would be on when is it time to not build a hybrid app. And even, are there times when Xamarin doesn’t cut it? Because I know Xamarin builds native apps, but I assume that there are times when building an app yourself in Swift or directly on Android, the customized to that platform isn’t appropriate. What would you say about that?

  To be honest, I think that the time to not go hybrid is if you already know those and you’re comfortable with them and you like that technology stack. I think it works for a lot of people. If you are doing that kind of work, keep doing it. I think from an actual user experience standpoint, there are increasingly few apps that can’t be built in hybrid to have an equally great experience. And I

truly believe that. I think one area we’re just not interested in at all and I think native is still good for is games. With WebGL and all that, games are definitely going to grow on HTML5. But I think it’s always been a space, even on desktop, where JavaScript hasn’t had a huge impact. So, that will be interesting to see. But we just, we’re not really focused on that.

  Right.

  Are there any things that a hybrid app can’t do? You talked about WebGL, but are there other things, other APIs that just don’t get implemented or don’t get implemented well in a hybrid app?

  So, I would say the answer is community-driven. From a technical standpoint, no, you can pretty much do anything. Of course, if you wanted to render a native control, that might be a little bit annoying to do. But the thing is you can replace it with a CSS button or whatever you’re trying to do. The problem and the reason why Cordova is important compared to things like Crosswalk is the API, the plugin API is there. We just need more people building that communication layer through plugins to do things like Bluetooth, Apple’s new payment stuff which they released today. The community has to step up and build those. And we need companies like us, like Ionic, to also invest time and money in actually building that stack out, which we’re doing. Then you can pretty much do anything you want.

  Now, I do want to call the elephant in the room that performance is a major bottleneck with hybrid apps, it seems. That’s been a traditional pain point by both customers and developers complaining about HTML5 hybrid apps compared to native apps. And we’ve definitely noticed with the HabitRPG app, it’s a little bit less performant than your typical native app. And I’ve gone through and downloaded a handful of apps across multiple competitors, Ionic, Famo.us, AppGyver Steroids, those types of apps. And they all have the same sorts of performance issues by comparison to native apps. Do you want to speak to that, Max?

  Yeah, sure. Definitely not avoiding that. I think it’s definitely true. It was more so true a year or two ago even, but has become not so much the case anymore. And I think with the new phones coming out, the new APIs to the browser, you’ll be able to do things a lot faster to the point where adding that abstraction layer on top which is what Ionic is, it’s what hybrid apps are, they’re just an abstraction layer, that will be, you’ll notice it a lot less and less. 

But there are some things that I really wish we were able to do faster. Scrolling is one issue. Just being able to have more power over scrolling and not having to have JavaScript scrolling to get some cool effects like pull to refresh, that will make the app feel faster. I think giving up a little bit on the way we used to load content dynamically will make apps feel faster. I think people are still in the habit of, “Oh, you know I just write my webpage and put it in Cordova. But I’m downloading everything from the web.” That is something that native developers don’t do because their UI is more baked into the app. But you see it all the time with hybrid developers that are loading jQuery from the CDN. They’re pulling images as if this was on the web. And I think that has an impact on perceived performance. 

So, there’s definitely a ways to go. Having more control over memory management is going to be important, because I think over time not having that control means the apps get a little sluggish if you’ve loaded a lot of stuff and holding onto memory you shouldn’t be. But that’s a problem in a lot of languages.

  Mm. Before we leave competitors, do you want to talk about Famo.us or Steroids?

  Yeah, sure. I think they’re both awesome. I think we’ve got, a lot of people compare Ionic and Famo.us which I don’t know how close they are to be compared. But I think Famo.us is great. I just personally don’t have the same vision that they do. I want to see…

  So, Famo.us is all about using WebGL to render your apps, right? That’s my outsider’s view of it. I haven’t used it. But I feel like I’ve heard something about that. 

  From their public messaging, I think they’re interested in having a generic API that could target WebGL or Canvas or DOM as the output. 

  Okay.

  Because at the end of the day, it’s just drawing surfaces or rectangles on the screen and then transforming them with matrix 3D math and a physics engine underneath. So, the plus side of that is it’s a little gentler on the DOM because you’re just basically rendering a flat hierarchy of rectangles. The downsides are you have to build the UI in JavaScript, essentially. There’s ways to get around that. But then the program you model’s a little more 3D-oriented. And it seems to be a departure from the way you would normally build a web app that is accessible not just to JavaScript developers but also designers and things like that. 

So, I think it’s awesome but I’d rather invest in browser technologies that are a little more familiar to people. So, that’s what we’re trying to do with Ionic. And I think over time the browsers are going to get better. The DOM is going to hopefully gain back some trust from…

  [Laughs]

  From the rest of the world. It doesn’t deserve all the hate that it gets. And I think that will be the best way forward.

  They recently did release an Angular extension which is getting a lot of popularity. So, you can actually write familiar-ish DOM-style UIs, markup-style UIs anyway. 

  Yeah, yeah, yeah, and that’s super cool. 

  So, I’m kind of wondering. I’m going to change gears a little bit here. But how do you deal with the cross-platform stuff? And there are two angles to this. One, we talked around a little bit with the UI looking different between the two. And the second one is they provide different mechanisms for things like persistent data and stuff like that. So, how do you handle that where you have Core Data on iOS and you have other mechanisms on Android for managing data?

  Well, from a UI standpoint? So, we started basically targeting iOS 7 because that was the new hotness back then. Everyone wanted that kind of simple look. So, we built the UI around that. But over time, we’ve expanded to do some more Android-friendly things. Like if we detect you’re on Android, by default we’ll left-align header titles. We will show tabs that have a striped top rather than just looking like iOS. It’s a little detail. And also the scroll behavior changes so it’s not bouncy like on iOS. And then we have a few different animations. And that’s all configurable. 

And we have actually worked with the AngularJS team on material design to hopefully bring a much better Android story for UI into Ionic. That’s not quite ready yet but it’s in the works. In terms of the data stuff, that’s really down at the Cordova layer. The file system plugin in Cordova handles this. And basically you save files and it correctly saves them theoretically on the platform of choice.

So, that’s a plugin abstraction.

  Right, and what about Android? So, if I want to cross-compile it to both, does it do the same kinds of things for look and feel for the Android as well or do I have to say, “I want this look and feel for one and this look and feel for the other”?

  By default, it will automatically transform it on Android to adapt how I mentioned to those specific features. 

  Okay.

  But you can tell it not to.

  Okay. So, if you have a custom design, whatever. 

  Yup. And that’s something that we wanted. We really weren’t trying to just clone the native look, because the best apps out there are designed to have their own brand. They’re more custom. But some of those little details I think are important to just make people feel like this is a little more familiar. So, we’re definitely not trying to just clone the UI.

  Right.

  So, this is a random question. Would you ever use something like this for things that aren’t specifically mobile web? So, say you want to target, I don’t know, you’re doing some responsive designs. You want to make sure your website works well on mobile apps as well. Can Ionic help with that at all? Or is it specifically for packaging up apps and installing them on phones?

  Yeah, no. It can and people are using it for that. And honestly, when we test and we develop anything in Ionic, we’re basically testing in iOS, Safari, or Chrome, or Android browser, the actual mobile web browser. So, that’s a first-class citizen. 

The only thing that’s tricky about that that we’ve kind of, the reason we’re focusing on hybrid is it’s a little cleaner for our development tools. We can say, “Okay, run this command, you get an app.” It’s a little simpler. But some of the things like side menus, which we push as a great UI feature, don’t work right in a mobile browser like Chrome where when you swipe from the side Chrome actually takes over and switches your tab. Or Safari will go back in history. That makes it a little harder to control the app experience. And we just didn’t want to make concessions just to work on mobile web and hybrid. But tons of people are doing it. It works great.

  That makes sense.

  So, as far as, I don’t know if I got quite the answer that I was looking for with the cross-platform thing. So, how do you manage things like data storage or data management and things like that where you have different mechanisms or different frameworks on the different platforms?

  So, the idea with the plugins is as a developer you know what you’re trying to do. Like, I want to save this file and I want to read this file back, or I want to save this JSON blob and read it back later. That abstract concept gets translated through the plugin to do the correct thing on iOS and do the correct thing on Android. So, if you really, really needed to go in and say, “Okay, this is only on Android. I have to do this really weird thing,” there’s a slight possibility you might actually have to write your own plugin to do that and just call your routine which will call the native code. But that’s why these plugins exist. It’s just an abstraction to do something simple and make it work, just to work. But if you need to dig in, you can. 

  That makes sense.

  If you guys are cool with it, I’d like to talk about how HabitRPG uses Ionic, because I think it will speak to what the big benefit of using a hybrid framework, where that really shines. 

  Mmhmm.

  So, I haven’t talked about it yet. HabitRPG is as video game for improving real life habits. So, it’s like a gamified habit improvement app. And it started off as a website. And we’re using AngularJS. And because we’re using the full stack JavaScript stack, we’re using Angular on the frontend, Node and Express on the backend, and MongoDB, we’re able to share a lot of code between the different properties, whether it’s the client or the server. We use a module called Browserify which converts server-side JavaScript code to client-side JavaScript code. 

The obvious place where that comes in is model validation and stuff like that. It’s a little less obvious, some of the other locations. But about 80% of our code is in that shared common repository that’s able to be used on both platforms via Bower on the frontend and npm on the backend. So, it saves us a lot of time and effort, because we don’t have to replicate code in multiple locations. 

So, one of the big reasons we picked Ionic was when we were evaluating its competitors like Ratchet, well one Ionic has just a lot of steam going behind it. It’s getting a lot of press and popularity. And I see it really picking up. But two, it’s based on Angular. It uses Angular underneath the hood. And so, we’re able to reuse that talent amongst our developers. So, HabitRPG is open source, all the properties. We have a Chrome Extension, a mobile app, and then the website. So, the developers of the website can just hop over to the mobile app and fix a bug or add a feature without having to switch context because it’s just all Angular. 

And we’re also able to utilize that common lib, that HabitRPG shared repository, so that we can reuse all those functions on mobile. So, our mobile app code is very slim. There’s not a lot of code in the mobile app because most of it resides in that common lib. But because Ionic is built on Angular, another big benefit is we’re able to put directives and services and other such things in our shared repository as well. So, far and away, the majority of our codebase resides in this common lib. 

And then if you fix a bug on mobile, you get that fix for free on the website, which saves us just a tremendous amount of time and energy. So, you’re able to reuse talents, the talent of your developers, without having to have them know multiple languages or switch contexts, and then share code across your different platforms. And so, that’s just a good example of how Ionic or a hybrid app could be really beneficial, by comparison to making a native mobile app. 

  So, one of the things you said interests me. You said that it uses Angular under the hood. Do you have to know Angular in order to use Ionic? 

  I don’t think, you don’t really have to know it that well. But it’s going to benefit you substantially to know it. You probably have to know less Angular to build an Ionic app than building an Angular app.

But I don’t know. What do you think, Max?

  Yeah. It certainly helps. But we’re noticing a strange thing that I don’t think we expected, that people are using Ionic to learn Angular. And I think mainly just because it’s very obvious that if you do this, this happens. And you actually get something real at the end. Whereas things like TodoMVC and starter projects with Angular, it’s hard to say “Okay, I want to build this thing but I don’t really know how to get there,” and then you have to learn every Angular feature just to write your first directive. 

So, this is something that we’re going to be investing a lot more time into, is teaching Angular because it’s important for getting people into Ionic and making them successful, but doing it through learning Ionic and just broadly touching some of the Angular features underneath and then digging in later. But yeah, it’s been really interesting. 

  I’m curious. Obviously if you’re building a framework like this, you have to stay up to date with the latest APIs provided by the platforms. So, when a new version of Android comes out, when a new version of iOS comes out, you’ve got to be up on that stuff and make everything play nicely with the new way that things work and the runtimes on the backend when it compiles any components that it does. What’s the lag time and what are the challenges with a setup like that?

  I’m not quite sure I fully understood that question. 

  So for example, if it’s a hybrid app, some of it’s going to be web. Some of it is going to be, connect to the camera to do awesome stuff, or connect to the GPS, or connect to the gyroscope or whatever. So, you have all of these different features in the phone. And sometimes when they update things, they actually update the framework or they update the runtime. So, when you have those components in your application, they’re running native code in order to do that stuff. And when they change that, how much work do you have to do in order to keep it all happy and playing nice and up to date?

  So, that’s the job of Cordova. Interacting with the device and its native capabilities is the job of Cordova, owned by Adobe.

  Oh.

  So, you got to make sure that you have the distinction right between, there are two layers of a hybrid mobile app. One is just the packager. It just turns it into an app and then gives you device’s native capabilities access. And that’s what Cordova does, and its competitors. And then one is making it look and feel pretty, and that’s what Ionic does. So, one is the core stuff and then the other is the pretty stuff.

  Yeah.

  So, does Cordova ever change their API that you have to deal with?

  Yes. [Laughs] Yeah. Yeah, they do. There have been a few recent ones that are pretty dramatic. Like there was a change in the file system plugin recently, or not quite like in the last few months but earlier this year. It happens rarely. They did a bigger point release where some things changed. And frankly, it was for the better. And I admire them for making hard decisions like that. But that’s sometimes something you have to look out for. 

And we have a growing community through our ngCordova project, which is basically Angularwrapped Cordova plugins where we have a lot of people. There are 30 plugins on there, Cordova plugins. A lot of people are using it. The project has about 1000 stars right now on GitHub. So, we’re hoping that through that project, we will smell smoke before we see fire with any of the plugins, just based on people using them altogether. But yeah, that sometimes happens.

  So, do people ever wind up upgrading Cordova and then having their app not work?

  Yes. It seems to be less of a problem now, but historically has happened unfortunately.

  On that happy note. [Laughter]

  The same thing’s happened with Ionic, too. 

  Oh, sure.

  We did a lot of things and we were like, “Alright. We can’t go on living like this. This one feature just has to be broken in order to make everything better.” And honestly, I think if you look back at some of the other competitors in the space, one reason they’ve failed is because they failed to cannibalize or kill off the things that were broken in order to focus on the future. So, we try to be sensitive about that. But at the same time, we want to be able to make hard decisions if it’s really going to make it better, because otherwise someone else will do it better. 

  So, what have you learned that’s interesting about all of this, in working on this project?

  We’ve learned a ton. To some extent, we actually, so we started our company building visual design tools. So, if any of you are familiar with a product called Codiqa.com, which was a jQuery Mobile drag and drop tool, and then Jetstrap which is a Twitter Bootstrap tool, we built both of those. So, in a sense we were actually cannibalizing Codiqa by building Ionic because now it uses jQuery Mobile underneath, which is great but we’re pushing Ionic now. 

And I think you just have to be okay throwing yourself under the bus every once in a while if you’ve got a bigger vision. That’s really what we’ve learned. So, we try to look out for new things that are going to change everything and be open to them. And that’s what we’ve learned on that side.

We’ve learned a ton running the open source project which I’d be happy to talk about as well.

  I’d love to hear about it. 

  Yeah. I guess it’s an open-ended question. But so yeah, the project right now on GitHub has I think 9100 stars. So, I think it’s the 72nd, not that I’m counting, it’s the 72nd most popular project.

  [Laughs]

  On GitHub right now and it’s been growing. So, that’s been incredible. We’ve had a lot of people contributing. And I think if I had to say one thing that’s been the most, the best investment of our time has been building tests and building a testing infrastructure. I think the product has over 800 unit tests now. And we’ve built systems to do screenshot comparisons where if we change some CSS it will actually go and run multiple screens and compare them to an older Git commit and what it looked like, because regressions. 

We’re just like, when we started we were moving really quickly and we were breaking a lot of things. And regressions were the number one reason why we were losing sleep at night. Like, “Oh, is this thing going to break everything tomorrow?” It was just very, very stressful. So, we took some time and actually started to invest a lot more in testing. And I think that’s probably one of the best decisions we could have made. 

It also helps people feeling comfortable to contribute, because if you make a change in a project that’s open source and you actually have a test to show that it works, you’re going to be a lot more comfortable contributing. Whereas if you go and if you look at Ionic and imagine it didn’t have tests and you’re like, “Oh, I’m going to change just one line of JavaScript in this thousand-line file that’s doing some navigation. I think it works. Here’s my pull request.” That usually fails. [Chuckles] And I think people end up not liking to contribute if there are no tests. So, those are some of the biggest things we’ve learned.

  You are now my new best friend, Max. I love hearing that.

  [Laughs] So, I have to ask this, just a business question. 

  [Chuckles]

  So, if it’s open source, how do you make money?

  We are planning to make money, and our company still makes money from other products, is really to focus on backend services and add-ons like analytics. So, when we look at the mobile space we think that the frontend, the UI, is a commodity. And you can’t charge for it. I think long term, trying to have a premium version of a UI framework just doesn’t make sense because people don’t value buttons. A button should, it needs to be free. 

So, our goal is just to get tons of people using our components into our development stack. And then we can add on valuable services which we’re about to release in the next month or so, for analytics, A/B testing, things that really integrate well into the mobile UI in a way that you don’t really see right now. Because there’s a lot of companies trying to solve that problem but they don’t know the UI that you’re using because they’re too abstract. Or, they’re focusing on native apps, which are a lot harder to dynamically change because the UI is not, it’s basically binary code. 

So, we’re going to do some really interesting things, a lot of fun Angular directives and services involved. I think people will really like it. We’re still early on that, but we are going to be charging for some of that stuff later this year. 

  Very cool. 

  I have a totally unrelated question. It seems like you’ve bet pretty heavily on Angular. Is that something that you ever see changing or is Ionic tied pretty tightly with Angular?

  I’m very, very excited about Angular long term. I think if you look at the frontend framework wars, I think there are some great projects out there but I think people misjudge how popular Angular is. It has really blown up. It’s growing considerably faster than a lot of the other alternatives. And companies have picked it in a way that I think is a little unprecedented. I think maybe the last time that a developer at a big company was told to use a frontend thing, it was probably jQuery. So, you’re seeing that now with Angular. And so, I think it’s going to have some staying power. 

I think when you look at some of the upcoming Web Component stuff in Polymer, they don’t solve necessarily the same problems Angular does. So, I think you’ll see Angular adapting to use those APIs underneath to just have a better developer experience top to bottom but still letting you build complicated applications with all the dependency injection and all that stuff we’ve come to know and love. Angular is still going to shine there. And people, it’s just going to keep growing I think. 

So, one other reason we picked it is because doing documentation, doing tutorials, education is enough work already, having to do just Angular. The thought of having to also do Ember, React, just, it makes my head explode. [Chuckles]

  Yeah. I agree with you obviously on the popularity thing. In fact, somebody should do an Angular podcast. [Chuckles]

  Oh, that would be really cool.

  That would be. 

  You know, I actually own the Twitter handle angularpodcast. 

  Do you? Maybe there’s an idea there, Chuck.

  Yeah, maybe.

  The joke being that Chuck runs an Angular podcast called Adventures in Angular. [Chuckles]

  Yeah. We should get you on there, Tyler.

  [Laughs] The joke being I was on the last one. [Chuckles]

  So, these guys are sick of hearing from me. [Laughter]

  Yeah.

  Yeah, I sound like a broken record sometimes with Angular. But it’s just an incredible movement. And we’re huge fans. I love it. And I’ve done some work, built projects in Backbone and jQuery and then built the same project from scratch in Angular. And I have felt very closely the benefit of doing it in Angular. Actually, one of our things we’re releasing soon which is another drag and drop tool for Ionic called Ionic Creator, that is built in Angular. And the time it took to build it was two months. And it had more features and it was faster and it worked better and had fewer bugs than the one that took six months with jQuery and Backbone, which was not maintainable at all. So, those little things make me a super fan.

  I think you’re right too. You were saying that many of the projects out there won’t necessarily be competitors to Angular going forward. I’ve already seen implementations or discussion of implementations of Polymer on Angular. I’ve seen React as the replacement for the views component of Angular. So, it’s like this rolling snowball. It’s not competing with the other frameworks. It’s gobbling them up as it goes along. [Chuckles] But I’m seeing a lot of integration with Angular because it’s so modular, amongst the other projects out there. The only true competitors to it that I could think of would be Ember. I think a lot of the other ones like Backbone are a little bit, dare I say antiquated. But Ember is a still major contender.

  Yeah. I think having the community building things for Angular like with jQuery, it gives it a lot of staying power. JQuery is obviously huge. It’s still huge. But anything you could ever want to do in your site, you can find a jQuery plugin for it. So, I think Angular’s definitely seeing that. And that will keep it sticking around for a long time.

  So, are there good resources or tutorials for people who want to get started with Ionic?

  The best place to go is just IonicFramework.com and then go to the Getting Started button. That will guide you through installing the SDKs and everything. And then our Docs page walks through all the components and some of the different things you can do. But when you actually start a project from the command line, you get a working template. And then we have a Learn site, which is learn.IonicFramework.com that has tutorials on doing common things in Angular and Ionic like taking pictures from the camera, integrating backend services. We have some articles there that you can read from. And we’re going to be expanding that pretty aggressively in the coming months. 

  I’d also like to chip in here that Steve Michelotti just published a tutorial on Pluralsight on using the Ionic Framework. 

  Yeah.

  So, it’s three hours of video there which I think is just long enough you can do the free subscription if you’re not already a subscriber and want the tutorial. So, that’s pretty cool to see a lot more resources like that coming up. 

I also have a related question of what you think of teaching people to program using Ionic. And at first glance that may not sound like such an amazing idea, because it’s so many tools in place. But on the other hand when you want to get somebody into development, what you want them to do is build something that they think is cool.

  Here, here.

  Because that will get them excited, right?

  Definitely. 

  Yeah. I dream a lot about that. I think we could do a much better job. But what we saw with our other drag and drop tools, specifically Codiqa was, a lot of people were using it for that. But we were not really cultivating it. So, that is something I want to do going forward, is being a little more accessible to people that don’t know Angular. They don’t know how to code, which I think our Creator tool which is coming out soon will help with, because you can build. You can drag a button in, drag different mobile components and get a project basically that works. It’s a real app when you’re done. Though, it doesn’t have a ton of logic but you can add later. That’s something that we want to do. 

But we hope that the community can step in, because we’re not professional educators. And it’s not a strong suit of ours. So, we just want to give people tools so they can do that. And hopefully, the community will rally around it.

  So, FYI my 16-year-old daughter is learning to program, going to a program at high school where she does three hours a day of programming. And I took her to a conference and went to an Ionic class. And she got really excited about building a mobile app. So, I’ve been trying to take some time and trying to start teaching her PhoneGap and want to teach her Ionic as well. 

  That sounds amazing. [Chuckles]

  Is there a rough ETA on Ionic Creator?

  Yeah. It’s getting very close. For the first version, probably start inviting people slowly by the end of next week. But, you know how things happen. Deadlines slip, so [chuckles] we’ll see. We’ll see. 

  Is it going to be like Ion Xcode or something?

  Yeah, but hopefully much, much easier to use and not designed by apple.

  [Laughs] [Chuckles]

  I think that’s a really good question about potentially having people learn by means of Ionic. My girlfriend just started doing Codecademy and she’s trying to learn coding. And she’s learning HTML, JavaScript, and CSS. And she’s just getting overwhelmed by all of these languages at a low level, not understanding what their purpose is. So, I said let’s instead switch over and create an Ionic app together, because then she could see exactly what she’s doing and then dive deep if she wants to learn the specifics of something. But this Ionic Creator project looks like it will be a really, really good step in that direction to teach people to code by letting them build a real mobile app.

And that’s what everybody’s building these days. 

  Yeah. And I think the sense of accomplishment you get when you actually have something real to show is really important. So, we want to do more there. What we’re doing at work now is any new hire, we have them, their first project before they get into anything else the first two weeks is they actually build a mobile app. And we want to do this for everyone, not just engineers. So, I think Ionic should absolutely be accessible to people who don’t know how to code. And I think we’re going to get a pretty interesting perspective into that once we hire a few more people who maybe don’t have a strong development background. Yeah, it’s a huge, it’s a very honorable goal. And it’s hard but I think we could help there.

  So simple, your accountant could do it. [Laughter]

  I tried to pick a career path where it’s like, “Yeah, those guys are freaking smart.” But anyway, so is there anything else we should know about Ionic?

  You know, I think give it a try. The team’s growing so there is a company behind it. I think sometimes people don’t always realize that. But we’re a team of 15 people based in Madison, spread out around the country with a few remote people. And we’re going to be growing here some more next year. So, Ionic’s going to get a lot of love. And we’re looking for people who want to help contribute or help test or building cool things and want to show us, which is sometimes tricky in open source, is getting people to share some of the things that they’re building. So, we want to see more of that. And that’s all I got on that. [Chuckles]

  Cool. Well, let’s go and do the picks then. Jamison, do you have some picks for us?

  I don’t have any picks. Taking a pick break today.

  Joe, do you have some picks for us?

  Pick break? Whoa, whoa, whoa, whoa, whoa. There’s no such thing as a pick break.

  Sure there is. Don’t ask him what he was picking.

  [Inaudible] pick the thing that is on my left as I’m looking around frantically for them. 

  Alright. My first pick’s going to be Jamison Dance.

  Oh, geez.

  [Laughs] Because Jamison is so awesome. Nobody so far has been awesome enough to decide not to pick anything…

  [Laughs]

  Since I’ve been here.

  The conscientious objector to picks.

  Yeah. It’s like [laughs]. It’s like a sit-in. Jamison’s having a sit-in.

  Yeah. Okay. Here it is. My pick is, consume less information because you’re trying to do too much. It’s the anti-pick. [Chuckles]

That is usually true. 

  I like that. That’s a nice pick. Awesome, good pick Jamison. 

  [Chuckles] Thanks.

  Okay. Well, I’m going to pick that course on Pluralsight just because it’s a great way, videos are a great way to learn things. I love learning through videos. So, I’m going to pick that Pluralsight course on Ionic.

And I’m also going to pick a board game. There’s a ThinkGeek board game called Robot Turtles. You can only get it on ThinkGeek.com apparently. And it’s a board game for kids. And it teaches kids to program without them understanding that they’re programming. But it teaches the basic constructs of looping and typical logic constructs used in programming, all through a board game that you can play with your kids about robot turtles. So, I’m going to pick that as my second and final pick. 

  Alright. So, as many of you may or may not know, I don’t have a fulltime job. I work contracts, freelance. And I’m actually ramping up to start a video series on Ruby on Rails. Anyway, that’s a side tangent. You’ll be able to find it at RailsClips.com once it’s up. I got this inspiration for some of the things that I want to do with from a service out there called LeadPages. So, if you’re into freelancing and you’re trying to do marketing, LeadPages is really awesome. Just go to LeadPages.net. And they have a webinar there that walks you through a marketing plan that I think is awesome. So, this is much more along the lines of people who are out there trying to do marketing or build products and sell them. Anyway, it’s a service that I’m really looking at.

The other thing that I want to put out there just for our listeners is that I am really interested in doing some webinars and maybe some Q&A sessions. So, if you’re interested in some live Q&A sessions, I’ll see if I can get some of our past guests or current panelists to be on the show, or to be on the Q&A with us. If you’re interested in something like that, let me know and I’ll put something together. So yeah, so those are my picks. Nothing direct there other than LeadPages. 

Max, what are your picks? I have to say, I love that name, man. 

  Max?

  Yeah.

  Yeah, it’s a good name. I agree. You’re a smart guy. [Chuckles] 

  This was picked before but I just want to give another shout-out to HabitRPG. I run into people all the time that are using it to enforce good habits, especially with their kids. And that’s awesome. It’s been a great success...

  Aww. Thanks, man.

  Story with Ionic. Beyond that from a developer, I’ve been using just randomly this tool called Postman, which is a Chrome extension that makes it really easy to test REST APIs but also save a request that you’ve done in the past, which is very helpful because sometimes it’s annoying.

And then one other thing, because you said I could have three so I’m having three. 

  You can have mine if you want more.

  [Laughs] No, I just got one more. Npm-stat.com has been something I’ve been using a lot, mainly just to track downloads of our npm tool, Ionic. So, it’s a great way to see how many people are using npm packages over time, downloading and installing them. Some fun graphs, totally free. So, npm-stat.com is my other pick.

  Awesome. Tyler, what are your picks?

  Alright. I’ve been saying this since I started listening to JavaScript Jabber since its inception hoping one day I’ll be on to do some picks. So, anybody who knows me knows my favorite thing in the entire world. It’s called WorkFlowy. It’s very simple. It’s just a hierarchical note-taking app and to-do list. But what you don’t realize is how valuable hierarchy is when you’re taking notes or jotting down to-dos. It will organize your life so well. I’ve been using it for three years or something. But it’s made my life so much more organized. It’s called WorkFlowy.

The other one is Quicksilver or Alfred for Mac. I use Quicksilver because I’m old. I think Alfred is the newfangled version. And it lets you tie global hotkeys to apps on your desktop so that you don’t have to use Command + Tab to switch apps or going between screens or zones or whatever they’re called on Mac. You can just switch directly to the app you have in mind. So, I have command option one, tied to Chrome, two tied to WebStorm, three to terminal, et cetera. You don’t realize how much switching between contexts on your desktop clutters your brain until you completely remove that need. So, use Quicksilver or Alfred to switch between apps directly. 

A Practical Guide to Protecting Code’ and it’s all about commercializing your open source product and protecting yourself. And so, including your IP. So, that’s a good read if you’re interested in having an open source company. And that’s it.

  Cool. Well, I need to get some people to add me to their parties on HabitRPG so that I can go join some quests. [Chuckles]

  Huzzah.

  I have social phobia, so I don’t participate in those on HabitRPG. 

  Oh, that’s the best way to build habits. So, one of the cool things is you fight these bosses. And if you don’t do your habits, the boss hits everyone. So, it’s your fault that everyone got hurt.

  [Chuckles] Ouch.

  And it’s so good.

  Oh, wait.

  It’s so effective at preventing you from smoking or not going to the gym or something.

  You’re saying I can actually be a social miscreant this way?

  [Laughs] Yes.

  [Laughs]

  You could be a bad guy. 

  [Chuckles]

  Joe, you can’t be my friend on HabitRPG.

  [Laughs] I’m going to join your party and then do nothing just to kill you. [Chuckles]

  Alright. Well, I think that’s pretty much all we’ve got. So, we’ll wrap up the show. Thanks for coming, guys. 

  Thanks for having us.

  Yeah, thanks for having me. It’s fun. [Chuckles]

  Alright. Well, we’ll catch you all next week.

[Hosting and bandwidth provided by the Blue Box Group. Check them out at Bluebox.net.]