Build a HTML5 Web App

using SAS®

Allan Bowe

Phil Mason

Build a HTML5 Web App using SAS®

SAS Geek with a passion for HTML5 Web Apps.

Contributions include:

• SASjs.io

• Sasensei.com

• Data Controller for SAS®

Phil Mason has used SAS a very long time.

He has written lots of papers and a few books about SAS and is currently developing web apps at Lloyds in London.

Why HTML5?

• Easy to Build
• Easy to Deploy
• Built for Interfaces

Why SAS?

• ​Security
• Scalability
• Built for Data

Architecture

Front vs Back

Separation of front and backend is non-negotiable!

• Scalability
• Forward compatibility (SAS 9 -> Viya)
• Speed of development (workflow)
• Differing skillsets
• Documentation of API
• Maintainability

Design

• User Experience (UX)
• User Interface (UI)
• Design Frameworks

User Experience

User Journey mapping

• https://balsamiq.com

• https://www.mockplus.com

User Interface

Layout / Graphic Design

• Lucidchart
• Figma

Frameworks

Popular Libraries

• Semantic-UI
• Bootstrap
• Clarity Design 

Security

• Authentication
• Authorisation
• Stuff to watch out for
  • OS credential misuse
  • Code injection
  • Man-in-the-middle attacks

Security

<script src="https://cdn.jsdelivr.net/npm/sasjs@2.1.0/index.js" 
  integrity="sha256-aO07O1dqIVfURrXrgsYbCxneXml0Q+kMQI/RpGKR3mo=" 
  crossorigin="anonymous">
</script>

Use SubResource Integrity (SRI) hashing to avoid Man-In-The-Middle attacks

SASjs

A Framework for HTML5 App Development on SAS

• MacroCore library
• SASjs adapter
• sasjs-CLI tool

https://sasjs.io

MacroCore

SAS Utility Macros for Application Development

• Many functions, eg:
  • Create Folders
  • Create Services
  • Get Users & Groups
• Online Documentation 
• Both SAS 9 and Viya

SASjs Adapter

Bi-directional data transfer between JS and SAS

• SASLogon integration
• Both SAS 9 and Viya
• Extensive test suite
• Easy to use

https://github.com/sasjs/adapter

sasjs-CLI

Setup, build & deploy SAS projects

• "Opinionated" Project Structure
• Documentation driven approach
• Tooling to accelerate DevOps & Deployment

https://github.com/sasjs/cli

Backend

* System account available with Viya 3.5+

Automated Build & Deploy

• Folders
• Libraries
• Services

sasjs-cli

Store Code in the Service

• Easier to Deploy
• Easier to Debug
• More Stable

Doxygen Headers

COST Based

• Reliable / default option.
• Dead ports do not have their cost removed, and so are ignored
• For best performance, initialise all your ports to avoid startup cost

RESPONSE

• Keeps a count of the response time and uses the server with lowest rate
• This of course depends on what is being run though!
• Don't set refresh rate to 0 - it will 'round robin' each multibridge, some of which may be dead

SAS 9 Load Balancing

See Documentation.  Consider Browser limits (6 connx in chrome)

Frontend

• Frameworks
• Seed Apps
• Dev Ops

Frameworks

• Angular
• React
• Vue

Seed Apps

• Angular
• React
• Minimal

Tips & Tricks

Presummarisation

Send only the data you need to send!

• SAS is fast and extremely powerful for data management
• Corporate laptops are unlikely to be very "modern" 
• Minimise client side rendering and IO
• Avoid 'stateful' services (eg STP sessions) as they can impact load balancing

Paging

Avoid browser-freeze!  When showing tables of data, divide into 'pages' that can be stepped over.

• To keep browsers responsive, they shouldn't be dealing with more than 1-2 mb of data at a time 
• Prefetching pages will also improve responsiveness
• Requires STATE - this can be in a filesystem or database but involves cleanup

Browser Caching

• JS / CSS / images etc are cached automatically
• Local storage can be used for small data volumes, avoiding repeated SAS calls for static values
• Cookies can be used for key-value pairs, available in sas using the `_htcook` variable
• CDNs can be used for fonts, icons etc

Server Caching

Server side data caching significantly improves the responsiveness for large queries - simply store the output data alongside a hash of the input query

• Requires a cache management system (lookup tables)
• Proactive cache generation avoids the 'initial query' cost 
• Be sure to remove stale caches when source data is refreshed

SAS Coding Tips

• filename _webout cache;

• yourserver/SASStoredProcess/?_action=1063&_path=/your/path

TIPS

• Don't use "endsas;" or "abort cancel"
  • ​messes up the load balancing
  • alternative - open a macro, but don't end it!

TIPS

• Don't use usernames in file / folder names
  • can cause issues where a mix of WLATIN1 and UTF8 systems are in use

Documentation

• User Guide
• Configuration Guide
• Deployment Guide
• Developer Guide

Documentation

• markdown-to-html
• MkDocs
• Doxygen
• Sphinx /