Flutter vs NativeScript: a Web Developer’s perspective
#13 — A comparison between Flutter and NativeScript from the eye of a web developer
Two years ago I started the Learning Lab challenge: to learn about one new topic every one or two months. The previous months, after learning about nutrition, I decided to learn the framework Flutter 🙌.
Flutter is a toolkit, made by Google, to build native apps for mobile (iOS and Android), web and even desktop with one codebase. My friend Etienne, challenged me to learn it with him. I didn’t want in the beginning since I am a Web developer, and also I recently learnt how to build mobile apps with NativeScript VueJS (and I loved it!). But I took this challenge as an opportunity to compare NativeScript and Flutter.
Disclaimer: I am originally a Web Developer and I love VueJS! I also built 2 native mobile apps with NativeScript VueJS and I loved the programming experience. So this comparison may be a bit opinionated, I’ll try my best to be objective and give pros and cons in this article.
How to learn Flutter?
Once again, I followed the Learning Lab methodology.
- Finding a mentor
I didn’t look for a mentor since I was going to learn along with my friend Etienne, he is a mobile developer so I consider that he has more experience than me! - Defining the scope of the topic
The scope of this topic is knowing how to start a flutter project and how it is structured and therefore learning Dart’s syntax. - Choosing a learning resource
I only used one resource, the official documentation, it’s very good and complete: https://flutter.dev/docs - Defining a project
I took one of the projects I had in my backlog of ideas that we agreed on with my friend: Infinideas — An infinite feed of crowdsourced ideas (from Twitter and Reddit).
Things Flutter do better than NativeScript
Let’s start with the positive side of Flutter 👍.
Performance
The app built with Flutter is more responsive than the one I built with NativeScript, especially the scroll it’s sleek! Nevertheless, we can see some lag on the animation when opening a webview!
Integration with Android Studio and VSCode
Installing Flutter is very easy and it integrates itself perfectly in both Android Studio and Visual Studio Code thanks to a very good official extension.
Debugging
Debugging is very easy because of this strong integration described above but also because Flutter uses Dart’s language which is typed. It will not compile if types are not respected which is not the case with NativeScript and can lead to some errors and a lot of time for debugging.
Community
Both Flutter and NativeScript have a good community. I was using a lot the NativeScript Slack full of nice and helpful people, and issues on Github or StackOverFlow to solve most of my problems. Nevertheless, Flutter’s community seems a bit bigger since it has more canals, you can see it here: https://flutter.dev/community
Things both Flutter and NativeScript are good at
Let’s be honest, both Flutter and NativeScript are very good framework they come with a lot of good stuff 🙂.
Command Line Interface
Both Flutter and NativeScript comes with good CLI tools, that you can use to install updates, libraries, or just to check if everything is good (type tns doctor or flutter doctor )
Build in the cloud with Codemagic & Sidekick
Thanks to Codemagic and Sidekick you can build and sign your app (Android and iOS) in the cloud without having a Mac! That’s awesome for a windows user like me. Note that I didn’t try Codemagic, it’s more a CI/CD tool for Flutter whereas Sidekick is a GUI tool to manage your NativeScript project (run, build, change assets, icons, …). Also, there is not an official tool for CI/CD tool for NativeScript, you can use any such as Travis or CircleCI.
Libraries
At the time I am writing there are 3246 Flutter libraries and 1200 NativeScript libraries. It’s a strong advantage for Flutter that is younger! But keep in mind that you can use many of the NodeJS libraries with NativeScript since the app comes with a Node runtime. Similarly, Flutter apps can use any Dart library!
Things NativeScript do better than Flutter
Flutter is good, but it has a lot of downsides, at least for the web developer that I am 🤔!
Framework choices
NativeScript is perfect for Frontend Web Developers you have the choice between Angular, VueJS or simple Vanilla JS with XML for templating.
Templating language
Templating languages is for me what is totally missing in Flutter.
You can see the following code written in dart, it is the build method of the widget. It’s very verbose. Note that to make the code more readable we use some style / theming functions that are in separate files.
Here is the same code (without the style also) written in NativeScript VueJS.
It’s about taste and I find that using a tempting language more readable and easier to write. It is easier to avoid forgetting parenthesis!
Note that there were some issues opened in Flutter to ask a templating language similar to JSX, the templating language used in React. Also, someone built one called DSX, you can give a try here: https://spark-heroku-dsx.herokuapp.com/index.html
Separation of concerns
In both previous example I poorly did the separation of concerns, I know! I should have the content out of the template, my bad, it was just faster to do it like this.
Nevertheless, in Flutter, the separation of concerns is harder to do, it’s totally up to you whereas in NativeScript, especially with VueJS you have to deal with.vue files that are separated in 3 sections:
Note that you can also be lazy and put your style directly in your template with NativeScript, but having a style section forces you to put your style there!
Ease to build a web version
Flutter let you use the same codebase to build a web version but the web version will look exactly look like your mobile app as you can see in this example: https://flutter-web-demo.firebaseapp.com
Whereas in NativeScript Vue you can partly reuse some code (the core javascript functions, the vuex store) and then you just need to rebuild the UIs and it goes very fast.
I built in a day this website: https://git.news
Just by reusing the store and core functions of the NativeScript mobile app: https://gitnews.learn.uno
Ability to test on an iOS device from a Windows laptop
Last but not least, thanks to Nativescript Sidekick, I was able to test on an iOS device from my windows device, and that’s awesome.
Check out the result
Check out Infinideas our new app built with Flutter 🚀
Unfortunately, the AppStore didn’t accept our app, that is why we decided to put the source open: https://github.com/sandoche/Infinideas-app (the code quality is pretty bad, so please don’t judge us !)
Also, if you want to compare with a very similar app I built with NativeScript VueJS: GitNews — Trending repositories from GitHub, HackerNews & Reddit, just check this out below.
Conclusion
Both Flutter and NativeScript are very good frameworks. Even though I prefer NativeScript, my friend Etienne enjoyed developing with Flutter 🙂.
So, I would say, if you are a VueJS or Angular developer go for NativeScript, if not go for Flutter. If you liked typed languages go for Flutter or Angular NativeScript with TypeScript, if not go for NativeScript VueJS.
If you liked this post, please click the clap 👏button below a few times to show your support! Also, feel free to comment and give any kind of feedback. Don’t forget to follow me!
Want to see more articles like this one? Support me on Patreon 🙌
