3. Demonstrator Front end - nhsconnect/nrls-reference-implementation GitHub Wiki

A single page app to help visualise what the NRL is, how it looks and how it will feature within real world work flows.

In this section:

• 3.1 Framework
• 3.2 Configuration
• 3.3 Structure
• 3.4 Build

3.1 Framework

A list of the technologies used:

• Aurelia in TypeScript
• JQuery
• MomentJS
• Bootstrap
• SASS
• FontAwsome
• WebPack
• PdfJs

The front end is built using Aurelia as the JavaScript framework.

The JavaScript is written in TypeScript and then transpiled to JavaScript for web browser compatibility.

Some features also use Bootstrap JS such as modal popups and tooltips.

To help with dates we are using the Moment JS library.

Style & Build I will talk more about SASS and FontAwsome in the Style section.

WebPack is covered in the Build section.

3.2 Configuration

There are a number of configuration files required for the front end:

• package.json
• webappconfig[.{env}].json
• tsconfig.json
• webpack.config.ts

3.2.1 Packages

To learn more about the JS and CSS packages both for building and running the app see the package.json file.

3.2.2 Web App Configs

There is a webappconfig.json file that can contain useful and configurable options that can be used to add and change features within the app at run time.

Options used:

• ENV
  This when populated determines if debug info is sent to the console.
• ValidDocumentTypes
  This sets which mime-types to support for record retrieval within the Consumer demo apps.

You can also have environment specific version such as webappconfig.production.json – these replace the default file completely rather than just override individual options.

To use an environment version you will need to specify the environment at build time, e.g. npm run build:prod

This config file is loaded into the app at run time using the ConfigService.ts service.

More details on environment specific builds is covered in the Build section.

3.2.3 TypeScript

The tsconfig.json file is used to configure the TypeScript compiler.

3.2.4 WebPack

This is covered in the Build section  

3.3 Structure

I will briefly describe the main folder structure and then move on the JavaScript App.

3.3.1 Overall Structure

The overall structure consists of:

• AppSrc
  This is where the Front end JavaScript code resides

• AppStyles
  This is where the Sass (CSS) files reside – details will be covered in the Styles section

• Images
  All files in this folder are copied over to the release bundle

• wwwroot
  This is the release bundle output folder and is regenerated on each build.

All other directories are back end specific and will be covered later in the Back end sections.

3.3.2 Aurelia App Structure

3.3.2.1 Entry

The entry point for the app is the index.html file, and from here the main.ts is the main entry into the JavaScript code.

main.ts starts the app and defines the root module which is app.ts

main.ts also defines the various top level resources like the appstyles and other dependencies like bootstrap and font-awsome.

app.ts sets our routes and defines the default root/homepage for the app, and from here the root module will be loaded.

Within the router config you can set which routes will exist in the apps top navigation bar using ‘nav: true’.

3.3.2.2 Pages

The app is very simple and consists of a few pages that are located within the pages folder as Aurelia modules.

• Home
  The apps entry page which contains the intro text and entry to the Interactive Guide.

• System Select
  This page gives an overview of the available demo apps to try out.

• System Demo
  This is a dynamic page which will display the demo app of choice, chosen from the System Select page.

• Error
  A default error page for if someone navigates to a non-existent page.

3.3.2.3 Generic Systems (Demo Apps)

This folder contains all of the generic systems by module name, and also includes a base folder which contains shared modules specific to these systems.

All systems inherit from the BaseGenericSystem.ts file which holds most of the shared logic and services.

A generic system can be a consumer or a provider.

Both types include a shared patient-search module which can be configured to show a different type.

Consuming systems also display the nrls-pointers module and utilise the pdfviewer helper to display documents returned from the record retrieval interaction.

Provider systems allow for data entry and utilise the Aurelia Validation controller to help validate this.

These systems also make use of the EprService maintenance of patient care plans which is detailed later.

3.3.2.4 Core

This is the root folder for all services, helper modules and business logic, although the simplicity of this app means that there is very little logic required.

At the base you have the main WebApi.ts file which is the pages Fetch client for all back end services calls. We also utilise a polyfill for web browsers that do not handle Fetch.

This file also builds the header request from an array of headers passed in from calling services.

There is also an includes file which is a bucket to list all modules we would like to be defined globally so that we do not need to require modules each time we need them on a page.

Core – Helpers

• Converters
  Simple inline template value converters for dates and numbers

• Loaders
  At present only one exists and used site wide to display when data is loading from the back end.

• Modals
  Specific use case modals

  • Error is standard error modal which displays text and a title
  • D-content allows for inclusions of more complex modules to be embedded into a page
  • PdfViewer takes a PDF as binary and turns this into a navigable set of canvas images on screen

Core – Interfaces
The interfaces help to define the various data models and are used in TypeScript as a prompt for the developers when working with the data models.

Core – Models
Similar to the Interfaces but are implementations of the data models used for outgoing data.

• MedicalRecord
  There is the idea that in the future there will be more types or medical records index by the NRL and so we have a base model of MedicalRecord which all types inherit from.
• CrisisPlan
  Currently we just have a CrisisPlan type available.

Core – Services
The all-important services build our requests to get and store data to and from the back end API. They are pretty simple in nature as the WebApi class handle the rest of the work.

3.3.3 App Style

3.3.3.1 Guidelines

The app style is based off the NHS Guidelines and NHS Colours.

The core of the style and structure utilises Bootstrap CSS for scaffolding and the rest is written in Sass and then compiled to CSS by WebPack during the build process.

Bootstrap reduces the amount of css required and all we really need to do is add just a small set of classes that override the Bootstrap defaults or add additional custom styles to standard HTML features.

The AppStyles structure is simple and self-explanatory based on the individual file names.

All files are imported into the core app.scss file.

Specific widgets get their own style class file such as the benefits widget or generic systems.

3.3.3.2 Default Colours, Sizes, Spacing and Fonts

To keep things consistent as possible each of the above titled are defined in a separate file and should be the only values used around the app.

Bootstrap overrides generally go in the elements class file.  

3.4 Build

The Front end app, made up of the various JS and CSS packages along with the AppSrc TypeScript files and AppStyles Sass file are compiled and minified into bundles using WebPack.

3.4.1 WebPack

The Webpack config file describes the various requirements for each of the above.

The config file also defines the rules around additional resources and images that need to be copied over.

3.4.2 Build Commands

Building is achieved on the command line by navigating the app root directory nrls-reference-implementation\Demonstrator\Demonstrator.WebApp and running the required build command.

The package.json file details the various commands available.

The common commands used are:

• npm run watch
• npm run build
• npm run build:prod

These in term running other commands as listed in the package.json file.