M1 vs M1 Pro MacBook for Flutter, React Native, NativeScript

hey everybody welcome back alex here now if you are new here then welcome if you're old here then you probably know me from the days i used to have tons and tons of native script tutorials on this channel and i still do but a lot of you have been requesting native script and react native and flutter stuff so today i want to take a look at these two machines the macbook air with the m1 chip apple silicon and the macbook pro the m1 pro chip and we're we're gonna see which of these machines builds react native flutter and native script the fastest and we're gonna compare these two machines both of these machines are eight core machines the macbook air has four performance cores and four efficiency cores and the macbook pro has six performance cores and two efficiency cores so that might play into effect and uh of course the newer ssds are a little bit faster as well so that could also play a role just want to put that out there those are the differences also the macbook pro 14 is a little bit uh bigger so might have a little bit more space to cool things down these builds that we're going to be doing are not very intensive so i doubt that we're even going to start the fans but i am gonna watch the fans here right now it says the fans are off of course the macbook air doesn't have any fans uh it's at 57 degrees and this one is at 47 degrees with the fans off so that's kind of where we're starting things today all right let's kick things off i already installed native script i went through homebrew node installation um both of the native environments ios and android and i have videos on this channel showing you how to do all that pretty recent videos on the apple silicon machines so check those out in order to create a new native script project i have the cli installed it's just ns create uh my my ns app1 and i'm going to do the same thing here and it's create my ns app one i will give it the dash dash ng flag and what that does is it uses the angular template so you can create native script apps using javascript typescript angular react view and svelte by the way all these frameworks you get a native app you get a native app they implement it a little bit differently each of the frameworks but in the end you end up with a native ios and android apps react native and native script use javascript and flutter uses dart okay now we're all cut up let's do this now i didn't give it the time command i could have done that but uh for this create part uh it uses network access to download packages so uh it's not gonna make too much sense anyway now you just need to go into that directory cdmi nsf1 and in order to run this in the ios simulator all you have to do is just say nsrun ios ns run ios now this of course is going to build the projects and start up the simulator the ios simulator let's make sure that it's closed on both of these and it is and i think we're ready to go i'm just going to press enter at the same time now we'll visually see which one pops up first let's go all right searching for devices looks like the m1 pro popped it up first and the os started up first over there m1 is still trying to do this i remember doing this comparison last year when i was doing m1 versus the intel variety and how much faster the m1 was but now the m1 pro seems to be a little bit faster at this and i think uh native mobile app developers or mobile app developers are going to notice this quite a bit that the new macbook pros might actually be better and here we are we've started up the app and that's it the amp is running but we're still waiting for the one on the m1 i'd like to say it was close but it was not that close it took probably an extra 10 or more seconds to uh to get things going on the macbook air m1 okay so that was uh the native script test by the way i will be doing this entire test using ios and if you're interested in android version of this test let me know in the comments down below now moving on to react native i'm not a regular react native user so i'm going to be using the documentation to figure this out and it looks like we're going to be using npx react native init this is using uh the react native cli not expo i know you people are going to yell at me in the comments sorry we're going to be using the cli today so npx react native init my r and app1 okay i set it up the same way here as well and you know what what the heck i know that they're gonna be using the network to do this but we'll time it anyway just in case anybody out there is curious all right we'll do this at the same time and let's go okay we're going through the react native steps downloading template yada yada yada looks like they're uh hand in hand here they're pretty much at the same speed okay macbook air is warming up just a little bit 66 degrees this one's at 55. and they're done pretty much at the same time macbook air is 26.917 seconds macbook pro is at 27.870 seconds so macbook air edges it out a little bit now we're going to use the run instructions let's go into that directory and npx react native run ios let's see which one of these builds the app first and brings up the simulator let's go wow the new macbook pro just pops it up immediately that was pretty much instant definitely as far as the simulator goes and the native ios stuff the new macbook pros are killing it and this is the base model this is the eight processor model it's not even the high-end one that i have back there so big difference there the app hasn't started yet on either one of these still building still says building the app no other information is provided okay the app has launched there is some kind of air going on over there i'm not going to go into uh debugging that not sure what that is metro gave me some kind of error not sure what's going on there but it finished and it launched the app in the simulator the m1 macbook air is still building let's see if it gives me the same error okay installed and it gives me an error no bundle url present so something's not configured correctly if anybody knows you can comment down below i'm not gonna debug this that's not the point of this exercise is to see which one will finish the build first and start up the app so this is clearly a runtime error in the app because the app started up so uh we have i think a winner as far as react native goes good to know on to the next test which is flutter i'm also gonna cheat on this one because i'm not a regular flutter user so what do we need to do first here um oh i downloaded the sdk and i also mapped the path to the sdks bin directory so that uh i can use the command line a little bit of a pain to do that i in my opinion should be pretty easy flutter create my app and uh let's time it why not time flutter create my app here as well and let's go hmm that was really fast both of these however 2.5 seconds versus 2.4 seconds not a huge difference let's go into the directory now if i just type flutter run right now it's going to open up chrome but i wanted to force to open up ios simulator actually i don't think it opens up the simulator i think i need to manually open the simulator have it running and then flutter will detect it and deploy the app to it so a little bit different workflow there and in order to do that i'm gonna just in case delete the android and the web directories here there we go that way we only have one platform to deploy this to so there's no ambiguity okay and what i'm gonna do is say flutter run and i should just build and deploy to the simulator flutter run and let's go i press those pretty close to each other somebody in the comments said that uh your dominant hand might be faster than your other hand by microseconds whatever come on this is all just in good fun it's not super scientific okay look at that this one already opened it up and is running the app we're still waiting for the m1 and finally it catches up so yeah quite a difference there this one says the build was done in 15.7 seconds and this one says 18.1 it's a hello world app folks so if you see a difference like that perhaps there's going to be a bigger difference with a big project so i'm a proponent of the m1 macbook air it's a really nice machine and it's half the price of this one the macbook pro the base model of macbook pro so if you're doing mobile development and you don't mind waiting those differences that we've seen today this might still be a good machine for you however if you're doing mobile development you're most likely running other things like android environment maybe xcode and multiple simulators and emulators so at that point you're going to run into some ram issues with the macbook air because it only has 16 gigabytes now maybe next year there's going to be a macbook air with more ram maybe even an m pro macbook air we'll see but i'd say for mobile development perhaps you have to seriously consider the macbook pros however if you're doing plain javascript development or just front-end development the macbook air is a perfectly good machine for that and i have a video on that as well so if you haven't seen that check that out and if this video was helpful or entertaining to you i'd appreciate a thumbs up and consider subscribing to the channel otherwise i'll see you next time thanks for watching

Channel: Alex Ziskind

Views: 12,656

Keywords: flutter, react native, nativescript, flutter vs, react native vs, nativescript vs, m1 flutter, m1 nativescript, m1 react native, flutter development, react native development, nativescript development, mobile development, m1 developer, m1 mobile development, m1 pro flutter, m1 pro, m1 max, m1 pro react native, m1 vs m1 pro

Id: vKBuwsEEsns

Length: 9min 24sec (564 seconds)

Published: Fri Nov 19 2021