DEV Community: Martin Jablečník

Most popular Flutter state management libraries in 2021

Martin Jablečník ・ Feb 11 '21

Flutter vs React Native community in 2022

Martin Jablečník — Sun, 02 Jan 2022 13:22:49 +0000

One year ago I made a survey comparing size of Flutter vs React Native community of various social network sites because still between developers can exists myth that Flutter community is small or smaller than React Native.

Why is useful to know size of developer community?
Because this can be crucial requirement for new developers (finding some multiplatform mobile framework) or companies which would like to choose it for their application development.

Large community means that many of problems can be already solved and new developers have a good support in finding any problem solutions or finding a new job oportunities.

Companies gain valuable information about how many developers are interesting about this tools and how many developers can be potencionaly hired.

I walked through this social platforms:

Reddit
Stack Overflow
Dev.to
Facebook
Twitter
Instagram
LinkedIn

For developers are probably important Reddit, Stack Overflow and Dev.to where can find a lot of information about news or how to fix some bugs.

For companies can be useful Facebook, Twitter or LinkedIn where they can find their potencional employers.

For every site I compare number of people/followers of the site which says me size of the community.

Here are my data:

Flutter: 84.0k followers
React Native: 86.8k followers

Stack Overflow

Flutter: 111,456 questions
React Native: 120,793 questions

Flutter: 25,131 questions with no answers
React Native: 31,119 questions with no answers

GitHub

Flutter:

stars: 134K
forks: 20K
contributors: 957
commits: 27 034
contributors only for last year (2021): 68

React Native:

stars: 100K
forks: 21.6K
contributors: 2 270
commits: 23 859
contributors only for last year (2021): 37

Here it is interesting because React Native have a lot of contributors contributing for a short time but Flutter have more contributors contributing for a long time.
I compared also number of contributors only for last year (2021) and I found that Flutter project had almost 2 times more contributors than React Native.
Result is that Flutter project is growing faster in number of commits then React Native.

Dev.to

Flutter:

posts published (in tag detail): 2037
posts published (in overview of tags): 3713

React Native:

posts published (in tag detail): 2342
posts published (in overview of tags): 4312

This is interesting because I found that Dev.to show in 2 different places 2 different values for one same thing :D

Source Source

Facebook

Flutter: 188K people and 39K people
React Native: 159K people and 46K people
React: 103K people and 36K people

This is interesting because I found that Flutter developers are very active on Facebook. More than React or React Native developers.

Twitter

Flutter:

followers: 167.5K
tweets: 1 734

React Native:

followers: 130.4K
tweets: 579

Source

Source

React Native - Instagram

Instagram

Flutter:

flutter.developers: 44.9K followers

React Native:

reactnativeworld: 10.4K followers
reactnative.modules: 6.8K followers

Flutter: 36.5K members and 21.4K members
React Native: 44.9K members

Note: I count only clear React Native groups without mixing with ReactJS.

#flutter #reactnative #mobile #programming

Conclusion:

So after comparing this two communities in various platform I can say that Flutter and React Native communities have almost same sizes.

You can say of course that React community is bigger but it is due to ReactJS library for web but nobody which is building web with ReactJS want to also create a mobile apps with React Native. Hence I try to not mix ReactJS and React Native people into one group.

And when we see into data of GitHub, Facebook or Twitter so we can say that Flutter developers are a little more active and Flutter is growing up by incredible speed:

And is also more loved:

If you want to compare this survey with my survey from last year, you can go into this link:

How large is Flutter vs React Native community in 2021

Martin Jablečník ・ Mar 3 '21 ・ 4 min read

5 Reasons why I don't use GetX for application state management in Flutter

Martin Jablečník — Sat, 01 Jan 2022 17:20:06 +0000

In my last article I created large overview through all possible state management solutions and GetX is second the most popular State management in Flutter community right now.
So why I am not using it?

One year ago I started develop my first Flutter application and I found GetX as a good tool. But unfortunately one year later I found out GetX is not so good solution for me.

I was finding also why GetX is so controversional in Flutter community in Reddit and I found that exists many people which have also some not good experiences with GetX or their opinions are different: Opinion 1, Opinion 2, Opinion 3

Here are some my personal points why I am not using GetX:

1) Documentation isn't actual

In documentation is not everything what is already implemented and it is missing for a long time there.
For example:

In GetX 4.2.0 were released big changes with Navigator 2.0 but without documentation. Exists many opened issues where people request some documentation for Navigator 2.0:

https://github.com/jonataslaw/getx/issues/2077
https://github.com/jonataslaw/getx/issues/2067
https://github.com/jonataslaw/getx/issues/1643
https://github.com/jonataslaw/getx/issues/1380

But there are not any answer from main maintainer of GetX.
Version 4.2.0 was released in July 2021 and today is January 2022 and issues are still without answer.

There is only one small piece of documentation for one month in WIP from some one volunteer: https://github.com/jonataslaw/getx/pull/2032

