avatarSandoche ADITTANE

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

4354

Abstract

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: <a href="https://flutter.dev/community">https://flutter.dev/community</a></p><h1 id="6ddd">Things both Flutter and NativeScript are good at</h1><p id="1ad9">Let’s be honest, both Flutter and NativeScript are very good framework they come with a lot of good stuff 🙂.</p><h2 id="7a7f">Command Line Interface</h2><p id="443e">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 <code>tns doctor</code> or <code>flutter doctor</code> )</p><figure id="f5a0"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*GyB3mT2rLL6AMaHYd7ap2g.png"><figcaption></figcaption></figure><h2 id="549d">Build in the cloud with Codemagic & Sidekick</h2><p id="95bb">Thanks to <a href="https://codemagic.io/">Codemagic</a> and <a href="https://www.nativescript.org/nativescript-sidekick">Sidekick </a>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.</p><h2 id="12cd">Libraries</h2><p id="17a0">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!</p><h1 id="8d22">Things NativeScript do better than Flutter</h1><p id="8617">Flutter is good, but it has a lot of downsides, at least for the web developer that I am 🤔!</p><h2 id="3931">Framework choices</h2><p id="be01">NativeScript is perfect for Frontend Web Developers you have the choice between Angular, VueJS or simple Vanilla JS with XML for templating.</p><h2 id="b293">Templating language</h2><p id="b6d6">Templating languages is for me what is totally missing in Flutter.</p><figure id="15fd"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*y9eDcwYWQl8Ll4lkzT1aWQ.gif"><figcaption>This is how I felt while building the UIs with Flutter!</figcaption></figure><p id="01e7">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.</p> <figure id="734f"> <div> <div>

            <iframe class="gist-iframe" src="/gist/sandoche/a3dd6f518572fd85971e6c5622209246.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="1529">Here is the same code (without the style also) written in NativeScript VueJS.</p>
    <figure id="1d08">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/sandoche/e91c0f1a6ab9a23f2101aa3abd67549c.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="1d20">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!</p><p id="710a">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: <a href="https://spark-heroku-dsx.herokuapp.com/index.html">https://spark-heroku-dsx.herokuapp.com/index.html</a></p><h2 id="e52f">Separation of concerns</h2><p id="5742">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.</p><p id="2821">Nevertheless, in Flutter, the separation of concerns is harder to do, it’s tot

Options

ally up to you whereas in NativeScript, especially with VueJS you have to deal with<code>.vue</code> files that are separated in 3 sections:</p> <figure id="d774"> <div> <div>

            <iframe class="gist-iframe" src="/gist/sandoche/7dd0193a7f83d93babdacc506aa6f5f9.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="8045">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!</p><h2 id="cabc">Ease to build a web version</h2><p id="4c88">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: <a href="https://flutter-web-demo.firebaseapp.com/">https://flutter-web-demo.firebaseapp.com</a></p><p id="9bf1">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.</p><p id="1a66">I built in a day this website: <a href="https://git.news">https://git.news</a></p><p id="6259">Just by reusing the store and core functions of the NativeScript mobile app: <a href="https://gitnews.learn.uno">https://gitnews.learn.uno</a></p><h2 id="b85c">Ability to test on an iOS device from a Windows laptop</h2><p id="37c3">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.</p><h1 id="f4a2">Check out the result</h1><p id="c8ce">Check out Infinideas our new app built with Flutter 🚀</p><figure id="5c9d"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*FPadxnVIEgw3PshOYTlUiQ.png"><figcaption></figcaption></figure><div id="66f4" class="link-block">
      <a href="https://infinideas.learn.uno">
        <div>
          <div>
            <h2>Infinideas</h2>
            <div><h3>Explore and keep discovering startup ideas, app ideas or business ideas, every day or even every hour. Infinideas…</h3></div>
            <div><p>infinideas.learn.uno</p></div>
          </div>
          <div>
            <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*hMaM5zaibAxGdPLI)"></div>
          </div>
        </div>
      </a>
    </div><p id="b36f">Unfortunately, the AppStore didn’t accept our app, that is why we decided to put the source open: <a href="https://github.com/sandoche/Infinideas-app">https://github.com/sandoche/Infinideas-app</a> (the code quality is pretty bad, so please don’t judge us !)</p><p id="6cd2">Also, if you want to compare with a very similar app I built with <b>NativeScript VueJS</b>: GitNews — Trending repositories from GitHub, HackerNews &amp; Reddit, just check this out below.</p><div id="2402" class="link-block">
      <a href="https://gitnews.learn.uno">
        <div>
          <div>
            <h2>GitNews</h2>
            <div><h3>Explore and keep discovering github repositories, every day or even every hour. GitNews provides an infinite newsfeed…</h3></div>
            <div><p>gitnews.learn.uno</p></div>
          </div>
          <div>
            <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*qyIKYR4MAcXmZvHz)"></div>
          </div>
        </div>
      </a>
    </div><h1 id="c4f0">Conclusion</h1><p id="e48f">Both Flutter and NativeScript are very good frameworks. Even though I prefer NativeScript, my friend Etienne enjoyed developing with Flutter 🙂.</p><p id="09e3">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.</p><p id="41c3"><b>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!</b></p><p id="a48f">Want to see more articles like this one?<b> Support me on <a href="https://www.patreon.com/sandoche">Patreon</a> </b>🙌</p></article></body>

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.

  1. 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!
  2. 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.
  3. Choosing a learning resource I only used one resource, the official documentation, it’s very good and complete: https://flutter.dev/docs
  4. 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.

This is how I felt while building the UIs with 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 🙌

Flutter
Nativescript
Development
Mobile
Mobile Development
Recommended from ReadMedium