Tackle it here now, too.

They were actually going to be doing some coding.

It is a technical topics, so I know this isn't necessarily Attack Channel, but I thought I would give you a rundown about how I would put together and Iowa's application as a former IOS technical lead over at YouTube.

Primarily, though, I did a lot of hate from people who think that I can't even coat or they saw my Twitter them and assume that the only thing I know how to do is Web for stack engineering, making some JavaScript and back and stuff.

But I also happen to know mobile development.

That's actually the core of what I have been doing.

So in order to get started, whether we jump into the computer quick pause, this video is brought to you by skill share.

Scotia is the online learning community with thousands of classes, entrepreneurial and creative skills.

Explore everything from Web development and marketing toe entrepreneurship, productivity, M or and because sculpture sponsored this video, I'm getting the 1st 500 people to join every two months trials to check miles, then get the description below.

So why don't we get started because I know you guys just want to see me open up a bunch of black terminals in profane.

Okay, so the first thing you're gonna want to do is download an open up ex coat, which is Apple's Def Leppard program for making iPhone Applications were gonna click on, create X Code project single view application and give it a name to do list.

And I'm going to be using objective.

See, You can use Swift if you like.

But over at Facebook and Google, we all tend to use objective see, primarily because Swift offers no riel benefits.

It's just some sugar syntax, but it's not cross platform or anything.

And there's a bunch of Tulley and Infrastructure coat or Deon Objective C.

And so that's one thing that big time sick and tired of seeing Apple doing is they only come up with a new innovations for their platform on Lee.

But nothing is cross platform that you take a look as 50 way.

It's on the apple ecosystem, which all the inquest is really just syntactical sugar.

That's not what this industry needs.

We need better cross platform tools.

All right, so now let's take a look at what we got here.

I can click, build and run and issued.

Just build an application and run that rather wait.

It will be an empty screen.

And by the way, so apple, they really confuse you.

There's all these graphical ways of creating an application.

You got storyboards.

You can use Nibs.

You've got Swifty wide, but we tend to avoid all of this over at fame companies, primarily.

Because any time you use graphical stuff, it wrecks your version.

History, at least for storyboards, which is important.

And as for Swifty, why?

Which is a declared of way for credit anyway?

Well, we're to have component it.

Little texture, rack, native and all of these tend to offer more benefits than, say, Swifty.

Why, either in terms of cross platform or performance.

All right, so now that we have our app up and running, we're gonna want to give it a navigation bar and the title.

So we're gonna change the view Controller Tau, your navigation controller, go into the initialization here, override the constructor, and then we'll create a new child of you controller for the actress to do list application and contain it.

And actually, we're going to create a new sub class for this called to do view controller for New Crane you file.

Then we're going to distribute Controller and give it a title like self doubt Navigation.

I.

Then the title equals two DUIs.

Now, if I were to run the application, I should see the titles start showing up yet they're ago.

We're going to also give a background color.

Make it wait, all right, looking good.

And for the rest of this detour, you can check out my course where I'll teach you how to finish the rest of this.

No, I'm just joking.

But what I will be doing is jumping around this a bit because it's going to be born to wash me code all the time.

So I'll just be speeding through this and I'll have to complete source code in the description below if you want to prove it in further detail.

But at this point, what we burn them want to do is put in a scroll view.

Now.

This groovy would be pretty dynamic for items being added and removed, and at least for Web developers.

If you didn't know Scofield's work very differently in mobile development than and wet because immobile due to performance concerns, they like to reuse views.

So the elements for views they're being recycled as they're coming on and off screen traditionally.

And I was you use collection views an android.

They're called like recycler views.

But the framework for this is pretty bulky and clumsy, actually for the OS.

And so what developers tend to do is they build their own abstractions and frameworks on top of thes collection views.

We're gonna be using something that Instagram has created called Aggie Lisk it.

And if you take a look idealistic, it is actually used over in the YouTube as well is used over an instagram.

So it's used by some top tech companies as well, say the company, A little texture.

But the idea is that you have a set off objects, is just data, and then the framework is going to be able to render this into a list of scalable items.

And if the data ever changes, then the family will take care of all of the updates to get this list of items rendered they use is some dipping algorithm for that to minimize the number of updates they have to make.

And so what we're gonna want to do is use cocoa pods.

To get this installed, you simply go into your directory, you apart file and then you run pod and stall.

You're gonna have to get cocoa puffs and salt for this as well.

But once you install it in, solves that framework into your project than you exit, the APP reloaded and it will be there ready for you to use.

So excuse me while I lay down some code now to bring this into the project, there were import idealist kit and that will override both of you here.

All right, so I've created the collection view and then signed that overto Aggie list Get to manage.

And now we're going to just have to fill in the stub Mathis for RG Lisk it.

So we're going to have this conformed to a G list at that birthday, the source and then just fell in the methods for this and for this, we're gonna have to create a section controller which will manage each of the sections.

So create a new class here section controller which comes from I G list section controller, and they want in the objects for the list adapter, which is the data.

So for now, we're just going to return a section known as two DUIs and within the section they're going to be individual items for each to do list.

Come into the section controller.

We can start filling this out.

So, like a number of items, let's just return like four.

For now, we'll put in like a minimum line.

