The Tools I Have Used for Web, Desktop and Mobile App Development so Far

The Tools I Have Used for Web, Desktop and Mobile App Development so Far

In web development, you never really know everything, and that is a good thing. I imagine if there was a way to know everything there is to know in web development, it would be so boring. Therefore, you have to start somewhere, and you can follow my path if you like šŸ˜ø. (Honestly, just learn from my mistakes)

Below is a list of what I have interacted with so far.

āš ļø I am actively editing and updating this article.

WordPress

WordPress is almost always the first choice when you start building websites. It is simple: pay for hosting, click a few buttons, and start adding content; no coding at all unless you need to perform advanced customization.

Since I wanted a blog fast, I went with WordPress by default.

The process was super simple. I bought a hosting package on HostGator and installed WordPress. Customizing the theme to my needs was very easy. I started sharing some articles on technology almost the same day I created the website. You then switch between themes until you find your favorite. WordPress is that welcoming.

What I Enjoyed While Using WordPress

  • Free tools and active community
  • I enjoyed the ease at which I could publish articles, upload and resize images
  • There is a plugin for almost everything you need
  • Comments are sweet
  • Sharing is simple
  • Advanced SEO tools out of the box
  • Amazing dashboard, you can even integrate a Google Analytics dashboard

Drupal

It was sometime in 2015 when I started playing around with Drupal. From some articles I had read, it was considerably faster and more capable than WordPress.

I installed a few plugins and ended up with a cool looking forum. The forum was fast and pretty, but the thing with forums is... creating a community. I am poor in that area. So I forgot about it after a few months.

The Good Parts I Recall About Drupal

  • It was fast
  • Great plugins
  • Easy to get started

Bootstrap and Foundation

There is nothing much I can say about these frameworks. Yet, they were all the rage since I started making websites. Up to this day, I don't see how they can speed up your work. Even if you choose to use CSS frameworks, you will end up writing a lot of CSS either way. Prototyping is another thing though, and you will love CSS frameworks for something of that sort. The top CSS frameworks are currently Bulma CSS and Bootstrap 4.

If someone wants to design a website and avoid the headaches, I think they should just visit w3schools and learn CSS. It is not that hard. Especially given flexbox and CSS grid.

jQuery

I don't know a lot about jQuery. Maybe it's just me. I can use jQuery to do a lot of things, but I cannot write it all without referring to the docs. But this was an awesome new way to learn the power of JavaScript. I could write a few lines here and there to add or modify features of my WordPress blog, but that is pretty much what I did with jQuery.

jQuery has influenced the evolution of JavaScript so much.

Jekyll

When Netlify launched, they did a lot of content marketing around the concept of JAMstack (JavaScript, APIs, Markup). JAMstack, in their view, is the next frontier. They did not stop at marketing and guides, they built amazing tools to help people make web applications using JAMstack.

To be fair, people have been making static websites since the Internet was born. But JAMstack takes static websites to the next level. With JAMstack, you have your static website foundation on which you build the dynamic stuff like chat, comments, payments, orders, booking forms, and many more.

The hottest contestant in the static website generation was Jekyll when I found JAMstack. I did not host on Netlify directly though, I only embraced their concept of JAMstack yet hosted the first Elevatika website on Github Pages. (I had failed running WordPress websites for they were expensive to host, and decided to give JAMstack a try). Github Pages was free too, nothing competes with free, right?

Jekyll was a nice experience and all, but I did not stretch its capabilities that much. I started feeling limited and wanted something else within a year of using it.

Why I Enjoyed Jekyll

  • Fast development
  • Themes
  • Many gems
  • Modular website generation

Ionic Framework and Cordova

Each time I tried to make an app using Android Studio, I struggled to do basic things. I think it is because, in an Android project, there are too many files to track. Also, it is not directly obvious what kind of view gives you what. With these struggles, I jumped in and learned the Ionic Framework and Cordova since I realized I could utilize my JavaScript, HTML, and CSS skills to make an app.

I even used Cordova in some parts of my final year project in college.

What I Loved About Ionic Framework and Cordova

  • Web in mobile :wink:
  • Productivity
  • Multi-platform

Vue.js and Vuetify

When Google introduced Material Design to the world through Android 5.0, I was truly impressed by what I saw. So, when it came to working on a personal project, was using Vue.js, I came across Vuetify and loved it! Vuetify's API is easy to use and you don't have to do a lot to get started, for they have starters for the mobile development using Cordova, desktop app development using electron, and many others. I picked up both mobile and desktop starters.

Vue.js is very easy to get started with too, naturally, and you can make anything with it from simple interactive elements to fully-fledged apps. The first time I tried Vue, It took me less than a week to make a simple app, from zero experience using Vue. I love it.

What I Love About Vue and Vuetifyjs

  • Beautiful and light apps by default
  • Getting started fast (starters)
  • Easy and intuitive APIs
  • Vue CLI is amazing too
  • Learning Vue is easy
  • Vue
  • Vue
  • Vue

Nuxt.js

After meeting Vuetify, I played around with the starters and used their Nuxt.js starter to make 3 websites for my clients. I loved the results. The static site generation is great (Pre-rendering).

I haven't used Nuxt.js for the last two years, though, so I don't know what happened there. I don't recall any downsides; the projects I made had less than 10 pages each, so no issue. The build time on Netlify was on average between 2-3 minutes.

Good Parts of Nuxt.js

  • Static site generation
  • Productivity
  • Vue

Gatsbyjs

I had no idea what GraphQL was until I found Gatsbyjs and Hasura. Gatsby.js is one amazing static site generator and has a lot of plugins. Their docs too were so inviting. I love purple.

I made a few websites using it, but then I stumbled upon something I did not like: the website's build time was too long, sometimes taking 7 minutes. Also, the JSON data required to be downloaded by the clients made the initially impressive Google Pagespeed test results underwhelming. (The blog that encountered issues had a little over 100 posts.)

Spoiler: Gatsby.js is amazing, but I am already migrating some sites that don't need React from Gatsby to Hugo.

Sweet Bits of Gatsby

  • Enchanting GraphQL
  • Image processing is the next generation
  • React
  • The docs are so cool!
  • Plugins

React

Gatsby.js uses React, and building Gatsby.js sites was my way of learning React. Almost the same time I was exploring Gatsby.js, hooks came out and I found React to be very welcoming. However, I think JSX with its style props can easily get cumbersome. I would advise one to write styles somewhere else.

What I Like in React

  • Productive
  • Functional components
  • Hooks

Hasura

I had an opportunity to make a Tours and Travel website powered by Hasura. I had just come across GraphQL and loved how easy it is to load data. I loved and still love Hasura.

Don't know what Hasura gives you? Hasura is there for you when you only want to worry about the frontend. You get a GraphQL API (100x cooler than REST API) for free. You only have to deploy the Hasura engine to a server.

One challenge I encountered was authentication. I don't like having to write the authentication. It's very boring and easy to get it wrong. I wish the Hasura engine came with a baked-in authentication solution, with some basic user management so it makes it unnecessary to write backend code.

The Good Parts of Hasura

  • GraphQL
  • Webhooks
  • Console
  • Easy schema management
  • Easy deployment
  • Subscriptions
  • Fast

PostgreSQL

Hasura engine requires PostgreSQL. You can connect it to an existing PostgreSQL database or use the Docker Compose config, which includes PostgreSQL by default.

For production databases, I will always recommend you use PostgreSQL.

Why Choose PostgreSQL

  • Fast
  • Secure
  • Wide support
  • Great ecosystem (Hasura and PostgREST)

React Native

With a powerful backend, Hasura, I was able to make a nice app with realtime features using React Native. I used Apollo to subscribe to the data from Hasura. Within two weeks, I had a prototype of a mobile app ready. That is how fast you can write an app using React Native. And the apps are fast too. The downside, however, is the large apps you build. A simple app can easily weigh more than 30MiB. I like Cordova in this end, I have made some apps as small as 5MiB. It is just that React Native apps are faster.

Why I Use React Native

  • Native apps
  • Multiplatform
  • React
  • Easy styling (Many CSS supported)
  • Productivity
  • Easy to connect to web APIs

