Growing Experience in Web Development
A quick story about my web projects and their weaknesses ~ yes, weaknesses!
And so it is… just like you said it would be… ~ After two years away, I return to a web project as a front-end developer. I created the most complicated logical components of my career and as Damien Rice said ~ No love, no glory… No hero in her sky. In addition, it motivated me to write about my experience in web projects and I will bring specifically only four that I considered so important to my life.
Unfortunately, will not have code or technical code explanations in this post, this is not the focus here. And as you, my dear reader, must have read in the subtitle, I will focus on the weaknesses of the projects with my current look. In fact, I believe that this is the only way we can see how much we have evolved from one project to another.
Anyway, let’s do it by steps. The first one is Otatop, my bachelor degree project; the second is Si-dade, my startup project; third is Leader, my first app within a company; and finally, the Labeling, a website with image editor functionality.
1. Otatop
The year was 2016, and I was finishing my bachelor degree. Until there, we just saw Java Web and particularly I didn’t like. So, I decided to use JavaScript (yeah) with jQuery, JointJS and Intel XDK frameworks (ouch).
Anyway, this project aimed to create basic systems based on the Entity-Relationship Model. The ER model would also be modeled from the platform and it would also generate a normalized database.
For my bachelor degree I used the Database field to study, write the concepts and improve the logic functions in code. However, this project never saw the sunlight.
Looking at it today, I realize how non-optimized and unstructured it was. To give an idea, I used jQuery to dynamically deal with the DOM and thus be able to create the relationships of the entities within the diagram on the canvas with the JointJS (oh God). Looking at the repository, the node_modules folder is on GitHub (shameful laughs). In the end, I made a project usable and friendlier than other tools of the time.
Finally, I still remember the days worked on this project and the happiness I had when I was able to implement the relationship logic and the normalization steps through the diagrams. Good times.
2. Si-dade
The years 2017 and 2018 were purely learning for me. On the one hand, I was trying to set up a Startup with friends, and we were able to enter the city’s incubation program. On the other hand, we needed to develop the new project with recent technologies that are easy to handle. So, in the front-end I chose the Ionic Framework (version 2+).
Here is an interesting point. I had left jQuery, JavaScript and Intel XDK straight to Ionic with Angular and TypeScript. I really don’t need to say how amazed I was and how much information I had to absorb to develop.
The project aimed to map points in the city where people went through some kind of danger. In this way it would be possible to plot a map of the city with the “main” places considered to be dangerous and would serve for the public government to make decisions about it.
We tried hard at that time to make the startup work. But again, it didn’t go forward. Today, I consider that we lost a lot of time in development (maybe because we are learning in parallel? I don’t know), but this delayed the resources (money and motivation) to keep the company alive (lesson learned).
Anyway, my criticism here goes to the separate development between the mobile application and the administrative panel. Today I know that it is possible to do everything in a single project (single and responsive code), being well-structured and managing sessions of the common and administrative users.
3. Leader
In my first official job, at the end of Startup and also between 2017 and 2018, I had a mobile project to develop with full responsibility for development decisions and as I was the only programmer, I had to do all the work (basically a full stack).
In this project, I went first to Ionic on mobile and for the back-end I chose Node.js. Needless to say, I had never used Node (haha), however, I used the Lumber Framework (from ForestAdmin) to manage the administrative side. This allowed me to develop the project within the very short time I had.
The project aimed to manage the itinerary of salespeople’s activities through the mobile application, allowing the generation of reports to supervisors on the administrative side. This helped in decision-making and created better planning.
This project was a success in the company, but shortly after finishing the project documentation, I found a better job opportunity in the capital and honestly I don’t know if they continued using the project, since I was the only programmer in the company.
Anyway, my points here goes to the development of the project totally alone (a team was really needed); the development of expendable features; unnecessary complex functions; and the damn stupidity of uploading unnecessary files to the repository (never do that!).
4. Labeling
I’ll spend more text here, because this project motivated me to write this post and is fresh in my mind.
A lot has happened since Leader until today. In fact, this project appeared between 2019 and 2020 and I had no intention of participating, as I currently work more in the master’s degree with machine learning. However, I accepted and again I was free to define the technologies used in the front-end, as well as the creation of mockups.
The project had the proposal to develop only a website and because I had a short time, I chose Angular 9.x (for already knowing) with Nebular framework (UI) in the development of the front-end. What surprised me how much the tools have evolved and how easy it was to develop a fully responsive and modulated project.
No project icon here, because it’s a private company :]
The objective was to create a website that would allow users to manage (through profiles) label activities to other users. This labeling would be done from already trained models (from the company) and also through the user himself.
Here we got a point. Profiles, session and activity management, reports, webservice, JSON objects… everything until then was predictable, but edit the image labels? Soon I imagined the Canvas + jQuery that I used in the first project and I would definitely do it in a more correct way this time.
Fortunately I did it in a more coherent way through the incredible Fabric.js. Unfortunately, this functionality cost me a hundred times more time than I imagined. To understand the complexity, the image that canvas would load would have a scale factor and a centering adjustment according to the responsiveness of the canvas. If the window size was changed, the image would adjust itself (responsive), but that would include all objects on screen as well (labels). Not only that, but the user could zoom in as well. So it would be a factor of scale, centering and zoom in the image and labels. ~160 hours only to make this component… No love, no glory… No hero in her sky…~
Let’s go to the next step: components integration. Imagine that we have the Figure 1. Three components on the screen: the first a list of images; the second, the image editor with the label management; the third, a form created dynamically through webservice parameters (already including dynamic field validations and everything you can imagine).
Now, the webservice send me a standard object format (pattern X). The Angular form with validation is another pattern object (pattern Y); and Fabric.js (canvas objects) is another pattern object (pattern W). However, form interactions must update canvas objects and canvas interactions must update form values. Finally, to send back the values to the server, must return to the standard object format…
Saving you from further explanations, the final code of the components was complex, but well modulated through Angular services. Thus, this is (for now) my new work pride (Figure 2). ~dark theme included!~
I’m really curious to know what the Arthur three years later will think about this project.
If you’ve read this far, thank you! This post helped me to put out some web projects I went through and remember a good part of them.
In addition, this post made me reflect on how much I have changed in recent years. Whether in projects, teams, codes, decisions. In fact, that same web development learning curve, I’m going through in machine learning (check out the other posts). Today I look at my first projects in the field of AI and I already see their weaknesses.
Finally, for you who like machine learning, I will publish a new post sometime about the second part of my master’s degree project. #spoiler #NLP
