Site and App Overview

This provides a partial overview of the most important parts of Appframe Web structure. The most important components in an Appframe Web Site can be divided into general site components and apps.

General Site Components

  • Templates: HTML and Razor that your apps are rendered into on the server side
  • Scripts: JavaScript functionality that is shared across all your apps. The Appframe JavaScript framework resides here.
  • Stylesheets: CSS/LESS shared across all your apps. Bootstrap and Appframe specific CSS is stored here.
  • Settings: various global settings for your site.

Templates, scripts and stylesheets all have a test version and production version. This allows you to test things before pushing them out to clients. All sites will typically be configured with both test and production domains. For example test.foo.com and www.foo.com.

App (article) Components

  • HTML Blocks: contains HTML and other template langauges used to generate the HTML/DOM for your apps user interface.
  • Scripts: JavaScript code for your app. This is where you tell your data sources to fetch data.
  • Data Sources: What you use to display and manipulate data in your database.
  • Stored Procedures: Let you run stored procedures on your SQL Server.

Current changes to an article/app will show on your test server. To push changes to the production server you must publish the app. This will also create a version of that app. It is a good idea to always comment the changes you did to the app.

Rendering

Server

Appframe web apps are called articles. When your browser requests an URL for the Appframe server, it identifies the article name using the last part of the URL before a query string or hash, like this mydomain.com/abc/APPNAME?foo=bar or this mydomain.com/abc/APPNAME#Filter-dsSaker%3D%26page%3D0. If no article name is supplied, it will use the StartUp article instead.

When rendering the article on the server, it will load the specified or default template for that article. In the template, the razor expression @Render("ArticleBody") will decide where in the template the article itself is rendered.

Both the template and the article are rendered using Razor. The most common usage of Razor in the article is to structure parts, using HTML Blocks such as @Render("Block", ID: "someBlockID"), but it can also be used for rendering static data.

The server also provides an API for data and other services.

Client

The browser receives all the specified HTML, JavaScript and CSS. The datasource and stored procedures are automatically accessible as JavaScript objects. On the client side, datasources appear as data objects. (You can also create data objects that are not based on datasources).

Calling refreshDataSource() on a data object makes this data object fetch the specified data and render any HTML registered with this data object. The data object sets up a two-way binding so you can also save changes back to the server.