I come from a computer science background. The classes I enjoyed the most in college revolved around programming in C/C++ and C#, algorithms, data structures, and databases. That being said, my affinities towards backend development grew. However, it has come to my attention that none of these classes really tackled the topic of frontend development nor its fundamental technologies, a few of them barely scratched the surface (we’ll get back to this one later on).
Yet, at that point I didn’t care much, I fell in love with backend development, I fell in love with the stuff that ‘works under the hood’ and that was everything I wanted to do. The snowball kept rolling and later I even gained professional experience with the .NET framework. Still, I wanted to expand my skillset, so I started learning another server-side framework, Ruby on Rails. My curiosity and passion towards development did not go unnoticed, and as a result, after my first month of the ABH Internship, I joined Atlantbh as a software developer. I recall that during my internship, the Rails code I wrote was pretty clean and efficient and that I solved all backend tasks with ease. However, my frontend code was a mess. It was very sloppy and unorganised. Even the trivial problems were frustrating, and I couldn’t wait to get the ‘unworthy, annoying frontend stuff’ out of the way and get back to the magical land of backend. One particular gif comes to mind when talking about this, and I believe that a lot of us developers can relate to it at some point of our careers. Yes, you know exactly the one I’m talking about, sometimes it strikes too close to home.
We’ve all been there Peter, we’ve all been there …
Identifying the issue
After the ABH internship, my skills were put to the test on a real project; full-stack development of a web app with more than 3 million active users worldwide. Frontend tasks were coming in and neglecting them was never an option. I knew that the only way to survive the upcoming storm of those tasks was to step my frontend game up – a lot. Now, this part is very important, in order to make progress in any area, you must first admit to yourself that you are lacking in that area. False sense of competence is one of the worst things that can happen to your career, and not just in software engineering. If you think you know everything about anything (and of course you don’t, nobody does), you’ll never put in the effort to improve yourself. Why bother changing something perfect, right? You must put your ego aside. It’s not embarrassing to not know something. What is embarrassing is acting like you know something when you actually have no idea and letting your team down in the process. Please, don’t be that person. Personally, I’ve always been hard on myself in order to drive myself to get better day-by-day. I think that’s the right mindset and it will make you constantly strive towards improvement. However, before moving on to how to improve, I’d like to take a moment and address some potential reasons why people are lacking in frontend skills in the first place.
Misconceptions about frontend development, and side-effects that follow
Earlier in this post I mentioned that none of my classes in college really covered the fundamentals and best practices of frontend development. Some barely scratched the surface with some basic syntax and scarce examples, whereas the classes covering the server-side languages, techniques and technologies were very well organised and tackled these topics in depth. Implicitly, one might come to the conclusion that working with HTML, CSS and JavaScript (at least presentational one) isn’t challenging enough and that it’s beneath the dignity of ‘real programmers’ and ‘real engineers’ and, as a result, never really get into understanding the core principles of that layer. This doesn’t apply just to people fresh out of college, experienced developers can have the same attitude in this matter. I’d also like to add that I sense a bad trend nowadays when it comes to the term ‘full-stack developer’. It seems that in many cases it translates into ‘backend developers that have to do HTML, CSS & JS as well’. Such a mindset can (and usually does) have a negative impact on the quality of the frontend code and the quality of the project overall.
This prejudice towards frontend needs to stop because of two simple reasons: Firstly, the frontend is the part of the application with which users interact and plays a vital role in the product’s road to success. That alone should be reason enough to put in the extra-effort in frontend development. Secondly, there are lots of challenges in making a good UI, both design and engineering-wise, so you actually have to bring out the best of both worlds.
Making the necessary improvements
Now, how exactly can you step your frontend game up? First, let’s try to answer the question that often comes to mind when you’re inexperienced with frontend development.
Made using imgflip.com
Ah yes, the philosophical question. In my case, the answer was … both actually. As funny or odd as it seems, I believe that is the answer for most people. At first, you struggle with frontend tasks because you’re inexperienced in that area. Deadlines and pressure step in, you’re looking just to get those tasks out of the way as soon as possible. You complete them (somehow), but you haven’t made much progress in that area have you? A new set of frontend tasks comes in, you grunt irritably and the cycle restarts… Now it may seem like an enchanted circle, but breaking that circle is much easier than you think. The first tip is to start from the bottom. I am a firm believer in the fundamentals, and I think that you must fully grasp core principles in order to be proficient in your work. For instance: Understanding how the browser renders web pages, how the render tree works, how the DOM is structured. Understanding events, functions, objects and closures in JavaScript. Understanding the CSS grid and flexbox and the differences between them. You will have to dedicate time to process these topics and it is important that you do so because it will benefit you in the long run. Of course, sometimes you’ll have to google things and that’s perfectly fine, but I can’t emphasize enough the importance of mastering the fundamentals. Frameworks\libraries such as Angular, Vue and React for JS and Bootstrap, Materialize and Bulma for CSS are great and will make your life easier but I strongly advise working with vanilla JS and CSS before starting to work with any framework. As a result of that, you’ll get better insight on how frameworks actually work under the hood and you’ll become more proficient with them, not to mention the fact that it will make learning any framework much easier and faster. I’ve noticed that a lot of developers who are just starting out, that have learned Angular before JavaScript and Typescript, can’t really utilize their framework.
The second tip for breaking out of this enchanted circle is the mental-shift you have to make. You must stop ‘hating’ and start enjoying frontend development. Now I don’t want this to sound like one of those ‘life-coaching’ or ‘the key to happiness’ knock-off blogs, so trust me, this one really is true and it’s very important. It shouldn’t be something you just ‘get out of the way’, it should be something that intrigues and motivates you, maybe even relaxes you. It’s pretty simple, when you like doing something you’re guaranteed to perform better. The first tip about starting from the fundamentals helps here. This dislike for frontend development most likely comes from superficial knowledge of it. If you start from the bottom and patiently work your way upwards, you’ll get more comfortable with work on the UI and get things done faster.
Next few Blog posts
I hope you found this content useful. In the following blog posts of this series, I’ll go over, in more technical-depth, some of the key principles that a frontend developer should master in order to be proficient in his/her work as well as some tips and tricks that may make your life with the frontend world easier. Stay tuned 🙂
Elixir Migrations using Ecto
Decorator pattern
