Foundry Industrial Strength JavaScript

Foundry: Industrial Strength JavaScript

Download Browse the Code

Foundry is:

Why Foundry?

Foundry is a modern, object oriented JavaScript framework built for speed of development, flexibility and file size.

It doesn't make arrogant assumptions about how you write your applications, but it comes with some handy defaults. Don't like how it works? No problem. Everything in Foundry is coded to an interface. Roll your own implementation!

Foundry is Modular

Foundry is coded to an interface, so anything can be plucked out of the web page and live on its own. This makes Foundry easy to test. All controllers in Foundry are built to live on their own, but can communicate with one another through events.

Foundry is Declarative

Forget about hand writing JavaScript just to make the application work. Use HTML5 data attributes to declare the modules on the page, and even the user interaction. No more hunting around for event handlers bound to HTML tag class names. It's easy to debug. Lazy load modules as they scroll into view, or use CSS3 Media Queries to restrict when a module gets created!

<div data-modules="taskList"
     data-module-options='{"controllerId": "tasks"}'
     data-module-media="screen and (min-width: 600px)"
     data-module-lazyload="any"
>
  Task: <input type="text">
  <button data-actions="tasks.add">Add Task</button>
</div>

Foundry is Extendable

All the players in the system are wired together using Inversion of Control and Dependency Injection. It's easy to swap out one component for another, or extend existing components.

Foundry.run(function(dependencies, options) {
    dependencies.merge({
        moduleObserver: {
            type: "MyCustomModuleObserver",
            singleton: true
        },
        taskList: {
            type: "TaskListModule",
            parent: "module",
            properties: {
                tasks: "taskRepository"
            }
        },
        taskRepository: {
            type: "TaskRepository",
            singleton: true,
            properties: {
                xhr: "ajax",
                url: { value: "/tasks" }
            }
        },
        ajax: {
            type: "XMLHttpRequest"
        }
    });
});

Get started today!