• Web-based lecture delivery system
• Real-time bidirectional communication
• Flow: 'present-ask-answer-assess-feedback'
• Question types as plugins
• Extensibility
• More on ASQ later

• Application Domain Conformance

  entities, relationships, information flow

• Encapsulation
  • CSS: Base rule changes, Naming collisions, subtree matches

    /* in article.css */
    .article .title {
      border-bottom: 1px solid;
      font-size: 1.5em;
    }
    
    /* in widget.css */
    .widget .title {
      color: gray;
      text-transform: uppercase;
    }
    /* Problem if .title inside a .widget inside an .article */

  • JavaScript: global namespace pollution, memory leaks

    //will not be garbage collected - lose some KBs of memory
    var myArray = [];
    for (var i = 0; i < 2003000; i++) {
       myArray.push(i * i + i);
    }

• Communication
  • Serverside
  • Clientside
  • inter-plugin (in-between client-side or server-side components of different plugins)
  • intra-plugin (between client-side and server-side components)
• Deployment and Publication
  • Single code repository
  • Easily isolate and deploy frontend and backend code

Lifecycle methods

modelled after Wordpress and Ghost

• install
• uninstall
• activate
• deactivate

Backend communication and message passing

• Input transformation tasks with completion acknowledgement
  • The result of each plugin is passed to the next participating plugin
  • Plugins cannot be invoked in parallel or asynchonously
  • A plugin's task execution code can and should!
  • hooks API
• Decoupled asynchronous tasks
  • No expectations for a completion acknowledgment or return values
  • Pub/Sub
  • Native support in both server (EventEmitter) and client (EventTarget)
  We have found communication between plugins and the core to be a very important aspect of application domain conformance. On the one hand we may have have some information flows that need to pass sequentially through interested plugins for processing, sequentially and we need ACK when they are done. As an example consider preparing the head of an HTML document for rendering: Each interested plugin may inject scripts or other assets in the head. We need to run this sequentially to avoid two plugins writing simultaneously text output and we need to know when it's over so we can send it to the client. On the other hand we have events that follow a Pub/Sub style like 'a new user has connected'.

Frontend Web Components

• Web Components
  • Custom Elements
  • Shadow DOM
  • HTML <template> element
  • HTML imports
• Encapsulation and modularity
  • JavaScript methods on Element prototypes which are in the DOM anyway
  • CSS Styles encapsulated in Shadow DOM, can be themed with CSS variables (emerging standard)
  • Seperate presentation from content (Shadow DOM)
• Polyfill for Browsers that don't support them

Host application supplies the event bus

var eventBus = new EventEmitter2();

// 'polymer-ready' event is emitted when Web Components load        
document.addEventListener("polymer-ready", function(){

  // This is the only time we use a DOM event for communication
  var event = new CustomEvent(’app-ready’, { ’detail’: {appEventBus :
      eventBus} });
  document.dispatchEvent(event);
});

document.addEventListener(’app-ready’, function(evt){

  // we have the event bus, now subscribe to events
  evt.detail.appEventBus.on(’asq:question_type’, onQuestionTypeCb); 
}.bind(this));

Expressiveness vs. Compliance

• Strike a balance between expressiveness and compliance
• Plugin Curation allows for more expressive APIs without sacrificing compliance

<asq-highlight> template

<template if="{{role == roles.VIEWER}}">
  <asq-highlight-viewer mode="{{mode}}" theme="{{theme}}"
      fontSize="{{fontSize}}">
    <content></content>
  </asq-highlight-viewer>
</template>
<template if="{{role == roles.PRESENTER}}">
  <asq-highlight-presenter mode="{{mode}}" theme="{{theme}}"
      fontSize="{{fontSize}}">
    <content></content>
  </asq-highlight-presenter>
</template>

Persisting an answer to the database

answerSubmission: coroutine(function *answerSubmissionGen (answer){

yield this.asq.db.model("Answer").create({
  question : answer.questionUid,
  answeree : answer.answeree,
  session : answer.session,
  submitDate : Date.now(),
  submission : answer.submission,
});

// this is an asynchronous task. When it's done it's going to send 
// the event shown next
this.calculateProgress(answer.session, ObjectId(questionUid));


//this will be the argument to the next hook
return answer;
}

Send an event to front-end plugin instances

var event = {
  questionType: "asq-highlight",
  type: "progress",
  questionUid: question_id.toString(),
  heatmapData: JSON.stringify(heatmapData)  
}

//use exposed socket API from proxy
this.asq.sendSocketEventToNamespaces(’asq:question_type’, event
, session_id.toString(), ’ctrl’);

• Single code repository
  https://github.com/ASQ-USI/asq-highlight
• Directory structure

  ├── README.md
  ├── asq-highlight.html # Web Component 
  ├── bower.json # Bower package and frontend dependencies
  ├── demo.html
  ├── elements
  │   ├── ...
  ├── index.js # node.js module entry
  ├── lib
  │   └── asqHighlightPlugin.js # node.js module
  ├── node_modules
  │   ├── ... 
  ├── package.json # npm package and backend dependencies
  └── test
      ├── element
      └── server

• Install frontend

  >_ bower install --save asq-highlight

• Install backend

  >_ npm install --save asq-highlight