Apps

Apps represent the top-level-components of an infrastructure-components-based project. In your entry-point source file, e.g. src/index.tsx (yes, you can use typescript with jsx-extension in this file – out of the box), you need to export an app-component as default, like this:

import * as React from 'react';

import {
    SinglePageApp
} from "infrastructure-components";

export default (
    <SinglePageApp
        stackName = "spa-example"
        buildPath = 'build'
        region='us-east-1' />
);

The app-component determines the architecture of your project at runtime. Each architecture has advantages and may be suited for certain use-cases.

While a change of the architecture is a breaking change in a traditional project setup, infrastructure-compponents support this out of the box! If you want to change the architecture of your application, just replace the top-level-component and you’re done!

Each app-component supports running it offline (on your development machine) and deploying it to the Amazon Web Services (AWS) cloud with a single command!

Single-Page-App

A Single-Page-App (SPA) is an interactive web application that rewrites the current page rather than loading new pages from a server. In fact, a SPA consists of a very basic html that simply loads the app`s Javascript-code. Once loaded, this code creates a user experience that avoids interruption between successive pages and behaves more like a desktop application than a traditional website.

Single-Page-App provides further details on Infrastructure-Component’s SinglePageApp.

Service-Oriented-App

A Service-Oriented-App (SOA) is an interactive web application just like a Single-Page-App. Additionally, it supports services. These services run as AWS Lambda function on the server side.

Service-Oriented-App provides further details on Infrastructure-Component’s ServiceOrientedApp.

Isomorphic-App

An Ismorphic-App (aka universal app) is an interactive web application that complements the advantages of a single-page-app with the ability of server-side-rendering. In an isomorphic setting, the server renders the whole Javascript-code and returns a full html-file to the browser. As a result, the browser can display the html without any further processing.

An Isomorphic-App downloads the Javascript-code to the browser, too. This enables a dynamic user experience.

Isomorphic-App provides further details on Infrastructure-Component’s IsomorphicApp.