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

FREE*

Why SAS?

  • ​Security
  • Scalability
  • Built for Data

FREE*

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

 

User Interface

Layout / Graphic Design

 

Frameworks

Popular Libraries

 

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

SAS 9 SAS VIYA
Stored Processes Job Execution Service
WKS / STP Servers Compute Server only
Client / System Identities Client / System* Identities
Metadata Postgres

* 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

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 / 

Testing

  • browserstack
  • cypress

More Resources

Made with Slides.com