Growth in Mobile

Mobile is soon to overtake the desktop in usage

Over 75% of students have an internet-capable mobile device

Unfortunately, mobile isn't a homogenous environment

• Operating systems
• Browsers
• Dimensions

Evolving strategies for addressing this landscape

The Native App

• Rich set of features
• Centralized distribution platforms
• Development specific to OS and device
• Varied paradigms and architectures
• Rise and fall of native platforms
• Manual updates

The Mobile Web App

• Single established platform
• Existing paradigms and arcitecture
• Automatic updates
• Mixed support between devices
• New and evolving API
• No central distribution platform

Solving Challenges of the Mobile Web

The MWF Strategy

Semantic markup standard

• Leverage framework features through classes and ids

Dynamic CSS and Javascript

• Enhance and degrade based on device capabilities
• Included through script and link tags

Platform independence and federation

• Intrinsic to the technology stack

Getting Started

Create a page with script and link tag:

<link rel="stylesheet" type="text/css" href=”http://[DOMAIN]/assets/css.php">
<script type="text/javascript" src=“http://[DOMAIN]/assets/js.php”></script>

Start using the MWF!

• All HTML classes/ids and JS core always available
• Additional libraries available on demand
• Special assets like compressors

But really, what's going on?

An app has a page with MWF handlers

When a user visits the page,

• the user's browser requests css.php and js.php
• the MWF gathers telemetry on the device
• the MWF classifies device and generates CSS/JS
• the page is rendered from generated CSS/JS

Process is transparent to the app (semantic markup)

What's in the MWF?

• Page-level UI: header, footer
• Content-level UI: content, menu, button, form, message
• Telemetry: capability exposure and visibility controls
• Interaction: transitions, touch transitions, geolocation
• Compression: CSS, JS, images
• Utilities: normalization, redirection

Federated Model

One framework server, many applications

• Service provider hosts framework centrally
• Distributed applications can leverage framework

Traditionally, hosted on campus

• Browser-side state maintenance
• Easy to implement redundancy and load balancing

But what about off-campus redundancy?

MWF hosted at CENIC

"Corporation for Education Network Initiatives in California"

Pilot with UC to host the MWF

• Copy of framework run in AWS infrastructure
• Affords extra redundancy and scalability
• Working on model for automated deployment

Model allows it to be transparent for apps

How does it work?

CSS and JS handlers as usual

<link rel="stylesheet" type="text/css" href=”http://[DOMAIN]/assets/css.php">
<script type="text/javascript" src=“http://[DOMAIN]/assets/js.php”></script>

And that's it!

Changing Demographic, New Strategies

Fully-capable mobile devices are becoming more pervasive

Changing perceptions of how mobile is used

Responsive design is now a viable strategy

• Fluid grid and media scale to fit viewports
• Media queries allow different content flows

Adapting MWF for responsive is the wrong route

... and thus the WebBlocks responsive toolkit is born

A Tale of Two Frameworks

Many concepts shared between MWF and WebBlocks:

• Device agnosticism
• Platform independence
• Federation

Use cases drive what works for you:

• Who's your intended demographic?
• Do you have an existing website? Are you rewriting it?
• What frameworks are you currently using?

Staying Flexible with a Toolkit

A lot of good tools already exist

• Extend and integrate, don't recreate

Not every use case is the same

• Federated or individual deployments?
• Which tools do you need?
• What if you're already using a framework?

Architecture of packages, adapters and extensions

Features

Modern web standards such as media query

Powerful fluid layout system

Rich UI element and interactivity libraries

Customized builds exactly for needs

Adapters to bind to other frameworks

Extensions for campus and unit specific needs

Conundrum of Growth

At first, we built obvious campus-wide apps

But then, we started getting niche apps

• By instructors for class material
• Research and data collection tools
• Student-focused and student-written

Distributing the Apps

How do we organize this growth of apps?

• Taxonomy is hard
• People want choice

For native, there's the app store

• Over 60 billion downloads between iOS & Android

But what about mobile web apps?

A Familiar Pattern

Going Further: Openness

Not every app is campus-specific

We could "tell" each other about these apps

Dynamics

Propagation

• Import & export rules
• Filters & transformations

Flexible Topology

• Federation
• Asymmetric
• Web of Trust