2) Nobody care about issues

How you can see in previous point, in GetX can exists a lot of issues which can be also duplicit. Here it is obviously that nobody cares about issues like: solving, answering, tagging, remove duplicity, etc.
If maintainer doesn't have a time so he can entrust or find somebody for it -> GetX have a very big community but nobody did it.

3) Many opened pull requests without activity

All this PRs are ready to merge for a long time during writing this article (1.January 2021)
But nobody check and merged it yet.. Why?

We can also see that main author is merging mostly only himself PRs instead of solve others firstly..:

4) GetX is doing too much things

I feel this project is too big for only one person.
GetX is solving:

State management
Depency injection
Routing
Internationalization
making http requests
many utilities for: dialogs, snackbars, bottomSheets
and maybe many more..

But maintainer is only one and he doesn't have a time for fix or improve absolutely everything.
This all is job for minimal 3 full-time people.
But without sponsors you cannot maintain for full-time on this project like author of Bloc package for example..

5) Too many bugs

All previous points are leading into one result:

In this big project will be a lot of bugs.

When come some update so it is danger that bring some bugs. Documentation is not updated and when you create some issue you can wait for a long time then it will be fixed (if sometimes)

Conclusion

After some my experiences I left GetX and started to use Modular for Routing and Dependency injection with Triple for State Management solution. After it I didn't find any problems..

I hope that this my article is useful for you and if it's true let me know it by give a like or some comments below. ;-)

Most popular Flutter state management libraries in 2022

Martin Jablečník — Sat, 01 Jan 2022 01:37:05 +0000

Edit: After one year I released new updated article here:

Most popular Flutter state management libraries in 2023

Martin Jablečník ・ Feb 10 ・ 5 min read

#dart #flutter

Flutter is only toolkit which focus mainly into how to show your Statefull or Stateless widgets but doesn't solve a lot of problems with state management or architecture design of your application like some other frameworks.

You are very free in how you will manage states and community around Flutter bring a lot of solutions how to do it.

But many new developers can be confused too large choose of different packages solving state management problems so I decided to make this overview of the most popular Flutter state management packages with small description about them.

I hope that you gain good overview about all packages which exists and will be helpful for choose right solution for you.

Bloc

Bloc is probably the most popular state management solution which learn you also architectural pattern: Presentation, Bussiness Logic, Data (Repository, Provider)

Pros:

Easy for separate presentation from business logic
Great documentation with many examples
Dependency injection: Uses Provider internally to make it easy provide and access blocs throughout the widget tree.
Can persist and restore states
Support for undo and redo states
Widely used by Flutter community
Active development with many sponsors

Cons:

Maybe hard to understand for new developers
Too many boilerplate code

Popularity:
GitHub: 8282 stars
Pub.dev: 1400 likes

Links:
Official Page: https://bloclibrary.dev
Documentation: https://bloclibrary.dev/#/gettingstarted
Github: https://github.com/felangel/bloc

Development activity:

GetX

GetX is second most popular state management solution and very fast growing in popularity. Is also the most controversional and evoking conflicts in Flutter developer community because many developers hate this package due to antipatterns, bad testability or documentation, but many developers also love it due to simplicity and very short code which you write so then you feel more productive.

I found some interesting opinions about this package in Reddit so you can make your own opinion: Opinion 1, Opinion 2, Opinion 3

Pros:

Very simple for new Flutter developers
Very short code
Big popularity
Solving also dependency injection

Cons:

Package is solving too many things => Vendor lock into only one big package
Without any sponsors => When author stop support of this package so you can rewrite whole your app from scratch
Too big package which have too many issues
Development isn't very active
When you find some issue you can wait too very long time for fix
Bad reputation in Flutter community
Documentation is not actual

Popularity:
GitHub: 5687 stars
Pub.dev: 7479 likes

Links:
Official page: Only GitHub and Pub.dev
Documentation: Only Github README
Github: https://github.com/jonataslaw/getx

Development activity:

States_Rebuilder

Pros:

Separate presentation from business logic
Can persist and restore states
Support for undo and redo states
Built-in dependency injection system
Development is active

Cons:

