I Learnt Coding Four Application Frameworks | Here’s What Happened…
Creating apps is a huge project. One major part which affects the project would be the framework being used. I want to settle this down once completely.
So for those of you who have been following me for a while, you would have noticed that I was not able to upload any content both on youtube and on medium. You would have also noticed that I have not written any articles about app development. Well here is the reason. I have been learning applications more intensely. Now, I had learned to develop applications using UWP, Windows Forms, and WPF. But, my major goal today is to learn three completely different frameworks, from scratch……
So… The Victims?
Yeah. Don’t expect me to try everything. For the experiment to be as documented as possible, I’ll be considering a limited number of frameworks.
- Flutter — Dart
- pyqt — python
- qt — C++
If you wanted more than this, I’m sorry. I was super exhausted just from these. You see, by the end of the experiment, I need to have electron, flutter, and qt learned in a detailed way. It’s not just to go around and build a simple app with a button.
What I Wish I could have also covered
I think I had to cover up cocoa along with all the above ones. I wanted to use that so badly, that I tried doing it in a VM, but unfortunately, it did not work properly and so I had to let go of cocoa since I don’t have a mac.
What I know and don’t know about app development
Well… Honestly, I don’t think that I am a beginner. I have developed apps, and I know how it works. By I btw, have used react.js before. I love the way it is integrated with HTML and can be used efficiently provided you know it well.
But, I also have to confess, that I am not near too advanced. So there might be places where I get stuck which you guys can easily get away with. I think I am an intermediate making mistakes and documenting them online…
How can You believe Me?
I mean… Sure, this is a doubt which would rise to many people. What if I’m just faking it? What if I don’t know anything and I’m just trying to make stuff out? I understand that. For this, I’m gonna make some YouTube videos out on my YouTube channel “FadinGeek” so…… major videos on app development coming out soon just to show on camera that I
Ok… This was it. I had to get started with this and, started preparing to learn them. I got started with planning how to learn them but before that, here are some topics to clear out…
The first thing to decide, what IDE or Text Editor am I gonna use? Well, for this you’ll have to understand my workflow. I usually never use an IDE. I install an extension required and the compiler needed or the debugger in the editor itself and this would do my work. So for this, I’ll be going with vscode.
How much time did this take? Honestly, I never expected this to be so long. This took a LOT of time. I mean about 3–4 months! Yeah… most of which was scrolling through documentation, and watching videos.
I don’t want you guys to get this wrong. I’m not just learning the frameworks partially. I’m learning this completely from start to end, in such a way that I can build an application from scratch without any problem.
How did I learn and what sources did I use? Well, I did not use anything to be paid for as such. The YouTube videos and the official documentation were good enough. I will mention more about this in a separate section.
Classifying, Planning, and Documenting my Journey
This is how I would learn. I’m gonna go one by one, framework by framework and write each of my experiences, obstacles, and so on… I do this by recording my desktop(literally record using obs-studio) and then going through the video and writing what I think is necessary for this article. Yes… It takes a lot of time and effort since I’m not just learning it, I’m also extensively documenting it and thinking of each word to put in here…
Talking about the way I’ll learn,
- Watch some huge full tutorials (the ones on YouTube which are about 5 hrs long)
- Watch some smaller videos to get some more clear tutorials
- Have a brief look at the documentation. (I mean… the docs are too long to read completely)
- Create a project and get started with some practicals
- go through the documentation or video if necessary again.
- Build a simple application
Something to remember, my goal is not to build an app using all the above frameworks. My goal is to completely learn all the frameworks.
Installation and Creating a Project
installing electrons was not difficult(thanks to Winget). All I had to say is “Winget install OpenJS.NodeJS” in the terminal and that’s it. To create a project, I had to navigate to a folder and say “npx create-electron-app ProjectName”. I was now ready to start my electron project.
flutter is a dart-based framework that relies on google and JetBrains products like chrome and android studio. Although you can develop desktop apps in it, it is mostly popular for mobile applications.
There is a lot to install here, all manually. There was nothing like an installer or directly installed through winget. I had to download it, paste it into an src folder, add the environment variables, and finally, fix issues and make flutter work. I ALSO had to install android studio, google chrome(even though I had the edge), accept the licenses, and then install an emulator(if you are developing a mobile app)
With that done, saying “flutter create ProjectName” in the terminal would create a project, and… you can get started with it in the editor. Quick note, I’ll be using Android Studio instead of vscode for flutter.
PyQt is… well… a python framework. It lets use a special software tool called qt designer, a simple drag and drop tool used to design the app layout.
Installing pyqt is probably easy. Go ahead and install python(pip) and then just say “pip install PyQt5” in the windows terminal. This would only install the framework. Now, time for the designer software. type “pip install pyqt5-tools” in the terminal, and that should install some extra tools along with the GUI software required.
QT — C++
This is c++ based framework created by the same people who created pyqt(as you might have guessed). Even this just like pyqt has a designer software, which can be used to create a simple layout for qt projects. It is very similar to pyqt. From the installation to getting started. The only difference I could find is the language installation and some differences in the looks of the layout of the GUI software.
Starting My Journey
Watching The Videos
Watching the videos were… Well… Let’s say chill. All I had to do to listen and write if important. Talking about the videos I watch, it’s all simply searched on YouTube. I’ll link them up-down.
Flutter — Starting with flutter was a bit rocky. First off, I have not learned dart, so I now have to learn a full language before starting… I started with a YouTube video “Dart Programming in 4 hours | Full beginners tutorial” made a channel Mike Dane and it gave me a fairly well knowledge about dart. Now, for flutter I went with another YouTube video “Flutter Crash Course for Beginners 2021 — Build a Flutter App with Google’s Flutter & Dart — YouTube” from the channel Academind. It gave me most of what I wanted. This took about 3 days to watch, learn and be confident in it.
PyQt — Getting started with it, I just have to learn how qt designer software works and also how to get started with pyqt using python. I’m pretty familiar with python, so I didn’t have to learn the language. All I had to learn is the framework itself. Again, I learned the framework and designer software using some videos like “PyQt5 FULL Modern Gui Tutorial #1 — Welcome Screen [for beginners] — YouTube” from channel Code With with Hala, “PyQt5 Full Course in 7 Hours | Python GUI Course — YouTube” from the channel Geeks Coders. This took me about 2 days.
Qt(c++) — This was easy since I had learned pyqt. So, Once installed, it is easy for me to understand the basic layout of the qt creator and also even the c++ since it’s very similar to pyqt. Although here in c++ we have an in-built text editor. I used the video “Qt Tutorial: C++ Notepad App — YouTube” by channel Derek Banas and “Qt5 C++ GUI Development Full Course For Beginners | C++ GUI — YouTube” by channel Parwiz Forogh to learn enough of qt. It’s put in c++ and a better in-built editor. This took another day for me.
Looking at the documentation was not too difficult. All I had to do is just read the important ones. It’s NOT to read everything(I don’t want to take ages for this).
Electron js — If I had to say which documentation is the easiest to go through, it’s probably electron js. It has small but important examples to look at, a developer checklists to see where I am in learning electron js and other sections like resources, testing and debugging, etc. It’s quite beginner-friendly and easy to go through. Of course, since it’s open-source we also have a separate section which talks about contributing your code to the source code of electron as well.
Flutter — I felt flutter to be a bit unclear(maybe cause I’m not familiar with dart and had to look atdart docs separately). But it had YouTube videos, organized documentation, and was fun to use. Yeah… the experience was short and simple to go with. It took me about another day to go through the docs and read it. (of course, I was tired of reading by the end of the day and… you know what I mean)
PyQt(python)/Qt(c++) — PyQt documentation was long, boring, but informative. And just like a flutter, this also had some videos about 20 minutes long on average. The experience was a mix of both exhausted doing the same thing throughout the day and exiting since once this exhausting part is done, I could now get started with some real applications. It was simple though since I had enough knowledge on python unlike what it was on flutter with dart. I have to say… this was very similar to qt c++ since it was developed by the same company. This made the documentation, videos, and everything else similar, including the framework itself. The only difference is the language used.
Developing an Application
This was the part I was waiting for. All of my learning lead to this and was curious to see what I would do… This took the most time. I took months and months to get used to these frameworks. I tried around creating web browsers, a screen recorder, and a simple to-do list.
Electron.js — The framework with the most potential
The framework was smooth easy to use and… unlike some of the other nodejs based frameworks, lightweight as well. Some obvious things to learn here(if you already know HTML, CSS, and js) are learning about some libraries like the menu template, which gets the tabs done for you… Well, you have to of course specify the tab names and logic using a list.
The disadvantage which I found here is that it’s very bad, if not the worst framework out of the above frameworks when it comes to… speed. It has a fairly noticeable slow interface when compared to flutter or qt. Also, it would be awesome if there was something like a GUI, especially for electron…
Flutter — The best for Mobile Phones, but fairly good for Desktop as well…
I mean… having a look at the framework and the importance given to it when it comes to desktop, flutter is very underappreciated for its desktop app development. Sure, flutter is probably the best when it comes to mobile applications, but it’s also very good in desktop apps and yet I see no person using flutter without an emulator.
Something which also helps me when it comes to flutter is that it takes care of the looks, it makes sure that it has a good consistent theme. It also has ios(Cupertino) theme pack which would help you have a consistent theme in iPhones or other apple operating systems which took away some work from my hands to script CSS or whatever.
Again, the same complaint I have with electron, I have it here. It would be really good to have a separate GUI application that could help me out with basic layouts and creating my app…
PyQt (python)/Qt(c++) — A paradise for Designing before coding
This is by far the only application framework(which I have worked with) which has a software which has a software tool that gives you a drag and drop interface to create your application layout.
You start with setting up your simple layout and then work on it by dragging and dropping whatever is needed (labels, buttons, and so on). You can then save it as a .ui file which you have to convert later to a .py python file using the terminal command pyuic(5). once converted, and opened in the editor, you get this pre-coded python file with all the boring/basic stuff done for you. You just have to add some logic and code some elements which you this is necessary. Also, after some time I realized we could style an element here using two ways.
- By using vanilla CSS script or embedding CSS
- using the Python libraries from the qt framework
Both of them were awesome, although I found CSS styles were much easier. Come on… I’m used to CSS for a long time. It might be vise versa if you are used to python more than CSS. Apart from that adding logic was simple, and easy. This was the same in c++. Nothing changed except the language syntax(I mean… of course, there are “some” changes but it’s too similar).
The disadvantage, it’s relatively difficult to learn when compared to flutter or electron. STOP… Don’t get me wrong, this is very simple and easy, but… flutter and electron just win when it comes to ease while coding(at least for me). So, it depends.
Conclusion — What Is the Best (for me)?
I mean I have to this was a tough call. We have one framework which is very easy and uses HTML, the other one does all the theming and styling for you, and the other gives you a drag and drop interface making your life 100 times easier! Come on! That’s a tough competition which cannot be solved by no-brainers like me… So, what did I do? Well, I decided to not take anything…
Electron is the best for applications involving a lot of dynamic work, so I’m gonna use electron at that point. Flutter is most used for mobile phones so I’m gonna use it there. And QT applications are the best for a generic application so I’m using it at that point…… Don’t ask me what language I would use. I don’t know.
If you are interested in the videos I’m making on these, make sure you follow my YouTube channel, “FadinGeek”, where I post more tech/dev/design/editing videos. With that said, we finally come to the end of this article. I hope you enjoyed it,
You’re Awesome :)