7. JavaScript frameworks

Tooling

Extensions modules

JavaScript frameworks are commonly used by companies to build web applications. It is therefore beneficial to learn about popular frameworks and use cases (as listed below) for better employment prospects.

Notes:

  • Conforming to this set of criteria does not involve becoming a master of a particular framework and learning everything it has to offer. To do so can be limiting — one framework might be the most popular choice now, but in five years everything could change.
  • Instead, we want to encourage students to gain a solid understanding of the JavaScript fundamentals frameworks are built on top of (see JavaScript fundamentals), and learn the common features and patterns that frameworks use. This approach is much more flexible and future proof.
  • Students are strongly encouraged to start building apps with 2 or 3 popular frameworks so they understand how they do things in general but also the differences between them.
  • Advanced and/or framework-specific features can be learned as part of the student's constant learning.

Learning outcomes:

  • Understand how to start using frameworks:
    • Link to the relevant JavaScript files, either locally or on a CDN (not usually recommended).
    • Use a dependency manager such as npm to add it to your project.
    • Install a CLI such as Vite and use it to generate a skeleton framework-based application that you can modify. This is the easiest way to get started.
  • The fundamentals of a typical framework. The overall architecture will differ, but most frameworks include the following in one form or another, which you should learn about:
    • Component systems:
      • Props.
      • Data binding.
      • Event handlers.
      • Dependency injection.
      • Component lifecycle system.
    • Templating language:
      • Usually a domain-specific language (DSL) such as JSX or handlebars.
      • Includes features such as filtering and conditional rendering.
    • Rendering system (for example, virtual or incremental DOM).
    • State management.
    • Routing.
    • Styling system to apply CSS to your components.
    • Dependency management.
    • Extension system.
  • Understand the practicalities of working with a framework. Most framework-related CLIs or development environments include:
    • A local testing server that refreshes on file save.
    • A useful set of extensions for popular code editors (for example VSCode) that provide features like linting and code completion for framework-specific code.
    • An integrated system for writing tests (see also Extension 6 Testing).
    • Facilitation for deployment to a remote server (most deployment tools such as Netlify and Vercel have integrations/tooling for working with both GitHub and popular frameworks).

Resources:

Previous: 6. TestingNext: 8. CSS tooling