Is doing too much things (not only state management)
Only one maintainer without sponsors
Not so popular (Isn't widely used)

Popularity:
GitHub: 442 stars
Pub.dev: 332 likes

Development activity:

Provider

Pros:

Make InheritedWidget more simple
Widely used and popular
Supported by Flutter team

Cons:

Some problems which are solved in Riverpod

Popularity:
GitHub: 4007 stars
Pub.dev: 5734 likes

Links:
Official page: Only GitHub and Pub.dev
Documentation: Only Github README
Github: https://github.com/rrousselGit/provider

Development activity:

Riverpod

Pros:

Simple
Similar to Provider

Cons:

Isn't widely used
Is not so mature as Provider => Recently left its experimental status
Isn't fully stable yet
Can be used in production but with caution (more info here: https://github.com/rrousselGit/river_pod#is-it-safe-to-use-in-production)

Popularity:
GitHub: 2289 stars
Pub.dev: 1282 likes

Links:
Official page: https://riverpod.dev
Documentation: https://riverpod.dev/docs/getting_started
Github: https://github.com/rrousselGit/river_pod

Development activity:

Modular + Triple

Modular and Triple are 2 different packages but work great with together.
These packages (and many others) are developed by Flutterando Community which is huge Flutter community from Brasil.
Triple is simple package for manage your state by Segmented State Pattern and Modular provide DI and Routing with modular project structure.

Pros:

Very simple development without boilerplate code
Developed by community of developers
Separate presentation from business logic
Can persist and restore states
Support for undo and redo states
Very nice dependency injection with Modular
Very nice documentation
Triple is one simple package so you can use it also without Modular

Cons:

Triple is only one year old so it isn't known yet a lot.

Popularity of Modular:
GitHub: 1015 stars
Pub.dev: 789 likes

Popularity of Triple:
GitHub: 87 stars
Pub.dev: 63 likes

Links for Modular:
Official page: https://modular.flutterando.com.br
Documentation: https://modular.flutterando.com.br/docs/intro
Github: https://github.com/Flutterando/modular

Links for Triple:
Official page: https://triple.flutterando.com.br
Documentation: https://triple.flutterando.com.br/docs/intro
Github: https://github.com/Flutterando/triple_pattern

Development activity for Modular:

Development activity for Triple:

GoRouter + GetIt + Triple

If you don't like Modular or you don't want to be dependent on library which is doing 2 different things. So this is good alternative combination I think.
Triple you know from previous point and GoRouter with GetIt are doing almost same things like Modular.
This combination is good if you don't want to be depending only on one big package maintained by only one developer (like GetX or States_Rebuilder).
But you have 3 different nice things developed from different developers and anyone from these packages can be changed anytime with some alternative.

Pros:

Very simple development without boilerplate code
Developed by more different developers
Separate presentation from business logic
Can persist and restore states
Support for undo and redo states
GoRouter and GetIt make same nice things like Modular
GetIt is quite popular alternative for Provider

Cons:

Triple and GoRouter are only one year old so they aren't known yet a lot.

Popularity of GoRouter:
GitHub: 274 stars
Pub.dev: 442 likes

Popularity of GetIt:
GitHub: 833 stars
Pub.dev: 1742 likes

Links for GoRouter:
Official page: https://gorouter.dev
Documentation: https://gorouter.dev/getting-started
Github: https://github.com/csells/go_router

Links for GetIt:
Official page: Only GitHub and Pub.dev
Documentation: Only GitHub README
Github: https://github.com/fluttercommunity/get_it

Development activity for GoRouter:

Development activity for GetIt:

Cube

If you are fan of GetX so probably you will like also this package because it is very similar to GetX state management. I am very curious if author of Cube will also want to create some big framework similar as author of GetX or not. :-)
Cubes doesn't rely on RxDart but use of ChangeNotifier because it is a feature already available in Flutter.

Pros:

Very simple for new users
Have some interesting features which GetX doesn't have
Author doesn't have a bad reputation

Cons:

Young project (It is not known yet)

Popularity:
GitHub: 12 stars
Pub.dev: 19 likes

Links:
Official page: Only GitHub and Pub.dev
Documentation: Only Github README
Github: https://github.com/RafaelBarbosatec/cube
Pub.dev: https://pub.dev/packages/cubes

Development activity:

Meedu

Meedu is very interesting young project. In one package solves: State Management which is very similar to Riverpod, Dependency Injection which is very similar to DI from GetX and contains also Reactive programming which is very similar like State management in GetX.
So if you like Riverpod and GetX DI this package is right for you ;-)

Pros:

Simple as Riverpod
Simple DI like in GetX

Cons:

Very young project
Router module doesn't support Navigator 2.0

Popularity:
GitHub: 17 stars
Pub.dev: 61 likes

Links:
Official page: https://flutter.meedu.app
Documentation: https://flutter.meedu.app/docs/5.x.x/intro
Github: https://github.com/darwin-morocho/flutter-meedu

Development activity:

MobX

MobX is a state-management library that makes it simple to connect the reactive data of your application with the UI. This wiring is completely automatic and feels very natural. As the application-developer, you focus purely on what reactive-data needs to be consumed in the UI without worrying about keeping the two in sync.

Pros:

Very simple
Nice for begginers
Have some sponzors
Without boilerplate code

Cons:

You have to rebuild code after every change
Developer activity looks very poor

Popularity:
GitHub: 2051 stars
Pub.dev: 758 likes

Links:
Official page: https://mobx.netlify.app
Documentation: https://mobx.netlify.app/getting-started
Github: https://github.com/mobxjs/mobx.dart