Spacing Cell for either Matt Index will return they'll, for now and size for either Matt Index and will return sieges, size, make container size up with and, ah, height of, say, for the It's no running this.

We get crash, and it's because we're returning the Neil Cell.

So we have to create a cell class now.

And so this is the thing about mobile development.

You have a lot of classes you have to create love boilerplate code just to get something like this set up.

I think once you get this set up is a little bit quicker.

But overall it is probably a little bit more time consuming than same Web development where you have so many pieces already built for you.

You know, there's rack native, too, if you like.

But I mean, you know, speaking of wreck Native, I think that we tried to apply our web framework ideas over to Mobile, and I'm just not sure if that really translates.

It's almost like trying to create a three d game using H tomorrow and CSS.

Yes, you probably could do it, but you're missing out on so much of the other functionality.

And once you understand more deeply what native is capable of all the optimization is and things you can do, you realise, applying standard Web technologies it can only take you so far.

But then you don't get a bunch of other really cool functionality animations and that finer grand control over like, say, the network loading image optimization sze that you normally probably would be able to get if you were truly 100% native.

Anyway, we're going to create a so here override layout, so views, which is the primary method for drawing, and then we'll also overwrite the initial lays there.

And so for here, this function cell for either Met Index.

This is where we start getting recycled cells and probably want the more interesting parts about mobile development.

You have to de que a cell that can be reusable.

So let me import to sell and I'll say to do so self, that collection context de que reusable self class to do cell type for section control herself and index index.

So that gets us a reasonable cell and then we'll return to sell.

So there we go.

Now we already have four cells available that are showing up.

That's going to be our to do this item.

And now we're going to fill in the cells.

We're gonna put some Texan there, create a your label, give us some text, have it to the view, and then I have to lay this out now.

In addition, we may want but them for the leading items as well as our create delete button, and we'll give it a frame.

Now you can see I've had to do a lot of manual layout code here.

I had to compute the positions, the width and height of each you element, and that's kind of the pain of existence for a lot of mobile developers.

And there are various ways around this, like you can use all the layout stack views, but they don't quite provide as much flexibility as what Web developers get using Flex box.

Some all swept developers are familiar with the CSS Flex box specifications, which is a label system.

And so what they actually have these days is something called yoga layout, which is a framework that was invented by Facebook and essentially implements the flex box layout.

Specifications cross platform in like sea, and then they've ported over to a bunch of different languages.

So we're gonna try to import that for our usage.

And if you're to check, you will see that yoga Leo is actually used by a lot of companies.

You can see it's used by a little component kit rack native.

And if you check the YouTube app if you see they're open source terms of service is you'll see that YouTube was also actually using yoga.

So a lot of the top mobile app they're using their power by yoga layout, which is flex box underneath the hood.

And this is just a morgue, universal specifications that even designers know how to use.

Designers don't really know how to give you a speck using, say, auto layoff or stack of use, for instance.

So we're going to try to pull yoga layout into the application here again, we're going to go into our part file And are you God?

That was put in the one liner to bring it in Run, pardon star and then the fire.

To exit this application, I will have yoga installed for me.

I'm going to delete all of this manual layout code now configured Lee out with Block and they all thought flex grow equals one.

And I did the same thing for the delete button.

It was, say, self thought content view the configure layout and will say the flex direction is watch you flex direction wrote apply layout.

It should do the actual layout for me.

And so, yeah, now you can see that the layout was done very nicely using flex box.

My maybe even give this a little bit of margin like eight points of margin or so, and normally this type of thing would be very difficult to do.

You have to do a bunch of manual math to figure that out, but it's just a one liner here in yoga.

So it's kind of nice to use, Not the next thing we're gonna want to do is actually get this day that failed in.

To do that, we're gonna have to create an ad the button.

So I'm going to go into the navigation bar here back here and add a button for adding new items.

So I created you and Navigation bar by them.

Ad, which is a Europe are button eyes then and you can have that wired up to call it a method, which I will call ad.

So now I would just create a private method ad, and I just put in the log to show when this is tact.

So if I run this again, I just see there's a plus, Adam.

If I tap it, then I'm seeing.

This is showing up in the deep bunker.

And by the way, if you didn't know, you can also use this Di Barker tool.

You can pause the APP.

You can check out the views, inspect it right, click on things, printed description and using P O.

You can print out various items from doc commands.

Check out all the sub views.

So that's a very useful tool if you didn't know about that one.

All right.

Now, what happens when you click on this ad?

I them Well, we're gonna want to present, like a tax field for the user to be able to put in a to do either, you know, we're gonna want some sort of dialogue, and in order to do this, I'm going to bring in another framework.

For those of you who don't know, there's something known as material design from Google and they have all sorts of compliments pre made for you ready to go?

They've actually got buttons already, which I should probably be using.

They've got action sheets.

We use this over at Google all the time.

It's a set of your companies that confirmed to the material designs back.

You can check out other things they have, and they happen to also have dialogues.

They're all set up with Coco pas.

They've got Safeco objective C coat.

And so if I want dialogue and this one looks pretty nice, then I have to do is come over here, put in the pot for this, install it and then I'll be able to start using that dialogue right away.

Someone come in here, put in the material design, dialogue, part run, pollen star.

And you know what?

I'm also going to bring in the button as well, just to make that delete button look a little bit nicer.