Becoming a frontend engineer, an opinionated guide.

Frontend development has had such an amazing growth in recent years. Most of the cool new products we see today would not have been possible or at least would have been much trickier to create without the advances in frontend technologies. As a result, there is an increased demand for engineers with frontend skills.

However, mastering frontend development and best practices can be both a scary and daunting task, and this is true even for software engineers already proficient in other areas of web development. In this post, I would talk about a few things I think would help to get you started in frontend development or to become comfortable with frontend development.

Being passionate about developing user interface is the first thing I can think of. From my experience, most things I've become better at are things I really love doing. If thinking about building user interfaces doesn't excite you, or you would rather talk about something more interesting when you get together with someone familiar with the subject, then you might want to look into doing or learning something else. That said, it is also possible to build a passion over time. So if you are just testing to see if building user interfaces is for you, be sure to ask your self after some time if there is something else you would rather be doing, if there isn't, you might have found a match!. Up Tinder.

Master HTML/CSS. It is important to know that there is much more to learn than the beginner course on w3 schools and tutorials point. While these wonderful resources and others like them would give you a very good start, just think of them as the high school before heading to college. After learning these resources and of course practicing what you've learned, I advise buying professional courses online where you would be exposed to more advanced concepts. Including how the browser parses your codes, How to manage differences in browsers, proven methods of building layouts, writing more reusable codes, preprocessors and build tools, performance hacks… the list goes on. You can find some very good courses on Udemy. The other thing I like about these courses is that some are authored by engineers in top 1% companies on the planet, and so you get to learn from the very best.

Now to talk about the elephant in the room, Javascript. If you want to build beautiful user interfaces, HTML and CSS would get you there. But if you want to build beautiful user interfaces that interact with the users smoothly and in realtime, then you need to be fluent with Javascript along with HTML and CSS. So many beginners I have spoken to usually lose it at the stage, my advice is to take it one step at a time and not to worry about the concepts you don't understand immediately, simply move on to the next thing and circle back later to give it one more try. Also, some concepts only make sense and become clearer when you encounter them in real-life projects, so feel free to move on when something proves too difficult, especially if you don't have a mentor who can unblock you. This part can also be tricky because learning some core frameworks such as ReactJs and Vue is as important as learning javascript it’s self.

You can start the javascript journey by learning the basics first. W3chools is a very good starting point for a complete novice to javascript. After the basics, do some practice with what you have learned and then take some time to study about algorithms and data structures. The reason for studying this is not to become an expert in algorithms but to prepare your thinking for scenarios you would encounter while coding javascript-based websites. Free code camp has a good video explaining some data structure concepts here, but to really get value for your time, you might want to get a paid course on algorithm & data structures.

Now that you have some confidence with javascript, the next thing on my list would be to learn a frontend framework. A frontend or javascript framework is simply a tool that helps you build interactive user interfaces, in a clean, fast and standardized way. Without these frameworks, you would have to spend months maybe years developing something that can be done in a few days to some weeks, and did I mention your result would probably be really poor compared to if you used a framework. There are numerous javascript frameworks to choose from nowadays and a new one pops out almost daily. Some frameworks are really popular while some are really easy to get started with and to use. I would advise you go with one that has a blend of both ease and popularity, at least for starters. ReactJS and VueJs are two of my favs, they have the popularity and fairly easy to get started with once you know some basic javascript. Once you've gone through the basics of your chosen frameworks, be sure to get a paid course or at least a mentor to learn some more advanced concepts.

If you have gone through all the processes above, you sure are almost ready to be called a frontend engineer. But building software, in general, is not all about working codes. Among other things, you need to be able to manage the codes and the multiple versions of the code efficiently, you need to be able to test your codes easily and on the fly, you want people to be able to see what you can do, so you need to deploy your software to the cloud. The list goes on depending on how big your software would be.

To manage code and code versions, you need a software versioning control tool (SVC), while there are many others, the only version control tool I've worked with is GIT, this is the dominant software versioning control tool used today, so you would be fine just learning GIT.

Testing your codes contains multiple steps, and can be anything from writing unit tests, snapshot tests, functional tests, and integration tests. Testing is very important and must not be overlooked if you plan to have stable frontends with as little bugs as possible. The good thing is, if you have bought a course to learn any of the frontend frameworks, testing would almost certainly be covered so look out for that in the course outline before purchasing the course.

In most organizations, deploying codes to the frontend is not the job of the frontend developer, there would be someone for that mostly known as a DevOps engineer, but non the less you should know how your product gets served to the users as this would give you some ideas of things to do or not to do while writing the code. As this is a large topic on its own, I don't want to get into it here but this might be a good place to start. Also, deploying the code would almost certainly be a part of any good frontend course so look out for that too when you purchase a course.

I hope this resource can get you started on your frontend development journey. But remember to take things one step at a time and not feel stuck. When you can't understand a concept, ask someone, if that’s not an option, move on to the next thing and come back later with a clear head. It’s really that easy.

The things listed here are not everything you need to know about front-end development, there are a lot of concepts not mentioned here. But we all keep learning day by day on the job, depending on what we are trying to build so keep an open mind. Ciao.

References and further reading:
https://medium.com/@kamranahmedse/modern-frontend-developer-in-2018-4c2072fa2b9c
https://www.youtube.com/watch?v=t2CEgPsws3U
https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2019-264e19514d0a

Tech guy, building stuff.