Development activity:

Redux

Pros:

Maybe good for somebody who already know Redux

Cons:

I didn't found any good documentation
Low development
Not very used in Flutter community
Last commit is old for 10 months

Popularity:
GitHub: 1527 stars
Pub.dev: 330 likes

Links:
Official page: Only GitHub and Pub.dev
Documentation: Only Github README
Github: https://github.com/brianegan/flutter_redux

Development activity:

Packages which you can find but development is in too early stage:

Bolter

Packages which you can find but development is not so active:

Conclusion

I tried many various solutions and I had some bad or very bad experiences with some solutions.

Here are some my personal short opinions about every solutions which I described here. You can agree with me or not:

Bloc	Quite good, but for somebody it can be too complex or too boilerplate code
GetX	For somebody it can be too controversional and too many bugs in one package with incomplete docs
Provider	I am not sure if use Provider or Riverpod
RiverPod	I am not sure if this is really ready for production
States_Rebuilder	Too much things in one package like GetX
Modular + Triple	Very nice solution and I didn't find any problems yet after half year of usage
GoRouter + GetIt + Triple	Very nice alternative for previous solution, but I didn't tried it yet
MobX	Very nice solution but package is finding maintainer and I am not sure about future of this project
Redux	I feel that this package is already abandoned
Cube	Package is in too early stage and I am not sure if development will be also active in the future
Meedu	Package is in too early stage and I am not sure if development will be also active in the future
Bolter	Package is in too early stage

Thank you very much for read this my long overview and if this article is useful for you, let me know it by give a like or some comments below. ;-)

Flutter Modular Architecture

Martin Jablečník — Sat, 04 Dec 2021 17:07:54 +0000

If you are working on some big project, you can find that this project is bigger and bigger after some time and your controller, repository or view folders are full of hundred files..

Normal MVC project structure:

But with Modular you can split your application into more modules/features by scope and make your software more readable.

Project structure with modular:

Here is example of my project structure with modular:

Where in core folder I have classes, widgets and utils which are shared for every module. And every module is one peace of my project which is very simple and replaceable without any big impact in other modules.

Modular also solve dependency injection and routing between modules which are very nice solved.

Here is example of my main module file:

And my other module files:

Modular also works with any type of State Manager like Provider, RiverPod, Bloc, Cubit, Triple, MobX, GetX, etc..

More about Modular you can find here:
https://modular.flutterando.com.br/docs/intro
https://github.com/Flutterando/modular

Take screenshot during Flutter integration tests

Martin Jablečník — Sun, 24 Oct 2021 22:40:52 +0000

I would like introduce you a simple manual about how take screenshot during integration tests in Flutter.

From Flutter 2.5.0 you can take screenshot in your integration tests by very simple way.

First if you didn't setup integration tests yet, setup it by this manual: https://flutter.dev/docs/cookbook/testing/integration/introduction

When you have already it, you can continue by this way:

1) Replace your test_driver/integration_test.dart by this code:

import 'dart:io';
import 'package:integration_test/integration_test_driver_extended.dart';

Future<void> main() async {
  try {
    await integrationDriver(
      onScreenshot: (String screenshotName, List<int> screenshotBytes) async {
        final File image = await File('screenshots/$screenshotName.png').create(recursive: true);
        image.writeAsBytesSync(screenshotBytes);
        return true;
      },
    );
  } catch (e) {
    print('Error occured: $e');
  }
}

It add onScreenshot event handler into your integration tests and after take your screenshot it will save it into screenshots directory in your project. (This directory will be created when doesn't exists.)

2) Go into your integration_test/app_test.dart and add:

final binding = IntegrationTestWidgetsFlutterBinding();
IntegrationTestWidgetsFlutterBinding.ensureInitialized();

This must be before all your testWidgets when tests are initialized.

3) Into your test add:

await binding.takeScreenshot('test-screenshot');

If you run your tests on Android device, you must also add convertFlutterSurfaceToImage() function before takeScreenshot() because there must be converted a Flutter surface into image:

await binding.convertFlutterSurfaceToImage();
await tester.pumpAndSettle();
await binding.takeScreenshot('test-screenshot');

For iOS or web you don't need this convert function.

4) You can create a simple helper function for take screenshot in various devices:

import 'dart:io';
import 'package:flutter/foundation.dart' show kIsWeb;

takeScreenshot(tester, binding) async {
  if (kIsWeb) {
    await binding.takeScreenshot('test-screenshot');
    return;
  } else if (Platform.isAndroid) {
    await binding.convertFlutterSurfaceToImage();
    await tester.pumpAndSettle();
  }
  await binding.takeScreenshot('test-screenshot');
}

So your tests can finally looks like this:

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';
import 'package:example_integration_test_screenshot/main.dart';
import 'helper.dart';