Electron

Electron allows you to make desktop apps using web technologies. It is even more powerful when you combine with frameworks like Angular, Vue, or React. When you throw something like Vuetify or React Material on there, you will love the speed at which you will move from idea to product.

Visual Studio Code, Microsoft Teams, and many other desktop apps use Electron. It is so capable and has nice APIs. The only challenge is the initial lag as you start the apps. But overall, it is a worthy sacrifice for productivity.

I still use the Electron framework a lot and love it.

Advantages of Electron

  • Web technologies for desktop apps
  • You can run a local server and use Electron as UI
  • Updates made easy
  • Good documentation

Hugo

I have never liked the Go language; I Still don't as it looks weird. But despite all the unfriendly looks of the language, some amazing developers came up with a blazing fast static website generator called Hugo. The Hugo static website generator is so fast!

To put things in perspective: I migrated a blog from Gatsby.js to Hugo. In Gatsby.js, the blog would normally take 5-6mins to deploy on Netlify. In Hugo, the site takes just 40 - 60 seconds to deploy now (Took even less time before adding some Netlify functions which require npm install).

This blog takes 17 - 28 seconds to deploy.

What I Love About Hugo

  • Fast
  • Asset bundling and post-processing
  • Advanced taxonomies
  • Image compression
  • Multiple output formats
  • Data resources (CSV, JSON, etc)

Django and Django REST Framework

I won't lie to you; I am still learning a lot when it comes to Django. But I love its concepts. Django comes with production-ready security, user management, and admin dashboard.

The hard parts? Deployment. Deploying a Django app is so slow and easy to break stuff. I have had to fix so many issues due to conflicting migrations between the development environment and the production environment.

Despite the challenges, speed to market is so so inviting.

Why Django and Django REST Framework

  • Productivity
  • Python
  • Database migrations
  • Security
  • Admin
  • User management
  • Simple authentication and authorization

Node.js (Express, Passportjs, and Prisma)

I have used Node.js for a while. However, I had never actually deployed anything useful so far - until I decided to make an in-house commenting system for a Hugo generated website for a client. I love the Express, Passportjs, and Prisma combination so far.

Prisma is still in active development, and some parts may not be excellent yet, but it works. It is great in that, you access your data through a simplified API, more like GraphQL. It is very intuitive and you get very productive since it uses Typescript, so you get nice code completion and debugging capabilities.

Why I Still Love Node.js

  • Desktop and web
  • Simple scripting
  • Amazing community
  • JSON is home
  • Fast and capable
  • Fast development
  • JavaScript

Docker and Docker Compose

I had read and heard everyone sing Docker. But I had never really made sense of why you'd need it at all until I deployed the Hasura engine. I realized I could write a simple docker-compose.yaml config and have my server up and running without fiddling with complex server administration settings. Since then, I have always preferred Docker and Docker Compose whenever I am deploying to a VPS. It is even cooler when you integrate into a CI/CD pipeline.

Why Docker and Docker Compose

  • I can destroy the containers any time
  • Keeps my servers clean
  • CI/CD is way easier
  • Consistency
  • Many good images

Git

You don't know you need Git until you use it. Even if someone was to explain to you the cool features it provides for you, you still wouldn't make sense of it. The easiest way to get started with Git is to open a Github account, add some HTML files, and then deploy the site to Netlify. That is when the obvious power of Git will become apparent!

Why I Am Stuck With Git

  • Automating deployments is so so easy this way
  • Collaboration
  • Never losing your code
  • Time travel

My Current Toolset

Despite the many tools I have used and interacted with, only a few live to tell the tale, for they were so good to me I couldn't leave them behind. These are:

  • Django and Django REST
  • React, Vue and Vuetify
  • Hugo
  • Cordova and React Native
  • PostgreSQL
  • Node.js (Express, Passportjs, Prisma)
  • Electron
  • Docker and Docker Compose
  • Git

This article is in progress, I just couldn't help but post it šŸ˜‰. Leave a comment below. šŸŽ‰

Ā 
Share this