Angular Training

Presentation of Angular

What is Angular ?

Angular is more than just a frontend framework with which to build Single Page Applications (SPA). It is a full-fledged development platform built on TypeScript that comprises:

  • A component-based framework for building scalable web applications.
  • A collection of well-integrated libraries that cover a wide variety of features including routing, form management, client-server communication, progressive web apps and more.
  • A suite of developer tools to help you develop, build, test, and update your code via the Angular CLI.

Angular is developped and maintained by Google, its initial release date was in September 2016. It is a full rewriting of AngularJS and as such is a different framework.

A bit of history

AngularJS, developed by Google and released in 2010, was a pioneering framework for building dynamic web applications using HTML and JavaScript. Its key features, such as two-way data binding and dependency injection, revolutionized front-end development by allowing developers to build complex applications more efficiently. In 2016, Google released Angular 2, a complete rewrite of AngularJS, introducing a component-based architecture and significant performance improvements. This marked the transition to the modern "Angular" framework (without the "JS"). Subsequent versions, starting from Angular 4, continued to enhance performance, introduce new features like Angular Universal for server-side rendering, and improve tooling with the Angular CLI.

Server generated pages vs SPA + API

There are two common models for developing websites:

  • Server-generated pages:
    • The presentation and the data of each page is generated by the server before delivering it to the client
    • Generally stateful (it means that data is shared during page navigation using sessions and cookies)
    • The UI and business logic are coupled
    • The response body is generally heavier because it contains both the UI and the data
    • Also called multi-page applications (because each view is represented by a separate page)
    • Some example frameworks: PHP, Symphony, JSP, Tapestry, ASP Razor pages

server page

  • Single Page Application (SPA) + API:
    • The UI consists of a single static HTML file. The file is said to be static because the server does not modify the page before delivering it
    • The data is dynamically fetched from the server when the client needs it
      • The server that serves the data is commonly called an API/backend server
      • The data is generally in JSON format
      • It is not necessary to provide an API (for example, a video game SPA)
    • The page content is altered by the client through DOM manipulation. This allows, for example, to simulate a view or page change
    • The client uses Javascript in order to fetch dynamic data and manipulate the DOM
    • This model is similar to the one used in mobile apps (the SPA is analogous to the mobile app)

server page

An Angular application is an SPA that is complemented by an API if needed. There are other SPA frameworks such as Vue.js, React and Ember.js (the last one is the least popular). Each framework has its own strengths and weaknesses.

Advantages of using Angular

Angular presents numerous advantages:

  • It is particularly well suited to projects that need to scale and to that effect, it is mainly used for enterprise projects.
  • Its rich official library ecosystem enables great consistency across projects which means that when transferring teams or projects you will only need to learn about the new business domain and not an entirely new way of doing things because another library set choice was made.
  • It is very well documented and the consistency in the way the framework is used means you are more than likely to find any question you may encounter along your learning journey already answered.
  • The Angular team takes a lot of pride in how easy they make updating Angular projects, providing easy steps to follow and some fully automated migration.

Framework comparison

React

Strengths: Flexibility, large ecosystem, strong community support.
Key Features: Component-based architecture, promoting reusable UI components.
Use Cases: Ideal for large-scale applications due to its efficient rendering capabilities.

Angular

Strengths: Comprehensive framework with built-in features.
Key Features: Dependency injection, powerful routing capabilities, predefined tools.
Use Cases: Best suited for enterprise-level applications that require a robust structure.

Vue.js

Strengths: Simplicity and ease of integration, gentle learning curve.
Key Features: Reactive data binding and a flexible architecture allow for scalability.
Use Cases: Commonly used in projects ranging from small applications to large-scale deployments, especially when a quick setup is needed.

Svelte

Strengths: Innovative compilation approach, performance.
Key Features: Compiles components at build time, resulting in optimized output with minimal runtime overhead.
Use Cases: Suitable for projects where performance is critical and where developers seek to minimize client-side processing.

The choice of framework depends on project requirements, team expertise, and preferred development paradigms. Each framework has its unique strengths and is suited for different types of development needs.