void main() {
  group('Test App', () {
  final binding = IntegrationTestWidgetsFlutterBinding();
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

    testWidgets('Test with take screenshot', (tester) async {
      await tester.pumpWidget(MyApp());
      await tester.pumpAndSettle();

      await tester.tap(find.byIcon(Icons.add));
      await tester.tap(find.byIcon(Icons.add));
      await tester.tap(find.byIcon(Icons.add));
      await tester.pumpAndSettle();

      await takeScreenshot(tester, binding);
    });
  });
}

Conclusion

So that is all. After run of your tests you can see a generated screenshot in screenshots/test-screenshot.png file:

I hope that this article was useful and you can support me by ❤️ or some comments below. 🙂

Most popular programming technology stacks

Martin Jablečník — Sun, 05 Sep 2021 20:29:52 +0000

If you are on the start of your programming career, you are probably thinking about what technology stack you should to learn.

You can be:

Application developer(multiplatform or specific platform)
- Desktop (Windows, Linux, MacOS)
- Mobile (Android, iOS)
Web developer (Firefox, Chrome, Safari, Edge)
Backend Service developer
Game developer
System developer

As application developer you can choose if you want to develop software for some specific platform (Mobile, Desktop, Web) or for all platforms as Multiplatform software developer.
Here is list of the most popular programming technology stacks:

Desktop

Windows

If you want to develop only for Microsoft Windows, you will need to go into Microsoft stack:
Language: C#
Framework .NET and Windows Forms
Editor: Microsoft Visual Studio
OS family: Windows
This technology is good for every fans of Microsoft.

MacOS

If you want to develop only for Apple Mac OS, you will need to go into Apple stack:
Language: Swift
Framework SwiftUI
Editor: Xcode
OS family: MacOS
This technology is good for every fan of Apple.

Mobile

iOS

If you want to develop only for Apple iOS, you will need to go into Apple stack:
Language: Swift
Framework SwiftUI
Editor: Xcode
OS family: iOS
This technology is good for every fan of Apple.

Android

If you want to develop only for Android, you will need to go into Android stack:
Language: Java or Kotlin
Framework: Android SDK
Editor: Android Studio
OS family: Android
This is good for every fans of Android applications and you can develop your software on any operating system.

Web

Pages

Language: JavaScript
Framework: jQuery, Wordpress
Editor: Any editor (MS Code, WebStorm or Atom)
OS family: Browser in any platform
This is for everybody who love web technologies but want to create only simple web pages (blog, personal or company page, eshop, etc).

Application

Language: JavaScript or TypeScript
Frameworks: React, Vue, Angular or Svelte
Editor: Any editor (MS Code, WebStorm or Atom)
OS family: Browser in any platform
This is for everybody who love web technologies and want to create PWA (Progressive web application) or SPA (Single Page Application).

Cross-platform

If you want to develop for Android, iOS, Windows, MacOS, Linux and Web browser with only one code, you can choose from this stacks:

Any Mobile

Language: TypeScript
Frameworks: React Native
Editor: MS Code
OS family: Android, iOS
This is for everybody who already know React with web technologies and want to create some multiplatform mobile applications.

Any Desktop

Language: TypeScript
Frameworks: Electron
Editor: MS Code
OS family: Windows, MacOS or Unix like OS
This is for everybody who already know web technologies and want to create some multiplatform mobile applications.

Any OS (All mobiles and all desktops)

Language: Dart
Framework: Flutter
Editor: Android Studio or MS Code
OS family: Android, iOS, Fuchsia, Windows, MacOS, Unix like OS
Dart is very universal programming language and with Flutter it is very strong technology for creating really multiplatform applications.

Other alternatives

GNU/Linux

If you want to develop for some Linux distro, you will need choose from two technologies:

Gnome:
Language: C/C++/Vala
Framework: GObject
Editor: GNOME Builder
OS family: Any Linux distribution

KDE:
Language: C++/QML
Framework: Qt
Editor: Qt Creator
OS family: Any Linux distribution

This is good for everyone who is fan into Free & Open Source software and want to develop software for freedom world.

Alternative mobile phones (Ubuntu phone, Plasma mobile, Sailfish, pureOS)

Language: C/C++/QML/Vala/Python
Framework: GObject or Qt
Editor: GNOME Builder or Qt Creator
OS family: Any Linux distribution
This is for every fans who love open source software and any mainstream alternatives.

Conclusion

I know it is a lot of technologies which you can learn and use.. But this is only for programming Mobile, Desktop or Web applications..
We have also a lot of technologies for develop Games, Backend services or Embedded systems.
These I want to add into my next articles. If you are interested in about this so you can follow me and you will be notified for my next articles.. ;-)

Best CSS frameworks in 2021

Martin Jablečník — Mon, 09 Aug 2021 13:35:12 +0000

During development of web Frontend you can see a huge amount of CSS frameworks which you can use for simplification of your development.
But which you should really use? That can be very hard to answer this question.
I decided to try answer it by comparison of all frameworks what exists right now.

