JavaScript · Advanced level

Advanced level · Module 3: Application Architecture without a Framework · Lesson 1 of 4

Structuring a Larger Front End

Separate data access, state, business rules and views into modules with clear dependencies.

In this lesson you will

  • Organise code into layers with one-way dependencies
  • Identify and fix modules with mixed responsibilities

Key concepts

layered architecturedependency directionfeature folderspure functions

The lesson

As apps grow, mixing fetch calls, rules and DOM updates in one file makes changes risky. Separate layers: data access (API and storage), state, domain logic (pure functions) and views.

Dependencies should point one way: views use state and logic; logic never touches the DOM. Pure functions — the same inputs always give the same output, with no side effects — are easy to test and reuse.

Group files by feature (visits, households, reports) when the app has several areas. Each feature folder holds its views, logic and tests.

Step by step

  1. Map the prototype's functions to layers.
  2. Move pure logic into its own module and test it.
  3. Move all fetch and storage calls into a data module.
  4. Check that no logic module imports a view module.

Practice activity

Produce a layer diagram for the visit tracker and refactor the prototype to match it.

Expected result: Each module belongs to one layer and dependencies point in one direction.

Check your understanding

  1. What makes a function pure?

    Show answer

    It returns the same output for the same inputs and has no side effects.

  2. Which layer may update the DOM?

    Show answer

    Only the view layer.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.