SwiftUI vs UIKit – Comparison of building the same app in each framework

[Music] in this video I'm gonna compare building iOS apps with Swift UI and UI kit now there are lots of subjective ways you can compare these two but I'm not gonna get into that here instead I'll compare them in the only way that's really fair I'm gonna build the same app twice once in Swift UI and once in UI kit I'll do it side by side on the same screen so you can see exactly how they progress don't worry I'll speed up the video by 300% so it isn't too dull the app we're going to build is called high life an app that presents a storefront for buying starships so you can cruise around the galaxy in style it has three milestones and I'll point this out as we progress in the video milestone one is creating a table view controller with the list of starships that are for sale milestone 2 is creating and presenting a detailed view controller that shows a long description of the selected starship and a Buy button and milestone 3 is making the Buy button work by simply showing an alert when it's tapped now before I start I want to say there are three rules we'll be sticking to in this video first I'm not trying to make the two apps perfectly identical UIKit and swift dy are different frameworks so he's give them a little bit leeway second to make things fair I'll be doing almost all the UI kit layout in code and a small exception to this but I explained along the way and finally at no point will I be taking cheap digs at UI kit I have a massive amount of love for UI kit I've been in it for a decade now and it's going nowhere in fact we just saw a ton of great new features announced at dub dub DC instead I'm here for the facts how long it take to build both apps and how many lines of code were required okay that's the intro done let's get to work so here we are on the welcome to xcode screen for both projects on your left is UI kit and on your right is swift UI as a reminder they're both going to make the same project highlife a starship purchasing app and they both are the same thing at 300% speed so very very fast from scratch you can see exactly how it all breaks down anyway it's gonna fly by very quickly our pause at key places to discuss various milestones let's get started I press play now and we'll see how it goes they both start by creating a new project of course I do they're gonna drag in their asset such as their AC a load of pictures of starships and some JSON describing them all in the UI kit version I then go to a storyboard now I know I said they're both working programmatically but that initial view controller the first table view controller is best done in UI kit as a storyboard file it's much much faster you know making a prototype sale registering it and so forth giving a name to finding its tie and so forth in the meantime Swift UI is cracked on by defining an extension to bundle that decodes Jason from the bundle which now UI kit is also doing it's a little helper method I use all the time to make bundle Jason much easier announcement your eyes gone to the next thing which is defining how a starship looks what its name is what its length width height cost description are and so forth and it even defines two computer properties what's the for I had cost the ship is cost with commas in also it's formatted size its length its width and its height at a single string and now sucio eyes aren't the layout tell me about a little bit head of a UI k at this point it loads the jason from his bundle using that help with us-made and then gets busy the finest navigation view plus a list so there's going to be the image of the starship name backed up by some board a color and so forth and IV stack for its title and cost in the uikit land you can see we're also now doing code we're saying give us large titles here's our highlight for our title bar so forth our doing number rows of section and so forth so if you at this point has launched the simulator it's been in confident and boom there we go at five minutes about nine seconds or so so if you eyes hit its first milestone its we're at a table view Scrolls around showing pictures of various purchasable starships with title and cost below it the navigation bar with the words High Life the app name at the top that's the first milestone it's there at about five minutes and nine seconds or so go take a few seconds your I kids we fair isn't far off you can see it's right now loading its image use image just doing a DQ of cell correctly it allows draw a little gray border around the image and so forth it's only a little bit behind it's been on so now it's with your eye goes to the second screen a starship view while UIKit still doing image you layer border width and border color so you can see us with your eyes doing a speech stack of image ship name tech ship name and so forth just whizzing through all that data at this point which is what 607 also give take a few seconds your kit has now also hit milestone one you can see that saying table of data serenity Red Dwarf Enterprise and so forth listening down in a tables you looking good it's been on so it's your eyes now doing though the by button is pull out cone and they're saying by the ship look about that later on perhaps add a bit padding around it give it a custom light purple background color and so forth you I kiss now doing did select row act to push to it's a new controller so at this point we have Swift ey is now doing a bit of extra work and actually pause ahead to explain what it's doing because this is not required in fact it's a bit a bit of a cheat really I'm doing Swift UI some extra work I'm making since do i do things aren't required it is loading the starships JSON file I should just doing H there cuz I made a slight typo but how much real quick in a second it's loading it's JSON data into the preview for the starships view now this is not required okay I'm adding extra time here to Swift UI realistically but I think those the lexico previews are extremely valuable for fast development so it's worth taking a time to really customize those previews and make them look good anyway let's spin on this do I still customizing the layout and I'll mean we see a real layout boom a go let's cease with you I can see already has now got the second screen looking nice right there inside Xcode and that's that Swift you I preview it word is customizing not required but does really really help make things look good at this point 7:48 you can see the swift UI layout looks kind of right you know it's got tech title up and then the size of the thing and description and the Buy button if you look you can see the descriptions text goes edge to edge of the fill phone right it doesn't have any padding on the sides of it and doesn't look great now you like you have the same problem shortly this poor coda house hasn't hit that problem yet but in Swift UI as you can see right now I've gone to the ship description of texting where it says line limit nil I'm going to add directly below dot padding add some padding here please and that's all it takes to fix it in Swift ey so press play their spin on there's the padding looks much better then we buttons we can push to that view from the first screen this point UIKit is going through stack views making things look nice penis a queue to all possible edges which isn't great at this point by the way our 830 or so a little bit slow there sorry the swift UI version has now really finished milestone 2 it's made that detail screen look fantastic out of the box just great UI kit as you can see is doing stack view trailing I can straight equals who yada yada yada lots of Auto layout code makes that view pin to the top leading and trailing edges and more let's spin on ice with UI now is on to the third milestone but it's gonna lurk when you buy a ship so let's do that now it's saying you know it's yours and so forth while UI kit is modifying alignment of text and so forth boom okay at this point I know 925 you will take 10 seconds or so Swift UI has now finished that Marcel is now complete the third milestone it's had a table view the first milestone it's a detail view second milestone and now made alert saying it's now yours that's a third milestone so about 925 or so and I look afterwards how the exact time was so the UI is done UI kit is still can through a UI label with referred font size and so forth for each side let's banan see how you are you I could get on so you can see it's modifying the label here it is making a right font for it and so forth give you the right color of course it is and then a description text making that have a number of lines zero and so forth lots of code lots of boilerplate code to do fairly basic things in swift UI it's got add a target to the by ship method which is gonna be improved as a sort of empty method for now just the co compile so you can hit that second milestone there's a custom background color again that's all purplish color that's a custom font and there is by the way content edged insect that has pause there for a second let's get a co completion is how we do bigger buttons and uikit we had a bit of padding around the button so it's more clear what's going on it's been on so now watch the important bit we're saying to stack view add the image then the name then the size in the description then the Buy button and finally add a little bit of spacing here in there better hope things look nicer more less matching the swift UI version and empty by ship method so it looks correct at this point boom we have the second milestone in UI kit so you can see we have serenity appearing on the screen nice and clearly again hit the same problem swift UI kit that text is going edge-to-edge inside the phone doesn't look great but there's now a bonus problem the Buy button also goes edge to edge now in UI kit we face this problem you nearly always first google it second cry in despair you realize there is no easy fix the most common thing to do here is a subclass UI label to handle for rect yourself you add padding around it by hand and that's a really great really flexible solution here though that's more trouble than it's worth that's more work than I want to do in the amount of time I have to get to get a fair time for UI kit so we do a simpler version that's not really flexible a long term but it's good enough here which is we're gonna wrap the UI label inside a container view a wrapper view and then attach constraints the label so it's leading and trailing at left and right edges have 20 points of space in from that view so when a stack view places this can wrap of you it'll go edge to edge and the label inside that will be squeezed in slightly only 40 points less wide on either side and the same thing to the Buy button as well let's spin on so here we go making scription wrapper that's the uiview turning hammock off that's translates advertising mask into constraints we then make custom constraints for our description top anchor is gonna match the wrapper top anchor and bottom anchors the wrappers on one Wonka but a leading and trailing r20 in on either edge causing that little bit of padding from its parent view once that's done we do the same thing for the buy button because I have the same fix we had a by rapper that does the same thing we add the buy buttons of that turn off hammock for the buy button my constraints by hand again top and bottom again we've fixed a zero but it's how we'll add a center X anchor so button stays in the middle adapt its width basically math text inside it's much lighter way of working and finally they still work boom here's the final version so now you can see we have the Sulaco there's the text party on the left and right edges critically and the buttons now it's natural width or either being stretched to be edge to edge it looks much much nicer though uikit now has hit its second milestone at about 16 minutes or so let's spin on the final milestone of course the shore alert which is trivial in UI kit like in UI alert controller add some text to it make a new UI alert action with an OK button inside and then call present' on that and that's all just gonna wire up straight away that's the end so at about 1650 or so I'll tell you the exact time in just a minute your ad kit has finished and that's a fairly traditional app for UI kit nothing too fancy here there's a significant difference in time I think even without exact time as you can see UI kit took a lot longer to finish and took more code as well anyway let's look at the details so it took me nine minutes 25 seconds to build the app using Swift UI versus 16 minutes 46 seconds to do the same thing using UI kit you lucky it wasn't twice as long but it wasn't far off maybe 80% or so but speed isn't everything the do I kid take more or less code than Swift UI let's find out if we subtract the two files that are identical in both projects that's the starship struct and my JSON bundle helper extension then remove all comments and whitespace the uikit program was 98 lines of code that's not bad although if you recall I did take a small shortcut by doing some of the work in the storyboard but in comparison the Swift UI version was 52 lines of code just over half the size so Swift ey was significantly faster to make and took a lot less code I think it's pretty clear it's done very well here even better that same coke and now be ported to Apple's other platforms for I'm done I want to add one important note of caution please remember there is no silver bullet in programming yes Swift's UI is quite brilliant in so many things but UI kit will still be around for a long time yet and it's still getting amazing new features from Apple so if you want to get a job today or indeed any time in at least the next year if not 18 months or 2 years you still need to learn UI kit and that's the end of the video if you enjoyed it please hit the like button and also consider subscribing to my channel I make lots of videos to help you improve your skills as a swift developer you

Channel: Paul Hudson

Views: 113,321

Keywords: swiftui, uikit, swift ui, xcode, ios, versus, vs, comparison, compare, difference, differences, app, programming, tutorial, compared, ui kit, uitableview, uiimageview, uitableviewcontroller, list, vstack, image, simulator, preview, codable

Id: qk2y-TiLDZo

Length: 15min 14sec (914 seconds)

Published: Mon Jun 17 2019

Reddit Comments

[u/soulchild_]

An interesting comparison by /u/twostraws! He highlighted parts where SwiftUI is a lot faster (loading JSON in preview, setting stackview constraints etc)

[u/cyancynic]

I have a gut feeling that SwiftUI will be great for simple things but some of the really complex stuff I've been asked to build in the past is going to look like legacy perl by the time I'm done.

I don't think it will scale.

[u/XunlaY]

That's a nice comparison. I would like to see such a comparisonn between Interface Builder + UIKit vs SwiftUI.

[u/GangnamStylin]

Nice comparison!