 Hi guys, so I have been at the time I run a software development bootcamp in Delhi. We teach people mobile development, web development, data development. So, I sometimes these days there are some small projects to build and needs to off-platform. So, I have explored a couple of different things. I've used native script, React, native flutter also. Basically, this talk is about I have taken a project, exact same apps, built using three platforms. So, React Native is not here because there are a lot of people who already talk about React Native. So, my point was to discuss about things, not React Native, all the other things and give a comparison between them. So, this is a very famous project built by Insta. Insta is an online software learning platform. So, what they do is they have this project you can go to realworld.io and visit. So, it's really nice what they have done is they have created a subset of mediums feature. There are articles, users, people can make comments on articles and they have created a standard API for that. And anybody can build a backend which produces that API and anybody can build a front-end that consumes that API. So, it's a standard API and if you want to learn any stack, you want to learn any backend stack like Django, Node.js, you can make this your capstone project, build this API. Similarly, if you're learning front-end, you can make this your capstone project and finally build this thing. So, this is how it looks like, the web exemplary version. So, this is a list of articles you can favorite those articles, you can sort articles by certain tags, you can sign in and sign up. So, at the core of it functionality is like medium, but like it's not very polished and finished because it's the purpose of it is just to demo that we can build something like this. This is the web version and similarly, you can of course do something very similar to this on mobile. There are like users, you can follow users, then you can see feed, like global feed is everybody's latest post. Your feed means I feed from people who are followed. So, creating articles, all that stuff. So, for a mobile, it would like, I guess, look somewhat like this. You'll see articles and login and register and all that stuff. Basically, everything that's available on the web version, try to create the same thing for mobile. Haven't really worked to create an exceptionally beautiful looking UI. The point was just to be able to build in three platforms and see and then come the results between them. So, before you go to the rest of the presentation, just for context because of course, you will be seeing some numbers like memory users, CPUs, all of that. That's that based on this context that I am pretty experienced with native. And native script, I have only like explored it very recently, but I have like native script you can build using Angular or using Vue. And with Vue.js, I have a lot of experience. So, I have a few libraries I have published which are very popular. So, I know like the best patterns that are used inside Vue.js. So, that way Vue as it is, I know native script, I've been delving a little bit recently. Flutter is something I had read about quite a few times before, but this is actually the first time I am building an app on Flutter. So, like the level of experience is very different on few platforms for me. So, just all the rest of the things based on that might be wrong about a few things on Flutter or native script as well, because not something I know as much as native I know. So, the first thing let's talk about is developer experience. I feel that, you know, I really like this support by David Henry Hansen from the founder of Ruby on Rails and I will trade a few CPU cycles for developer cycles any day that a lot of times when you have a fast-moving product, people being able to build things quickly is more important than 5-10% of performance. That's very important to ship products. That's something I consider myself also important. First of all, ideas that are available to work on these platforms, you can use Android Studio first for Android development native or you can use IntelliJ IDEA with the Android plugin. For native script, native script is not a very IDE dependent platform, right? Most of the, you know, read me and all if you go through in native script, they would suggest everything doing it by the TNS CLI command. So, you can literally use any IDE that is good for web development. You can use WebStrom, you can use VS Code, Atom, Backads. It does not really matter like there is no very deep level integration. There is a Vue.js plugin for an Angular plugin for WebStrom and VS Code both, which work really well, make entire analytics and all very better. Flutter also can work with a lot of IDs. It can work with most of the JetBrains based IDs because there's a Flutter plugin that comes that you can install in WebStrom or IntelliJ IDEA or Android Studio and you can work with VS Code as well. The best experience though is pairing it with Android Studio because then you can do breakpoint debugging and all of that stuff is available only via Android Studio, otherwise it's not available. And the Hot Reload also, if you are using it with some other ID, mostly you have to press the R button to do Hot Reload. Using the Android Studio, every time you save the file, Hot Reload automatically happens. So, best experience is with Android. So, first of all my experience getting started. So, this is something I have done it on a fresh laptop with fresh installation. So, Android, just download the Studio, the SDK and straight away I did not find any problem getting started which even for a, although I am experienced but somebody who is a novice should also not find a problem because if you follow the steps, I did that and I was able to build the Hello World app and there was no hiccups in that and I did not need to go down into the command line to do anything for this because pretty much double click to install and then this GUI based stuff as well. Next, my experience with Flutter was it does have one or two command line steps to install the Flutter SDK. You have to, like on Mac, you have to usually put it in the off slash Flutter folder and like that. After Flutter was installed, then most of the things were pretty automated and smooth in Android Studio GUI based apps are there to create your first project and run it immediately. So, first project worked out of the box. There was no hiccups in that. Native Script, this is something also with React Native also I have faced these days based frameworks. There is a whole set of node modules to download and some version compatibility and all. So, just I was following the step by step instruction as it is available on the website. Even doing that, I faced some problems. The first project that was generated did not build. I had to change my Cocoa Port version. I had to also change the Swift version in my config file. A couple of things need to be changed, even for the first time, even without writing any bit of code. So, that was my experience to get started with these things. One thing is very interesting is these days all these cross platform languages. So, my Native Script one I built using TypeScript. So, if I take TypeScript, Dart, Kotlin and Swift. So, cross platform languages which are very popular people are using these days. Although like the patterns that exist, the architecture patterns that exist, the way people develop on them might be different. But if you look at the core syntactical level, things are much more similar than you might wonder. In fact, just to make this slide I realized that some things are pretty similar like starting off with how you do your lower printing to declaring variables and constants, creating arrays, samples, all of that is pretty easy. You can create hash map kind of things, the object that directly has map. Same thing is available in all of these other languages. Your streaming operations, map reduce filter, they are available in all four languages. Similar syntax for them with classes of course are available everywhere. Again, very similar syntax. Interfaces, there is something specifically called interface in TypeScript and Dart is just create abstract classes. There is no specific way of doing an interface. Make an abstract class, everything is abstract inside that, that works like an interface. One thing I leave couple returns. So, couple returns is something that Dart does not support or I do not know, I have just been using Dart for one time. TypeScript Swift and Kotlin you can do couple returns like multiple value returns kind of thing. Downcasting, something that is like if you check if a variable is of a particular type like this, then inside that you can directly, before this if condition, the language does not know whether this object is of type movie or not. But when inside the if block, current.name kind of things work, this is something that people who use a bit old school language like Java and Objective C complain that they do not have this kind of thing. You have to do a manual cast. All these four languages have proper downcasting support. Next up, what are the common design patterns that exist in these languages because having a good design pattern that a lot of people have tried it out and built on apps of big scale, it helps a lot because you do not have to think a lot where your state will go, where your component will go how the reactivity would be working. So, first of all, talking about native, how many people are native developers? Kotlin, Android were done. So, lot of different design patterns exist. Way too many blog articles comparing these. Mbp, Mbc, Mbpm all are there. If you want to do reactive, then RxJava, RxAndroid that is also available. The most officially recommended one these days is I think the Mbpm one with live data that Google promotes. But everything else is also available. With native script, it depends a lot whether you choose to go with Angular or with Vue because your design pattern would depend on what web framework you are using with native. If native script does not provide its own any design pattern it is up to you to use any framework that you want. For using Angular, people with Angular I think usually prefer to use RSJS and with VueJS there is a Vue model like system and you use Vuex which is the state management pattern that exists inside VueJS. So, it largely depends on which you want to use. Vuex is very flux based kind of thing. So, as I started off with Flutter I felt like this is something that was lacking because I saw some of the people who are most well renowned in the Flutter community and their articles they are all a lot about how to do animations, how to create views very little about what solid design pattern exists for state management and reactivity and all of that stuff. I mean you can go over the internet search you will find there are 3-4 articles all of them have very radically different ways of managing data. Google officially is promoting something called block which is business logic component fighter so that is what I tried using in my project as well. Next comparison of some common tools how they are available across these platforms. So, I think first of all Dragon Drop GUI builder something Microsoft made famous with Windows from. So, of course Android you have got a full page at GUI editor a lot of people start off like they have like 1 or 2 years experience of Android they have been building with the GUI editor only have not gone on manually edited XML file. It is that good. With native script there is no GUI builder available you have to write your templates down in code in HTML XML basically and in Flutter so there is no official support but there is a website called Flutter Studio.app on which you can do some Dragon Drop editing Flutter skeleton you get a Dart file you can export from there and you can paste it into your project and start from there. So, it is not something you can do live with your project but every page you can start off with a basic skeleton you can build on Flutter Studio and import it and continue here. So, there is some third party kind of support. Breakpoint debugging how many of you prefer to just print lines instead of breakpoint debugging how many of you have used breakpoint debugging a lot use breakpoint debugging. How do you do breakpoint debugging where you have race conditions writing and all how do you just use println lines is important feature to have do you think ok. So, with Android of course JVM based breakpoint debugging properly works as you know right. Native script has a breakpoint debugging system that works over web sockets. So, like during debugging the socket connection can break so it is not something I felt very reliable. It is there like as far as it is just checking a box it is there but does not really work very much well. So, with native script apps all the debugging I have done with console.logline only is not something that was helpful to work with in a long duration ok. Flutter has something that works now I do not know somebody who has worked with Flutter a lot would be able to say but my experience was that it works well when connected with Android phones does not work so much well when debugging Android phones. Again it is of course much more reliable than the native script one but not as rock solid as native development works not something like that. Also there are like sometimes you are doing a breakpoint debugging and at the breakpoint there is some field which is basically a getter. So, the getter has to be executed to find out the value those kind of things do not properly work is what I experienced. Ok, auto reload good feature to have good feature to have so of course Android has a very fraud auto reload thing it restarts your activity. The life cycle goes away so you do not actually have auto reload ok. So, the instant thing plus I think if you go if you have a big code base then the instant run stops working. Most of the time if you use like third party libraries bunch of the third party libraries will break your instant run. So, it is not something that works at scale with big projects it does not work. Native script has both the things available it has activity restarting kind of hot reload all available which is a bundle reloaded and very recently just two three months back they have launched proper a hot module replacement which uses the webpack hmr thing which react native has been having for a long time. Native script has that and originally it could only replace JavaScript changes now if you make changes to your XML or your CSS that also gets reflected immediately. So, flutters hmr is something that is I think not comparable to these two things very different in its way of operation and it does not break at any kind of scale and it works really nice data changes styling changes everything works perfectly fine and this is something that works in below one second latency kind of hot reload that is something that the others do not have. Later technical detail though it actually works because when you are running it in a debug mode then the entire flutter vm is copied into your app and your code is directly interpreted in a production app your flutter code is compiled into native and that is put into your app. So, the way they do debug mode that is why it is possible to do hot reload to be nice. So, testing frameworks android native people who have done they would know you can do certain tests on your laptop jvm itself the unit tests if there are things that depends on android or anything classes then that has to be done on the device right that is instrumentation you also have a device connected with that. Flutter also has well supported unit testing patterns the default project that is created has sample tests inside it and with Flutter you can run all your tests without a device without a simulator or device you can run all your tests ui ones and the normal ones as well. Nativescript does not have any inbuilt testing framework or the sample project that is generated also does not contain any sample tests but your usual tools that you use for unit testing in view or angular you can use like mocha or you can use just and all of that stuff so that you can just continue to use those things that will work there are like your testing set up should be pure js it should not have any native dependency most of the testing frameworks are pure js only so that works that is what I do. Now here is something where differences start showing up so data desalization at current time so this is really converting your json or xml to data classes so for android and all you probably be using something like json or faster xml, jackson these kind of things here is something where the javascript based systems like react native and native script is that json does not need to be converted to not concern at all if you are using typescript then you might need to create your class definition files so that you get autocomplete for your json this is something that I felt was a big disadvantage with flutter flutter does not support reflection reflection everybody know right so run time reflection is not available in flutter since reflection is not available that means that you cannot build libraries like json in flutter because json kind of libraries they work with reflection they would be basically at the run time looking at your class object and changing the fields and everything so I will just show the code how it works in flutter in flutter you have to generate the desalization code as part of your source code ok so like native if you have done without json get json object get string get boolean get and kind of so that entire code has to be pre generated inside your source code now if you are working with an api that has say you know 60-70 types of models so you will have 60-70 files for data desalization in your flutter code base that is something that I felt it increases your code base a bit certain fields like date time fields and all you will have to write data and some converters also inside it so there are plugins available these days which does generate automatically these kind of fields but most of these plugins what they do is like you take a json object you copy paste it into the plugin it will generate the automatically desalized code but it will treat the date as a string because it is basically a string it will not realize that it is a date formatted string so those changes you will have to do two way data binding so this is something people who move from web development to mobile development feel like why is it not available here with live data it has just been possible in android having proper two way data binding native script has two way data binding as long as angular or u supports it so flutter there is no you know conventional two way data binding so you know what play the standard two way data binding should support is like you have an input field you have a text field you type into the input field immediately the text field changes without any writing any on text change kind of things ok so that as it is does not exist in flutter there is widget bindings available but not something as simple as two way data binding like connect the input field and output field to the same string object and changes automatically that is not available so varms think just discussed about varms a little while like so flutter will probably never have a varm as long as they do not support run time reflector ok so if they support that then only on varm also it is a similar thing as converting JSON objects again right so being able to generate the queries will need reflection to see the class fields that is not available so no varms available and not as close as lot of varms available any Java varms works and native script so there is a varm called type varm it is a type script in a varm which works so I in fact myself have added the support for native script into type varm sometime back so with flutter you cannot avoid writing any sql at all that is not possible you have to write a bit of sql even if you use sqflight sqflight is the most used library as you see this is something integrating native widgets so integrating native widgets means that you want to put a web view inside your app or you want to put a google maps container in your app so that is something I mean with android of course it is possible with native script also it is possible because in native script the rendering of the views happens via native widgets only so your business logic is j's but the rendering of the views is happening via your proper native widgets so anything that is seen in your screen like let me talk to you in context of android basically everything you are seeing in your screen is basically that extends from the view class right so in native script and even with react native the same thing happens flutter generates its own pixels it is like a game engine kind of a thing it takes the full screen canvas and it uses skia and generates its own pixels which means like if you want a small portion of your app to have a native widget inside it so that is straight forward it was not possible there is a native widget that has recently launched but it works only on android and it is a bit buggy does not really work well that is what I saw so let me do this the walkthrough of codebase just note down this links first I will do it at the end so that amount of time available about this I will go to the benchmark numbers first so if anybody wants to see this app codebase for the Kotlin one it is cv.lk slash rwapp kt the native script one is rwapp ns and the flutter one is rwapp fl cv.lk slash real world app flutter kotlin and native script so it is published on github you can check that out let me quickly go to the numbers I think which is something that would interest everybody most then we will actually I will just show that on my laptop the codebase as well so yeah starting with the debug app size so you see in what the app does there is a list of articles you can comment on the articles login that is all that is available not a very complex app very simple app in fact ok the debug app size as you can see native script one of course is going to be big because it has js runtime inside it flutter one is also big because it has a flutter vm inside it android one is 3.6 mb flutter the numbers change drastically when you go to production mode because now it does not have the flutter vm inside it it is compiled down to native so the app size reduces ios app size is flutter is 62 mb that is because it contains the 32 bit and the 64 bit both things available inside it I do not have a lot of experience with ios I do not know if we can create separate bundles for 32 bit or 64 bit on android you can do that so with native script if you put every architecture into the same app bundle it would be 25 mb or something in size you can make it 10 mb apps for each architecture armb7 you can make separate bundles for that and on play store you can upload it as separate bundles if you want to the native script ios is also pretty big this is the production app size peak cp usage take the numbers in context of the android ones are running on a 4 thread device in ios 12 thread device so peak cp usage usually happens like when the first time the entire list of articles is generated those kind of places so this is the highest spike I have taken I think native script has the highest peak cp usage as far as the ios team this is the consistent cp usage like the average cp usage when you use the app for a long part of the time of course native is going to be lowest is what i saw native script flutter a little bit more now in ios there is a more start difference between native script and flutter flutter does take a lot of cp usage in a 12 thread device 4% is pretty much on the higher side native apps don't take that much cp usage on ios usually this peak memory usage and android apps i don't know why but it will be taking a little bit more memory in my benchmark test that I have done and flutter takes the maximum amount of peak memory usage memory wise flutter does take a lot of memory peak memory, average memory again on average memory also flutter apps take almost double the amount of memory as android could attribute it to me being an experience so I don't probably know all the ways to optimize for memory usage just use flutter for the first time to make an app something about this how many people have used flutter before anybody here used a bit you know about stateless stateful widget there is a nice article I saw in a medium recently about somebody who created a stopwatch using flutter and basically the digits are changing continuously so like the cp usage for creating the stopwatch he created originally it was pretty high when it was he created each digit as a separate widget then it means that the millisecond one changes 100 times every second but the second one changes only once a second then the minute one changes only once every 50 seconds so that brought down the cp usage by I think it made it like I think 10% of the original cp usage and memory usage also dropped so there are things that you can optimize for those kind of things are there okay lines of code has taken to build this app android one is 1100 lines of code but for android of that is XML automatically files are pretty big match parent wrap content all that stuff you have to write a lot of that the native script line so I have given this breakdown because in the native script one there is 230 lines of code is huge which is my components 150 lines of ts code which is for my api calls and all and dts files there is 100 which is basically only the definitions of the json so I can actually still build this app without those part of the source code flutter app code that I have written is around 470 lines 270 of it is this data de-civilization code which also becomes part of my source code anyway this is the lines of code and build tanks this is clean build time with empty build directory android one takes around 52 seconds native script 30 seconds flutter 50 seconds in iOS it takes 30 and 40 seconds respectively this is the warm build so this is not the hot module replacement build this is like you are just made some changes in your file and just built it again without cleaning the build directory that was those kind of build so that is again comparable sizes 8 seconds 7 seconds like that one of the apps none of the 3 platforms I had used too many third party libraries so those factors are not here it is a very simple app these are the times and finally time taken to develop these projects for me this is I think pretty good for the flutter time because it took me less time than it took me to build native something that I have 6-7 years of experience and this is something I have one month of experience so it still took me less time to build using flutter the same thing native script also took me around the same amount of time so that is the amount of time that is taken to build this is done via that called walker time you can install the plugins and it sees the amount of time so just for context this is time of actually writing code so it does not measure the time when your id is open and you are doing something else that time is not factored into it so this net time would have been like something more than this of course thinking about the architecture and all that stuff so I guess that is it in the slides let me just give you a walkthrough to codebase how it looks like thus these slides would be available on speakerdeck.com so native codebase is somewhat like simple app that you build with a view model kind of thing there are the adapters for there is a main activity there are fragments for the home screen the login screen I built it using a single activity only and there is a data class and stuff it is all retrofit based so lot less code for the api gathering and stuff completely made in the so the quarter one has built it using concept of pages which is basically every route you go there is a home page there is a login page and a register page and stuff like that so the model that I was saying is if you take say a json response so there is an article object inside which there is image following bio user name like that so you have to generate this kind of code for every json object that you want to call this is simple because there are only strings if there is something a date time so you have to you can't just do directly equal to you have to convert it into a date object and that so there is usually plugins like android studio has this plugin which can do like Dart beam class form json you paste your json into this RoboPojo generator exists for android data class creation also you paste your json here give the class name and it will generate this thing for you if you need specific converters for any particular field you have to add those things but yeah like most of my code like contains a lot of these data saliation entities basically and the api calls are pretty simple to create kind of things that exist in js you do get articles fetch articles and all that stuff and finally the native script one I think not a lot of people would be familiar but the thing is the app structure looks pretty much like how you create a vjs for intent app again this has like routers so this is something that people who do native development is something that really they don't start off with understanding the concept of router but people who come from a web world they have this url and page kind of notion so you create routers and every route you go to then page opens up here also like api requests are pretty similar you create I think await functions to fetch data here also like models exist but these are simply interfaces for the models the data conversion logic of course stays on in javascript so you don't need that and we can just like it exist in we have seen with flutter there are components which work like widgets so they are single file components there is a template part of it where you write your UI the script part of it where you write the business logic and there is a style part where you can write the CSS really nice thing I felt is like CSS directly works like you can write CSS simply like this or you can attach a font family to your entire app directly from CSS and our people would really love this because using calligraphy and all that stuff here just font family and it works across the entire project you can use things like font or some more material design font based icons those can be directly so yeah I guess that's it anybody has any questions time is up