Considering the multiple elements of my MetaMibs project, the web development corner is where I’m most comfortable - yet every week I’m stressed by the most minimal updates. There’s not a specific outstanding issue nor glaring style snafu that hangs me up, rather, it’s death by a thousand cuts that worries me - “lingchi”.
I am very aware of the adage, “Perfection is the enemy of progress”, but I don’t think it’s perfection I’m chasing. I don’t want a perfect site, but I do want to establish efficient processes that minimize development time while providing modern features and design. Although I do have a litany of outlined processes, they have quickly become inflated with unfortunately necessary bloat. My desire is to restructure the site in a format that allows the most seamless updating while also fostering modern web-design.
A stranger once passed along a wise teaching to me, “If it’s a pain for the first 3 months, it’ll be a pain forever”. He was specifically referring to a vehicle, but we discussed how this seemingly lawful statement can be applied to most situations - jobs, relationships, etc. While I have enjoyed working on the MetaMibs project the past few months, the website management has been a somewhat constant pain that I know can be remedied.
And if you’re wondering why I don’t use a low-code website building service such as Wordpress, that’s just not my vibe. While I understand the allure of these applications, they provide little flexibility and due to their abundance they commonly become targets of bad actors looking to hijack visitor data or implement ransomware. I would also argue it’s more rewarding to build a web application from scratch, much like creating anything.
The current site is built with about the most rudimentary tools possible: HTML, CSS, some Javascript, and a dash of Jquery. While these languages have been pivotal to the progression of our digital landscape, their age is beginning to show and their use requires a myriad of seemingly duct-tape fixes.
Displaying my data via HTML is simple, yet unifying changes or mediating mistakes can quickly become a game of whack-a-mole. Because each web-page’s data is unique, a seemingly simple update such as fixing a manufacturer’s operating years can grow into a repetitious task that incurs further mistakes. Attaching a back-end database to the site will allow consolidated data management - making one change in the database would update all references of that data on the site. This will also allow a much clearer overarching view of the site, as the current silo-design of HTML web-pages inherently hinders visibility of data. While the content on the site may be minimal now, as it grows the ability to manage data will become increasingly difficult.
CSS, the stylistic partner to HTML, is the easiest way to add visual changes to a website. That said, it is riddled with limitations and can be quite tedious to maintain. To achieve a modern design, supplementary Javascript and Jquery packages must be loaded for a variety of functions such as menu creation, slideshows, or animations. While CSS may be appropriate for static sites, its recurring limitations are stoking my frustration. An experienced developer may read this and wonder, “If you styled some of the site with Javascript, why not go full on React?”. To that I say, I don’t know React. It did make it on the shortlist of possible languages for the refreshed site, but in the end I decided on something else.
I want to build a new house, but keep the same furniture. A considerable amount of research, testing, and preliminary learning has gone into my architectural planning and while I intend for most of the content to return, the underlying data structure will be entirely changed. In doing this, I hope to alleviate many of the aforementioned pain-points whilst substantially elevating and modernizing my web development skills. Ultimately I’ve decided to build about the most modern design possible, utilizing Google’s Flutter/Dart for the front-end and attaching the robust MongoDB ecosystem to the back-end.
Flutter is an open-source user-interface developer kit released by Google in 2017, operating via the Dart language. The real power of Flutter comes from the ability to create and manage just a single codebase that can be deployed to any internet-connected device. This means that the code I write for the MetaMibs website could be seamlessly uploaded to either the iOS or Android app stores with minimal accommodations. While I have no immediate plans to upload MetaMibs to the app stores, I would like to have the option be just a few clicks away.
Despite the fact one may attribute my immediate attraction to the Dart framework to a honeymoon phase, it truly does seem incredibly simple and easy to pick-up as a novice. Most online resources mention former TypeScript developers will have the easiest time converting to Dart due to the similar syntax, but I would argue anyone with just rudimentary HTML/CSS knowledge can pick up Dart without too much frustration - especially if you have a good grasp on styling "div" elements via classes, which truly is pretty basic.
And although I cannot find any definitive info to support a benefit, the model-viewer package used on my site to display 3D mibs is developed by Google and I tend to believe that the package will be better managed in Google’s own Flutter environment. When it comes to the marble renders themselves, my biggest frustration is the transition from the modeling software (Blender) to the website. It requires a severe reduction in file size which subsequently reduces the overall detail of the model. My hope is that by using Google’s native UI environment I will be able to improve the website’s mib models while still adhering to file size/type requirements.
What is a front-end?
The front-end of a web-application is the part of the application that interacts with and is seen by the user. It is responsible for rendering the user interface, handling user interactions and presenting data. It communicates with the back-end to retrieve data and respond to user actions.
The back-end will be powered by MongoDB, the fastest growing Database as a Service (DBaaS). While my hands-on experience with databases is about as minimal as could be, I have worked with developers who had to inform me, in a passionate but frustrating manner, of the many limitations that are frequently encountered in SQL/NoSQL environments - the leading database languages for many decades.
Watching the first demo, I could already tell how special MongoDB is. Not only does MongoDB innovate database relationships to allow newfound flexibility in data management, but it is accompanied by a user-interface for complete control over data that even a novice like me can understand. No longer is a deep understanding of back-end languages needed to build and manage a database, further lowering the barrier of entry for anyone that has an idea for a web-application but little to no database knowledge.
If you have familiarity with Excel or even just Google Sheets, then there is a high likelihood that you could learn to manage a MongoDB database with ease. Further, MongoDB provides a variety of services packages with consistent GUIs via their Atlas service. Atlas is a cloud-driven product suite which requires minimal server management while providing functionality such as API integrations, user login control, and search algorithms.
What is a back-end?
The back-end of a web-application refers to the server-side part of the application that manages and stores data, interacts with databases and APIs, and provides the data that is displayed on the front-end. Back-end developers focus on writing code and building systems to ensure the smooth operation and functionality of the website or application. This part of the application is usually not visible to the end-user and interacts with the front-end through APIs to send and receive data. The back-end is critical for processing requests, performing calculations, and ensuring the security and scalability of the application.
I hope that my very succinct and generalized description of web-based technologies illuminates some of the unknown corners of web-development for you. Maybe you have your own web application idea, but have no idea where to start. Maybe this article lends at least some hand to your understanding of how to bring your idea to life; because I am confident that while maybe not the most ideal for every situation, the Flutter+MongoDB combination could be utilized to create whatever application the mind could conjure.