Here is my list:

Bootstrap

Latest stable version: 5.1.0
Github stars: 152K
Development: active
Long of active development: 10 years
Active maintainers: 2
Contributors: 1236
Number of commits: 21K
License: MIT
Used by: 2,662,212 Github projects
Reddit followers: 12.4K

Foundation

Latest stable version: 6.6.3
Github stars: 29.1K
Development: without activity for last 1 year
Long of active development: 8 years
Active maintainers: 0
Contributors: 1028
Number of commits: 17K
License: MIT
Used by: 24 Github projects
Reddit followers: -

Bulma

Latest stable version: 0.9.3
Github stars: 44K
Development: low activity
Long of active development: 5.5 years
Active maintainers: 1
Contributors: 362
Number of commits: 1631
License: MIT
Used by: 160K Github projects
Reddit followers: 71

Tailwind CSS

Latest stable version: 2.2.7
Github stars: 45.4K
Development: quite good activity
Long of active development: 3 years
Active maintainers: 1
Contributors: 184
Number of commits: 4K
License: MIT
Used by: 265K Github projects
Reddit followers: 4.5K

HTML5 Boilerplate

Latest stable version: 8.0.0
Github stars: 51K
Development: low activity
Long of active development: 11 years
Active maintainers: 2
Contributors: 258
Number of commits: 2123
License: MIT
Used by: 2.1K Github projects
Reddit followers: -

Metro UI

Latest stable version: 4.5.0
Github stars: 6.8K
Development: very active
Long of active development: 6.5 years
Active maintainers: 1
Contributors: 51
Number of commits: 3010
License: MIT
Used by: 173 Github projects
Reddit followers: -

UIkit

Latest stable version: 3.7.2
Github stars: 17K
Development: active
Long of active development: 6.5 years
Active maintainers: 2
Contributors: 32
Number of commits: 4606
License: MIT
Used by: 8.8K Github projects
Reddit followers: 17

Materialize

Latest stable version: 1.0.0
Github stars: 38.6K
Development: very low activity
Long of active development: 4 years
Active maintainers: 0
Contributors: 261
Number of commits: 4K
License: MIT
Used by: 76.2K Github projects
Reddit followers: 22

MUI

Latest stable version: 0.10.2
Github stars: 4.4K
Development: without activity
Long of active development: 4 years
Active maintainers: 0
Contributors: 28
Number of commits: 647
License: MIT
Used by: 2.4K Github projects
Reddit followers: -

Cirrus

Latest stable version: 0.6.2.1
Github stars: 812
Development: active
Long of active development: 4,5 years
Active maintainers: 1
Contributors: 8
Number of commits: 904
License: MIT
Used by: 0 Github projects
Reddit followers: -

Montage

Latest stable version: 17.2.1
Github stars: 1.5K
Development: without activity for 1,5 years
Long of active development: 7 years
Active maintainers: 0
Contributors: 35
Number of commits: 5697
License: BSD
Used by: 0 Github projects
Reddit followers: -

Pure.css

Latest stable version: v2.0.6
Github stars: 21.8K
Development: very low activity
Long of active development: 1.5 years
Active maintainers: 0 (project is finding maintainer)
Contributors: 64
Number of commits: 659
License: BSD
Used by: 4.1 Github projects
Reddit followers: -

Semantic UI

Latest stable version: 2.4.1
Github stars: 49.5K
Development: without activity for 3 years
Long of active development: 6 years
Active maintainers: 0
Contributors: 201
Number of commits: 6684
License: MIT
Used by: 12.6 Github projects
Reddit followers: -

Fomantic UI

Latest stable version: 2.8.8
Github stars: 2.6K
Development: active
Long of active development: 9 years
Active maintainers: 1
Contributors: 252
Number of commits: 8K
License: MIT
Used by: 1K Github projects
Reddit followers: -

Material Components Web

Latest stable version: v12.0.0
Github stars: 15.7K
Development: active
Long of active development: 8 years
Active maintainers: 2
Contributors: 380
Number of commits: 6835
License: MIT
Used by: 6K Github projects
Git repository: https://github.com/material-components/material-components-web

Material Design Lite

Latest stable version: 1.3.0
Github stars: 31.8K
Development: without activity for 5 years
Long of active development: 2 years
Active maintainers: 0
Contributors: 178
Number of commits: 2872
License: Apache
Used by: 11.1K Github projects
Git repository: https://github.com/google/material-design-lite

Skeleton

Latest stable version: 2.0.4
Github stars: 18.3K
Development: without activity for 7 years
Long of active development: 1 years
Active maintainers: 0
Contributors: 25
Number of commits: 167
License: MIT
Used by: 0 Github projects
Git repository: https://github.com/dhg/Skeleton

Conclusion

So from 17 the most known CSS frontend frameworks we can choose only 9 projects which are under active mainteinance yet:

Name	Activity	Number of maintainers
Metro UI	very active	1
Bootstrap	active	2
UIkit	active	2
Material Components Web	active	2
Tailwind CSS	good activity	1
Cirrus	good activity	1
Fomantic UI	good activity	1
HTML5 Boilerplate	low activity	2
Bulma	low activity	1

Probably on the first place is Bootstrap which have the most active developers and community around this project.
On second and third place are UIkit and Material Components Web which are maintained very well with two maintainers.

But if you want to use some alternative to this 3 top frameworks, you can choose:

Metro UI -> if you want to have design like Metro UI in Microsoft Windows
Tailwind CSS -> where you can style your project in very different way
Cirrus -> if you want to have some lightweight framework
Fomantic UI -> if you want have successor for Semantic UI

Also you can try Bulma or HTML5 Boilerplate but only for personal home made projects because there is not so big development like in prevous frameworks and is here a risk that it become dead after some years like other frameworks from my list.

How large is Flutter vs React Native community in 2021

Martin Jablečník — Wed, 03 Mar 2021 10:49:24 +0000

In some blogs or articles I am often reading that Flutter community is small or smaller then React Native community.

So I decided to create a small survey where I went through various social sites and compared how Flutter community is really large opposite to React Native.

Here are my results:

Flutter: 63.8k
React Native: 70.5k

StackOverflow

Flutter: 78,544 questions
React Native: 95,080 questions

Source

Source

Flutter: 19,383 questions with no answers
React Native: 25,101 questions with no answers

Github

Flutter:

stars: 114K
forks: 16.3K
contributors: 811
commits: 22 905

React Native:

stars: 93.7K
forks: 20.6K
contributors: 2 259
commits: 22 050

Here it is interesting because React Native have a lot of contributors contributing for a short time but Flutter have more contributors contributing for a large time.
Result is that both projects have a same number of commits.

Dev.to

Flutter: 1220 articles
React Native: 1723 articles

Gitter

Flutter: 12662 people
ReactNative: 1958 people

Facebook

Flutter: 129.7K people
React Native: 111K people

Twitter

Flutter:

follovers: 131K
tweets: 1344

React Native:

followers: 104.1K
tweets: 551

Flutter: 13.6K people
React Native: 23.1K people

Instagram

Flutter: 20.8K followers
React Native: 3369 followers

Conclusion

Overview:

	Flutter	React Native	Difference	Winner
First stable release	12.4. 2018	27.3. 2015	3 years	RN
Reddit followers	63.8K	70.5K	6.7K	RN
StackOverflow all questions	78 544	95 080	16 536	RN
StackOverflow questions without answer	19 383	25 101	5 718	Flutter
Github stars	114K	93.7K	20.3K	Flutter
Github commits	22 905	22 050	855	Flutter
Dev.to articles	1220	1723	503	RN
Gitter active users	12 662	1 958	10 704	Flutter
Facebook followers	129.7K	111K	18.7K	Flutter
Twitter followers	131K	104.1K	26.9K	Flutter
Twitter tweets	1344	551	793	Flutter
LinkedIn group followers	13.6K	23.1K	9.5K	RN
Instagram followers	20.8K	3369	20.4K	Flutter

So after look into the table overview we can see that both these communities have very similar size right now.
But Flutter community is expanded through more various social platforms and is more active then React Native community.

React Native is older by 3 years and have a huge source of JavaScript people from React web framework but they are not so active like Flutter which popularity and number of commits in Github have same number per half of time.

IT development evolution for last 30 years

Martin Jablečník — Mon, 15 Feb 2021 16:53:29 +0000

This is my a little thoughtful about most usage programming languages for last years and what will come probably in the future.

Before 1990 were C, C++, Objective-C the most popular programing languages but problem was that this languages was too hard to learn and software development was too long.

1990-2000

Began to appear other simpler languages with easy syntax and faster development. That was: Visual Basic, Python, Ruby or Java which had goal to make programming more simple with ability to support more platforms with one written code.
In these years also were born the everyone's known web technologies: HTML, CSS, JavaScript and PHP for creating simple web pages.

2000-2010

Java was very successful among companies so Microsoft created C# as concurrent for Java in Windows.
Also web technologies like PHP and JavaScript started be a very dominant in web development because these languages was only one solution for creating of web pages during 90s years. - But Ruby and Python started creating their web framework solutions (Django and Rails).
JavaScript have a great jQuery library and support of AJAX.
Apple created iPhone with iOS and started a new era of mobile development following by Google with Android.
Facebook created its social network.
So now we have a lot of different languages for different platforms (Desktop, Mobile, Web).

2010-2020

