DEV Community

Hamed Farag
Hamed Farag

Posted on • Edited on

8

Frontend Architecture: Introduction

An Introduction

Over the last few years, the frontend evolved very fast, and many topics, frameworks, libraries, and techniques were introduced.

I remember when the frontend developer/engineer used to be called a "UI Developer", and receive a design screen from the designer as a PSD (Photoshop Document File), and with his skills, he should extract the assets by slicing the needed icons, background or whatever he wants and then use these extracted images into the HTML and adjust them using the CSS, and of course, writes some JavaScript code (jQuery Code, to be more accurate) to add some interactivity to some elements like an open popup or confirmation dialogs and so on. And also write some CSS to add some padding, margin, and a lot of floats to match the design.

I can remember if someone writes some styles using any CSS Preprocessor like LESS or SASS, he will be categorized as a Geek Developer.

But Now, do you think it is easy to create a simple frontend project without using any framework or library? The answer is *YES *, of course, you can create a new one using the basics (HTML, CSS, and JavaScript), but do you dare to do that?

New year, new frameworks?

Can you count, do you? okay, we have tons of libraries and frameworks, and each one of them resolves a problem in the real world or a problem in another library or framework. Also, a lot of techniques you should choose one of them, a simple example.

  • Choose one of the following to write your styles in your next project, (CSS, LESS, SASS, CSS-IN-JSS, or utility-first CSS).
  • mmmmh
  • Okay, whatever your choice, your choice is based on what?
  • 🤔🤔

So, in the series, we will talk about a lightweight guideline for Frontend Architecture and the aspects you should think about and consider while building your next project.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay