Register to get access to free programming courses with interactive exercises

Introduction JS: Frontend architecture

Knowing how to use JavaScript and how to work with the DOM are the basic building blocks on which everything else is built. You need them to create applications that work well, are easily maintained, and can be extended, but they're not the only thing. There's actually much more. Working with the DOM without having a deep understanding of how code is organized will cause nothing but problems.

This approach still works for developers who make small widgets, for example, in jQuery. But as soon we get to making a full-fledged frontend application, the approaches that were used to create widgets will immediately prove themselves a disadvantage. Just add a dozen or so handlers and the code will turn into a load of unsupported spaghetti.

Fortunately, learning how to build architecture for frontend applications isn't that difficult. Moreover, all these approaches were developed decades ago, literally when the first visual interfaces first appeared. It's hard to believe now, but it was invented quite a long time ago.

Moreover, these approaches go virtually unchanged from framework to framework. That's why in this course, they'll be given in "raw" form, without reference to any frameworks. Here, we'll tell you about and explorer the underlying approaches that are instrumental when it comes to architecture.

The main subjects in this course are:

  • State management and organization
  • Model-View-Controller
  • Controlled and uncontrolled forms
  • Automata-based programming
  • Working with texts. Internationalization, localization, and pluralization


Architectural issues come up for developers when they have worked with the code, at least a little, and see how quickly it becomes unsupported. This course is no exception, and it was created with slightly more experienced students in mind. This experience can be gained independently outside of Hexlet, as well as on Hexlet as part of the profession Frontend Developer. In terms of the program, this course comes after learning the JavaScript language itself, doing a few projects, and taking the course on the DOM API. If you don't know frontend development to this extent, we recommend you take this course later and carry on the profession without missing any practical assignments.

Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
hours of theory

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing:">Bookmate</span>
<span class="translation_missing" title="translation missing:">Healthsamurai</span>
<span class="translation_missing" title="translation missing:">Dualboot</span>
<span class="translation_missing" title="translation missing:">Abbyy</span>
Suggested learning programs
Development of front-end components for web applications
10 months
from scratch
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.