The @swim/system umbrella framework provides a standalone set of frameworks
for building massively real-time streaming WARP clients and web user interface
applications. @swim/system encompasses the
@swim/core
foundation framework, the
@swim/mesh
multiplexed streaming WARP framework, the
@swim/ui
and @swim/ux
real-time user interface toolkits, and the
@swim/web
real-time web application framework.
The Swim System umbrella framework has no external dependencies when run
in a web browser, and depends only on a WebSocket implementation when run in
Node.js. Swim System provides the following top-level libraries:
@swim/system
(npm,
doc) –
umbrella package that depends on, and re-exports, all Swim System
child frameworks and libraries.
The Swim Core framework provides a lightweight, portable, dependency-free,
and strongly typed baseline on which to build higher level libraries.
Swim Core consists of the following component libraries:
@swim/core
(npm,
doc) –
lightweight, portable, dependency-free foundation framework.
@swim/util
(npm,
doc) –
ordering, equality, and hashing; type conversions; iterators; builders;
maps; caches; and assertions.
@swim/codec
(npm,
doc) –
incremental I/O; functional parsers and writers; display, debug, and
diagnostic formatters; and Unicode and binary codecs.
@swim/collections
(npm,
doc) –
immutable, structure sharing collections, including B-trees and S-trees
(sequence trees).
@swim/structure
(npm,
doc) –
generic structured data model, with support for selectors, expressions,
and lambda functions. Used as a common abstract syntax tree for Recon,
JSON, XML, and other data languages.
@swim/streamlet
(npm,
doc) –
stateful, streaming component model for application componets that
continuously consume input state from streaming inlets, and continuously
produce output state on streaming outlets.
@swim/dataflow
(npm,
doc) –
compiler from @swim/structure expressions to live-updated data models.
@swim/recon
(npm,
doc) –
object notation with attributes, like if JSON and XML had a baby.
@swim/math
(npm,
doc) –
mathematical and geometric structures and operators.
@swim/time
(npm,
doc) –
date-time, time zone, and time interval data types,
with strptime/strftime-style parsers and formatters.
@swim/uri
(npm,
doc) –
rich object model for working with Uniform Resource Identifiers and URI
subcomponents, including an efficient and safe codec for parsing and
writing compliant URI strings.
The Swim Mesh framework implements a multiplexed streaming WARP client that
runs in both Node.js and web browsers. Swim Mesh consists of the following
component libraries:
@swim/mesh
(npm,
doc) –
multiplexed streaming WARP framework that runs in Node.js and web browsers.
@swim/warp
(npm,
doc) –
WebSocket protocol for dynamically multiplexing large numbers of bidirectional
links to streaming APIs, called lanes, of URI-addressed distributed objects,
called nodes, that run stateful distributed processes, called Web Agents.
@swim/client
(npm,
doc) –
streaming API client for linking to lanes of stateful Web Agents using the
WARP protocol, enabling massively real-time applications that continuously
synchronize all shared states with ping latency.
The Swim UI framework implements a massively real-time user interface
toolkit, with a unified view hierarchy for HTML, SVG, and Canvas components,
animated procedural styling, and constraint-based layouts. Swim UI
consists of the following component libraries:
@swim/ui
(npm,
doc) –
massively real-time user interface toolkit, with a unified view hierarchy
for HTML, SVG, and Canvas components, animated procedural styling, and
constraint-based layouts.
@swim/angle
(npm,
doc) –
dimensional angle types with unit-aware algebraic operators, conversions,
and parsers.
@swim/length
(npm,
doc) –
DOM-relative length types with unit-aware algebraic operators, conversions,
and parsers.
@swim/color
(npm,
doc) –
RGB and HSL color types with color-space-aware operators, conversions,
and parsers.
@swim/transform
(npm,
doc) –
CSS and SVG compatible transform types with unit-aware algebraic operators
and parsers.
@swim/interpolate
(npm,
doc) –
interpolator types for blending between values, such as numbers, dates,
angles, lengths, colors, transforms, shapes, arrays, structures, and
other interpolators.
@swim/scale
(npm,
doc) –
scale types that map numeric and temporal input domains to interpolated
output ranges, with support for continuous domain clamping, domain solving,
range unscaling, and interpolation between scales.
@swim/transition
(npm,
doc) –
transition types that specify duration, ease, interpolator, and lifecycle
callback parameters for tween animations.
@swim/animate
(npm,
doc) –
property-managing animator types that efficiently tween values between
discrete state changes.
@swim/dom
(npm,
doc) –
CustomEvent and ResizeObserver polyfills.
@swim/style
(npm,
doc) –
CSS style types and universal style value parser.
@swim/render
(npm,
doc) –
renderable graphic types for SVG and Canvas compatible path drawing contexts,
and Canvas compatible rendering contexts.
@swim/constraint
(npm,
doc) –
incremental solver for systems of linear layout constraints.
@swim/view
(npm,
doc) –
unified HTML, SVG, and Canvas view hierarchy, with integrated controller
architecture, animated procedural styling, and constraint-based layouts.
@swim/shape
(npm,
doc) –
canvas shape views, with animated geometry and style properties.
@swim/typeset
(npm,
doc) –
canvas typesetting views, with animated text, layout, font, and style properties.
The Swim UX framework implements seamlessly animated user interface widgets,
including gauges, pie charts, line, area, and bubble charts, and geospatial map
overlays. Swim UX consists of the following component libraries:
@swim/ux
(npm,
doc) –
seamlessly animated user interface widgets, including gauges, pie charts,
line, area, and bubble charts, and geospatial map overlays.
@swim/chart
(npm,
doc) –
multi-plot, fully animatable, canvas rendered chart widget, suppporting line,
area, and bubble graphs, with customizeable axes, and kinematic multitouch
scale gestures for panning and zooming with momentum.
@swim/map
(npm,
doc) –
canvas views for efficiently rendering geospatially located map overlays,
including fully animatable views for lines, circles, and polygons.
@swim/mapbox
(npm,
doc) –
support for overlaying @swim/map views on Mapbox maps.
The Swim Web framework implements a thin web application framework built
on the Swim UI toolkit. Swim Web consists of the following component
libraries:
@swim/web
(npm,
doc) –
thin web application framework built on the @swim/ui toolkit.
@swim/site
(npm,
doc) –
minimalist components that implement common dynamic website behaviors.
@swim/app
(npm,
doc) –
lightweight application loader that dynamically instantiates views and
controllers declared by swim- HTML attributes.
For an npm-managed project, npm install @swim/system to make it a dependency.
TypeScript sources will be installed into node_modules/@swim/system/main.
Transpiled JavaScript and TypeScript definition files install into
node_modules/@swim/system/lib/main. And a pre-built UMD script, which
bundles all @swim/system child frameworks, can be found in
node_modules/@swim/system/dist/main/swim-system.js.
Browser applications can load swim-system.js directly from the Swim CDN.
The swim-system.js bundle is self-contained; it supersedes swim-core.js,
swim-mesh.js, swim-ui.js, swim-ux.js, and swim-web.js—those scripts
need not be loaded when using swim-system.js.
@swim/system can be imported as an ES6 module from TypeScript and other
ES6-compatible environments. All child framework libraries are re-exported
by the umbrella @swim/system module.
@swim/system can also be used as a CommonJS module in Node.js applications.
All child framework libraries are re-exported by the umbrella @swim/system
module.
@swim/system
The @swim/system umbrella framework provides a standalone set of frameworks for building massively real-time streaming WARP clients and web user interface applications. @swim/system encompasses the @swim/core foundation framework, the @swim/mesh multiplexed streaming WARP framework, the @swim/ui and @swim/ux real-time user interface toolkits, and the @swim/web real-time web application framework.
Umbrella Framework
The Swim System umbrella framework has no external dependencies when run in a web browser, and depends only on a WebSocket implementation when run in Node.js. Swim System provides the following top-level libraries:
Swim Core Framework
The Swim Core framework provides a lightweight, portable, dependency-free, and strongly typed baseline on which to build higher level libraries. Swim Core consists of the following component libraries:
strptime/strftime-style parsers and formatters.Swim Mesh Framework
The Swim Mesh framework implements a multiplexed streaming WARP client that runs in both Node.js and web browsers. Swim Mesh consists of the following component libraries:
Swim UI Framework
The Swim UI framework implements a massively real-time user interface toolkit, with a unified view hierarchy for HTML, SVG, and Canvas components, animated procedural styling, and constraint-based layouts. Swim UI consists of the following component libraries:
Swim UX Framework
The Swim UX framework implements seamlessly animated user interface widgets, including gauges, pie charts, line, area, and bubble charts, and geospatial map overlays. Swim UX consists of the following component libraries:
Swim Web Framework
The Swim Web framework implements a thin web application framework built on the Swim UI toolkit. Swim Web consists of the following component libraries:
swim-HTML attributes.Installation
npm
For an npm-managed project,
npm install @swim/systemto make it a dependency. TypeScript sources will be installed intonode_modules/@swim/system/main. Transpiled JavaScript and TypeScript definition files install intonode_modules/@swim/system/lib/main. And a pre-built UMD script, which bundles all @swim/system child frameworks, can be found innode_modules/@swim/system/dist/main/swim-system.js.Browser
Browser applications can load
swim-system.jsdirectly from the Swim CDN. Theswim-system.jsbundle is self-contained; it supersedesswim-core.js,swim-mesh.js,swim-ui.js,swim-ux.js, andswim-web.js—those scripts need not be loaded when usingswim-system.js.<script src="https://cdn.swim.ai/js/latest/swim-system.js"></script>Usage
ES6/TypeScript
@swim/system can be imported as an ES6 module from TypeScript and other ES6-compatible environments. All child framework libraries are re-exported by the umbrella
@swim/systemmodule.import * as swim from "@swim/system";CommonJS/Node.js
@swim/system can also be used as a CommonJS module in Node.js applications. All child framework libraries are re-exported by the umbrella
@swim/systemmodule.var swim = require("@swim/system");Browser
When loaded by a web browser, the
swim-system.jsscript adds all child framework exports to the globalswimnamespace.