Web Development with the Microapplication Pattern

Jon Johnson

Slides at: https://jrjohnson.dev/talks/2017-08-microapps-uccsc.html

jrjohnson
jrjohnson-ucsf
jrjohnson_

Who am I?

Full stack web developer (PHP, Javascript)
Technical lead for the Ilios Project open source curriculum management system for health science education. (http://iliosproject.org)

github contributions

Who am I?

Full stack web developer (PHP, Javascript)
Technical lead for the Ilios Project open source curriculum management system for health science education. (http://iliosproject.org)

github contributions

https://tinyurl.com/are-work

What is Ilios

Curriculum management system for health science education. (http://iliosproject.org)
Deployed at dozens of medical schools on 5 continents
A product of UCSF School of Medicine and the MedBiquitous Consortium

map of international Ilios schools

Open API
- We interconnect with a lot of other systems on campuses and with organizations like the American Association of Medical Colleges so having an open and well documented API allows data to flow
Community
- We provide Ilios for Free to other medical schools around the world

What is a microapp?

That map was one:

map of international Ilios schools

OK, umm... so what?

Profound and Unstoppable Power of Yes

UCSF profound and unstoppable power of yes

UCSF has been going around telling people we say yes!
As developers we want to say yes
As people we want to help other people
The developer life cycle has taught us to be cautious.

Developer Life Cycle

developer life cycle

Developer Life Cycle

developer life cycle

Developer Life Cycle

developer life cycle

Developer Life Cycle

developer life cycle

Developer Life Cycle

developer life cycle

Developer Life Cycle

technical debt circle

Developer Life Cycle

build circle

Developer Life Cycle

developer life cycle

Our Challenge

Greater Complexity

Our Challenge

Greater Complexity More People Engaged

Our Challenge

Greater Complexity More People Engaged More Demands for Service

Our Challenge

Greater Complexity More People Engaged More Demands for Service Higher Expectations

If google can do it, why cant you?

Why are we stuck in this loop?

Proof of Concept

It isn't possible nor should it be necessary for everyone to understand the difference between proof of concept code and production code.

The people who think this aren't dumb.
Our first pass has to be very nearly production ready.

Why are we stuck in this loop?

MVP

Proof of Concept

Get our ideas in front of people immediately

Minimum Viable Product

Why are we stuck in this loop?

RAT

MVP

Proof of Concept

Before we invest too heavily in any one idea we must find and test our riskiest assumptions.

Riskiest Assumption Test

How can we get off this ride?

finding nemo now what

Microapps! That's How!

Emeril saying bam

Do you mean Microservices?

Microservices?
MicroappsTake advantage of existing data through APIs
Single Responsibility Principle
Throw away things that don't work
Low cost of enhancement
Freedom to choose different technologies

What makes an app micro?

Researchers with microscopes in Laboratory of Experimental Oncology

Credit: https://calisphere.org/item/3fe65b42-122e-48de-8e4b-bc8dcf531216/

Infrastructure code

Taking us on a little detour to talk about Infrastructure Code
Can't understand microapps without it.

Infrastructure code

Build System

compile transpile preprocess transform bundle minifi fingerprint sourcemaps tree shaking autoreload

Infrastructure code

Request Handling

flow chart of simple user flow request

Infrastructure code

So Much More

package lint build test deploy translation ci accessibility

Cognitive Load for EVERY ApplicationGetting Started
Project Structure
Build Pipeline
Dependency Loading
Test runner / testing pattern
Feedback Loop

Cognitive Load for EVERY ApplicationGetting Started
Project Structure
Build Pipeline
Dependency Loading
Test runner / testing pattern
Feedback Loop

Active Development
Request Routing
Assets
Error / Loading States
Solve The Actual Problem

Cognitive Load for EVERY ApplicationGetting Started
Project Structure
Build Pipeline
Dependency Loading
Test runner / testing pattern
Feedback Loop

Active Development
Request Routing
Assets
Error / Loading States
Solve The Actual Problem

Production / Maintenance Mode
Deployment
QA / Feature Testing
Continuous Integration
Stay up to date
Apply Security fix
Support new Browsers
Improve Performance
Why is this even here?
Who wrote this shit?
Damn I wrote this shit. 2015 me was an idiot!
Add New Features

Large Application

large application graph

Medium Application

medium application graph

Microapp

micro application graph

Microapps

small microapp graph

@todo Microapps

Cure NIHS
Buy the bikeshed
Focus on the solution

Cure Not Invented Here Syndrome

Cure Not Invented Here SyndromeThe Best Code is No Code At All

As a software developer, you are your own worst enemy. The sooner you realize that, the better off you'll be. ~ Jeff Atwood
No user has ever thanked my for our top notch build pipeline ~ Jon Johnson

Cure Not Invented Here SyndromeThe Best Code is No Code At AllDon't Fetishize Simplicity

As a software developer, you are your own worst enemy. The sooner you realize that, the better off you'll be. ~ Jeff Atwood
No user has ever thanked my for our top notch build pipeline ~ Jon Johnson
Simple === Small === Fast === Good
Complex === Big === Slow === Bad ~ Tom Dale

Cure Not Invented Here Syndrome

The Best Code is No Code At All

Don't Fetishize Simplicity

https://blog.codinghorror.com/the-best-code-is-no-code-at-all/
- https://tomdale.net/2017/04/making-the-jump/

As a software developer, you are your own worst enemy. The sooner you realize that, the better off you'll be. ~ Jeff Atwood
No user has ever thanked my for our top notch build pipeline ~ Jon Johnson
Simple === Small === Fast === Good
Complex === Big === Slow === Bad ~ Tom Dale

Buy the Bikeshed

What You Think You Need

blank map of SF

http://whatshed.co.uk/7-x-3-waltons-tongue-and-groove-apex-wooden-bike-shed/

What a Library Provides

http://www.sfbike.org/news/dero-bicycle-parking-solutions/

What You End up Building

Bike locked to fence with no bike parking sign

https://flic.kr/p/8qqnzn

What You Actually Need

Bikes on SF Muni Bus

https://www.sfmta.com/about-sfmta/blog/bigger-bike-racks-hilly-muni-routes

scary place for developers have to throw out all of that really fancy code that is tied very closely to my identity as a human
this isn't a bad thing (you should love your code), just try not to get into the situation too often

Buy the BikeshedBuild What You Have the Expertise to Maintain

Buy the BikeshedBuild What You Have the Expertise to MaintainBuild What You Have the FTE to Fix CONSTANTLY Expertise Maintain

Focus on the SolutionIf the goal is to build a fast airplane why are you manufacturing bricks?

Convinced?

Ready to Give Microapps a Try?

ember cli logo

angular cli logo

Ember (An SDK for the Web)

https://emberjs.com/learn/

ember zoey mascot

Stability without stagnation
Semver Guarantee
Ilios 2+ years and still up to date

Simple Commands

ember new in terminal animated

Simple Commandsember new <app-name>Create Structure
Setup Dependencies
Ready to start writing code
Even creates some basic tests

Able to save so much cognitive load and just get started making important choices

Simple Commands

ember serve in terminal animated

Simple Commandsember serveRun Yo' StuffJavascriptTranspile
Combine + Minify


CSSCompile
Prefix
Combine + Minify


ServeLocal dev server
Auto-reload server
Watch For Changes
Proxy Connections

Able to save so much cognitive load and just get started making important choices

Simple Commands

Test Yo' Stuff

ember test in terminal animated

Can do many things

Build App
Load test fixtures
Start a browser session
Keep track of failures

Because we have standardized our platform we can standardize our tooling

Travis
green keeper
netlify
heroku
ember-cli makes on-boarding new team members super fast
Standardizing makes it easy to farm out work because you know what you will get back.

Some Examples

Data Visualization (Map of Ilios Schools)

ilios map

Ilios map

Plain Old Web

    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 37.7749, lng: -122.4194},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

blank map of SF

Ilios map

Plain Old Web

Add Some Markers

  <div id="map"></div>
  <script>
    let map;
    function initMap() {
      let latLng = {lat: 37.7749, lng: -122.4194}
      map = new google.maps.Map(document.getElementById('map'), {
        center: latLng,
        zoom: 8
      });
      let marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: 'UCSF!'
      });
    }
  </script>
  <script src=
  "https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"
  async defer></script>

