Understand the frontend tools
March 16, 2019
Kamran Ahmed has written a nice article on frontend developer’s roadmap in 2018, according to him, if you want to be a frontend developer, you would require to learn preprocessors, package managers, frameworks, build tools, and etc. The list keeps going on and honestly it is tough to keep up with all the new things that’s coming out.
So, how should we make sense of all these tools, libraries and frameworks to make ourselves a better frontend developer?
In this post and the posts to come, I would like to share some of my insights on how I navigate around all these ever evolving tools, libraries and frameworks.
Before you move on, I have to make some disclaimers.
I am just another frontend developer. I am writing this to share, and hopefully get your feedback, on how to make sense with all the frontend development tools.
Lastly, the opinions and insights I gathered are from articles, tweets, Github issues, and source code of the libraries.
So some opinions I have might not be the true intention of the library maintainers, but I am giving my perspective in the way I think is the best for me and for you to understand the tools.
I realised that in 2019, someone new to frontend development, there is a lot of knowledge and concepts required to acquire, plethora of tools to learn, and I persoanlly think that’s a lot to ask. But yet, this is our state of our industry currently.
Therefore, I am writing down the thought process and concepts that I’ve gained so far, and hoped that these articles would help new comers to the frontend development world a better foothold on understanding the frontend ecosystem.
When picking up a new tool, I strongly believe that the best way to learn about it is to ask youself, what kind of problems were you facing without this new tool, and how did you solve these problems? Does the new tool solved your problems?
Following up on question 1., How do I piece all my “modules” together? How do I download the code for the modules I only when I need it?
CSS Modularity. How do I ensure that in a big application that there’s no naming conflict for my CSS classname or id?
When I write code, I noticed a common pattern in the code that may cause bugs, for example, using variable without defined it in scope, missing
number, etc. How do I prevent myself from writing such code? Adding
number. How do I make myself to be aware of the
Testing. How should I test my code? If test code explains the behavior of my code, how do I write test code such that when other people reads the test code, they can understand all the quirks and behaviours of my actual code?
Test coverage. How do I ensure that I test all the possible scenarios? How do I know that my code has some impossible path/logic that will never execute, knowing all the possible test cases?
Optimisation. How does the browser downloads and exectues my code? What can I do to optimise the performance of my code? and how do I do it?
The above are questions that I asked, and I am going to answer them one by one in the future articles.
Thank you for your time reading through this article.
It means a lot to me.
If you like what you have just read,
Tweet about it so I will write more related articles;
If you disagree or you have opinions about this article,
Tweet about it too so I can take your suggestions and improve on it.