This project allows coding in a structured environment to create apps following the Simply App Architecture.

As a sample application, we've built SimplyCode in SimplyCode. The code for is bundled with this project. You can browse the code in the /www/api/data/ directory of this project, or from SimplyCode once you have the environment setup. SimplyCode can of course be used to build other applications as well.

Server stores data. It has an API to access it. Raw API component speaks to the server. Data API exposes the endpoints in javascript. Combined, they provide CRUD-L for the data on the server.

This component is responsible for communicating with the server. It knows things like where the server is, what authentication to use. Maps cleanly on a protocol level - in the cast of a REST API, this will expose functions for get, post, put, delete. Handles encoding and decoding of data for calls.

The data API component has knowledge of what information is available on the server, and is responsible for fetching and storing that information.

Makes use of the Raw API component for communication with the server.

Maps endpoints on the server API for us to use. Exposes functions like 'getServers'.

The App API layer consists of Actions, Commands and Routes.

This component can be seen as the internal API for the app. Has no knowledge of the DOM. Has no knowledge of the server API. Data API to store/fetch information. Changes the app State. Is triggered by code (usually a command or a route).

This component are handlers for keyboard input by a user. This can either be a 'global' keyboard shortcut, or one that is defined on a DOM element using the data-simply-accesskey attribute. Makes use of Actions to change editor State.

Is a component that is triggered by a user action. Usually triggered in the DOM, for example a user clicking a button. Can access DOM elements, is aware of a DOM structure. Can show UI notifications. Makes use of Actions to change editor State.

Is triggered by a user action. Usually by navigating to a URL. Translates a URL to a combination that fetches data with a page. Makes use of Actions to fetch data. Sets the Page template to display the data with.

Keeps track of data. Knows what the current Page template is.

This component provides the HTML structure for a page. Consists of a combination of Design components. Or just plain HTML, CSS and JS. Uses SimplyEdit markup in the HTML to render data and attach Commands.

A combination of HTML, CSS and JS to make up a custom HTML component. Uses SimplyEdit markup in the HTML to render data and attach Commands.

Transformers, sorters and data sources

These components bridge the data to the user. Renders data into something that can be displayed in an HTML element for the user. Extracts data from an HTML element back into the data structure. data-simply-transformer is set on a data-simply-field

Used by Actions to sort data before it goes in the app State.

Used for read-only data sets. Not the main subject of the page. data-simply-data is set on a data-simply-list.