JS: Frontend architecture

Included in the course

What you'll learn

• Build modular and easily extensible front-end applications
• Correctly separate applications into layers and build dependencies between them
• Structure the state of the application in an optimal way
• Use the theory of automata to describe the ongoing processes in the code

Description

Despite the abundance of different frameworks and ways to develop front-end applications, there are fundamental principles that are used everywhere and practically do not change. They concern splitting the application into layers (for example, MVC), separating the state and organizing it, working with texts, and controlling form data. This course teaches how to build an application architecture without being tied to specific solutions and their features.

Course program

• 1

  Introduction

  Explore the course and its objectives

  theory
• 2

  Application state

  Explore the concept of separating program data from presentation (page appearance)

  theory

  exercise

• 3

  Complex state

  Learn best practices for organizing the structure of a complex state

  theory

  quiz

  exercise

• 4

  Rendering state

  Explore different strategies for updating a view based on data

  theory

  exercise

• 5

  UI State

  Explore the concept of UI state and learn how to properly organize it without mixing it with application data

  theory

  exercise

• 6

  Processes and automata that describe them

  Learn to see root processes and build a state based on them

  theory

  quiz

  exercise

• 7

  Data normalization

  Learn the basic principles of data normalization

  theory

  exercise

• 8

  MVC

  Learn the Model-View-Controller architecture

  theory

  quiz

  exercise

• 9

  Form State

  Learn about different ways to control form state

  theory

  quiz

  exercise

• 10

  Organization of interface texts

  Learn how to properly store, process, and display inscriptions and texts on the site

  theory

  quiz

  exercise

• 11

  Application initialization

  Learn how to properly separate applications into different stages of work

  theory

  quiz

  exercise

• 12

  Additional resources

  Some materials the Hexlet team have picked up. This will give you a more in-depth understanding of the topic

Challenges

We recommend working on these challenges after completing the course. They'll help you obtain more experience in programming and strengthen your new skills.