 So I'm Rajat. I am a JavaScript and iOS developer. I work with Agile Facts. Apart from that, I run my own startup, which is Poolmarite. It's a write sharing app. And I'm going to talk about Ionic framework today. So before we start, let's see what is the problem. Has it happened to you? You wake up in the morning, and you get a very nice idea, and you think that, yes, I want to develop it through a mobile app. How many have you experienced that? This is a major necessity. It has not been implemented yet. So we get those ideas every day. But then we go beyond that, and we start thinking that, oh, we have to develop it on Android, iOS, Windows, which is a big market, according to Microsoft, and web as well. So then you think further, oh, I need to hire freelancer developers, or I have to hire my own company and start my own team, but that involves a lot of costs. If you don't want to do that, you are a full-stack developer. You want to do it on your own. You start making every platform app on your own, but that involves time. Until then, somebody would have copied your idea and published the app to the customers. Next to this is if you develop everything according to what you plan, you still need to write a lot of test cases and handle different test scenarios in each of the platforms. So after all this friction, ultimately, your idea reaches the audience. And the idea is not what you intended initially. It is serving some other purpose. It has a lot of bugs on different platforms for different customer segments. So this is a major drawback of today's technology that you want to bootstrap an idea, and it is way too difficult or it takes a lot of time. So what if we could combine everything into a single pipeline and bring it on a single language, single framework, and deploy it everywhere? That's what Ionic does. It gives you a single code base where you can write single test cases and distribute app among your testers or friends and then release it to public. So what is Ionic? Ionic is, I would say, in a plain simple language, is combination of Angular and PhoneGap. If you have heard of PhoneGap, PhoneGap is kind of a framework which bridges a web view to the native features of mobile phone SDK. So they did a good part. They started five to six years back, and they have been running successfully. But still, user had to write their own UI, design it on the HTML side, and then they were bugs related to what all frameworks you are using in your code base when you're developing HTML JavaScript apps and what the plugins have been implemented on. So there's always a mismatch. And Angular is a modern framework for JavaScript and HTML. It gives you good features and good design patterns like dependency, injection, and services control, clean separation of concerns. So the Ionic gives the power of both to you. It is AngularJS plus PhoneGap, combined into one toolchain. It gives you fantastic CLI. You can set up a new app and start coding and start a templated app on your own with just the command line. It has SAS support. SAS gives you a modular way to write CSS and a reusable way to write CSS if you have heard of that. Rich icon collection. You need not go to a graphic designer as well, that I need these icons in my app. Please give them. There's a rich set of icon which is included. And Ionic website and portal. Then there is Ionic Creator. A lot of SDKs have this drag and drop features of developing apps. If you've worked on Xcode or Android Studio or Visual Studio, it gives you that as well out of the box. And it runs on the browser. You can just open a URL and start making our app there. Then there is Ionic Play. This is a very good feature. If you have worked on iOS development or some Android development, you have to have some certificate. You have to sign up as a developer on the portal. And it will take a lot of days to ultimately, when you are ready to share the app with your friends or your testing team. But Ionic Play gives you a simple way to share an app ID with your friends or testers. And then they can just enter the app ID and they can view your app out of the box straight there and then. Ionic Push gives you Angular services or modules to implement push notifications in your app. Then analytics are included for analyzing your user interactions and all. Then Ionic Deploy is, this is the latest feature where if you have already developed an app, you know that the review cycle from the app store takes about 10 to 15 days before Apple tests the new version of your app. And then they say that, yes, it is ready to be released. So Ionic Deploy will just give you a seamless experience where you can just publish a new version of your app within seconds. So what it does is it downloads the latest code into the container on which your app is running. And your customers will see your latest version without the app's reviewer. So let's start playing with Ionic. This is a simple command to install. Ionic, if you are familiar with MPM, MPM is a node package manager. And you can install it via this. MPM install minus g stands for global. It's a global module. How many of you are familiar with node and MPM? So this is kind of a necessity for web developers in today's date. MPM and node gives you a lot of modules for web development and node-based development. So let me just show you how we can do that. My Ionic is already installed, I guess. So it will say, this is a simple command. Let it install. Let's go to the next slide. Then these are the few templates which it gives you out of the box. You can start a templated app. And it's Ionic start my app, blank app. And there is a tabbed app and side menu app. These are the main navigation schemes which every app follows if you've seen playing around with your mobile apps. So we'll be doing a side menu app. Let's see how it works and how much time we take to develop it. So it's already installed. Let's just kill it. Ionic start. That's the command. That's the best way to check it. So it has already linked the side menu template to a already existing code base on GitHub. And it is downloading that. How many of you have heard about Ionic before? And have experienced developing AngularJS apps? It's funny I'm talking about AngularJS apps. We can just kill this. I have already checked it out. I knew this would come up. So it's under JQ demo. This is the folder which it creates after downloading your app. So I just need to do Ionic serve under this. Are you guys able to read it? So it created an app and just started running the instance. So it created a side menu app without any coding at all. You have various use cases covered while playing the app. You can go inside. So this is what the template does. Let's have a look at what the code looks like in WebStorm. How many of you are fond of WebStorm? In Sublime Tech, everybody plays around with it. So this is our index HTML. Let's, as a web developer, we always start with index.html. And if you're familiar with Angular, you always have a module, and you start with that. And this is my app, starting IonNavView. I want to start with a navigation view. So, sorry, yes, yes, I'll come to that. So under JS, it already includes built-in code where your app code is written. So these are your app states. I'll come to that. But before diving deep into the code, I will tell you how the code is organized. We start with index.html. And we have IonNavView, which I showed you under index.html. It has, we have not included IonNavBar because we don't want the navbar while we are on the main view of the app. We want it when we are at the side content, if you see the hamburger menu there, we want it there, the navbar, just the navbar. But we want the nav view so that we can play around with, we can put this whole thing inside that nav view. Now we have menu.html, which I'll come to that. But think of it is that under IonNavView, we have IonSideMenus, which is the whole thing, which has two components. One is side content, and one is the side menu. And this is the IonSideMenu content, which is on the right. So it is kind of organized in the same way if you have developed an Xcode or iOS or an Android app. So you have good hierarchy of view containers. Then it has another IonNavBar. Here we are including it because we want the nav title to be shown. And it has an IonNavView, that portion. And on the left, we have the IonSideMenu. So these are kind of HTML tags through which we can just include these components into our app. So I'll go back to the code. So we have a state which says app, and it has a template of menu.html, right? And it's kind of an abstract state. I'll come to that. Abstract states are the states which contain child state, but you cannot directly navigate to them. So going to menu.html. So you see that we have IonSideMenus. And then we have IonSideMenu content. And then if I close this, we have IonSideMenu on the left side. In that, inside the content, we will write our rest of the code. So under this, I should have an IonNavBar with the bar stable. This is for coloring streaming. And this is my IonNavView with a handle called menu content. Now, this is the key part. This menu content is used back in our app initialization where I say my child views will be attached to this portion, menu content. And they will have this template. So it's kind of tricky right now. But once you go and learn about Angular UI router, this is how it works. It manages states in a hierarchical fashion. And you can navigate to them in a hierarchical way. And it will cache the views for you. So coming back to everybody on board, any doubts, any questions? Yeah, Ionic sets it up. Exactly. Yes. Sorry? Yes? Yes? No, these are unique to Ionic. Ionic has included them. And Ionic in its bundle includes an Angular version as well. So you need not include an Angular link under script tag in your HTML. So they have their own Angular version, which they include in their own bundle. Yes, these are Ionic. So my next slide talks about that. So components. So these are components which we can use through HTML tags or CSS classes. So they don't require any JavaScript functionality. You can just include them. And they will work out of the box. So these are called Ionic components. So Ion nav bar and Ion side menu. These are components. But there are some functionalities which require JavaScript or which need a callback that a button was clicked and you'd need to run your own custom code in that callback. So those things are called Ionic services. So I'll give an example of both, how they work. So let's go back to our code. And this is the state of our application right now. Let's try to edit something in another instance. It's already running. So this is our search screen right now. So I'll go to the search app. And I'll see where is search link to search link to under template search.html. I'll go there. It just has a heading. I'm going to change that. And let's use a slide view component which Ion provides. So you see it. Sorry to use Jim Carrey. So it instantly updated the view which was running. You need not run the server again. So Ionix serve is doing that part. Watches your code and reloads that. So this is the Ionix view. So you can have a slide box. You would see this in a lot of apps, right? But it comes right out of the box with Ionix. And there are a lot of components. There are calender, there are sliders, and there are buttons. A lot of UI components you'll get into native SDKs. So one of the other major components which we use is a list. Let's try to build a list. Let me show you how you can use the Ionix website. So this is an Ion list. You just give, I could have used Ion list as well. But you can use by our classes as well. So let me use it the class way. And this is the item which I want to show. So if we say, blah, blah, this is the slide box. So it gives you a nice list. So if you want to have a lot of elements, you can use ng repeat or collection repeat inside it. How many of you are familiar with ng repeat? It's a nice utility. You don't need to write for loops. So let me show you an example. OK. So under this, see my search screen has not been attached to any controller yet. I'm building a controller so that I can write code, fetch a list from server, and update my view accordingly. These are all Angular concepts. Nothing new in Ionix. Ionix just provides you a UI framework. So how are we going with the time? What's the time? Dependencies, then a function to catch hold of is equal to an array. This is my items array. So scope is a kind of a very magical variable in AngularJS. It will reflect all the variables attached to it in the view. So I have this element, and I want to just filling this array. So our controller is done now to attach it in the search screen, and now that items is available for us. So we have the list working. So I just attach a controller to this view on my app.js, where I set up the whole navigation. The controller is just making a random list of objects. And that I can access in the view, because I attach a controller to this view to the scope of the variable. And if you see that a lot of web hybrid apps have an issue with scrolling of lists. So Ionic has done a better way to manage this. So what they do is they don't create all the elements as they are shown. They only create the elements that are shown on the view port. So if you keep scrolling, it will keep disrupting the HTML elements. But other frameworks will not do that. So it is out of the box. Instead of ng-repeat, you just need to use collection repeater. So this is a very nice utility. If you are concerned about scrolling of your app. So let's come back to this thing. So next is services. Services, I'm going to give you an example of how to show an action sheet. So if you see that the UI is closely matching to what an iOS UI feels like for an Android, it will change accordingly if it's on an Android device or an iOS device. It picks up the CSS accordingly. So I'm going to show you how to use an Ionic service. So we have, let's use it under browse. The HTML is so fresh. How do you use it to write an address? Now I need to include a button here which will have a functionality to show an action sheet from bottom. So what I can do is under my nav view, in search HTML only, I can just say, so I'm creating ion nav buttons. I'm saying it should have a right side view. And it should have a button. And a button of search, or I can give this a title. Let us see what we have. For some reason, this is not working. So let's move on. So services is like you have a jQuery or a JavaScript access to showing on custom clicks. Something like that. Yes, they have. So if you open Ionic documentation, they have a bunch of features listed. And they have a mobile app showing the features live. So you can play around with that. And this internet is not working. So OK, let's move on. Next is theming. So I want to change the coloring of my app. So Ionic gives the support for SAS, but it is not included when you start a new Ionic app. You have to do it after that. So yeah, let's do that. Setup. So see, everything can be done through the command line. Even the CSS functionality, or starting a new template. I'll show you other features, like sharing with your friends. That can also be done through the command line. Anyways, so I already have a demo project which we can use. So when you do this thing, Ionic setup SAS, it gives you a new folder and gives you access to write your custom variables, SAS variables in this SAS file. So the whole app works on a bunch of variables, like these are the themes which you can apply. And you can apply new colors to your theme. So we have been using stable theme. You've seen iron bars table, right? So I can assign a new color to that. So see, it has given a black or a gray color to the wherever the stable class would have been used. So there are other variables included in this file, Ionic base file. And you can write your new variable values here. And it will overwrite that. So you can give them your app from here. OK, coming to unit testing. So unit testing is also a major part of these days. And I love this part because with unit testing, you can freely move your app idea to experiment new ideas. Because you don't have to think about, yes, my code will be breaking or not. So automated testing takes care of that. But unit testing is not that much seamless if you're using a native app, iOS app, or an Android app. You have to write separate unit tests and maintain them separately. So I'm going to show you an example. I'm going to use Karma. Karma is a test runner. And I'm going to use this Jasmine framework for testing for assertion and all that stuff. And just show you an example. So this can be done through command line. First, I need to install Karma locally. Again, NPM stuff. I know some people would say that, what is this? I'm going to save a dependency here. I've already done this, so I'm not going to run this. Then it will be Karma launcher, Chrome launcher. Because I want to run my test in Chrome browser. Then it's going to be Karma Jasmine, these things. Once I've done that, so you cannot install it in the new dependency because internet is not working. So I'll just show you how it works. So think of how many of you are familiar with writing Angular services? So Angular services is like just controller. But you want to write some logic inside that. You don't want to deal with the view. Controllers are used to manage views. You want to write a separate service. It just handles the logic, business logic. So I have written a sample service here. This is just doing addition of two numbers. And I'm going to test it through Karma Jasmine. So how I do that? I create a new test folder. I'll say, first, I need to instantiate a new config file for Karma, which is very simple, Karma init. So it says, you want to use Jasmine? Yes. This will require no, I don't want. Chrome, yes. Yeah, it's done. So it will create a new config file like this. And here you just need to take care of this files object. And you want to include your ionic reference here, which is under wwwlibionicjsionicbuild.js. Also, I have included Angular MOCs as a dependency here. You just need to do npm install Angular MOCs. This will allow you to mock some Angular components which you don't have access to, so that you can use them in your test. So this you should include in your test. So here, think of this file array as an include, all you want to include while you are running your test. So I definitely need ionic. I need Angular MOCs. Then I want to include my app.js. So everything is done. Now I'm going to include my test folder. Test star star star.js, include all the test files. So if you see, I've already created a test folder here. And it has a Jasmine test written. So what it is doing is, I'm not going to type because you are running short of time. So it is including my controllers, module which has all the controllers in it. It is injecting my services, which I want to test. So the name of the services, if you see, is mycalci. And it is writing a BDD kind of test, where I'm just checking call to add. And then it is returning a promise. So that's why I'm using then. And then expect result to be equal to nine. And because it's an asynchronous call, if you go back to the service, I'm using timeout, that reply after two seconds. So I can play around with timeout, which is mocked by the Angular mocks function, so that I can control it. I'm saying after 2001 milliseconds, what will happen? This call will succeed, and it will respond. So then I write an assertion, and check the result to be nine. One minute left. So yeah, it executed. I had written the path strong. So you see that it is executing. And while you edit the code, this keeps on running. I'm going to go to service and change this to minus. It failed. So I'm going to quickly finish with what I have. So I didn't talk about the services which access the native APIs. So this is the site for ngCordova. They have abstracted out all the phone gap plugins into Angular.js format. They give you a wrapper in the form of Angular services. And you can access all the phone gap functionality through that. So you write everything under Angular convention. And you need not worry about if some third party developer has written a framework using jQuery or something. They give a net fraction out of that. IonicView, we don't have internet working. I can show that you just need to run Ionic upload under your app. And it will give you an access to an ID. You can share it with your friends. And you can play around and download the app there and then. No need to sign up for developer account. You can have the whole app working. That's IonicView. IonicCreator is the online SDK for drag and drop kind of functionality. Internet is not working. I could have shown that as well. Yeah, so these are the resources. IonicFramework.com, Ionic.io. CodePend.io slash Ionic is a very good point of having code pens or some snippets of code for all the fun strategy which you need. Someone would have uploaded a template or a snippet for what you are looking for. PluralSight, this video tutorials are very good. You can download them or buy them online. That's it, I guess. So you can follow me on Twitter on nsit. And hope you enjoyed this session. I know a lot of things are breaking. But that's the whole point of Ionic, just building mobile apps or write out of the box and distributing to your friends without the hassle of phoning a developer account of Apple or Android. Thank you. So the feature is in alpha right now. The Ionic Analytics push and the deploy. These are the online services which the team is providing apart from the open source framework. And these services will be paid because they are as a service. So that's how their business model is working to release open source framework for the committee and just give add on paid features. The analytics would work as the same way as parse analytics are working or crash analytics or any other web analytics are working. Any other questions? It is very easy because they have provided delegates, if you have heard about delegates, they have provided delegate services for all the components as well. So you get all the events fired at scrolling up, scrolling down, scrolling is stopped. So everything you can do with Backbone. I have not worked with Backbone, but it's totally on Angular convention. So I don't know how Backbone integrates with Angular. But why do you want? Oh, you have worked on Backbone. Somehow if you can extract the CSS and put it into another project which you are using with Backbone, you can do that, but that's nasty. Yeah. So if you go to NG Cordova, they have a lot of features. They have a plugin for Touch ID as well, Apple's Touch ID. Geolocation, camera, SQLite inside the app, not the web SQLite. They have all the plugins for that. So it depends on the use case, right? If you're using a web view, how are you using it? You are using it to different places, and the whole app is driven by native features, then you don't have any option, right? Because you have to use a web view component there. But if your whole app has just the navigation handled by the native features and the content, the whole screen content is handled by web view, then Ionic is a good option. I gave a Chrome configuration in the Karma config, right? If you read about Karma, they have option for quantum GSS as well. So I just entered Chrome, so it launched a Chrome launcher. And it ran the test there. Yeah, that's a good question. Angular Material is kind of CSS only. This gives you out of the box, publish, view, and phone gap native components abstracted out in Angular fashion. But what did you say? Google Material, Angular Material is just CSS. It doesn't give you a bridging between native features and the CLI tool. You can include Material inside an Ionic app and discard the Ionic CSS. That would be a good option. Yeah, a lot of apps. You can just visit their website and see the examples. Thank you.