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?

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.