Site and App Overview

This provides an overview of the most important parts of Appframe Web structure. This is not an complete overview.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 a 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 acreoss 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 a test and production domain. 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's 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 is will use the StartUp article is used 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 is rendered using Razor. The most common usage of Razor in the article is to structure parts of it using HTML Blocks using @Render("Block", ID: "someBlockID"), but can also be used for rendering static data.

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

Client

The browser recives all the specified HTML, JavaScript and CSS. The datasource and stored procedures are now 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 data sources).

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