loading...
Cover image for Become a Fullstack JavaScript Developer, Part 4: The Frontend

Become a Fullstack JavaScript Developer, Part 4: The Frontend

adwdv profile image advancedweb.dev Originally published at advancedweb.dev Updated on ・8 min read

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.


Become a Fullstack JavaScript Developer is an original series published on avancedweb.dev where I explain my process and what I've learnt to become a full stack Javascript developer - from motivation to actual building my own product single-handedly.


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

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

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

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

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.

Everything Else

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)

Discussion

pic
Editor guide
Collapse
mgrsskls profile image
Michael Großklaus

"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."

I'm sorry, but I can only strongly disagree. HTML is still the most important part of every website. Actually every website exists of HTML. CSS and JS are only sugar on top. Writing correct HTML makes a website standard-conformant and accessible. Saying "it's possible to build a working website without learning HTML properly by using frameworks" is exactly the reason why there are developers using a div as button and excluding many people from websites by making them inaccessible.

Collapse
adwdv profile image
advancedweb.dev Author

It never hurts to learn the basics, we all know serious frontend developers learn HTML deeply. But you see the trend of no-code apps, things are getting more and more abstract.

Collapse
mgrsskls profile image
Michael Großklaus

I'm not sure what no-code apps are, but it's not about wether it hurts or not to learn the basics. Every frontend developer needs to learn HTML seriously, even if they want to become "just" a javascript developer. In the end the output is always HTML and this output needs to be accessible. Otherwise you're excluding people.
Writing "it's possible to build a working website without learning HTML properly by using frameworks" is simply wrong, imho. Frameworks don't prevent you from writing wrong, inaccessible HTML.

I really don't want to rant, but I'm afraid that people who start learning how to code read this and then think they can go on without learning HTML.

Thread Thread
adwdv profile image
advancedweb.dev Author

For the near future your point is strong and true! I still believe in the evolution of building a decent website without caring too much raw html/css behind the scene.

Collapse
oivoodoo profile image
Alexandr K

probably it would help to stop inventions in JS frameworks. Once no one knows html/css and how everything works it would be easy to use React for everything and everyone will become full stack developers :)

Thread Thread
adwdv profile image
advancedweb.dev Author

It's actually true when you work with React Native, at very basic you don't care about what happening behind the scene. I predict in the future when those JS framewors are so strong and abstract enough, you can write a wesite at will without caring too much about what bundlers transpiling to and how browsers rendering.

Collapse
arberbr profile image
Arber Braja

Undervaluaing HTML is wrong.

This is what is happening right now with most of the developers who get introduced with Web Development.

They learn how to use tools (tools like CMS, frameworks, etc) but dont learn the basics.

They use WordPress and they see, im a web developer now without even knowing whats an h1, h2, etc or the difference between "b" and "strong".

This is what makes us as developers dependant on our tools. And when those tools get obsolete so do we.

Learning the basics and on top of them, using them as a strong foundation, we keep adding more and more knowledge thats the safest way to survive and strive in the web developers market.

And the basis of web development are html, css, js and php (we like it or not).

Collapse
chrisachard profile image
Chris Achard

Nice overview - seeing it all typed out really emphasizes that there are so many little moving parts!

When I teach people how to code, it's always a struggle to figure out when to introduce which technology. Do you know of any resources or articles that talk about good ways to teach other people without overwhelming them, when there are so many options?

Collapse
adwdv profile image
advancedweb.dev Author

IMHO there are no such resources, it all comes down to personal choices. Maybe you could find some recommended lists which are often very long to cover necessary things. The best way to teach people is: you build a product, you pick your tech stack, you talk about that as starting point, people will figure out alternatives if they want to!

Collapse
chrisachard profile image
Chris Achard

Yeah, that's what I've found as well so far. Thanks!

Collapse
adam_cyclones profile image
Adam Crockett

So I have this question on my mind pre working with other languages, is node and browser a qualified full stack. Ultimately JavaScript is a scripting language controlling an engine that does all the work. The engine is important. I know I wanted to be fullstack in the true sense so I went and learned c++ then moved on to other low level languages. Does anyone feel the same way?

Collapse
adwdv profile image
advancedweb.dev Author

Like building a house, having strong base is always good. The point is are you going to build the house or not! Becoming fullstack is good to build your own ideas fast. To me there's no fullstack in true sense because it's too broad!