blank map of SF

Getting out of hand

How do I figure out coordinates for each school
What school do each latitude and longitude represent
Keep having to press refresh
Where do I store the API key?

Ilios map
As an Ember Microapp
  $ ember new map
  $ cd map
  $ ember generate component schools-map
  $ ember add ember-g-map
  $ ember serve

  {{#g-map as |context|}}
    {{#each (await codedLocations) as |obj|}}
      {{g-map-marker context lat=obj.lat lng=obj.lng}}
    {{/each}}
  {{/g-map}}

Ilios map

As an Ember Microapp

Wait... what is `ember-g-map`?

ember-g-map

Addons provide functionality
Addons are all built by ember-cli and they all follow the same conventions
Lookup Crypto and take a look at the addons there

Ilios map

As an Ember Microapp

  export default Component.extend({
    locations: [
      'SF,ca',
    ],
    codedLocations: computed('locations.[]', function(){
      return new Promise(resolve => {
        map(this.get('locations'), location => {
          return this.getLatLongForAddress(location);
        }).then(data => {
          resolve(data);
        });
      });
    }),
    getLatLongForAddress(address){
      return new Promise(resolve => {
        let request = `${uri}/geocode/json?&key=${key}&address=${address}`;
        $.getJSON(request, (response) => resolve({ response.results[0].geometry.location.lat,response.results[0].geometry.location.lng}));
      });
    },
  });

blank map of SF

Same map

Using city name instead of lat / long
Lots of ember stuff
- promises
- computed properties
- template separation
Ember cli stuff
- live reload
- ember server
- project structure
- linting
Options to store the key
Ember isn't your only choice for this - but it is a really good one

Ilios map
As an Ember Microapp
Next steps
Keep it
Add Labels
Different markers for Consortium members
Data from external source

Throw it away?

Data Visualization (Ilios Team)

chart showing forks of ember projects by ilios team members

Built for this talk to make a point

If you don't have the ability to contribute fixes this probably isn't for you

Team Ember Contributions
Route
export default Route.extend({
  async model(){
    let users = [];
    for (let i = 0; i < this.users.length; i++) {
      const username = this.users[i];
      const repositoryNames = await this.getRepositoriesForUser(username);
      let user = Object.create({
        username,
        repositoryNames
      });
      users.push(user);
    }
    return users;
  },
});

Team Ember Contributions
Visualization
export default Component.extend({
  tagName: 'svg',
  didReceiveAttrs() {
    run.scheduleOnce('render', this, this.draw);
  },
  draw(){
    const svg = select(this.element);
    // set the ranges
    const x = scaleBand().range([0, chartWidth]).padding(0.1);
    const y = scaleLinear().range([chartHeight, 0]);
    svg.append("g").attr("transform", "translate(" + 40 + "," + 20 + ")");
    x.domain(dataOrArray.map(d => d.username));
    y.domain([0, max(dataOrArray, d => d.repositoryNames.length)]);
    // append the rectangles for the bar chart
    svg.selectAll(".bar").data(dataOrArray)
      .enter().append("rect")
        .attr("class", "bar")
        .attr("x", d => x(d.username))
        .attr("width", x.bandwidth())
        .attr("y", d => y(d.repositoryNames.length))
        .attr("height", d => chartHeight - y(d.repositoryNames.length))
        .attr('fill', d =>  color(d.username));
    svg.append("g").attr("transform", "translate(0," + chartHeight + ")").call(axisBottom(x));
    svg.append("g").call(axisLeft(y));
  },
});

chart showing forks of ember projects by ilios team members

https://copy-writer-crab-43023.netlify.com/

https://github.com/jrjohnson/team-contributions

Team Ember Contributions
Next steps
Keep it
Loading Indicator
Handle Errors
Authenticate User to get an API key
Cache Results

Throw it away?

An accidental example

chart showing forks of drupal projects by ilios team members

Data Visualization (Curriculum Inventory)

Site

Code

donut chart of curriculum inventory session types

Demoing a Feature: Ilios Todo

https://ilios-todo.herokuapp.com/

screen shot of ilios todo app

Highly requested feature, but not clear understanding of the problem
Threw together on a plane as a demo of what open APIs can mean
Has allowed us to have a discussion about what this feature actually is

Can Lead to a solution

screen shot of ilios week at a glance

Build without fear again

When your friend or your spouse has an idea you might actually be able to help

Seating Charts

screen shot of seating chart from school loop

Wife's high school is moving to Canvas
Canvas doesn't create seating charts the way Jen would like
Can we build a seating chart application?

Sentar

sentar.org

Realtime Database (firebase)
Drag and Drop
Social Auth
Open Source

screen shot of sentar.org

Production ready (https, caching, CD Pipeline)
Just enough flow to see if we're solving the problem

hamster resting on their wheel

The less code you are responsible for the more problems you can solve

Credit: www.veryfunnypics.eu

Discussion / Questions?

Slides at: https://jrjohnson.dev/talks/2017-08-microapps-uccsc.html

jrjohnson
jrjohnson-ucsf
jrjohnson_

Thanks

to UCCSC for the opportunity to speak
to the UCSF library for giving me the time to do this and other open source work
and the Ilios team who is always supportive when I start to panic about getting a talk finished.

↑, ←, Pg Up, k	Go to previous slide
↓, →, Pg Dn, Space, j	Go to next slide
Home	Go to first slide
End	Go to last slide
Number + Return	Go to specific slide
b / m / f	Toggle blackout / mirrored / fullscreen mode
c	Clone slideshow
p	Toggle presenter mode
t	Restart the presentation timer
?, h	Toggle this help