Microapps: A Covid-19 Case Study

class: center, middle, title-slide
      # Microapps: A Covid-19 Case Study

## Jon Johnson (he/him)

.boxes[
 .icons[
 jrjohnson 
 jrjohnson_ 
 jrjohnson-ucsf 
 ]

.avatar[
        ![Jon's avatar](../shared/avatar.jpg)
        ]
      ]

## UCTech Slack: https://uctech.slack.com

### Plain Text and Slides At:
      #### https://www.jrjohnson.dev/talks/2020-08-covid-microapps

---
 class: logos
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="450px" height="450px" viewBox="0 0 450 450" enable-background="new 0 0 450 450" xml:space="preserve">
 <g>
 <rect x="83.8" y="66.6" fill="#0093D0" width="282.4" height="282.4"/>
 <g>
 <defs>
 <rect id="SVGID_1_" x="83.8" y="66.6" width="282.4" height="282.4"/>
 </defs>
 <clipPath id="SVGID_2_">
 <use xlink:href="#SVGID_1_" overflow="visible"/>
 </clipPath>
 <path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M325.84,177.185V164.97h-46.508v45.039c-0.245-5.273-2.173-9.372-5.825-12.247
 c-2.507-1.986-6.298-3.578-11.359-4.769l-11.527-2.737c-4.464-1.024-7.369-1.927-8.73-2.705c-1.27-0.689-2.157-1.59-2.644-2.676
 h-0.019c-0.014-0.017-0.014-0.017-0.014-0.029c-0.336-0.737-0.536-1.623-0.536-2.569c0-2.002,0.69-3.717,2.127-5.078
 c0.031-0.014,0.045-0.061,0.077-0.075c0-0.016,0-0.016,0,0c0.336-0.291,0.672-0.55,1.054-0.811c2.154-1.422,5.044-2.14,8.685-2.14
 c3.256,0,5.978,0.55,8.181,1.652c3.285,1.665,5.042,4.479,5.305,8.423h13.192c-0.246-6.986-2.844-12.306-7.783-15.977
 c-4.951-3.669-10.929-5.504-17.947-5.504c-8.394,0-14.771,1.942-19.096,5.84c-2.644,2.386-4.493,5.152-5.518,8.304h-0.017
 c-0.213,0.686-0.399,1.39-0.535,2.094c-1.621,7.583-6.497,12.719-14.662,12.719c-13.058,0-17.979-11.1-17.979-22.122
 c0-11.59,4.921-22.688,17.979-22.688c7.215,0,13.513,4.981,14.448,11.572h14.08c-1.759-15.291-13.989-23.805-28.528-23.805
 c-19.524,0-31.357,13.898-32.414,32.214v-30.638h-14.554v41.124c0,9.816-3.332,14.341-13.715,14.341
 c-11.771,0-13.622-7.124-13.622-14.341v-41.124h-14.539v41.124c0,17.964,10.38,26.572,28.161,26.572
 c17.688,0,28.269-8.698,28.269-26.572v-5.166c1.056,17.841,12.89,31.738,32.414,31.738c8.027,0,14.875-2.583,19.904-7.198
 c0.323,0.256,0.627,0.504,0.982,0.73c2.611,1.819,7.428,3.501,14.416,5.046l7.109,1.561c4.156,0.888,7.201,1.911,9.11,3.073
 c1.927,1.19,2.89,2.874,2.89,5.043c0,3.72-1.957,6.257-5.871,7.615c-2.062,0.718-4.756,1.072-8.054,1.072
 c-5.534,0-9.435-1.348-11.698-4.053c-1.254-1.483-2.078-3.73-2.508-6.727H224.92c0,6.833,2.459,12.199,7.43,16.113
 c4.951,3.898,11.758,5.856,20.396,5.856c8.485,0,15.027-1.973,19.676-5.948c4.266-3.654,6.574-8.164,6.91-13.531v18.483h14.558
 v-27.32h27.7v-11.297h-27.7v-15.289H325.84z"/>
 </g>
 <text transform="matrix(1 0 0 1 118.292 280.8896)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'HelveticaNeue-Thin'" font-size="72.5442" letter-spacing="1">Li</tspan><tspan x="51.216" y="0" fill="#FFFFFF" font-family="'HelveticaNeue-Thin'" font-size="72.5442" letter-spacing="1">b</tspan><tspan x="93.001" y="0" fill="#FFFFFF" font-family="'HelveticaNeue-Thin'" font-size="72.5442">r</tspan><tspan x="113.169" y="0" fill="#FFFFFF" font-family="'HelveticaNeue-Thin'" font-size="72.5442" letter-spacing="1">a</tspan><tspan x="150.892" y="0" fill="#FFFFFF" font-family="'HelveticaNeue-Thin'" font-size="72.5442" letter-spacing="2">r</tspan><tspan x="173.815" y="0" fill="#FFFFFF" font-family="'HelveticaNeue-Thin'" font-size="72.5442">y</tspan></text>
 </g>
 </svg>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 392.11 392.11" aria-hidden="true" class="ilios-logo">
 <title>Ilios Logo</title>
 <path d="M371.83,461.83c-77.62-89.13-98.6-113.11-30.25-93.76-62.12-34.35-30.23-36.41,87.67-44.87-117.91-8.47-149.8-10.52-87.67-44.87-68.34,19.35-47.37-4.63,30.26-93.76-89.12,77.62-113.11,98.6-93.76,30.25-34.35,62.12-36.41,30.23-44.87-87.68-8.47,117.91-10.53,149.8-44.87,87.68,19.35,68.34-4.64,47.37-93.76-30.26,77.62,89.13,98.59,113.11,30.25,93.76,62.12,34.35,30.23,36.41-87.68,44.87,117.91,8.47,149.8,10.52,87.68,44.87,68.34-19.35,47.37,4.63-30.25,93.76,89.12-77.62,113.11-98.6,93.76-30.25,34.35-62.12,36.41-30.23,44.87,87.68,8.47-117.91,10.52-149.8,44.87-87.68C258.71,363.23,282.7,384.21,371.83,461.83Z" transform="translate(-37.14 -127.14)"/>
 <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">Ilios</text>
 </svg>

???
      # UCSF Library Educational Technology
        - Team Supports, Hosts, and Develops Moodle, Kaltura and Ilios
      ## All quadrants green until....

---
      class: center
      # Along Came Covid

.icon-row[
 ## 
 ## 
 ## 
 ]

???
      # Along Came Covid
      ## Went through the same transition as all of you:
        - Preparation for remote work
        - Sheltering in Place and freaking out as a community
        - How can we help?

---
 class: center,middle

???
      # No one asks technologists for help any more

---
 class: magic-quadrant,with-icons
 # No one asks technologists for help any more

--
 ## Thousand Questions

--
 ## Big Problems

--
 ## Fear

--
 ## Cost

???
      # No one asks technologists for help any more
        - We've trained everyone that technology is only a solution for really big problems
        - We've conditioned everyone that asking for help is an invitation to a thousand questions and no solution
        - We've taught everyone to fear technology and the people who build it
        - We've ensured that everyone knows technology is EXPENSIVE so should only be a solution for really big problems

---
 class: center,middle
 <blockquote class="twitter-tweet" data-lang="en" data-dnt="true">my primary skillset as an engineer is saying "it depends" and "it's more complicated than that" until we all decide computers were a mistake— brianloveswords (@brianloveswords) <a href="https://twitter.com/brianloveswords/status/1291093391133081602?ref_src=twsrc%5Etfw">August 5, 2020</a></blockquote>

???
        ## Seems like all I ever get to do is say no.
        - I have a "gift" from a former team to celebrate my "personality" as the Turtle, always slowing things down and asking lots of questions

---
 class: center, middle
 #

???
      # So Tired of saying no
      ## Let's break out of this pattern, we have the tools and experience to build wonderful solutions to every day problems

---
      class: center,photo-slide
      # Microapp

![micro application graph](media/micro-app.jpg)

.footnote[
        [Web Development with the Microapplication Pattern](https://www.jrjohnson.dev/talks/2017-08-microapps-uccsc)
      ]

---
      class: center
      # Microapps

.boxes[
      ### Custom built to solve a problem

### Can be developed quickly by trusting in infrastructure and frameworks

### Are not "hacks", they are designed to go into production and be stable for years

### Can be handed off to another developer instantly (batteries included)
      ]

???
      # Dreams We've Been Sold
        - Intranet
        - Enterprise Service Bus
        - Content Management Systems
      ## Might actually be here

---
 class: center, middle,focus-h1,icon-row
 #

???
      # So with some trepidation and no little excitement

# 
 ???
 ## I asked... how can we help?
 --

# 
 ???
 ###And surprisingly there was something we could do

---
      class: center, middle,inline-h2
      # Problem: Send A Message Everyday at 4am

## 
 ## 
 ##

???
      #Everyday Task
        - 4am email must go out every day
        - Needs to come from a specific trusted user
        - Respondents click a link and answer some questions
      ## Not a complicated problem
        - Exactly the kind of task that used to keep me up at night
        - If we have to start from scratch it is going to cost WAY more than just hiring a temp to do it

---
 class:timeline
 # Timeline
 - Friday 4/10 - First Contact
 - Monday 4/13 (morning) - Initial Requirements
 - Monday 4/13 (afternoon) - Test Email Delivered for Approval
 - Tuesday 4/14 (morning) - Approved for Production Thursday Morning
 - Tuesday 4/14 (afternoon) - Requirements change, goes out only MWF

> I received the email and the links worked. Seems like this is all set, thank you!

- Friday 4/17 5am - First Messages Sent Successfully

--
      > I just received a request to stop the automated emails. The campus is no longer needing this information.

- Friday 5/15 Service No Longer Needed

---
 # Sending Email
 ## With Node.js

```javascript
      async function sendReminderEmails(BccAddresses = [], CcAddresses= [], Source) {
        const params = {
          Destination: {
            BccAddresses,
            CcAddresses,
          },
          Message: {
            Body: getEmailBody(),
            Subject: {
              Charset: "UTF-8",
              Data: "Urgent: Completion of GME DAILY Staffing Report Survey"
            }
          },
          Source,
        };
        const ses = new AWS.SES();
        await ses.sendEmail(params).promise();
      }

exports.sendReminderEmails = sendReminderEmails;
 ```
 ---
 class:center,middle
 # Sending Email is Difficult to Automate
 .boxes[

]
 ???
 # Problem isn't creating the email, it is delivering it
 - You need a server to send the message from
 - If the server doesn't have a relationship with recipients mail may be lost
 - Sender must be verified or it will get rejected
 - If you don't get all the details right it goes straight to the SPAM folder

---
 class: center,middle

---
 class: center,photo-slide
 # AWS Lambda
 ## "serverless"
 ![lambda description: upload code, create a trigger to run it, only pay for what you use](media/lambda.png)
 .footnote[
 https://aws.amazon.com/lambda/
 ]

.icon-row[
 
 ]

---
 class: magic-quadrant
 # AWS Simple Email Service (SES)

.icon-row[
 
 
 
 ]

## API Based Email
      --

## No Sendmail Configuration
      --

## SPF / DKIM
      ???
      ## Sender Verification
      - Sender Policy Framework
      - DomainKeys Identified Mail

## Delivery Dashboard

.footnote[
      https://aws.amazon.com/ses/
      ]

---
 class:center,middle
 # Where does the code live?
 .boxes[

]
 ???
 - Where do you physically locate the code?
 - Will it be safe there if this is running for a year?
 - Where can other people review / take over the code?
 - How do changed get into test / production environments
 - Where does documentation live

---
 class: center,middle

---
 class: center,photo-slide
 # Github
 ![GME Github Front Page showing code, issue tracker and documentation](media/gme-github.png)
 .icon-row[
 
 
 
 ]
 ---
 # Github Actions
 ```yaml
 on:
 push:
 tags:
 - '*'
 deploy:
 steps:
 - uses: actions/checkout@v1
 - uses: actions/setup-node@v1
 with:
 node-version: 12
 - run: npm ci
 - run: npm run deploy:production
 ```
 .icon-row[
 
 ]
 ???
 - Provides Continuous Integration and Delivery for all Github Repositories
 - This Action waits to see a new git tag and then deploys our app to production
 - Super configurable to do a LOT of things:
 - Run Tests
 - Deploy Docker Containers
 - Calculate file size changes
 - Update Dependencies on Monday Morning
 - Add labels, notify maintainers, create comments
 - ... basically anything you can automate actions can run

---
 class: center,middle
 .icon-row[
 ## 
 ## 
 ]
 .icon-row[
 
 
 
 
 ]

---
 class: center,middle

---
 class: center, middle, serverless
 # Serverless Framework

## Easy YAML + CLI development and deployment to AWS, Azure, Google Cloud, Knative & more.

https://www.serverless.com/

---
      ### serverless.yml
      ```yaml
      service: gme-daily-resident-staffing-survey
      provider:
        name: aws
        runtime: nodejs12.x
        iamRoleStatements:
          - Effect: "Allow"
            Action:
              - SES:SendEmail
            Resource: arn:aws:ses:us-west-2:********:identity/*****

functions:
        send:
          handler: handler.sendEmails
          events:
            - schedule:
                rate: cron(00 12 ? * MON,WED,FRI *) #UTC
            - schedule:
                rate: rate(15 minutes)
                enabled: false # manually enable in the console in CloudWatch Events to start sending test Emails
          environment:
            SENDER_ADDRESS: ${self:custom.senderAddress.${self:provider.stage}}
            SENDER_NAME: ${self:custom.senderName.${self:provider.stage}}
            RECIPIENT_ADDRESSES: ${self:custom.recipients.${self:provider.stage}}
      ```

.footnote[
      https://www.serverless.com/
      ]

???
 # What does this do?
 - Setup a server to run on a schedule
 - Start up
 - Run Script
 - Shut Down
 - Bill us in 100ms increments, we might spend $20 this year
 ---
 class: center, middle

---
 class: center, middle

---
 # Something a bit more permanent

.boxes[
      ## Pull data from Qualtrics API
      ## Convert to CSV and Save to S3
      ## Easy to add new surveys
      ## Runs every 15 minutes
      ]

.footnote[
      https://github.com/ucsf-ckm/som-qualtrics-survey-responses
      ]

???
      - Response to an emergency (Missed notifications of Qualtrics API Change)
      - Discontinuing March 31st
      - In production April 1st
        - Complete Documentation
        - Process for adding new surveys
        - Automatic deployment of staging and production environments

---
      class: center, middle, title-slide

# Thanks!
      ## Hope to see you on UCTech Slack

.avatar[
 ![Jon's avatar](../shared/avatar.jpg)
 ]
 ]
 ## UCTech Slack: https://uctech.slack.com

### Plain Text and Slides At:
      #### https://www.jrjohnson.dev/talks/2020-08-covid-microapps