Swim Web Framework
The Swim Web framework implements a thin web application framework built on the
Swim UI toolkit. Swim Web makes it easy to embed Swim UI
views and Swim UX widgets in any
web page by simply adding special
swim- attributes to ordinary HTML elements.
Swim Web is a part of the broader Swim System
The Swim Web framework consists of the following component libraries:
@swim/web– umbrella package that depends on, and re-exports, all Swim Web libraries.
@swim/site– minimalist components that implement common dynamic website behaviors.
@swim/app– lightweight application loader that dynamically instantiates views and controllers declared by
For an npm-managed project,
npm install @swim/web to make it a dependency.
TypeScript sources will be installed into
node_modules/@swim/web/lib/main. And a pre-built UMD script, which
@swim/web component libraries, can be found in
Browser applications can load
swim-web.js, along with its
swim-ui.js dependencies, from the Swim CDN.
<script src="https://cdn.swim.ai/js/latest/swim-core.js"></script> <script src="https://cdn.swim.ai/js/latest/swim-ui.js"></script> <script src="https://cdn.swim.ai/js/latest/swim-web.js"></script>
Alternatively, the standalone
swim-system.js script may be loaded
from the Swim CDN, which bundles
@swim/web along with all other
@swim/web can be imported as an ES6 module from TypeScript and other
ES6-compatible environments. All component libraries are re-exported,
in their entirety, from the top-level
import * as swim from "@swim/web";
@swim/web can also be used with CommonJS-compatible module systems.
All component libraries are re-exported, in their entirety, from the
var swim = require("@swim/web");
When loaded by a web browser, the
swim-web.js script adds all component
library exports to the global
swim namespace. The
swim-ui.js have already been loaded.
swim-system.js script also adds all
@swim/web component library
exports to the global
swim namespace, making it a drop-in replacement
swim-web.js when additional
@swim/system frameworks are needed.
swim-web-js can be built against the currently checked out
swim-ui-js sources by compiling it from the parent
Install build dependencies:
swim-web-js $ npm install
bin/build.js script to build the Swim Web framework.
The build script supports
described below. All build script commands take an optional
-p) option to restrict the build to a comma-separated list of projects.
Each project supports multiple output targets; typical targets for a project
main, to build the main sources, and
test, to build the test
sources. A specific target can be built for a project by appending a colon
:) and the target name to the project name. For example, to build just the
main sources of the
util project, pass
-p util:main to the build script.
Most build commands take a
-d) option to expedite development
builds by skipping the minification step.
bin/build.js help to see a complete list of build commands. Run
bin/build.js <command> --help to see a list of options supported by a
particular build command.
compile build script command to compile, bundle, and minify
dist subdirectory of each project. To compile all targets,
of all projects, run:
swim-web-js $ bin/build.js compile
To compile a subset of projects and targets, include a
option, with a comma-separated list of
For example, to build the
main target of the
app project, and all
targets of the
web project, run:
swim-web-js $ bin/build.js compile -p app:main,web
test build script command to compile and run unit tests.
For example, to compile and test the
site project, run:
swim-web-js $ bin/build.js test -p site
Continuous development builds
watch build script command to automatically rebuild projects when
dependent source files change. For example, to continuously recompile the
main target of the
app project when any source file in the project–or
in one of the project's transitive local dependencies–changes, run:
swim-web-js $ bin/build.js watch -p app:main
-d) option to expedite recompilation by skipping the
minification step. Add the
-t) option to automatically run unit
tests after each successful compilation. For example, to continuosly compile
and test the
site project, bypassing minification, and skipping generation
of the main script, run:
swim-web-js $ bin/build.js watch -p site:test -d -t