1. Introduction
  2. Getting Started
  3. Using the CLI
  4. Coding Guide
  5. Assertions
  6. OOP
  7. Utils & Async
  8. Data Structures
  9. Universal Events
  10. Templating
  11. Indexed Tables
  12. Entities
  13. I18n
  14. Routing
  15. API Access
  16. Widgets
  17. Basic Widgets
  18. Asset Mgmt
  19. Session Mgmt
  20. Best Practices

Introduction

Giant is a full-featured, modular framework for building complex, modern Single-Page Applications. It targets multi-platform, enterprise-grade projects, stimulating unlimited, steady growth.

The purpose of Giant is to give developers a single, coherent system with recurring practices and patterns, serving as a solid foundation to a wide variety of applications. At the same time, Giant's modular structure allows for a great deal of flexibility, as any of its modules may be replaced with a functionally equivalent (set of) libraries. Or, individual modules of Giant may be used to fill the gaps in other frameworks.

Parts of Giant have been used in various projects since 2010. It's been revised, improved, and for some parts, redesigned multiple times, based on experience building actual, ambitious, large-scale applications. It's a framework which, despite being 'new', is past its maturation phase.

Directives

Giant is governed by five directives, which ensure forward compatibility and guide the development process even when implementation details change.

  1. Modularity: Keeping it a family of independent but interconnected libraries.
  2. Extensibility: Allowing framework components to be augmented or changed.
  3. Closed dependency tree: Limiting external dependencies to a minimum.
  4. Feature richness: Covering all aspects of modern single page applications.
  5. Recurring patterns: Applying the same practices to similar tasks throughout the framework and application.

Giant encourages the application of these directives to the SPAs built with it.

Modules

In Giant, each module takes care of a specific aspect of the application. Modules are self-containing npm packages, able to run both in modern browsers and under Node.js. On the figure below, each bubble represents a module of the framework, organized into 3 tiers: essentials, core, and auxiliary. Modules in one tier may only depend on modules in the same or lower tiers. Modules that are grayed out are not published yet.

Module structure (Open in new tab to magnify)

Essentials tier

Basic functionality for building classes, logging errors, coupling components, and managing templates and data objects.

Core tier

Low-level and common application components. The core tier alone is enough to build applications, when auxiliary tier models are not necessary or not suitable.

Auxiliary tier

High-level components for assisting development, deployment, and logging.

Application architecture

The typical Giant-based application is made up of a handful of high-level components. Each component serves a specific purpose, and is based on one or more of the framework modules.

In the figure below, each block represents one such component, using and listening in on connected components.

Architecture

General

Serves the entire front end stack. Based on essentials-tier modules, such as giant-assertion, giant-oop, giant-utils, giant-data, giant-events, and giant-templating, as well as application-domain general utilities.

Transport

Communicates with the server. Based on giant-ajax and parts of giant-rest. Controls and listens to the browser's XMLHttpRequest object.

Model

Manages the application's data layer. Based on giant-entity, parts of giant-rest and optionally giant-table.

Controls and listens to the 'transport' component.

Widgets

Making up most of an application's codebase, this component is where UI logic is implemented. In an MVC approach, the 'widgets' component is equivalent to the view-controller. Based on giant-widget, giant-basic-widgets, and other widget modules.

Controls and listens to the DOM, 'model', 'session', 'i18n', 'routing', and 'general' components. It is not allowed to access the 'transport' component directly though.

Session

Manages the authenticated user. Based on giant-session.

Controls and listens to the 'model' and 'transport' modules, and is being controlled by the 'widgets' component.

Internationalization

Manages locales and translated text. Based on giant-i18n.

Controls and listens to the 'model' component, is being controlled by 'widgets'.

Routing

Manages navigation within the application. Based on giant-routing.

Controls window.location, is controlled by the 'widgets' component.