Skip to main content

Frameworks

Variety of frameworks​

So .. many.. choices ...

React, Angular, Vue, htmx, Svelte, Ember, Backbone, Meteor, Aurelia, Polymer, Mihtril, Express, Sails, Koa, LoopBack, Hapy, OpenUI5, Feathers, Dojo, Web Components, ...

Usage of frameworks/libraries​

Most of the JS frontend libraries/frameworks are only concerned with UI. Several libraries are needed to get everything.

Writing bigger/huge apps in JS gets messy really quickly.

  • Routing
  • State management
  • Dependency injection
  • Data binding
  • Signaling
  • Communication between modules
  • Localization
  • Animations
  • Mixing html and js / templating
  • Typescript
  • Building

Lightweight frameworks​

  • next.js - react based
  • nuxt - vue based

Actual full JS Frameworks​

  • Angular
  • Aurelia

During this course​

Initial plan

  • React – View library from FB. State management gets complex.
  • Vue.js – View library, inspired by React. Simple, lightweight.
  • to be decided... Svelte? htmx?

Defence Preparation​

Be prepared to explain topics like these:

  1. Why use a JavaScript framework instead of plain HTML/CSS/JavaScript? — As applications grow, plain JavaScript leads to tangled DOM manipulation code, inconsistent state management, and difficulty coordinating between components. Frameworks provide structured solutions for common concerns: component architecture, reactive data binding, routing, state management, and build tooling. They enforce patterns that keep code maintainable and make it easier for teams to work on the same codebase.
  2. What are the common concerns that JavaScript SPA frameworks address? — Routing (navigating between views without full page reloads), state management (sharing data between components), data binding (syncing UI with data), component architecture (reusable UI pieces), module communication (events, services, dependency injection), localization, animations, TypeScript integration, and build/bundling. Every non-trivial SPA needs solutions for most of these, whether built-in or via libraries.
  3. What is the difference between a view library (React, Vue) and a full framework (Angular)? — View libraries focus on the UI layer — rendering components and managing component state. You choose and assemble additional libraries for routing, HTTP, state management, and forms. Full frameworks like Angular provide all of these out of the box with opinionated conventions. Libraries give more flexibility and smaller bundles; frameworks give more consistency and less decision fatigue.
  4. What is a lightweight framework like Next.js or Nuxt, and why would you use one instead of plain React or Vue? — Next.js (React) and Nuxt (Vue) add server-side rendering, file-based routing, code-splitting, static site generation, and API routes on top of their respective view libraries. Plain React and Vue only handle the client-side UI. These meta-frameworks solve the infrastructure problems that every production app needs, so you don't have to configure routing, SSR, and build optimization yourself.