Front-end ecosystem is evolving rapidly with new libraries and frameworks released on a hectic pace. Developers need to adopt new technologies and keep their skillset up to date. Mastering one tool might be enough for a given task, but mastering the core principles of front-end development gives tools to adopt new technologies faster and with more confidence. Not forgetting critical reviewing of such trends.
My path towards front-end development
I started to really get into front-end web development around 2010 when I was working with PHP CMSs. Browsers were a mess and didn’t work with same set of standards. We used libraries like jQuery, Prototype.js and underscore etc. to achieve cross-browser functionality when implementing interactive or dynamic features to websites.
I was more interested in UI development, so I applied to a couple of front-end developer positions and got invited to interviews. Some interviews included live coding challenges. I knew HTML and CSS well enough, but I struggled with JavaScript even though I had used it a couple of years in my work. I wasn’t really comfortable with the language itself though I knew how to use libraries and plugins on top of it. I realized I was more of a site builder. Luckily, I got excellent feedback from the companies I applied to. Even though I didn’t leave with a contract, I left with great book and learning resources and with a positive mind.
I started as a software designer with heavy lean towards front-end in early 2014 at Solita.
Now that I’ve been interviewing candidates from a variety of backgrounds, I find that some of them are more-or-less in the same situation that I was. Eager to learn and with some experience, but lack in some fundamental skills. Some have fiddled with React, Vue or Angular and managed to piece together a decent demo. But questions like “Why did you use the framework x?”, “What was the problem that you solved with the library y” or asking how one would implement a bundle discount feature for shopping cart are causing some headache to candidates.
These are my selected topics for developers focusing on front-end development and applying to work with us.
Get to know JavaScript
JavaScript is a quirky language. To be able to use and understand tools built on it, it’s important to understand the language.
JavaScript is actively developed language, and it is getting new features regularly.
You might have heard of ES6, ES2017 and so on. JavaScript is a language that conforms to the ECMAScript specification. So, when ES version is mentioned, it’s usually to point out what language features are available. Since browsers (and/or their JS runtime/engine) don’t adopt new language features when those are included into the core language, we often need to transpile (translate + compile) our code to conform to older ECMAScript standard retaining (near) universal browser support.
JavaScript is weakly typed and dynamic language in good and bad. It has great features like first-class functions and the multi-paradigm approach gives developers lots of possibilities. It’s a flexible language with flat learning curve as long as you get to know the shortcomings of the language.
If you’re already seasoned programmer, but aiming towards client side development, you are most likely willing to look into typed alternatives or subsets of JavaScript. TypeScript, Flow, Elm, Purescript etc.
Reading
- Clean Code Book
- Eloquent JavaScript
- JavaScript Allongé, the “six” edition
- JavaScript: The Good Parts
Browsers are your runtime
Understanding browsers is essential when developing web applications, since browsers are the runtime of your application. Browsers are different from each other, but luckily nowadays way more harmonized. In general browsers create Document Object Model (DOM) based on HTML document and render a graphical user interface. Often people confuse DOM API to be a part of JavaScript, but it’s actually just an interface to work with the document. To dive into details how browsers render web pages, I recommend reading this.
Understanding performance and tools for optimization are fundamental skills for a front-end developer. When web applications grow, and more business logic is handled on the client side, we want to make sure our applications are loading fast, have 60fps animations and work properly also on devices and platforms that have lower computing power. Low speed networks are also to be considered. Especially when developing applications locally or with high speed networks, one must also consider low speed mobile networks.
Reading
Understanding stylesheets
Throwing some styles to make your application or website look fancy is fairly trivial thing. But what about when there’s five developers and the application is a large-scale single page application? Or it might be a collection of components from different sources? There are plenty of different paradigms to solve these problems, some of them better than others, depending on whom you ask.
UI libraries tend to come with preferred or default way of doing styling, but it might be worth the time to evaluate if that really suits your needs. Should you do global styling or component-based styling? What does cascading really mean in the context of stylesheets?
Even though you would end up using css-modules or some other technique in your app, it’s fundamental to understand how cascading, or in other words, priority scheme of styles really works. It will help you in the future. As well as learning the basics of collapsing margins, the box-model and so on. Then get into the more advanced features like flexbox and css-grids.
Reading
HTML is more than just markup
HTML5 was a huge step towards more standardized and semantic markup. With HTML5 we can improve accessibility with semantically correct markup. There are actually 124 HTML elements in the standard.
Screen readers understand semantically correct markup pretty well. Users with eg. vision impairment needs to have a decent user experience regardless of their condition. Especially projects for public sector have requirements to meet accessibility standards set by EU law. Familiarize yourself with the standards and you’re good to jump into a project and learn more by doing.
Reading
- Web Content Accessibility Guidelines (WCAG) Overview
- Accessible Rich Internet Applications (ARIA)
- Web Accessibility Policy
Learn the tools
JavaScript ecosystem is big and there are thousands of available libraries that your application or workflow can depend on. Most common is the npm package registry. You have the option to use the npm package manager or eg. yarn. Yarn is a package manager that emerged to fix some of the shortcomings of npm, like package locking to make sure your application will have same dependencies regardless of the environment it’s built on.
Most of us working with front-end also need to think about building our application. For me it’s often webpack and npm scripts, some might use Parcel or do some other magic. When our applications grow, we need to start thinking about code splitting, tree-shaking and other common performance concerns. Often you don’t need to be hacking the webpack configs on a daily basis, but when you do, it’s good to know what you’re about to do.
When you have your build tools configured to get your code transpiled, scripts bundled, styles transformed, everything optimized, it’s great. Then you need to deploy your application. Take a look into the basics of continuous integration (CI), meaning what happens when you push your code to remote repository. You most likely need to build production builds in the CI pipeline. DevOps people specialize in these matters, but knowing and understanding the fundamentals won’t hurt.
Understanding testing
Building modern, reliable web applications requires testing. In the backend, testing is business as usual, but still there are loads of front-end projects that lack tests all together. When more and more logic is on the front-end side of the application it becomes crucial to be able to trust that the application works as intended. It doesn’t just give you the ease of mind that your code is working as you intended, but it also helps you code better (opinionated view). It challenges your own solutions and, at least for me, encourages me to create simpler functions and structures. Resulting usually in pure functions.
To summarize
I would say that the job description of a front-end developer is varying and there are maybe more aspects in the job than one might guess. Front-end developer doesn’t need to be expert in all the above subjects, but it certainly helps to have some sense of each. There’s a great amount of different kind of roles for front-end developers at Solita, and its adaptable position. Dive deep and apply to work with us!
Writer is Solitas experienced front-end developer Henri Kontio who is active, besides in software development, with developer candidate interviews.
Read more about the technologies that we use and how we use them from our developer blog dev.solita.fi.
Want to work as a Front-end developer at Solita? Check our open position (in Finnish) Front-end Software Developer
