Being a front end dev…Answering the Vexed Question: What Next?

The question of “what next”, stays with us for our entire lives — professionally and personally. So, for people who have already navigated through their school and college lives and have either chosen software dev or ended up in this job, here’s a small peek into what you could get into. This article will give you a brief introduction into the world of front-end development, and if you choose it — what can be done next to progress to next level.

There are a couple of things you should have in mind in before choosing front end development-

— You are always going to be the face of the application, there will be comparisons, there will be unnecessary criticism, and anything breaks in an app, everything starts with you.

— The fact is javascript community has made a lot of progress — lots of changes over the years, but it still doesn’t get the credit it deserves and especially in the Indian ecosystem, it is heavily undervalued.

— Be open to adapt, which is true in any field, but a lot more in front-end because there is always a better framework, a better paradigm available, so you wouldn’t want your skillset to be obsolete.

Now that you’re all scared and nervous, let’s get started!.

Picking one of the first unanswered(and most of the times unasked) questions — Is it even cool to be a front end dev? After all, everybody I know and all my friends are backend enthusiasts (Probably ML, AI and Data Science).

The coolest thing about frontend is you can get started so quickly and see visual results. Add some html tags and voila! — you have a webpage. You could write a beautiful java/python code, with best time and space complexities but when you show it to a layman, all that can be seen is just code — maybe with some inputs and outputs, a simple GUI maybe if you have taken that much pain. But when you make a beautiful site/widget/app, everybody can appreciate for its interface without your need to explain it, that’s beauty of frontend. The output speaks for itself and can appeal to all audiences — the reasons may vary.

Backend tech- db, services, everything is cool for variety of reasons, so all you need to know is what is your type of “cool”. You don’t have to decide by the buzz around you, rather by what draws you to tech.

So most of us understand that we have html for templating, CSS for adding styles, and javascript for adding behaviour to a page. What do I do next?

There are so many frameworks where should I start, and it keeps changing so frequently? You are always playing catchup, how do you specialise?

Remember, all frameworks are just abstractions and compositions of code done over plane javascript. So you need to fall in love with javascript if you want to work in this space. The good thing is — as you explore more of javascript you will eventually start liking it, for all its features, for all its limitations.

So when you start, start exploring the object oriented side of it, the functional side of it, go into details, dive into the buzzwords — closures, hoisting, prototypes, higher order functions, etc and see them in action. For every term you hear, until and unless you know where to correctly use them, continue on this path. Once you have a good understanding of javascript, everything else starts making sense seamlessly. Now all the gotchas of Javascript will seem logical, contradictory to the popular opinion.

Next you would want to take up a framework, go ahead choose any that is famous at the time, and start exploring it for its features, understand the philosophy behind that framework. Once you do that, it will be so much easier to use it. Don’t mix frameworks. As in don’t solve a problem in react the angular way or vice versa. This also helps in future because when presented with a choice to choose a framework you know the reasons why you chose something and trust me, this is asked more times than you expect.

That was about javascript, but there is more to front end than that. A very common misconception that I see with the non-front end community is that the front end is just html and css.

A close friend of mine has said this a lot of times- “UI is just tags with margin and padding.”

Which is wrong.

However there is no smoke without fire. I can see a huge problem with the front end dev community, as well as some companies out there who have introduced roles like “javascript developer”, which is decoupling the templating and styling from scripts. Javascript is important but is not sufficient to be a good web developer. I have come across candidates who have said that they are not too good/comfortable with CSS.

What is wrong in that? Why can’t I be, just a JS developer?

You can definitely be one. But will you be an effective front end dev that way — well, no. Often you might just start writing complicated code for DOM changes if you’re not great with CSS. Often you would have to work with transitions, load times, and for all that you would need a good understanding of CSS. You should understand from small things like box model, viewports to more famous concepts like flexbox, transitions and animations. Understand transforms — they change the way you style your components so much.

To give a simple example — you might have a left arrow png icon. Now to use it as a right arrow, just use a transform rather than importing another image.

When you can handle things at the template/style levels, you can end up minimising a lot of your presentational logic in scripts. Once you are comfortable with these, take it up a level higher, get into preprocessors, sass, less, stylus — pick any. See what they offer you, if it makes sense, use it in any of your projects.

Till now you have become comfortable with good scripting and good styling practices. Of course there has to be good templating practices as well. To start with there are two things you should keep in mind- SEO considerations and accessibility. Explore around meta tags, semantics, aria attributes and see what benefits these offer to you. You may explore rendering pages from server side — explore next.js. See the impact it makes on SEO.

So scripts, styles and templates- all done. What’s next?

Next is to optimise these with respect to browser. All your webpages run in the browser. You should explore the browser features, the rendering process, first paint, first meaningful paint, page load times, critical rendering paths and optimise along these considerations. You can use lighthouse to help you in assessing the performance of a page. Even chrome developer tools are very powerful, we should always checkout the various tabs in developer tools, all offer very different and relevant tools to help you. You should google about each of those and at once you will see how helpful it is.

You should also explore how internally a browser works, how js engine works as in memory, event loop, etc. How is V8 different from SpiderMonkey? Does my js code take full advantage of all these browser features? Am I using the cache correctly? Am I using the browser storages optimally?

Performant scripts, improved styles, apt templating- that makes a good webpage. What next?

Next is how do you manage your project. How do you manage your dependencies, how do you package your project. Say, if you chose react app and started with create-react-app boilerplate, you would have got webpack config file and package.json file. But your webpack file would be a very abstracted one. What you need to do is understand these configurations from scratch. Try adding simple module loaders, create small tasks and understand how do they work. Explore treeshaking and understand what benefit it offers you. See if you can find how dev build and prod build varies and how does this minification, sass, etc load and execute.

You could even go a step back and see other tools like gulp, and whether they fit your project ecosystem.

I have a great bundled code. What next?

Next you can explore the CI/CD process. Explore pipelines in bitbucket/gitlab. See how you can automate these processes. You can look into husky, pre-commit hooks and see how it helps. You can then look into containerization and explore docker, how it helps in scaling your application. You could start exploring platforms like GCP and AWS and see how you can sync your code on these platforms.

Cool, I have automated my build and deployment process. What next?

You can try automating all of it by a script. You can integrate monitoring tools — New relic, Sentry, Datadog, etc to monitor your application. You can integrate tracking/analytical tools like Omniture, Snowplow, Clevertap, Hotjar, to understand your user behavior and scale/enhance your applications around those features.

What next? If you have done all this, then you have embraced front end development truly.

You should start looking into design patterns, authentication, architecture, cache services, PWAs, etc. There is always more.

You should keep exploring what’s coming up and most importantly — question it. If you get the answer then you’d have learned something new, if the answer isn’t convincing to you, try finding a new one, you might end up innovating and that’s how front end is, so many questions and so many innovations.

That is the reason there are so many changes and paradigm shifts in front end landscape. These are very exciting times for a front-end developer, when everything is turning into a web application and your interface is what connects your business to the user.

Don’t settle, let’s frontend, let’s innovate.