Web technologies growed up very fastly and JavaScript was rapidly evolved to creating web applications (React, Angular, Vue), Mobile Apps (React Native, Cordova, Ionic), Server side services (next.js, nest.js, nuxt.js, express, etc..) and Desktop applications (Electron).
Of course PHP is still here thanks Wordpress or Joomla solutions for creating of web pages but fullstack web developers can use only JavaScript thanks to node.js
Of course Microsoft is again developing TypeScript as a better concurrent to JavaScript and Xamarin for multiplatform mobile development.
Also Microsoft after failure with Windows Phone is changing its opinions about open source software and now love Linux!! because probably want to entice all developers to close into its Azure cloud solution.
And suddenly here are appearing some new languages like: Kotlin, Swift, Dart, Rust and Go as successors for Java, Objective-C, JavaScript or C/C++ with improved properties like: abilities for functional programming, cleaner code, better performance or null safety solution.

What will be in the future?

Now we have a lot of platforms, programming languages, frameworks or development tools for create any possible solution.
Software companies are racing with each other who bring better multiplatform solution:

JetBrains with Kotlin Multiplatform
Microsoft with C#/.NET Cross-platform
Google with Dart/Flutter
Facebook and community around JavaScript/TypeScript (React/Vue for web, React Native/Cordova, Electron)
Scade with Swift for Android

Between years 2020-2030 will be probably run fight between these all technologies which will be provide better cross-platform support like Java vs C 30 years ago and which will be only solution for only some special things on some platforms.

Because when companies want to create some applications or services. They doesn't want to pay a lot of different developers focused to different platforms (Web browser, Windows, Linux, Mac, iOS, Android, Wearable or other things)
They want to have a few developers which can create same code for wide range of platforms with one simple technology. And young developers don't want to learn a lot of different languages for different platforms.

This will be very interesting fight because every these technologies support very big companies:

JetBrains with Kotlin is very improving Java language,
Microsoft with C# is very dominating in the most used of desktop operating systems,
Google with Dart/Flutter and Go is dominating in Web browsers and mobile operating systems
Javascript/TypeScript with React have a strong community of web developers
and Apple is very strong Brand with personal computers and mobile phones.

Finally what will be the best we will see after years but every from these technologies are interesting and can give you some nice solution.

But only developers decide which will be among TOP 10 technologies after next 10 years.
I hope it will be technologies were are the most developers sutisfactioned:
https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/
https://insights.stackoverflow.com/survey/2020#technology-most-loved-dreaded-and-wanted-languages-loved

P.S.: This video can be interesting for somebody ;)

5 Reasons why I use GetX for my application state management

Martin Jablečník — Thu, 11 Feb 2021 18:28:29 +0000

As I wrote in my last article

GetX is one from 3 of the most popular and active maintained state managers and here are some reasons why I like it:

1) Increasing popularity:

Although is here only one year and is younger then Bloc or Provider, his popularity grow very rapidly.

Below in the graph you can see how the popularity is growing compared with other State managers in last 3 years:

Link to source

You can see that GetX is growing up with the same speed as Bloc one year ago which is the most popular state management library in Flutter today.

So we can suppose that this grow will be continue also in the future.

2) Simplicity

For me as for beginner was very hard to work with Bloc, understand how streams works and create some useful app in short time.
With Provider it was better but result code wasn't so pretty and readability was a little worse.
But with GetX was development very pleasure. Firstly I understood a lot in very short time. I cannot write a lot of code and I can fully focus to my application development without finding why something doesn't work.

3) Very short code:

Here you can see a simple comparison how number lines of code take the one same list_detail_mvc application written in different state managers:

Link to source

You can see that with GetX application take only 132 lines of code which is lower than same application written with any other popular State manager.

So it can be also reason why use GetX because with less code you can have also less bugs and better overview in the project.

4) You don't need a StatefulWidget:

With GetX you cannot use a StatefulWidget.
Instead of it you use GetxController with Obx or GetBuilder for state updates and GetView which you can use instead of StatelessWidget.

All together give you a cleaner code without any useless boilerplate:

Source code is here

5) Not only a state manager:

GetX contains all ecosystem useful packages where is: State manager, Dependency manager, Navigation manager, Internationalization and other very handy functions which make your development more simple and coding will be faster without any useless boilerplate code.
So you cannot use many different packages but you import only one and use everything what can gives you.
For more info look into:
GetX Ecosystem - State Management
GetX Ecosystem - Dependency injection

Or official GetX documentation

If you also want to see some code, you can look into my Github repositories where I have a lot of small projects written with GetX when I has been learning with Flutter.

I hope this article is useful for you and if yes, let me know it by give a like or some small comments below.. ;)

Edit: After one year later I released my new article about GetX:

5 Reasons why I don't use GetX for application state management in Flutter

Martin Jablečník ・ Jan 1 '22 ・ 3 min read

Most popular Flutter state management libraries in 2021

Martin Jablečník — Thu, 11 Feb 2021 12:33:44 +0000

Edit: After one year I released new updated article:

Most popular Flutter state management libraries in 2022

Martin Jablečník ・ Jan 1 '22 ・ 9 min read