!= Going Mobile with Ionic 2 - Sessions by Pusher

Going Mobile with Ionic 2

Alex Muramoto speaking at JS Monthly London in September, 2016
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

Hybrid mobile app development is awesome, but has historically been a difficult way to build apps that truly look, feel, and perform like native. In this talk, we'll look at Ionic 2, the newest version of one of the most popular hybrid frameworks. It’s built on Angular 2, performs like native, integrates native device APIs, and provides a large set of customizable, natively-styled UI components out of the box. It's also 100% open source!


All right. Let's talk about Angular and Ionic. So real quick, my name is Alex Muramoto. I'm a dev advocate at Ionic. This is my contact information. You can reach me anytime. If you have any questions about anything I talk about tonight, or any questions about Angular in general, as well, please do feel free to contact me. That's what they pay me for. This is my actual dog that is engaging in a time-tested American tradition of indulging in cheap, terrible bear. Hybrid app development, each web technologies that are running [are] wrapped by Apache Cordova. So you're building mobile applications with your standard HTML5, CSS, and JavaScript, and that's being rendered in a web view that's wrapped in a native executable. So hybrid, really awesome. Not like T-rex flying a jet kind of awesome, but pretty good. Again, for anyone who's kind of unfamiliar, just some of the larger advantages of hybrid app developer you get as a JavaScript developer, you get to reuse your existing web skills, extend into the web. This is particularly something of interest, I think, to JavaScript developers, because again you get to go mobile, as well as of interest to companies. Because anyone who has ever tried to hire an iOS or an Android developer before, it can be pretty difficult and pretty expensive, and many companies already have an existing web team in-house that they can actually repurpose in order to build their mobile applications. Another really great thing, JavaScript can be loaded dynamically. So you get access to hot-fixes, which allows you to push patches and to push even large changes to your mobile app's codebase. Bypassing app store review, that is absolutely 100% allowed under the iOS app store rules. You can do that. Mostly, platform agnostic, and the only reason why I say "mostly" is because... So I assume that most people here are web app developers. Yes? So you know the pain of the subtle CSS and JavaScript differences between some of the different browsers. But I'll talk a little bit more about that shortly. What I think are the largest advantages of doing hybrid development is that Java is terrible and Objective-C was clearly written by somebody from the moon. Has anyone here ever tried to do Objective-C development before? It's a little painful. But I'll admit. I've done some Java and some Objective-C development, and you get used to it. But luckily for us, as JavaScript developers, we don't have to worry about this, because hybrid has come a long way. Not when we have devices matured astronomically since the introduction of Apache Cordova way back in about 2008, when it kind of hit the scene. But the web views where our hybrid code is rendered have also come a long way. So that's really great, because it allows some of the historic shortcomings of hybrid apps to really be mitigated. Just improvements in performance, in processing speed, and a lot of new technologies like Just In Time Machine, code compiling, and the web views. I won't go into it too much, because we've got to cover a lot of ground tonight. But all those advancements do not change the fact that JavaScript for mobile is really quite hard, and there's a number of things going on here. So real quick, this is a real mobile web app, actually, for a major tech conference in America, down in Atlanta, Georgia. This was only from five years ago. Does anybody recognize the framework that's being used here? - [man 1] [inaudible]. - jQuery Mobile. Does anyone remember it fondly, jQuery Mobile? Probably not too much. So it's pretty amazing, just five years ago, even a major technology conference, this was really all we had if we didn't want to roll everything from scratch. Right? So JavaScript for mobile is, even now, really, quite hard. You have no built-in events that are optimized for touch, for those types of user interactions that you have on mobile. No native UI components. So that's something that native developers really have up on hybrid developers is, for example, on iOS you get UI Kit, which provides you many UI components that are prebuilt, buttons and menus, and etc.that are all optimized for performance and for touch. So like I said, no performance optimization. But a really big one that I think this particular screenshot from jQuery Mobile really points out is you don't have any style out of the box when it comes to UI development in hybrid applications. This is really important, because one of the first differentiating features of your application, the first thing that a user notices after initial performance is the actual styling of your app. It's the visual differentiation that makes your app and your app's experience stand out. So it's hard. Don't get me wrong. It's not like GeoCities website 1997 hard. Believe me. Fletch worked real hard to get this rank. Was GeoCities a big thing in the UK? - [man 2] [inaudible]. - Oh, so then we all share the pain. But he did pretty good. He outlasted the Internet Link Exchange there, so that's not too bad. So again, not quite this hard to get performance out of it, but... - [man 3] [inaudible]. - Oh, so literally, this is still available. You can find this. I got this screenshot like two months ago. So here's the thing, not terribly easy. So what do we do about it? Do we optimize our JavaScript for our apps from scratch, and continually reinvent the wheel? That's not really ideal. Right? Because what we want to worry about is not those low-level performance optimizations. We want to worry about the differentiating features of our mobile apps. So this is where frameworks come in. There are [untold] number of hybrid mobile frameworks that are available nowadays, NativeScript, Onsen UI, Sencha Touch. There's lots of options, and some of them use Cordova to render web technologies in a web view. Some of them now, like React Native or NativeScript, actually transpile your JavaScript into native code. So tonight, I'm going to talk a little bit about Ionic, which is where I work. So Ionic, it's a hybrid mobile framework built on AngularJS. So Ionic 1 was built on Angular 1. Ionic 2 is built on Angular 2. Is there anyone that's not familiar with Angular? Sweet. A lot of Angular users. Love it. So that's really great, because the framework gets to kind of stand on the shoulders of AngularJS and a lot of the optimizations that it brings to the table. Particularly in Angular 2, which was built from the ground up with a mobile use case in mind. So because Ionic 2 is built on Angular 2, it's written in TypeScript. Totally open source, free to use under the MIT license. You can use it for commercial use, whatever you like. The really important thing that I like to point out about Ionic is, 100%, it is built on web and browser standards. This is a really interesting feature of Ionic. Not only because, as web developers, we are able to use all of the technologies that we already know and love, our HTML5, our CSS, and our JavaScript. But also, because it makes the Ionic framework uniquely suited to not just build hybrid mobile applications. But also, to run on the mobile web and for what's coming next, things like Progressive Web Apps. Is anyone familiar with Progressive Web Apps? Google has been talking a lot about it recently. So for anyone who's interested, we actually just recently introduced some of the starter components for Progressive Web Apps into all of our starter projects that you generate using the CLI. So when you start a new Ionic project, there is a baseline service worker and manifest file already there for you. So that's pretty great, because an Ionic project, fundamentally, from the start is a Progressive Web App. You just need to add a little bit of configuration and a little bit of customization, in order to essentially turn your app into a Progressive Web App. So if you're interested in trying out and if you have "install -g ionic cordova", this just installs the Ionic CLI. The second command "ionic start, some app name, --v2", that will generate you a starter project. There's a number of templates that you can also use to start with. This will do a nice little side menu project for you. All right. So what does Ionic bring to the table? The main thing that a lot of developers know Ionic for, who have... Actually, has anyone heard of Ionic before, or is everybody new to it? A couple, few people? Ah, more than a couple, few people. Awesome. So this is kind of the first thing that a lot of developers learn about Ionic, is that it brings a whole library of UI components to the table. One way to think about Ionic and about hybrid frameworks in general, is they act as kind of the missing SDK for the web, when it comes to mobile. So this is just a few of the things that Ionic gives you out of the box for free. So side menus, pickers, action sheets, card layout. There's a whole grid structure that you can use to make nice layouts similar to the grid in Bootstrap. Toggle switches, etc. , etc. , etc. Again, all of this out of the box is optimized for you, for touch events, for all of the sorts of UI interactions that users are used to having on mobile. So text of tap, swipe, pinch, etc., and very easy to implement. Again, for anyone who's not familiar with Angular, all of these components are just implemented as standard Angular directives. So a lot of the components that I showed you here, for example, the range sliders, you just drop in by the ion range directive and a couple attributes on that, and you have it for free. Of course, we don't all want our apps to look like this. Right? We need a little bit of theming. So all of the styling in Ionic is built completely on plain CSS using the Sass preprocessor. So that allows you all the flexibility that you need in order to theme your application both at the component and the global level. So a really nice way to kind of enforce the styling that you want for your app. Really easy to override, like I said, at both the component and the global level. Variables-based and there's over 80 mix-ins already built into the framework to help you kind of do whatever you want to do. The other thing that we introduced recently is a project called "Ionic Native". Has anyone heard of ngCordova? So ngCordova was another project that was started by Ionic a number of years back that basically provided Angular wrappers for Cordova plugins. So Cordova, for anyone who's not familiar, Cordova plugins are JavaScript plugins that on top of... So the Cordova project in general is what wraps our web code and allows us to deploy it. But it also provides direct access to many hardware features on mobile devices in JavaScript. So we get access to things like the camera, the GPS, the accelerometer, and so on, Bluetooth, NFC, so on and so forth. Some of these things are not accessible without Cordova. You actually need to be able to talk directly to hardware APIs. Some of them over time have become available in HTML5. So Ionic Native is the successor to ngCordova. It allows us to access native APIs. It wraps our Cordova plugins in TypeScript. So this has a couple really nice consequences. Because they're TypeScript wrappers, we get nice static typing, which gives us some good code hinting and some really nice static code analysis for things like refactoring. It also adds Promises and Observables support to Cordova plugins. Which anyone who has ever had to work with a whole bunch of callbacks in Cordova plugins knows why this might be something that would save you a lot pain. I also want to point out that even though it's called "Ionic Native", totally platform agnostic. Any TypeScript project, any Angular project can use these plugins. So just because you're using Ionic Native doesn't mean you have to build an Ionic app. Again, very easy to implement. TypeScript, so it's using standard ES6 modules. You just import the Ionic Native plugin, and you make... So this is, for example, Geolocation calling "getCurrentLocation" to use with the GPS on the device. So that's a lot of what Ionic does. It's not an exhaustive list, and this is all great. But the really important thing is that it performs. Actually, I often get asked, "How does Ionic 2 compare to NativeScript, or compare to React Native, or compare to any of the other frameworks out there?" What I often tell people is, "To be honest, I don't know." The reason why is because the yardstick for us, that we measure the performance of Ionic against, isn't other JavaScript frameworks. It's native. So we go to great pains to make sure that everything that you get out of the framework looks, feels, and performs like native application components for mobile. So just some quick things. That means we do very minimal DOM manipulation, so none of the jQuery nonsense that gives us some lag in our app performance. Jank-free page transitions, hardware-accelerated animations. All of the UI animations that you get out of Ionic, 60 frames per second, so very much indistinguishable from native UI components. Again, everything optimized for touch events out of the box. Another really cool thing for anyone who's been paying attention to Angular 2, we're also now taking advantage of Ahead of Time compiling, which drastically speeds up the launch time for your mobile app, as well as things like page loads and transitions before caching happens. So that's awesome. We've found developers really love Ionic, and that's fantastic for us because we're a company that was built by developers. So the open source framework is the main thing that we work on. Over 25,000 stars on GitHub. It's the number one TypeScript project. It's actually more popular than Visual Studio Code, which is the IDE for TypeScript, which is pretty cool. Top 50 project overall, we have hundreds of contributors. Like I said, open source project. If you fancy yourself of the open source variety, please do get involved. Over 200,000 MPM installs per month. So Ionic 2, we literally today at AngularConnect announced that we came out of beta and we have released the first release candidate. So the full 2.0 release will happen very soon. It's just a matter of fit and finish, and polish at this point. So over 200,000 MPM installs per month. That's just on MPM, and already Ionic 2 accounts for greater than 25% of those installs. So Ionic 2 is actually already being used in production by some major applications. Some of the companies that use Ionic, just so that I can point out that this is totally production ready... Hybrid is ready to have real production applications. These are just some of the companies that are using Ionic, and it's become popular both for consumer-facing applications and for internal apps, all kinds of stuff. We feel like a big part of the reason for the popularity is that what we're doing as a company is our part to contribute to the original promise of hybrid app development, which is code once and run everywhere. You have one team, one codebase, and you can run on every platform. In particular, iOS and Android, and Windows Phone. Any Windows Phone developers out there? It's okay to admit it, if you are.but here's the thing. It's not just code once and run everywhere. Truly, code once and run everywhere natively. So this is a screenshot from a CLI tool that's available as part of the MPM package. It's called "Ionic Labs". It will show you what your Ionic app will look like side by side across the three major platforms. So all of the differences in styling that you see here, so things like how the icons are different in the tab bar, how the search bar looks different, the system fonts, etc. , you get all that absolutely for free. You have to do nothing for that cross-platform styling. Ionic handles that for you. Again, all very easy to customize and override. If you want Material Design in your iOS app, because I don't know, you want to make iOS users mad and because Material Design is pretty nice, you can totally do that. That option is completely available to you. All right. So enough of me rambling on to slides. Let me ramble on to code, because code speaks louder than words. Right? So usually, I show my device here up on the screen, but we had a little bit of trouble with the screen sharing. But basically, what I'm going to do is really quickly build kind of a simple mobile app, just to show you what Ionic development kind of looks like. All right? So just looking at it real quick, you have [inaudible], you just have a plain www folder. Anyone who's done web app development, this'll be very familiar. So this is your index.html file. I'm not going to go too much into what's here. But this is kind of the base template for your app, kind of the single page of your single-page application. Then, the other main thing to look at is this App folder up here. We have Pages, Directory. This is where all of the pages in your application are defined. A theme directory, this is where you can do some of that global theming that I talked about. You'll notice here that we have Core, iOS, Material Design, Windows Phone, Sass Style Sheets. So again, you can style across every platform, or you can be very platform-specific, as you wish. Then, there's an app.ts file. Again, this is kind of the root component of your single-page application. So without getting into it too much, let's actually build something. So what I'm going to do is I'm going to start... So I have the CLI installed already. See, I run Ionic info. If I'm on the internet, there we go. Okay. So just to show you what versions of everything I'm running. I'm actually still running Beta 11. I haven't upgraded to the release candidate yet. But don't worry. They're actually very close to each other. What you'll see out of the performance here tonight is vastly improved in the release candidate. All right. So the first thing, I'm going to run Ionic serve. What that is going to do is it's going to just do a build of my application code. It's going to launch it in a browser, so that I can start developing locally. So it doesn't really look like a mobile app. We could do this the old way, which is to say... There we go. So if I inspect... So for anyone who hasn't done hybrid development before, this is a really nice feature. So the Chrome inspector will render this for me, and I can actually look at how it might look on different devices as well. So you just open the inspect element and you have this little mobile icon here that you can use to toggle back and forth. So there you go. It rendered a little bit better that time. All right. So to start, let's do this. What I have here, I have my homepage. This is like the default page that is generated for you when you start, when you use an Ionic starter. Just the basic template, ion-header, it represents the header bar at the top that you see when we look at this. So this "Nearby Restaurants" that you see here, and the content is the content pane below that. So that's actually going to be the content of our app. Just some basic CSS, you can see it's just plain old, vanilla CSS, basically. Anyone here who's done web development can read what's going on there. Then, the basic component. So really quickly, for anybody who's not familiar with Angular 2 in particular and TypeScript, I just am importing dependencies up here. This is a standard component declaration in Angular 2 that just defines where my HTML template for this controller file lives. Then, all my application logic is defined in an ES6 class that's exported. Again, TypeScript, so I have type definitions. So these are just declarations of member variables of the class. So I'm saying I have a "Restaurants" variable, which is an array that's going to hold objects. I'm going to have a search term, because I'm going to integrate a search box into this. That's going to have a string. Then, let me make this a little smaller. Can everyone still see that okay? Okay, great. So now you can see that okay, I'm going to make it a little smaller even. Then, just a constructor where I am instanciating some isntances of dependencies. Then, in my constructor, I am calling, again, "Restaurants" member function, right here. That is calling this request function. What "request" is doing is it's just calling out to a little API that I've built to return me some data that I'm going to actually render into the app. So for anyone, again, not familiar, using the standard HTTP dependency that's available in Angular to make the network request. This is the API that I'm calling. So real quick, what I'm going to do now is engage in the time-tested developer practice of copying and pasting to save us some boilerplate. Don't lie. You do it too, you bunch of Stack Overflow users. I do it too. It's okay. So paste that in. Let's just look real quickly at what's going on. Standard image tag. You see the square brackets around the source attribute. That just means that I'm binding that attribute to a variable that's on my model. So this is a "Restaurant" variable. Oh, I'm sorry. Wait. Wait. I forgot to do one thing. Real quick, so what I need to do to start, I'm going to use ion-list and I'm going to say "ion-item" inside of this. So this here is analogist to your standard UL, Unordered List tag and your standard LI, List Item. The difference is we're using the Angular directive, because that is going to give us a list that's optimized for things like touch events and scrolling. So now, when I save that, it auto-updates here for me, and I get... You can see, I have one little list item here. Obviously, I want that to have many list items. So I'm going to use, this is the ngFor directive, which is a structural directive in Angular 2. It just says, "I'm going to give it an array to iterate over." So I say, "let restaurant of restaurants". Remember, "restaurants" is that array that I declared in the controller. So now, if I save this and it reloads, I don't know if you can actually see that very well, but I'm getting many list items for essentially every index in that array that's being returned by the API. All right? Does that make sense? I guess, I was told to keep it to 30 minutes, so I'm trying to kind of zoom through this a little bit. All right. So now, I do the copy-paste, in the time-honored tradition of our profession. I get my data rendered for me with actually a very small amount of declarative view code. So again, for anyone who's not familiar with Angular, double-curly braces, that's just the data binding. So it's just saying, "Put there whatever that value is from the class that's associated with this view. All right? So not bad. Not great. You can't really shift this. You need to do a little bit more. So what I'm going to do now is use that grid component that I told you about. So let's take a look at this. So inside of the item, I'm going to say "ion-grid". Let's see. How do I have it here? Yeah. All right. So I'm going to have an ion-grid. Inside of the ion-grid, I'm going to have a row. Again, anyone who's done Bootstrap, this will look relatively familiar to you. Inside of the row, I'm going to have some columns. So on the left, I want to just have the thumbnail image, and then I want to have the detail. In the next column, I want to have the details for the restaurant, and then on the right I'm going to render some of the metadata, like the distance it is from me and the price. So now, if I come back here and look at it, better. Still not fantastic. We do need to do a little bit of customization. Of course, again, CSS, we could... All of us know how to, for example, if we want to write a line, this stuff over here, well, we know how to do that. But one of the nice things about Ionic is it also comes with a whole host of helper attributes to handle a lot of the kind of boilerplate layout stuff that we want to do. So for example, let's do this. I'm going to say, on the first column, I'm going to give it a width of 25. On the last column, I'm going to give it a width of 20. So these are standard attributes of the grid component, and the grid is based on Flexbox. So you can see, it's a portion, 25% of the width to the column that's holding that thumbnail, 20% to the one all the way on the right, and then the middle one, it's Flexbox. So it's just filling in what remains. Better. Let's also add "text-right" to this to make that look a little bit nicer. So now, you see everything flushes right. Let's see if we actually have this as a problem on this one. Yeah. So you can see, in some places, this is overflowing, "Great Dane Pub & Brewing". These are all fine establishments in the great state of Wisconsin, which is where Ionic is based. So what I'm going to do is, here on the ion-item, I'm going to add... Whoops. Not "test-wrap", "text-wrap". Now, if I scroll down, you can see that the content inside of that item is automatically wrapping for me. Almost there. There's some other stuff. Like for example, I want stars. I want this to show how many stars on average this place gets. So here I just have a number hanging out. Same over here with the price. This should be "$$" instead of "2". So another kind of cool open source project that we have... Or it's not even really a project, but an open source library that we have, again under the MIT license, it's called ionicons. Our co-founder, actually, is a designer by trade. So ionicons is a library of over 1,000 icons that are styled to be platform-specific here. So just taking a quick look, what I can do is here under the rating, instead of just putting in the number, I can for example do ion-icon name="star". So if I save that, I get my star icon, and then I can just replicate this and say, ngFor="let star of getArray(restaurant.rating)". So the ngFor structural directive in Angular can only iterate over iterables. Fancy that. So actually, we can't just give it a number to iterate on. We actually have to return an array. So here on my controller, I just have this little helper function that will take the number of stars that I want and just return that array to me. Pretty simple. So now, when I come back, I totally get my stars. One last thing to just fix is the price. So here, I have this. Instead, I'm going to just do exactly the same thing, but... Oops. Sorry. Name=, so this is a different ionicon, "logo-usd" and I'm going to say "logo of restaurant.reviewCount". Whoa. All right. So real quick, I guarantee you that's a syntax error. [inaudible] So I'm not going to actually bother to debug that on the fly, real quick. But you get what I'm saying. Right? I get to... - [man 4] [inaudible]. - Yeah. That's right. Thank you. Welcome to the grand adventure that is live coding, everybody. If you've never experienced it personally, I highly recommend it. All right. So check it out. I have what is kind of the beginnings of actually a very rich user experience. I'm integrating images. This is all being dynamically generated on the fly. I'm doing it with basically 34 lines of template code, 40 lines of actual application logic, and about a dozen lines of CSS. Almost all of it is declarative, and this actually lines up very well with sort of the Angular viewpoint of how to build web apps, is that your view should be largely declarative and your application logic should be largely imperative. All right. So the next thing that we probably want to do is actually deploy, and see this working in action. So if you're on Android, you need to enable Developer Options and enable USB Debugging. Enabling Developer Options, I can't really tell you how to do it on your device, because it's a little different on every device. It usually involves going somewhere in Settings, tapping About Phone somewhere between 5 and 5,000 times until it pops you a little esoteric message that tells you that you are a very successful and lovely developer. A little more complicated on Apple. You have to create a provision file. You have to code sign your .IPA in Xcode. Then, you have to install an npm dependency in order to make the deploy work correctly. Or you could go to this little link down here, which is a writeup that I have on how you can deploy to an iOS device for testing without having an Apple Developer account. It makes the whole process significantly easier. Because I don't know about you, but when I first learned that I had to pay $99 for an Apple Developer account just to try out iOS development, I was a little bit pissed. Let's be honest. Right? So as of iOS 9, that's no longer the case. Apple very quietly, actually, announced that now you don't need a Developer account. But sorry to break it to you, if you do want to actually put your app in the app store, you still have to pay the $99. So you can go through all this, or this is another great, again, totally free tool that we have, Ionic View. You can download it from the Android and the iOS app stores. What Ionic View does is it allows you from the Ionic CLI to, just inside of your project directory, run Ionic upload, and it will basically upload the bundle for your app to the Ionic server. Then, anybody who has Ionic View, you can give them the application ID and they'll be able to load it on their phone as though they were running an actual native executable on their device. This is especially fantastic for anybody who's ever done any sort of development, mobile or web app development, as a contractor. You kind of know the pain of trying to show your prototypes and your early mocks to clients, or to managers or directors, or what have you. So Ionic View makes this super-easy. So if you want to see the app that I just built running on your device, you can download it and just use this app ID, and you'll be able to run it just as though it's on mobile. Again, normally, I would show this up on the screen so you could actually see it running. But afterwards, anyone who wants to see it kind of going in action, please do feel free to come and talk to me. So Ionic View is pretty awesome. That's it. That's kind of the basics of Ionic 2 and Ionic development. If you're interested, we have really awesome docs available on the site. We have a blog, which is pretty much exclusively developer-focused. So we put out a lot of tutorials, especially on Ionic Native plugins there. We're available on Twitter, and who doesn't need a little bit more Twitter. So Ionitron down there, he's the little guy on the left. He's our fancy little build bot that sometimes tweets for us. It's a great resource if you want to kind of live-see what's going on with different releases as they go. Again, totally open source. If you try out Ionic and you like it, and you fancy yourself of the open source persuasion, please join the hundreds of developers that have already contributed actively to the project. All of this is on GitHub, so Ionic, Ionic Native, even the CLI is totally open source. I cannot contribute to the CLI, because I am not that good at bash. But maybe you are. So that would be really fantastic. So that's it. Thank you very much. Again, you can reach me on Twitter or by email anytime with any questions that you have. Thanks again for listening.