064 AiA Ionic with Matt Kremer and Mike Hartington

JOHN: Oh my gosh. So I’ve given up Webpack and SystemJS; I’m on to WardJS. It’s the new thing.[This episode is sponsored by Hired.com. Every week on Hired, they run an auction where over a thousand tech companies in San Francisco and New York and LA get on JavaScript developers providing to put the salary and equity upfront. The average JavaScript developer gets an average of 5-15 introductory offers and an average salary of over $130,000 a year. You just can either accept an offer and go right into interviewing with the company and neither with that any continuing obligations. It's totally free for users, and when you're hired, they'll also give you a $2,000 signing bonus as a "Thank You" for using them. But if you use the Adventures in Angular link, you'll get a $4,000 bonus instead. Finally, if you're not looking for a job but know someone who is, you can refer them to Hired to get a $1,337 bonus if they accept the job. Go sign up at Hired.com/AdventuresinAngular.]**[Ready to master AngularJS? Oasis Digital offers Angular Boot Camp, a three-day, in-person workshop class for individuals or teams. Bring us to your site or send developers to ours classes in St. Louis or San Francisco – AngularBootCamp.com.]**[This episode is sponsored by Wijmo 5, a brand new generation of JavaScript Controls. A pretty amazing line of HTML5 and JavaScript products for enterprise application development. Wijmo 5 leverages ECMAScript 5 and each control ships with AngularJS directives. Check out the faster, lighter and more mobile Wijmo 5.]**[This episode is sponsored by Digital Ocean. Digital Ocean is the provider I use to host all of my creations. All the shows are hosted there, along with any other projects I come up with. Their user interface is simple and easy to use. Their support is excellent. And their VPSes are backed on solid-state drives and are fast and responsive. Check them out at DigitalOcean.com. If you use the code “Angularadventures” you'll get a $10 credit!] **CHUCK: Hey everybody and welcome to episode 64 of the Adventures in Angular Show. This week on our panel we have Joe Eames. JOE: Hey everybody! CHUCK: Ward Bell. WARD: Hello! CHUCK: Lukas Reubbelke. LUKAS: Hello. CHUCK: John Papa. JOHN: How are you doing? CHUCK: I’m Charles Max Wood from Devchat.tv and this week we have two guests. We have Mike Hartington. MIKE: What’s up? CHUCK: And Matt Kremer. MATT: Hey everybody! CHUCK: Do you want to introduce yourselves? MIKE: Sure. I’m Mike Hartington. I work for Ionic 1 and Ionic 2. I’m also a developer advocate for the framework. MATT: I’m Matt Kremer. I’m the lead developer on the Ionic Creator Project which is our drag and drop Ionic app builder. CHUCK: Very cool. I’m just curious – the Ionic Creator, was that actually written in Ionic? MATT: We use some of it but not entirely. So we do have the Ionic lab which was written in Ionic and Electron – that is not the road we went for for Creator but it is an Angular 1 app. CHUCK: Okay. Do you want to explain what Ionic and Ionic creator are really quickly? MATT: Sure. Mike, why don’t you grab Ionic, I’ll grab creator. MIKE: So Ionic is a SDK for building native mobile apps using html, CSS and JavaScript. Simple as I can describe it. MATT: And then creator is a visual app builder. So a long time ago we had things like Adobe’s products where you could drag and drop and build websites and things like that and we’ve come a long way. So creator’s goal is for you to build Ionic apps and export real Ionic code like a regular developer would’ve written it. JOHN: So does that mean that irregular developers use Ionic? [Laughter] MATT: I would hope so. Okay, I’ll rephrase it – like a regular Ionic developer would organize their project. [Chuckles] JOHN: I started to get right out there and it was sitting there. MATT: It was. JOHN: Something had to grab it. CHUCK: Yeah. JOE: So guys, I played a lot with Ionic over the last year or so and I’m very interested in it. So mobile development is a passion of mine and one of the things that I found with Ionic that’s cool, to me at least, it knocked down a lot of the barriers to entry of getting a mobile application up and running and also allowed me to leverage the Angular skills that I already had. Was that a side effect or was that one of the intentions of what you guys were trying to accomplish. MATT: I think that was definitely of the intention – getting web developers the ability to use these skills that they have and start creating mobile apps. And then we took that even a step further with Creator in allowing marketers or project managers and things like that to start the scaffolding and hand it off to those web developers to build these native apps. LUKAS: So just a little anecdotal story. So I’ve actually shot a couple of series of Ionic videos for the Ionic team and I was talking at a [inaudible] and I’m like, “Adam, how do I level up on Ionic?” And I thought it was pretty humorous when he’s like, “Well, do you know Angular?” I’m like, “Yeah.” And he’s like, “Okay, well you're ready to go.” And so really these conversations that I’ve had is if you know Angular then you're ready to jump into Ionic and start building stuff right away and that has certainly been my experience. MIKE: Yeah. Ionic is great because all the APIs that are there and available to you, you don’t have to use them there. There are some directives that you can use right out of the box but Ionic itself is a really thin layer on top of your development process. JOHN: So can you tell me a little bit about ngCordova? Because honestly that’s when I got pretty interested in Ionic. MIKE: Sure. So ngCordova was a side project for a little bit. Cordova has this concept of wrapping native device functionality inside of a JavaScript API and it works off of call backs. And since we’re in Angular we figured, “Well, why don’t we just create sin or Angular wrappers around all these plugins, to it in a nice promising way.” So it’s like one last thing to have to wrap their head around. So we started out doing all the core plugins like camera, the file system, SQLite, wrapping them in Angular services. So that way all a developer actually has to do is call that service and once that service is actually run that then they can handle out the error. It’s a much simpler way off handling things and call backs. JOHN: Because I’m looking at a list on your ngCordova site for plugins. It looks like there’s over 70 things that I can do and interact with the native device through ngCordova and that’s using basically an Angular directive with it, correct? MIKE: Yeah. Essentially, we started off with the core plugins and then it’s just exploded a lot of contributions from the community. People – if they have one plugin they’ve submitted a pull request to at a small wrapper to it, and it’s super easy to integrate. MATT: And it’s worth noting here, too that with Ionic 2, we’ve baked ngCordova in a little bit more so it’s a lot easier to use in Ionic 2. Because we’ve decided that we want to carry that weight on our shoulders and we need to help as a company and enable developers to use those plugins. JOHN: Can we take a step back, too, for a second and just – I dove deep but I want to pull back for a second and say when people are looking at if they want to build a mobile application, they always comes up, “Hey, should I build a web app or should I build a native app or should I build a hybrid app like a Cordova based app?” Concerns always come up seemingly with the hybrid version is performance. So how do you address that here with Ionic and Cordova? MIKE: So performances – no matter what platform that you choose to write your app with, there’s always going to be performance issues but we just write clean code, we write performant code and we start utilizing technologies to help the actual device browser feel a little bit better. So specifically for Android – Android Sartorius. We’re having a subpar performance so we’ve brought in this plugin to enable, actually using [inaudible] based browser as a default web view for Android. So you’re getting essentially the same power of chrome from your desktop on your device so old Android versions like Android 4.1 will actually run on par with a brand new Nexus device. CHUCK: I also just want to jump in here. The thing that I always heard about with performance with Ionic 9and other Cordova based or web based app on the phone was scrolling. The scrolling didn’t look right or feel right. I haven’t experienced this myself but I haven’t had a list of thousands of things on my Ionic app either. MIKE: Right, scrolling’s always going to be tough. So one thing that we did to help make that a little bit better was we created our own mechanism for scrolling. We used a JavaScript based scrolling and we have this directive called collection-repeat which essentially becomes a drop in replacement for ng-repeat. What it does is as you start scrolling, it’ll take the elements that are leaving the screen, update their data and then recycle them. So essentially, if you’ve done anything with native iOS development, it’s essentially UI collection view where there’s only of sticks number of elements in the screen and they just keep recycling the data – the elements by just updating the data. CHUCK: Yup. That’s UI table view I believe. MIKE: Yeah, UI table view. WARD: So you're virtualizing the list and you're detaching all the watchers of the guides that disappeared and attaching new watchers for the ones that arrive? MIKE: Correct. CHUCK: Yup. WARD: That’s great, so that I’m not paying the cost for things I’m not seeing. MIKE: Right. So we’ve tested it out with over three thousand elements and you see that on older iPhone and it scrolls so smooth. MATT: And the thing that is most important here is really why Ionic exists is that the native SDK is great – it’s awesome. All these tools available to you that automatically do all these things so you don’t have to worry about it, and that didn’t exist when you were just using Cordova and everyone had to build their app from scratch. And now that Ionic’s here, our goal is to make sure that you don’t have to worry about this collection-repeat and the 300 second delay for tabbing or anything like that. We try to take care a lot of that for you. CHUCK: So I want to back up just a little bit further. So ngCordova wraps around Cordova plugins and Cordova, from what I understand, is the engine that basically gives you access to all of the native bits of phone functionality and then presents it in such a way so that you can write the rest of your app basically is a web application using web technologies. MIKE: Right. So Cordova itself is essentially just achromous web view. It’s a UI web view on iOS and the chrome web view on Android. But they also provide this bridge through JavaScript API where if you want to access things, like the camera, they provide the native code for each platform – iOS, Android and a whole bunch of other platforms that they support – and then you interact with it through a single JavaScript API. So whether you're targeting Android or iOS, the native code may change but the JavaScript API that you work with will work for both platforms. CHUCK: Right. So it would abstracts away the differences basically in the hardware and operating system. MIKE: Right, and you just write the JavaScript. WARD: Can you describe some of the most significant applications that have been built with Ionic? It would be great, of course, if you can reference things but sometimes I know that that’s not always possible so maybe you can describe one or two of these apps in a general way that we can all appreciate out here. MATT: Yeah, so probably one of the most popular Ionic apps is this app called Sworkit. So it’s a workout application – stretches, actual weight lifting and everything –and it has over a million downloads. It’s actually been featured on both the iOS and Android app store. And it was just one guy doing it as a side project and written using one technology before and actually rewrote it in Ionic and it’s just blown up and become an incredibly popular app. CHUCK: So I have to say, one thing that I’m really curious about – I have an iOS show as well and I went through last week with the developers on that show basically the Devchat.tv app that I want to build. So we talked about different functionality and features and it seems pretty intuitive to me as far as being able to access things like the camera or the GPS where you're basically reading information in. I’m a little curious as far as – more with the camera and the microphone – can you actually save and access files or information off of those? So for example, if somebody wanted to record something with an Ionic app, can they actually access the microphone and save an audio file? MIKE: Yeah, there’s plugins that access the camera and the microphone, and then there’s another plugin to handle writing to the native file system so all the things that you can – that native iOS developer actually has access to you can do with Cordova and just JavaScript. JOHN: And of course the most important thing you can plug in to is another flashlight app that we can create, right? [Laughter] Sorry, I was just going through the list of things that you can tap into and I was like, “Flashlight, cool! I can make a little flashlight app.” [Chuckles] It’s the super flashlight. CHUCK: Yup. So I am wondering then – and I get to ask this all the time – is there an advantage to going with native app, Swift or Objective-C or – what is it called – Dalvik Java for Android. Is there an advantage to going with those versus going with Ionic? Because the tradeoff that I see is that if I build it in Ionic, then it works in both places. And we’ve explained the performance story and things like that and so it seems like there really isn’t a real downside to using Ionic unless for some reason you just want that native experience. JOHN: Chuck, if you don’t mind, can we ask this another way and tell us what it’s not ideal for? Are there any kind of apps you wouldn’t use Ionic to build an app with? CHUCK: There you go. MIKE: You wouldn’t really want to build super 3D graphic intensive app using web technologies. These API’s available to the native layers that are super optimized to do that. If you want to create something like a photoshop equivalent on a device using web technologies, that’s also going to be hard. Anything that’s going to be super graphic intensive maybe should start looking into doing it native. JOHN: What about talking to device scanners and other external third party devices and things. MIKE: So that was actually not that bad of a story. So things such as Arduino or any Bluetooth connected device, there’s plugins for Bluetooth serial and then there are specific Arduino plugins that you can work with. Any kind of device that is set up to be a connected device so to speak, yeah, you can interact with those. JOHN: Cool, so even like sleds or things that attach to iPhones or iPads for example, you can connect to those? MIKE: Right, if there’s an API for it, it may just come down to, “Okay, well now I just got to write a simple plugin to interact with this API.” CHUCK: Right, so if it’s customized that there isn’t already a plugin for but it has an API then you can write your own plugin and hook it into your own Cordova or ngCordova and then hook it into Ionic. MIKE: Correct. WARD: What’s the local data storage story? Are you a mini app who want to keep a certain amount of data storage locally and have ready access to it rather than having to go over the wire? I’m sure there’s something for it but I don’t know what it is. Tell us about it. MATT: So local storage is actually – since it’s a web view, we do have access to the actual local storage file system. We have web SQL on a device and indexedDB on devices that support it. And then there’s some good libraries out there that will actually differentiate between each version. If this device doesn’t support this fall back to this, and if they don’t support at if the new stuff, just go back to local storage. CHUCK: Does it work the same way for hardware or features in the phone that exists only on one platform and not the other? One that I’m thinking of is touch ID on iOS. In fact, not all iOS devices even have touch ID. MATT: Right, so if the APIs actually don’t exist or if you have something for touch ID on an iPhone 4s, it’ll actually just admit a fail error. So a great example would be the iOS app store; you can buy apps just using touch ID. If it doesn’t detect that as a touch ID, it’ll fail out and then you can handle that in an alternative way. JOE: Now, the classic complaint has always been about the fidelity of the interactions and I know that that’s constantly gotten better but even – was that Facebook that was talking about the fact that we had to go back to native versus – web view is entirely different than just a mobile app, but still. I know the vast of classic complaints is that a web view on a phone just doesn’t have the same fidelity as you can get out of a native app. MATT: Yeah, that may have been a case – that article in particular was released probably 2012/2011 –. JOHN: Which is like 20 years ago at this point. MATT: Right. [Laughter] But that also means that they were developing in 2010 which, compared to the devices that we had in 2010 to devices that we have now, it’s a night and day difference. The devices are just getting so – to the point where you could run desktop grade OS on a mobile device and still get the same experience, experience that you would on desktop. So I think that line of saying ‘well devices aren’t really capable of doing this and the quality isn’t there’ – that line’s kind of disappearing as time goes on. CHUCK: Well, and it’s not just the quality of the devices. I know that Apple, in several of their events, have come out and actually been talking about the two and three X performance increases that they’ve gotten out of JavaScriptCore. And so it’s not just performance of the device and it’s not just that it has more RAM or a faster processor, it’s that the JavaScript engine in WebKit has gotten better. JOE: Oh yes, it’s gotten so much better. JavaScriptCore for iOS, V8 for Chrome and newer versions of Android. It’s just gotten so much better than what it was even two years ago. MATT: Now, I think it was at ReactConf – I’m trying to remember exactly which is just a year ago. So what I was talking about – I’m trying to remember exactly what they were talking about. They’re talking specifically about things like acceleration for example, and it was a native device that somebody grabs and slides the slider up or down, the ability for the native device – for a native app to track that acceleration correctly and give an appropriate responsive type, experience was a lot – they claimed – a lot better. Are you seeing that same thing or is that – it was pretty fine type things like that that they were talking about. MIKE: At that point, if we’re getting to that fine detail where if I throw my phone up and down I want to be able to track all that interaction. There’s definitely a line where it says, “Okay, that really isn’t too important”. I think Cordova plugins has something around 400-500 operations per second. And if you need to get geolocation or get accelerations more than that and get much more detailed than that, what are you actually doing for an app? It seems over the top. CHUCK: So unless you're doing something heavily specialized that needs that [crosstalk]. MIKE: Right. There’s a certain type of specialization for that information. No, not everyone’s going to write an app to do that. At that point, if you need that kind of specialization and you want it to be that hyper focused, you can worked on a plugin that’s dedicated to that kind of stuff. JOE: I think one of the things that a lot of companies go through is figuring out, “Do we want to invest in Ionic where we can reap the benefits that basically builds once we run on both Android and iOS, or do we want to go down the road just making a native for each? One of the things I hear a lot about, too, is the fear of the unknown. If I build an Ionic, what happens if it turns out it doesn’t perform as well? Have I lost months building my app and now I’ve got to go back and invest in, too, anyway versus if I went ahead and built a native from scratch and basically have two completely different teams build the same app and it come out the other side. I bet you guys have had these conversation of people before; I’m curious what you tell them. MIKE: That is a really good question. MATT: How a tackle is for a business perspective really quick is that –. [Crosstalk] JOE: Because it’s not about the technology at all; it’s –. [Crosstalk] JOHN: It’s a business decision. MATT: Exactly and so let’s say you did; you went down that path, you chose Ionic and maybe it didn’t work for you. Well for one, at least you had a smaller team of developers working on that and two full native teams. And the other thing is, too, as you're working on this and as you're making your Ionic app, I think you're learning a lot more business stuff about your app than anything else. So you might know, “Oh, the designer doesn’t like the way this looks or rechange this. We found out we didn’t even want this feature.” There’s a lot of learning outside of the programming that’s going to be happening during the same process that will definitely transfer over if you wanted to switch to native. CHUCK: The other thing that I see is that most of the companies that are looking at building a mobile app and are looking at these different technologies, a lot of times they have some other app; so it’s a web app or a desktop app. A lot of times there’s some backend service that has to talk to it. And so by getting in and building the Ionic app, most of the time that’ll work fine for them. And if it doesn’t, they still have something out there in the market that people can pick up and then when they upgrade the next time, then they get a native app. So it’s not a total loss. The other thing is is that if you have web developers already, then the wrap up speed for them is much quicker and so you have a prototype and that – I think this is where Matt was going – is that you have a prototype, you’ve learned all these lessons and then you can put it in to your other app. JOE: On that note, I want to back up and talk a little bit about one of the other questions that came up which was ‘when should I go native; when should I go hybrid?” And it think the answer that a lot of people don’t talk about is it really depends on your developers and the team that you have or you, personally. I’m a web developer; I’m going to start building an Ionic. I don’t know anything about native and our native developers are going to want to stir. Well, that’s all I know about native, but you know what I mean. If I’m a native developer, I’m going to go native and so a lot of it, too, is due to just personal preference and nothing other than that. WARD: I’ll throw one other thing in there. We’ve talked a lot about developer skills which is clearly where you are there. It’s like, “What skills do my developers have?” But not only are you spreading – if you go native, you’re spreading developers’ skills over two entirely different platforms wearing two different sets of skills. You're also spreading the business knowledge. The people who know what’s going on now have to pay attention to two platforms, to two development teams, try and make both of them come in and deliver the value. In some respect, the business knowledge is a scarcer resource than a developer knowledge. So focusing all of your forces may have both economic advantage and practical advantage. JOHN: I found the best way to – if a developer’s out there trying to pitch these to leaders, they found the best way to make an impact with this is to build up a concept. Take a week, build a map with it and show them what can be done, and highlight the key business cases that you're trying to accomplish with the Ionic versus the native app because I think the thing that’s attractive is reusing the skills that I have and speed and efficiency that I get out of it. So that’s attractive to business leaders being able to say, “Hey, I can do some weeks versus months, too.” [Crosstalk] It’s a lot that have been going on than just talking. JOE: Yeah, and if you just talk about all these things, people just hear you talking. They want to see results. So showing them an example, like you mentioned – was it Sworkit; is that how you pronounce it? MIKE: Yeah, Sworkit. JOE: Yeah Sworkit [chuckles]. Sounds funny. MIKE: Sworkit Workout – that was the name. JOE: Oh, okay. So you go and show them an app like that and say, “Hey can you tell me – show me two apps; can you tell me which one is the Ionic versus the native?” And if they can’t tell then that’s a good thing to show. CHUCK: The other thing is, and I think we’ve said this in a couple of different ways, is that if you have a mobile team and a web team, and the mobile guys run into a problem, then they go, “Oh, I have a problem. I don’t understand how to do this with Angular.” They go ask the web team and that works out which leads me to the next question I have and that is that I hear people talk about Ionic like, “Oh, well Ionic is Angular, and so since we’re using Angular on our web app and we’re using Angular on our mobile app, then we could share code!” And I always wonder how realistic that is. JOHN: Did they say it with that tone, too, Charles? CHUCK: Okay, so I was being a little bit dramatic [laughter] but it’s like they talk about this lightbulb going on and I’ve never heard of it from anyone who actually built an Ionic app and uses Angular on their web app. So can you share code? How common is that? MATT: Yeah, you can definitely share a code. There’s parts where – certain views and controllers that may be specific to a mobile environment versus a responsive web app. Those may be separated because those are very different environments and UI [inaudible]. But things like services or anything that you’re interacting with to get data, those can all be reuse without much effort. JOHN: Yeah, I found services and directives were pretty [inaudible] in the output but controllers and views absolutely not because I was targeting two completely different platforms. MATT: Right. CHUCK: Yup. JOHN: While they could be done, it wasn’t conceivable for me to say, “Hey, users, here’s a data grade in our desktop; I’m going to show this on the Ionic phone for you.” It just didn’t work out that way and even services, to a certain degree – if I was pulling down more data for a desktop app, and maybe on the phone I’m only pulling down four fields. Maybe they don’t want to call the same service; you may want to call a lightweight version of that. [Crosstalk] So it depends. CHUCK: The other thing about the services that I ran into was that I wanted to cache some of the information on the device. In the web, the service pulls the data and maybe caches it in the web but it’s different when I’m saving it to a SQLite service or ng plugin. WARD: That could lead you to factoring your application in a way where the interface is consistent but you have different implementations for different platforms. CHUCK: Right, but the concerns change just a little but rom the other. WARD: Now, I know that most of us are building business oriented apps – beta E or beta – something like that. So if I go to the boss and show him something about fitness, work – whatever it is – they might give me a hairy eyeball [laughter]. Is there some –. CHUCK: I love that term. [Laughter] WARD: That’s a technical term. Do you have some case stories that you can tell us about where there was a clear business case for an Ionic application and it was mission accomplish? MIKE: So clear cases where a larger business driven decision –. WARD: I mean we’re doing something, “Oh, I built it; we have all these inventory and then need people running around with mobile devices and so we built this [inaudible] great Ionic app that helps them do the stock –,” I’m making this up but I’m a sales person having the field and I pull up my customer information and I made the set. What is it that – this is garden variety stuff for a business application developer – what kinds of apps of that nature have proven to be good mobile apps and good Ionic mobile apps? MIKE: You just gave a really great example of it was having a sales team and needing them to have access to a customer data base. Myself – I was – before I was working with Ionic I was pretty much the only web developer and we had cases where our sales team needed to go out to their clients. They're dealing with analytical instruments. Now, will they need to be able to grab information; if there’s something broken, they need to be able to take pictures to send it back to the technical team. There were cases where, “Alright, well not all the sales people have iPhones and some of them just have Android. Don’t know iOS development and I don’t know Android development. I’m just going to use the same technology that I know; I’m going to use webtech and I just chose to use Ionic in Cordova.” We’re seeing other industries that are betting on it is financial industries where they need to be able to send quick updates through stock information, investments, and it really doesn’t make sense where it’s just picking up data when they already have, in Angular version of it, on the website. It’s super simple for them to just rework that for mobile. JOHN: Can I switch gears for a minute though and just say if I’m a developer to this and I know some Angular like most of our listeners probably do, and I want to get started in Ionic and they’ve heard of it but they want to get up and running. What’s the easy path to get on this highway? MIKE: Easy path to get up and running? We do have a lot of documentation that’s source generated. We have some great quick starters out there by us and some member of our community. Like Lukas said, there’s a head videos that he’s recording currently. There’s so much information out there. We put out videos, quick start how do I install everything to get up and running? JOE: And I’d like to throw at Ionic creators in answer to that, too. Like if you're just getting started and you want to know how does this thing work, you can jump in there and drag stuff around the screen and export actual Ionic code. So after you get your local machine set up to actually use that code, this is a super easy way to get started just using everything without really knowing how Ionic works yet, but getting something where you can look at it and be like, “Oh, I tried that button on the screen and this is the code that was generated.” That’s how it works. CHUCK: Yeah, but I like doing things the hard way. [Laughter] So one other question I have related to Ionic and what it’s capable of is when we say mobile, I think we’ve all been thinking of the phone that we keep on our pocket but I have a couple of other mobile devices; I have an iPad mini, I use to have a full size iPad. So how do you deal with those? Is it just responsive design or is there something else to it? MIKE: So with that it’s a lot of responsive design but if there’s anything else that people need to target specific for this version of Android on this device, we start setting some JavaScript classes on the HTML. So if you needed to target Android 4.3 and then get the actual device type and target for Nexus, the available classes are there for you so you can start using your media queries for that. CHUCK: Okay. So John put in to the chat earlier – do you want to ask your question John? JOHN: Yeah, I was kind of giving them a heads up here. I’m looking at some other things. They're not the only game in town obviously when it comes to building Cordova apps. There’s lots of other ways. In fact, [inaudible] has some million dollar tool that you can use to build apps and IBM’s got one. A lot of companies have something that will build mobile apps for you. What I [inaudible] about Ionic is it’s not like I pay you a million dollars and I run; it’s down the [inaudible] and I go. So that’s what I like about it but there’s other stuff out there, too, that’s been coming out lately. For example, Microsoft’s got this thing called TACO. It’s tool’s for Apache Cordova. It’s like a CLI for getting started with Cordova. And I’m a little curious about what you guys know about this and if there’s any overlap with Ionic. MATT: There’s a bunch of overlap with that. We’ve talked with the TACO team, the tools for Apache and Visual Studios essentially, about what their goals are with that and how can we work with that and integrate it into Ionic. They're doing a lot of it for trying to get developers who are more comfortable on the Windows platform, setting them up and getting the Java SDK and setting up everything that comes up with that. And what you mentioned, this resource builder, resource dependency and dependency part to that that they handle, and the remote builds that you also mentioned, too. It’s not essentially that you submit your app and you get back an IPA, and iPhone native binary for that or an Android native binary; there’s still some work into it. JOHN: It seems to me like it’s a command line platform to get you started but it’s not a replacement for Ionic, at least that’s how I’m seeing it. Seems like it’s more of a ‘get you going’ and then you can use a tool like Ionic on top of it I imagined, to build your app. [Crosstalk] What attracted me to this is that you can do remote builds. Like if you don’t have a Mac and you're on Windows, it looks like you can actually build an iOS even from Windows. MATT: Well I want to throw it in there that today, we did just launch Ionic Package which lets you do that from the Ionic CLI. JOHN: So Ionic Package will allow you to build on Windows or on a Mac? MATT: Yup. MIKE: Correct. JOHN: Sweet! Mike. Yeah, the remote builds for the TACO tools, it’s not really a – they have a remote server set up where it’s handling all the builds. You still need a Mac, you still need to own it yourself but you can connect to that Mac and build from Windows device if you don’t [inaudible]. JOHN: I think it makes a bridge. MIKE: Right. JOHN: That seems to be where all these tools are heading towards. Once you're building – building the app for me has always been the easy part. The hard part for me has been making sure you’ve got the map to build it, you’ve got the certificates installed, the channel to develop – published into developer program. You make sure you’ve got all the hardware and the things lined up. And basically, when you got Cordova going there’s a lot of downloads to get things running in there, too. So it just seems like there’s a lot you have to do to have the ecosystem ready before you can actually build the app. And that’s what’s been frustrating to me when I started Ionic two years ago but it seems like that – to me, that’s the area that’s gotten a lot better over the last two years so it sounds like it has now got to way to remote build Mac, too so that’s great. MIKE: Yeah, now we don’t really need to go out a five gig download for XCode and another six gig download for the Android SDK and then we have to download Java. And then we have to make sure all the paths are set that we don’t have to worry about that anymore. We just write our web code and then package that, Matt mentioned, you just send it out there. You can check the status on the build then when it’s ready it’ll let you know and you can just download it. WARD: I’m a little behind the curve on some of these too because some of the things I wasn’t sure about is the deployment story. Again, I keep coming from a business perspective and people don’t – businesses don’t exactly want to go with the world of time where we rely on a store to pass judgement on a critical update. So what’s the deployment story for the apps that I build with Ionic. MIKE: So deployment’s actually pretty good. With Android, you can either deploy it. Once you have the APK where you can actually deploy it through the web and just – here’s the link to it. Download it. iOS has a version where you and bypass the app store and distribute it but it’s for more internal business-related apps. Other places where you can start working with deployment is – we have a service called Ionic Deploy where once the app’s installed on the phone, there’s a service that you can sign up for and push your changes too, so that way anytime there’s a change you can notify the user, “Hey, there’s a change,” and it’ll actually go and download an update of the app. So if I have –. CHUCK: Download the app from the app store, correct? MIKE: No, actually through the app itself. CHUCK: Oh, wow. MIKE: So it’ll go – [inaudible] it’s just web code, now we can just update the HTML, CSS and JavaScript. That’s one of the loopholes –. [Crosstalk] JOHN: Is that what it is; it is a background [inaudible] –. WARD: I was going to say, “Apple, how did Apple let that one get by?” [Laughter] MATT: Apple considers HTML, CSS and JavaScript to merely be assets, like an image, so they come out and said, “Look, we’re going to let you update assets,” and they haven’t slapped anybody around yet. WARD: Now you want to know why you sell [laughter] for the web technology to business? That’s it because I can tell you – nobody wants to sit around when they’ve got a broken app and wait for some nudnik on the Apple store to decide that the critical update has to wait because it doesn’t pass some screen that they have. CHUCK: Oh no. MIKE: It’s like a ten day waiting period, now you just have to push the update; anytime the user opens the app, they get the update. WARD: That’s a critical fail for business and I would think, John, where you work. That would factor heavily to your thinking. JOHN: One would think so. So let’s switch gears again. This is interesting and we have been talking about Ionic in a sense of Angular 1 for most of us – at least it’s what I’ve been assuming. But we all know Angular 2 is coming very soon to a theater near you and when that does, I assume you can [inaudible] work with the Angular team and have a plan? How does Angular 2 tie with Ionic and what does it mean to you, guys? MIKE: So, we’ve been working with the Angular team. Our lead developer, Adam, he has meetings with Mishka, Brad and Igor. Igor’s actually come out to our office and gone up to speed with us and we’ve bounced ideas and talked with him. Now, we’re very sold on the idea of Angular 2 and a lot of the good parts about Ionic will still be there in Angular 2. A lot of the views and templates – those actually aren’t really changing but your component control is and everything. Those will change but we find that we were actually deleting a lot more code than adding more code. So we’re sold on the idea that Angular 2 is going to be really popular. And the benefit of being higher up on the abstract chain is that we can make the process from going from Angular 1 to Angular 2 with Ionic a lot easier. JOHN: What [inaudible] is that going to look like? MATT: What’s it going to look like? JOHN: I’ve got an Angular 1 app now with Ionic and I want to go to Angular 2. Is that going to be painful or is that going to start from scratch or is that going to be press-a-button? MIKE: No, it’s not going to be that painful. Actually, I’ve been going through a lot of our starter apps and a lot of our starter apps and a lot of our apps that we write internally and just updating them to use Ionic 2. If you're following best practices, I hear some guy out there. He wrote some popular style guide. So you may have to follow those. You can follow those style guides and have something that’s going to upgrade pretty well. JOHN: Cool. I’m looking forward to it. CHUCK: I think the question that I have with all of this is that most Ionic 1 apps that I’m seeing here written in ES5 and with the change to Angular 2 they are, at least, strongly recommending that you learn and write in TypeScript. So is that transition going to be painful as well or is that going to be pretty straightforward? MIKE: Learning TypeScript? CHUCK: No. transitioning your app from ES5 to TypeScript. MIKE: So with Ionic v2 – we’re writing our Ionic V2 core; we’re writing it in TypeScript but we’re shifting with ES5, ES6 and TypeScript builds of it. So once you’ve actually – whatever you want to write it with, you can just pick and choose whatever you want. Something that I actually really like is that our build set so far, if you write some of your apps in ES6 and then some of it in TypeScript, it’ll handle both of those file types so you can mix and mash up whatever you want. And if you want to adopt TypeScript and get all of that – al their features, you can do that piece by piece. CHUCK: And that’s all automatic and built-in when you tell it to Ionic build iOS or whatever. MIKE: Right. CHUCK: That’s slick. MIKE: So it’s a good analogy that we had. It’s like you bought the flashlight and now you have the batteries; you have everything right out of the box to setup for you. JOHN: Do you expect that all the ngCordova directives that you had – all those things will pour over for Angular 2 or you have noted a copy of those. How does that going to work? MATT: So they're actually a little bit more like piqued in to the system now if I understand it correctly, Mike. MIKE: Yeah, a lot of the core plugins that shipped with Cordova, and a few community plugins as well, have actually been brought into Ionic itself. So Matt mentioned earlier that we’d be carrying – the framework itself will start to carry the weight and not a side project that other people would have to download. We’ll just give you everything that you need. And you want to interface with the camera and you already have the camera plugin added, now you just import the camera class and you can start interacting with it that way. JOHN: Cool. So these will actually be – at least most of these will be part of Ionic moving forward then. MIKE: Right, so once you’ve npm install Ionic, you’ll have all the plugins – all the core plugins at least – available to you. JOHN: Is it just for Angular 2 with Ionic or is that also for Angular 1 moving forward? MIKE: That would be with Angular 2 with Ionic 2. WARD: I’m kind of curious – are you finding that you're writing fewer – you need fewer directives when you're writing for Angular 2 than you did have before? MIKE: Well, are we talking directives or are we talking components? [Laughter] WARD: I meant directives. The way in which you interact with the views and stuff; it may be more – do it more in native Angular style rather than having to write your directives and everything. MIKE: Right. Yeah Ward, it’s starting to be a lot less directives and we’re just – we have allowed the core plugins or the core directives that we ship with Ionic 1 available in Ionic 2. That much shouldn’t change for developers. But are we writing less of them? Not really, but we’re just moving everything over to either components or just actual elements that are based on CSS. WARD: Yeah, that makes sense. JOHN: What about new features that come to devices like iOS 9 or 10 or whatever the heck we’re up to now just came out with the 3D Touch – Force Touch I think. Is that something that you can access through an Ionic app? How long does it take, I’m curious, for that kind of thing to show up? MIKE: So that kind of stuff – once it’s available on the web, you can just work with it right away. So once you want to start working with Force Touch, I think there’s a prefix force. I can’t remember what it’s called, what’s the actual JavaScript implementation of it is called, but since it’s already on the device with the web view, yeah, you can start working with it right away and we’re working them. I’m trying to work some of our components and get them to use the 3D Touch. CHUCK: The other question that I have is IDE support. So it seems like you can build this with WebStorm or something; you can build your app with WebStorm but as a hook into the Ionic Build and Ionic Emulate and things like that to actually fire that up and make it run somewhere else or do you have to do that from the command line? MIKE: So there’s two different stories about that. WebStorm has really great support for Ionic Cordova. They have plugins that are already shipped to indirect with our command line features through the IDE. And then we have another product called Ionic Lab which Matt mentioned earlier – which is itself an Ionic app built on top of Electron. That essentially shifts with all the core features from our command line in a desktop GUI. So if you're not used to working with a command line and you want to just go ahead and emulate on iOS or send it to the device. MATT: I’d like to call this thing like GitHub for Mac for Ionic. It comes with all the features from – well most of the features from the CLI and lets you do that on GUI. CHUCK: Gotcha. MIKE: Yeah, so our app is built with Electron. It comes with all the functionality that you would want from the CLI but in a nice GUI interface. That way, you don’t have to handle that. JOHN: What was that app called? MIKE: It’s called Ionic Lab. CHUCK: It’s funny that you’ve built something like this. I’ve worked with a couple off developers that basically refuse to use a command line if they could avoid it at all cost. So things like Git, they would actually go download GUI interfaces for Git and it wasn’t because it was any more efficient or inefficient for them; it was just that they had to have a GUI for it. JOE: That was me five or six years ago, Chuck. [Chuckles] I was all GUI all the time and then I went kicking and screaming into the command line road. I don’t think that’s too rare. CHUCK: Yeah. I just find it fascinating that there’s enough to man for it. JOE: There’s still times I look at command line. I use it everyday and I overwrite GUIs now but there are still times I’m like – I think GUI would help with this. It’s not just the GUI; I think it’s really what I’m looking for is tooling. Bringing it back, I think that’s why I like Ionic; it feels to me like – there’s a game that my grandmother taught me called Halta Malta. You take a card deck – 52 cards – and you throw it up in the air and the cards go everywhere and the game is to pick them all up. The big mess that I make is called Halta Malta and that’s how Ionic and Cordova felt like to me before this. It’s like everything’s all over the place; we have to go pick them up and put them in the right order. I feel like things have gotten a lot better between Ionic and the tooling and different CLI’s we have; now it feels like this is a much more approachable way to build a mobile app if you don’t want to go native. MIKE: Yeah, there’s all these technology out there. Let’s just actually have agreed upon – here are the tools that you need and you can just get building; I’m not having to go dig through Stack Overflow posts for three days to find an answer to why this didn’t build. I actually have something that’s already there. CHUCK: The other thing is is not just technical people that don’t want to use the command line but I’ve also worked for managers that were non-technical. And even just so that they can slick something and have it build and/or emulate, that’s really helpful for them because then they can see it right away and they can interact with it without having to get on the command line and know all of the nitty gritty details of how to get to the right directory so that they can run the right command. MIKE: Right. To jump off at that, we’ve also have a product called Ionic View. It’s free on the app store. If you don’t have any of the STKs installed or, as you mentioned, if you have product managers or designers who aren’t really developers, they have an app installed, you can give a link, a QR code or just a little serial code that punches in and you can view and work with the app. CHUCK: Yup. MATT: We have that built-in tool at Ionic Creator now, too, where you can actually text the link to your project, like to your boss, and it’ll load it up in their browser in their phone to play with it. CHUCK: That’s a little bit dangerous though I found with mock ups or anything where it’s a functional prototype that isn’t quite built out in that they get it and they're like, “Oh, you're done!” [Laughter] JOHN: Oh yeah, you're done. Thank you very much. CHUCK: Trying to explain to a client, “Well, I tapped it and it does what it’s supposed to do.” “Yeah, but it doesn’t work.” “Yeah, but I tapped it and it does what I’m supposed to do.” “Yeah, but it doesn’t work.” “I’m so confused.” So yeah. WARD: Is there any more magical phrase than ‘ship it’? CHUCK: Yeah. WARD: That just says it all for me. And with that we can say, “We’ve got a podcast here; let’s ship it.” CHUCK: Alright, let’s ship it. Before we do, do you guys just want to talk briefly about where people can get more information about Ionic or about you guys? MIKE: Yeah, if they want to find out some more information on Ionic, definitely check out this site – Ionicframework.com. We have a public Ionic Slack – Ionicworldwide.slack.com that they can join lots of activity in there. We have a public forum that they can join as well. The best way to reach out to us – always tweet at us. We love tweets. MATT: Yeah, you can find Creator at usecreator.com and then me, personally, you can hit me up at mattkremer.com if you ever need anything from me. CHUCK: Alright, let’s go ahead and do some picks. Joe, do you have some picks for us. JOE: I do. I’m full of picks. My picks overflow of –. JOHN: Joe, you have some one of those moods today, man. [Laughter] JOE: And that’s different from any other time, how? Alright, so first of I want to pick this battery I just bought. I’m going to be doing a lot of travelling internationally here soon. And I have an early 2013 MacBook Pro which means that with the screen on the lowest – it is a 15 inch, so with the screen on the lowest setting, I get about four and a half to five hours of battery life before my computer dies – my laptop dies, which is great but on an international ten to thirteen hour flight, it just doesn’t cut it. And I really wanted to get something bigger, I did some initial research on why I let go and found these big bricks that were gigantic and they would act as an external battery for your laptop. I wanted something light for my phone, those little batteries you now get at conferences practically for free. I wanted something like that but I wanted it for my laptop. I looked around and ii found it didn’t quite work because it would only work with the newer MacBooks that have the new USB connector because MacBook changes its connectors six times a year. So I found this battery called RAVPower and I’ll put a link to it in the show notes. It’s a hundred dollars and then for another eight dollars, there’s an adaptor cord that will go from it to the same connection type that my 2013 MacBook Pro uses which is the MagSafe 2 connector type. The MagSafe 1 and the MagSafe 2 are similar – their little magnet connectors. And I just tested it out. Today, it was my computer – my laptop was at 6% battery. The battery itself, this external battery, was 100% running out the entire battery out of 80%. So it went to 86% or 87%. So not a full charge out of it but the battery itself is only a couple of pounds, and it’s relatively flat so I could fit it pretty well in a backpack. So for [inaudible] on a phone, it would probably charge a phone eight or ten times or something like that. JOHN: Which model did you get, Joe? JOE: I don’t know but it says here on the battery you’d have to – the extreme serious model – this one says RPV 14. It’s 23,000 mA. JOHN: I find that I can get from San Francisco to London for a lot less money and get a great workout if I bring some jumper cables on a car battery. [Laughter] JOE: Good luck with that. You enjoy that [inaudible]. So I really like this. I wish that it gave me more than even just a full charge. There are some batteries – I found a really nice battery if you have a newer MacBook that works with newer MacBook’s you just have to buy the USB – AV USB-C is the new MacBook adapter and it’s like 26,000 for only 80 bucks. But this one, it is on Amazon, Prime shipping pus the adapter, 26,000 mA for a hundred bucks, still pretty decent. So that’s my first pick is this RAVPower battery. And then the other pick that I want to pick is this TV show on Netflix I just discovered called iZombie which is about a girl who’s a medical resident and she became a Zombie but she could control it and now she helps the police solve crimes by eating people’s brains and then discovering the murderers. Awesome premise. [Laughter] JOHN: What’s so awesome about that? WARD: I also got into that, too, Joe. I don’t know how. JOE: Did you really? WARD: I did and it was binge watching and it was terrible. Terrible! [Laughter] It just happened. JOE: That’s awesome. JOHN: Oh. My. Gosh. My kids saw that commercial and they were freaked out. [Laughter] JOE: It’s really quite [inaudible]; I’ve only seen a couple of episodes so far but I really liked it. So that’s my second final pick. JOHN: And for somebody who likes to eat brains, and I’m one of those people, it’s really – I’m really interested in the culinary aspects of it. JOE: Yeah, it’s one funny thing about it. She actually talks about the culinary aspects of eating brains. JOHN: Our guests are never coming back on this show. [Laughter] JOE: I met my wife working as an actor at a haunted house, scaring the crap out of each other. JOHN: Really? JOE: Yeah. CHUCK: That’s funny. I actually have a RAVPower. It’s a much older model. It’s like – brushed the steel and it still works great and it charges – it’ll charge my laptop for about a day on a full charge and it’ll change my phone for two or three days just plugged in to it. So yeah, plus one on that pick. Ward, what are your picks? WARD: I don’t have my own picks. I just piggy back on other people’s picks. CHUCK: Okay. Did we lose him or was that it? [Crosstalk] JOE: I think that was it. [Laughter] WARD: That was it! I’m giving space for other people and then I’ll jump in and –. JOHN: He dropped the mic and he walked out of the building. CHUCK: Alright John, go ahead and give them something to talk about. JOHN: Wow. With that, I’m going to tell you here first – pre-announcing a conference that is coming in April of 2015 and I’m committing definitely to myself and I’m going to force Ward Bell to be there. This is going to be Anglebrackets. It’s going to be in my nick of the woods, at the Walk Disney World’s Swan Hotel. And I think it’s the week of April 18^th. It’s going to be a great show – Dan Wahlin, a bunch of other great folks would be there. Usually [inaudible] will be coming with us, too. It should be a good time, a good show and it’s a good time of the year to get some updates on how Angular had evolved. So that’s my pick. CHUCK: Alright. Lukas, what are your picks? LUKAS: So my pick this week is Kelly Starett from MobilityWod. The reason why I picked that is because Chuck just got a standing desk and he’s trying to level up. And I have a standing desk as well and it took some time to acclimate to it and Kelly’s really big thing is actually mobility. He’s fixing chemical issues through basic proper mechanics and he has a few really few videos that I’ll post in the show notes about how to actually fix your posture and actually stand at a desk. WARD: Oh, I want that because I stand at my desk and I notice my right foot is getting bigger than my left foot. [Laughter] LUKAS: Are you on a slant maybe? [Laughter] WARD: I’m really worried about it but it’s like I can’t fit it in a show anymore. I got to buy a different size – different pair of shoes. JOHN: This is one of the most bizarre episodes we have ever done. JOE: He’s got a six degree grade in his office. CHUCK: Yeah, he is standing on a slant and [inaudible] rolls downhill. [Laughter] Alright, I got a couple of picks here. The first pick I have, I have set up a standing desk. I did the Lifehacker standing desk, the Ikea one. So I bought a whole bunch of stuff from Ikea and then put it together in a way that it wasn’t meant to be put together. It’s working out pretty well. I’ve decided that I’m going to stand through all the podcasts, all of my Mastermind calls and any other calls that I do. So I’ve actually moved my whole podcasting rig over to my standing desk. I’ll have to take a picture and post it somewhere. I did a Periscope with it this morning before I moved the mixer over and showed people what I was doing. People seemed interested in that so I’ll put a link to that in the show notes as well. And then the only other pick I have – I have a bunch of house plants in my office. It just adds some green and it makes it a little nicer in here. I had a problem with remembering to water them frequently enough or I’d water them too much and then I’d have issues there. So I got these little lights called Thirsty Lights. You can get them at Amazon. They're a couple of bucks a piece and they're really handy for knowing when to water. They start blinking and then I put water in the pots. Those are my picks. Matt, what are your picks? MATT: I got two quick picks. I have a short attention span so something that just launched this morning – it caught my eye a little bit. It’s an Ionic app called Beardr, like the word ‘beard’ and the letter ‘r’ which I think is a really well done Ionic app. It’s beautiful and it’s literally just – people uploading pictures of their beards and then it’s like a face off where you vote who’s got the best beard. So that’s number one. Number two is a new social platform that I just discovered. I know it’s been out for a couple of months, but blab.im which lets you host online video radio shows that I’ve been using and I think it’s really cool. CHUCK: Yeah, it’s like Periscope except you can have multiple people on the same call and you can pull people who are watching it in, right? MATT: Yeah, I’ve been loving it. I’ve been running an actual “talk show” on it and it’s been a lot of fun. CHUCK: Awesome. I really like the idea of that ‘hot or not’ for beards. [Laughter] MATT: It’s great. CHUCK: Mike, what are your picks? MIKE: So, my pick is a social app called Untapped. It’s essentially for people who like to drink bear and as you check in the kind of bears that you drink, it’ll start suggesting different kind of beers based on what that one was and what past beer have you had before and introduce you to new drinks and new beers that you may not necessarily think that’s something you would like. CHUCK: Cool. Alright, well we’ll go ahead and wrap up the show. I encourage everybody to go check out Ionic Framework. We’ll have all the links to that – Mike and Matt and everyone else’s – shared in the show notes and we’ll wrap things up and we’ll catch you all next week.[Hosting and bandwidth provided by The Blue Box Group. Check them out at bluebox.net]**[Bandwidth for this segment is provided by Cache Fly, the world’s fastest CDN. Deliver your content fast with Cache Fly. Visit cachefly.com to learn more.]**[Do you wanna have conversations with the Adventures in Angular crew and their guests? Do you want to support the show? Now you can. Go to adventuresinangular.com/forum and sign up today!]

Latest Shows: