Ionic Framework by Andrew Joslin at ng-europe 2014

Just another WordPress site

Ionic Framework by Andrew Joslin at ng-europe 2014

ANDREW JOSLIN: Awesome All right So today I’m going to talk about this big blue thing, Ionic Real quick This is me I’m this guy I have worked with Angular since before 1.0 Like back in spring 2012, I found it right before the release And I just loved it And I’ve always been trying to do hybrid app stuff with it And always been trying to get Angular plus a hybrid app actually feel good, feel like a native app I’m on my phone and users will actually think it’s native And I feel like with Ionic, we’ve actually done that So I’m going to show you guys that today Real quick, Ionic– if you don’t know, I’m going to define it in less than 100 words Ionic is an SDK to help you take an app on your– it helps you build a hybrid app A hybrid app is you take a native container on your phone and you put a website inside And basically, you’re hoping you can fool the user into thinking they’re interacting with a native component But they’re actually just interacting with a website So Ionic and Angular, it feels like a native app, which is awesome So I actually don’t have any slides Let’s go to a demo I’m going to make an Ionic app for you guys All right So we have a tool called Ionic Obviously, you can install it with npm install global Ionic So I’m going to make a directory app that’s kind of like a contacts kind of thing just for an example for you guys So this is going to download Cordova, which is a native wrapper It’s going to download This might be slow So I had a plan I have a plan I have this thing called directoryLocalApp So we’ll pretend Ionic downloaded all our things for us We’re pretending that we had internet So we’re just pretending that we just cloned the app from Ionic start And now we get this little scaffold This scaffold has bower, a gulpfile, everything you need It’s got a Cordova wrapper around it so you can easily just start an app, emulate So the way it comes right after you clone the app, it’s ready to just run So we just have a blank app template So I’m going to add the iOS platform And then I’m going to run it in the– oh, wait I’m going to run it with the livereload flag So we’re going to run an app in the emulator Or we could do this on a device And it’s going to reload every time we save So we’ve got this lovely Ionic blank starter And let me go to another window Go to directoryLocalApp So we’ve go this Ionic blank starter We can do whatever we want with it I’d better close this Can everybody see this text? Yell at me if it’s invisible And yell at me if I make a coding mistake and you see it, if I make a typo or something I’m very open to that We want to change this stuff It just reloads instantly All that cool stuff So I’m going to make a simple app which will load a list of contacts from the randomuser.me API So first thing we want to do is we want to add a nav-bar This is a bar which will update as the user navigates And we’ll add a nav-view And this is like an ng-view except it has cool transitions and states and everything build in So we reload We have nothing, obviously, because we haven’t built any views So let’s open our app.js And let’s add a state, a default state So we’re going to config at stateProvider And we’re going to add a state Let’s just call it people This is going to be our state where we list all our contacts So we’re going to put it as /people We’re going to have a people controller And then we’re going to have a template called people It will be pretty easy And then set our controller This is going to take a scope for now We’re just going to create an empty page for now AUDIENCE: Could you make it a little bigger? ANDREW JOSLIN: Yes Thank you If I need to, guys, is this good? I can also just put the simulator separate, so I’m just focusing different things Is this good? Can you guys see it? AUDIENCE: Can you make it bolder by any chance? ANDREW JOSLIN: Bolder? That’s a good question Let’s see AUDIENCE: Set it on the right to the side It’s not bold enough ANDREW JOSLIN: OK Not bold enough Let’s see Thanks for telling me I had a bug with iTerm, so I switched to Terminal really quick How do I change the font in here? Text? Aha OK So let’s try Menlo Menlo is pretty– ah, OK AUDIENCE: Much better Woo hoo ANDREW JOSLIN: Can everybody see it? In the back? Yell at me

OK Awesome [APPLAUSE] So we got our people controller Now we’re going to make a template So we made a template We called it templates/people.html To make a templates folder, let’s make people.html Whoops Whoa, I pressed a weird key The thing with Vim is it’s really nice unless you accidentally press something I accidentally pasted in stuff OK Cool So we’re going to have our template Let’s get rid of this file browser So this is a template that we loaded into the ion-nav-view we just placed, like loading something into an ng-view So we created this ion-view parent We’re going to give it a title, which is going to give the title on the nav bar above the app That’s what a nav bar looks like We’re just going to call it People Then we’re going to add a content This is just a scrollable container for content obviously And then we’re going to create a list Because this is going to be like a contacts kind of thing We’re going to have a list of people And then we’re going to ng-repeat over some people again Because we really like people in this case Even though we’re programmers, we still like people, right? All right So everything I’m doing is clearly documented on the IonicFramework.com website We have source-generated documentation It’s pretty awesome, pretty beautiful I know I used the word “beautiful” in a presentation You can go lynch me later Item-avatar– so this will just make it be styled like an avatar So I’m just going to get some bindings These are going to match the format of the people we get back from the user.me API, which we’re going to set up in a second So we’re going to set the thumbnail for the person We’re just going to set the title of this thing to be person.name.first And then we’re going to set the description to be the person’s email So we’ve got a template So last thing we need to do is go to our appjs And we need to set the default URL for the app to /people Because it’s going to index right now So we have urlRouterProvider.otherwise /people So boom, we have a page loading And as you see, it’s like completely instant So let’s add our people now real quick So we’re going to [INAUDIBLE] just a service called people, which does simple http requests to fetch people from the random user API So let’s just make a people hash or object, which we’re going to return And let’s give it a list field, which is just an array of people Let’s give it an add function, which is going to fetch a person, random person, and add it So this add function is going to return our http request promise from api.randomuser.me And then, it’s going to give us back a user Now randomuser.me nests the user in this really weird array with one result call response.data.resultsresponse.data.results[0].user It’s kind of weird I’m just going to push this onto our array Because that’s what we care about for this example So we got people Let’s also fetch some initial people, people.add And then the last thing I’m going to add right now, I’m going to add a promise onto the people service that will be resolved when all the initial people are fetched using $q.all If you guys haven’t used $q.all, you basically give it an array of promises And it will resolve once all those promises are resolved So this is just going to resolve once we fetch our initial three people So we’ve got three people Let’s go to this PeopleCtrl, inject the people service So that’s $scope.people equals people And now we have these people, which aren’t rendering So this is when you pull out your browser, folks Oops If you can type your port name correctly And we figure out what is on this scope Thanks to Batarang, which Brian so kindly gave us all OK So my person is a function So we have this random user, which we got Let’s console.log this response.data.resultsresponse.data.results[0].user Oh! We need to set this to people.list I promise I practiced this, guys So we’re setting the people to the list of people not the whole people service Because that would be really stupid So we have these people now And they have images But the random user API seems to like to cache my requests sometimes So I’m going to add this query string just cache [INAUDIBLE]

it So this is just going to say, q equals 0, 1, 2, for every new user we ask for All right So we have random users Pretty awesome How about we add a loading spinner with Ionic that will add loading while the users are loading? Luckily, we have this promise, which tells us when the users are loaded, just by coincidence Isn’t that funny? So we’re going to show a loader while the users are loading We’ll just make it say, “Loading” for now And then once the people are ready, then we are going to hide the loader And now, awesome See? Even slow internet works [APPLAUSE] So Ionic ships with a whole set of icons we call ionicons, which we made ourselves Some look like Android’s Some look like iOS Some just look like Ionic, which is always the best So let’s add an icon called ion-loading-a And then a br OK I don’t like that spinner Let’s try c C is always my favorite Yeah There you go Can you guys see the app over here OK, by the way? Anyone in the back, just yell at me really loud, bigger, or something I won’t know if you yell it in French though All right So we got these people First, actually, let’s allow you to create new people Let’s add pull to refresh Because that would be really nice We could just pull down It would fetch a new person Right? So let’s go to our people.html We have a really cool little directive called ion-refresher What do you know? You can customize this more or you can add custom text or icons while you’re refreshing But for now, we’re just going to say that on refresh, we are going to add a new person And then addPerson is obviously a method we haven’t made yet So it’s kind of just going to spin forever and ever and ever So let’s add this addPerson method So this, we’ll just call people.add So when you are running a refresher, you have to tell it when to finish obviously Because it has to know, oh, I’m done I’m done spinning The user needs to know So all we do to tell the refresher it’s done spinning is we broadcast this simple event And this is all documented I know it seems like magic But it’s really well documented I promise So this will load Then we have our users Let’s add a new user Oh, awesome It’s just working unless I do that There we go OK So we have a loader In 15 minutes, we have a loader We have our cool stuff Let’s try to add a new page I’ve got time Yes I have until 10:40, I think Cool OK So that’s a new page Let’s go to our state provider First, let’s add a new state called person This is just a details page for a person We’re going to call the URL /person/:index We’re going to make a PersonCtrl And then we’re going to load this template from the person.html All pretty simple Now let’s add our PersonCtrl Oh, and we’re also going to inject a person using resolve By the way, this state you see– if you aren’t familiar– is UI router, which I don’t know if they’re going to talk about it while we’re here But it’s a third-party project We use it in Ionic to manage your history in your app You can have multiple histories in a native app, where you’ll be on one tab, and you go in three pages Then you switch tabs You go in three pages Then you switch back And you have to have the old history preserved UI Router helps us do that really easily and do cool transitions, which you’ll see in second So we have resolve We’re going to resolve with a person So we have this $stateParams index that we made right here And then we have the people service we’re going to get the person from Once the people are ready, once all the initial people are fetched, we’re going to get person matching the index given in the URL And then well, let’s just set this as scope So now let’s make our template to be sure this actually works This is the riskiest part right here, guys I’m making a service, a controller, a URL, a resolve all at once So we’ll see what happens All right So let’s make our template person.html So again, we’re going to make an ion-view Let’s just title it Person for now Later we’ll put the person’s name into the nav bar because that would just be better And it’s always better to make it better

All right ion-content Scrollable area For now, let’s just spit out person just to see if it works All right So last thing we need to do is link to the person in the people.html file So we’re going to add an href to this ion item Ion items support href And we’re going to go– cref or href I don’t ever know which one to say We’re going to go to person/ $index, which is matching the ng-repeat index matching this person, which matches the index of it in people.list, which will then run the resolve we just created And last thing, very last, is we want to go to our index.html and we want to add a Back button So this ion-nav-bar, this is the nav bar that controls your whole app, this will display titles It will transition between titles on pages And also, it will display Back buttons when you transition to a new view in the same history stack So we only have one history stack in our app, obviously So we have ion-nav-back-button We’re just going to make it say Back And that doesn’t work OK This happens every time I do this AUDIENCE: [INAUDIBLE] line 34, there was a + Was that it? ANDREW JOSLIN: Thank you AUDIENCE: Yeah ANDREW JOSLIN: No That + is because that’s a string, $stateParams.index But thank you You said something OK We have $scope.person [LAUGHTER] So we have the person controller We have the template We have the person/:index So now it’s time to go to Chrome Because sometimes you just have to go to Chrome You know? It’s changing the URL really fast You can see it at the top So that means our new page is not loading correctly for a reason that I’m not sure of yet AUDIENCE: [INAUDIBLE] ANDREW JOSLIN: That’s a good question I make that mistake I practiced this until 3:30 last night So I’m surprised I’m conscious right now People– yes Thank you It’s not a function It’s a field There we go Thank you, audience person All right We have our person [APPLAUSE] Do you guys want to see theming or an action sheet to delete an item? AUDIENCE: Theming ANDREW JOSLIN: Theming OK Let’s do theming All right I’m going to make this Back button prettier real fast index.html Let’s make this a button icon So let’s go back to the simulator because it’s prettier All right So by default, we’ll style all these icons you see on the Back button according to current platform So this is a Back button that looks like iOS On Android, it would look like Android The view transitions will look like Android Right now, they look like native iOS, obviously So let’s try theming this a little bit Let’s make this bar-positive This just makes it blue OK So Ionic comes with several colors They’re all described by these crazy adjectives called positive, energized, calm, assertive, et cetera Let’s make our Back buttons be assertive, just because we’re cool like that OK Well, while it’s loading– oh, that didn’t work Because we can’t do that to Back buttons because they have to be the same color as the nav bar That’s OK All right Let’s customize this positive color we just did It’s really easy We ship with this scss file called ionic.app.scss, which will automatically recompile with our livereload task, which is right here Let’s set positive to pink Because who doesn’t want a pink app? Boom All right Let’s say we wanted these names to be like orange or something Let’s go to our people.html and change this name to be energized So you can just apply a color class to anything, set the color in the best it knows And for specific components, we have bar-positive or button-positive But here, we’re just going to set the energized class And it will just set the color for us OK, cool Let’s change the energized colors, so everything that’s energized in our app, we wanted it to be– I don’t know Color, anybody? AUDIENCE: Purple ANDREW JOSLIN: Ooh Great idea Pink and purple It’s like the royal Barbie All right So we have a bunch of cool stuff And I still have time to do the action sheet Who wants to see an action sheet when you delete a user that looks pretty cool? OK So we’re going to go into person.html

But I have to refresh my sticky thing in my fuzzy search All right Let’s just create a button button-icon, button-full– so these are our classes that’ll make the button have a transparent background It will make it take up the whole page And it will make it red by default So we have an assertive button called Delete User Woo hoo So we’ll be able to delete these guys, these annoying random people So let’s just on click, delete user Cool So let’s look at this button we made Oh, it’s nice But it’s not colored button-icon. button-full Maybe I just do assertive Oh, there it is So you don’t need the button class All along, I was wrong OK So I need to refresh this simulator because it’s stuck on this page Because it refreshed on end page, but there’s no history So we’re going to add this delete user function So we’re going to use this thing called $ionicActionSheet, which is pretty cool It makes me go, wow, every time Not every time I’m lying But that’s marketing We got $ionicActionSheet.show inside of our deletePerson function Is that what we called it? deletePerson? Let’s just check person.html deleteUser Let’s call it deletePerson Because we don’t have users We have people And then go to app.js OK. $ionicActionSheet.show So this has several options It’s very similar to the API for the iOS Action Sheet Basically you can supply destructiveText, which will automatically be red We’re going to call this Delete person.name.first And then we’re going to have cancelText, which is Cancel And then we have a specific callback just for the Destructive button All these options are documented– destructiveButtonClicked And that will splice our user out of it Let’s just make sure it shows first So we’re going to delete our user Cool OK So we’re going to actually make it delete the user Let’s go to people.list.spli ce(people.list.i ndexOf(person),1) And then let’s just go back So we’re going to delete the person The it will go back to the person list Cool Easy And then we refresh We get new users We’ve got our cool little loading thing All in about 20 minutes That’s pretty awesome Yeah That’s all I had planned But I still have 10 minutes, 15 minutes So what do you guys want to make with Ionic? AUDIENCE: World domination ANDREW JOSLIN: Say again AUDIENCE: World domination ANDREW JOSLIN: World domination I already did that AUDIENCE: [INAUDIBLE] ANDREW JOSLIN: Android emulator That is always a difficult one I have Genymotion Let’s try it Genymotion This is getting dangerous, guys Unrehearsed, live coding We’ll see what happens AUDIENCE: You can blame me ANDREW JOSLIN: OK OK I’ll come up afterwards We’ll have a talk AUDIENCE: [INAUDIBLE] All right We can press Play So I’ll talk a bit about why I think Ionic is so great Because we are perfectionists, we go for everything to make it feel like native I mean, if you look at something like jQuery Mobile, they try to be a responsive web framework, which makes it look like a responsive web framework, not an actual app Ionic, we focus only on apps on a device We don’t focus on the web on like a web app We have one focus, which has enabled us in a year to make this crazy experience on your phone where you can have something that actually feels like the native app We’ve had several featured iOS apps on the App Store Recently one called Sworkit– it’s like Sworkit It’s like circuit training for training yourself with physical exercises But it’s really cool I gave it to my friends And they were like, this is just a normal app And I was like, wrong! It’s an Ionic app Yeah Ionic’s really great, really easy to theme And we’re just perfectionists about all these little details Like this little shadow you see on the side as it goes back, there’s like three things going on during this page transition When you go back, the old page will slide over There’s a box shadow on the side, which transitions out And the page that’s coming in has a half opacity mask over it that fades out

All these little things that iOS does that we just had to copy, it’s a lot of really tacky stuff sometimes So let’s try to get our emulator to run for Android Genymotion is better than the Android emulator Genymotion do not pay me to say this They are awesome All right So we’re just going to run this in the Android browser because I don’t want to even try to get an [INAUDIBLE] So let’s get our IP 192.168.56.255.8100 Aw! 168– that should be right AUDIENCE: [INAUDIBLE] ANDREW JOSLIN: Oh, right Thank you I’m not very good at the internet All right So we’ve got our Android thing here You see the transition is different It’s kind of cut off on the side The transition is different for everything Is just a normal– maybe we have to set an option for that in Ionic config That’s new I don’t know Adam made it We do have different icon for back here I believe So I may have been completely wrong I know there’s an option to set platform-specific defaults in Ionic config That’s in the documentation I promise it’s there That’s Ionic Come up to me afterwards if you have questions And thank you for the suggestion [APPLAUSE] MALE SPEAKER: Can you ask who is the guy who answered a question? ANDREW JOSLIN: Say again MALE SPEAKER: Can you ask who is the guy who answered ANDREW JOSLIN: Who is– what’s your name? HYMAN: Hyman ANDREW JOSLIN: Hyman? HYMAN: Yeah ANDREW JOSLIN: OK I think there’s a prize for you or something MALE SPEAKER: There you go ANDREW JOSLIN: Nice MALE SPEAKER: A Chromecast [INAUDIBLE] [APPLAUSE] ANDREW JOSLIN: See, guys It pays to give feedback Can I do questions? MALE SPEAKER: Yeah Sure ANDREW JOSLIN: Four minutes? MALE SPEAKER: Sure ANDREW JOSLIN: OK I can do– is my mic still on? MALE SPEAKER: No Well, these are ANDREW JOSLIN: I can do four minutes of questions if anybody has any Ionic questions You in the blazer AUDIENCE: Me? ANDREW JOSLIN: Yes AUDIENCE: OK I was wondering if you have any plans to include tablet support [INAUDIBLE] ANDREW JOSLIN: Tablet support It works on tablets About half of our components, I’d say, are responsive and will work great on tablets They’ll change layout out a bit to look more like a tablet thing Like the modal will change from bringing a complete page up on a phone to bringing up a little box that lays over the app It will work great It’ll work on a tablet I can’t say with confidence that everything looks like it belongs on a tablet But it will work And we’re working on more things for that You in the sun shirt right there by the column Yes? AUDIENCE: How [INAUDIBLE] ANDREW JOSLIN: Can you speak a little louder? AUDIENCE: How do [INAUDIBLE] ANDREW JOSLIN: How do we test Ionic framework? We have a– AUDIENCE: Repeat the question into the mic ANDREW JOSLIN: How do we test Ionic framework? Thank you I’m new to speaking We just broke 1,000 unit tests Where’s Adam? Right? Whatever I think it’s about 1,000 unit tests And we also have this thing we actually made called Ionic Snapshot, which we are planning to provide to users in the future Every release, we go through all of our pre-built Ionic demos for each component And we take screenshots And we compare them to last release’s screenshot in all the major browsers we support And we see if it looks the same That was the best way It’s a lot easier than trying to N2N test all these advanced UI components We just take screenshots of them and trigger clicks to make things happen and then take anther screenshot And then we use image algorithms to compare So we have unit testing And then we have screenshot comparison And our CI server, on every commit– this is really awesome We build our docks We push to the CDN the nightly version, which is the master version We run unit tests We do all the JSON stuff And we distribute a lot of stuff On release, we do like eight tasks on our CI servers So we have a lot of automation and testing built in

AUDIENCE: [INAUDIBLE] ANDREW JOSLIN: Right AUDIENCE: [INAUDIBLE] ANDREW JOSLIN: Right So right now, Ionic works– AUDIENCE: [INAUDIBLE] ANDREW JOSLIN: Yes Ionic on desktop, tablet, and mobile I want to build an app on all those and how do I do it? So Ionic, we chose not to focus on desktop Because, well, there is just so much work to do And if we focused on everything, it wouldn’t be where it is right now The future after 1.0, we may support desktop We aren’t sure yet Ionic will work on a desktop It’s just random things like selecting text will act weird Or scrolling will act weird on the desktop I would suggest reusing your controllers and services and making new templates on the desktop AUDIENCE: Do you have and ETA for the final? ANDREW JOSLIN: ETA for 1.0 is when it’s ready, hopefully this year Hopefully But don’t quote me on that But I’m being filmed, so you will Yeah? AUDIENCE: How about Creator? ANDREW JOSLIN: Creator beta is out We are fixing it We have a pretty good amount of beta users now There are, obviously, beta bugs But we’re polishing and improving it constantly And people are liking it pretty well We have Creator It’s a drag-and-drop app You create a prototype of an app You can build out your buttons and your– I won’t try to open it right now– but your buttons and your whole app navigation structure And then you can just export an app with JavaScript and finish coding it And that is all the time I have Thank you, everyone [APPLAUSE]