Frontend development has been flooded with insane amount of technologies! The big decision, then, is what to focus on. What are the critical skills you need to master, and what order should you tackle them.
The life of a frontend developer has been both easier and overwhelmed these days. There are many tools and frameworks out there to help you bootstrap a website in matter of hours. It’s is both exciting and intimidating to me, there’s always a tantalizing thought that the framework I’m using turns out to be a bad decision or it’s going to die soon.
The easy way to fix this is to focus on transferable knowledge first and then pick supporting bundle of choice. Switching cost will be low if you already have senior knowledge on web fundamentals.
Warning: Following technologies are only my favorite choices to learn frontend as a JavaScript Fullstack Developer. This is not the recommended path for everyone, you should consider this as starter list for frontend development.
HTML is the markup language used for structuring and presenting content on the World Wide Web. Together with CSS and JavaScript, it enables us to have beautiful and interactive websites. Since HTML is the foundation of the web, it is also the most essential language for any web development career path.
Learning HTML is only important to learn if you feel it’s important to learn. There’s nothing fancy with HTML, just many many tags and attributes to remember. Nowadays, it’s possible to build a working website without learning HTML properly by using frameworks.
However HTML is not that low-level like Assembly or Binary code to skip, a professional web developer constantly working with HTML tags to debug, optimize accessability and sometimes crawl other websites. All the frameworks or no-code tools you’re using to build website will be eventually compiled/transpiled into a bundle of HTML+CSS+JavaScript+Resources.
DOM (Document Object Model) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree.
HTML DOM is a standard object model and programming interface for HTML. It defines: HTML elements as objects, properties of all HTML elements, methods to access all HTML elements, events for all HTML elements.
Web browser uses an internal model similar to the DOM to render a document such as a HTML page, . The nodes of every document are organized in a tree structure, called the DOM tree, with the topmost node named as “Document object”. When an HTML page is rendered in browsers, the browser downloads the HTML into local memory and automatically parses it to display the page on screen.
Browser engine (also known as a layout engine or rendering engine) is a core software component of every major web browser. The primary job of a browser engine is to transform HTML documents and other resources of a web page into an interactive visual representation on a user’s device. Common engines are: Trident, Tasman, Gecko, WebKit, KHTML, Presto.
CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.
CSS Preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. Sass is the most popular one.
PostCSS is a tool for transforming styles with JS plugins, it is not a CSS preprocessor but can be used as one. PostCSS can transform styles in any syntax, not just CSS. If there is not yet support for your favorite syntax, you can write a parser and/or stringifier to extend PostCSS.
CSS framework is a software framework that is meant to allow for easier, more standards-compliant web design using the CSS. Most of these frameworks contain at least a grid. Bootstrap seems to be the most popular CSS framework for responsive developing, some love it and some hate it. I simply don’t use it!!!
BEM (Block Element Modifier) is a naming convention for CSS and HTML to make your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.
CSS-in-JS refers to a pattern where CSS is composed using JavaScript instead of defined in external files. I love this solution because it is transferable to React Native and Electron. That’s why I use styled-components in all my projects, it’s simply just awesome and easy to share code between multiple platforms.
JavaScript is the core of frontend development these days whether you’re writing vanilla html website or using frameworks like React. Actually you can don’t even write raw HTML or CSS anymore, you can write a complete working website using only JavaScript and let the bundlers do all necessary work behind the scene.
Originally JavaScript considered as purely scripting language for browser only but now it’s so powerful that you almost can build everything with it including frontend, backend, mobile, embedded etc.
JavaScript is a high level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification.
JavaScript is prototype-based with first-class functions, making it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.
JavaScript has an API for working with text, arrays, dates and regular expressions, but does not include any I/O, such as networking, storage or graphics facilities, relying for these upon the host environment in which it is embedded.
JavaScript is not a very complicated language at its core. It can seem difficult to learn because of all of the noise around it. Browser APIs, Library APIs, jQuery, React, TypeScript, the many npm packages out there, etc all can make the language syntax space seem huge.
But the core language and standard libraries are actually pretty small compared to languages like Python and Java that have more features and larger standard libraries. Eventually you’ll need the ecosystem. But knowing the core language features that are implemented in most browsers is a great start.
React, Angular and Vue are three major JavaScript frameworks to build user interfaces. All of them are hugely popular within frontend community with mature ecosystem and tooling.
React is my favorite choice because I can easily extend to mobile with React Native and desktop with Electron. As an indie maker who has very limited resources I really love universal solutions. To me, performance is not my priority right now, the medium performance release is still better than no release at all.
React is just a JavaScript UI library, not a full-fledged framework. At the heart of all React applications are components, a component is a self-contained module that renders some output. React operates not directly on the browser’s DOM immediately, but on a Virtual DOM
Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. Virtual DOM was created to solve the problems of needing to frequently update the DOM in a more performant way. A virtual DOM can be thought of as a copy of the original DOM. This copy can be frequently manipulated and updated, without using the DOM APIs. Once all the updates have been made to the virtual DOM, we can look at what specific changes need to be made to the original DOM and make them in a targeted and optimized way.
JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.
React needs to use along with many other libraries and tools to work properly. You can setup all by yourself by configuring bundlers, transpilers, loaders, routers, css processors and many more to have the hardcore experience. Or just use supporting React frameworks like: Create React App, Next, Gatsby.
Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration. You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code.
Next is a framework that most notably allows you to write server-rendered React apps easily, automatic code splitting, filesystem based routing, hot code reloading and universal rendering.
Gatsby is a React-based, GraphQL powered, static site generator. Gatsby has been growing over time, and I’m glad to see it in use by a huge number of sites like marketing sites, blogs, and generated static pages.
I often use Gatsby for blogs and landing pages, Next for my SaaS website and Create React App for admin website.
I was very intimidated initially the first time I saw several online frontend roadmaps. There are so many buzzwords and technologies to know, each one has it own strengths and weaknesses and different purposes. But there’s is one important point: You don’t work with them quite often. When everything is well configured, you are good to go for while and work all day long with only HTML, CSS, JavaScript and React.
Progressive Web App (PWA) describes a collection of technologies, design concepts, and Web APIs that work in tandem to provide an app-like experience on the mobile web.
Service Worker is a worker script that works behind the scenes, independent of your app, and runs in response to events like network requests, push notifications, connectivity changes, and more.
Bundlers (Webpack, Rollup, Parcel) pick our code, understand its relationships, glues it all together in one or more files in a logical order, and there you have it: ready for use in a browser, with less headache.
Testing is checking your web application for potential bugs before its made live or before code is moved into the production environment. Depend on your resources, you could implement a collection of following type of tests: unit, functionality, usability, interface, security etc. using following testing frameworks (Jest, Enzyme, Mocha, Cypress).
Security is a big topic, here are a few things to get you started: using HTTPS only, lock same origin if possible, don’t mix HTTP and HTTPS, often run security audit etc.
Performance includes both objective measurements like time to load, frames per second, and time to interactive, and subjective experiences of how long it felt like it took the content to load. It is all about ensuring the content is quick to load and responsive to user interaction. Lighthouse is an open-source, automated tool for improving the quality of web pages, it has audits for performance, accessibility, progressive web apps, and more.
Accessibility refers to the experience of users who might be outside the narrow range of the “typical” user, who might access or interact with things differently than you expect. Specifically, it concerns users who are experiencing some type of impairment or disability.
Responsive is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)