Xblocks: bird's eye

What is an Xblock

edX’s component architecture for courseware

Quick reminder:

Xblocks create a hierarchy of pieces

One of the primary extension points for course content

Why are they nice

OLX

Xblocks

Studio

def author_view(self, context=None):
    pass

def studio_view(self, context=None):
    pass

def author_view(self, context=None):   
    pass

Wrapper of external services

Stable interface (pre alpha)

Independent repository

<video youtube="1.00:dQw4w9WgXcQ" url_name="ff000e7ca278461e86a87a39248c5e76" display_name="Lesson" download_track="true" download_video="true" edx_video_id="aefd2be1-18c8-44e7-8815-2f890c971271" html5_sources="[]" only_on_web="true" sub="dQw4w9WgXcQ" youtube_id_1_0="dQw4w9WgXcQ">
  <video_asset client_video_id="someVideo.6.mov" duration="716.12">
    <encoded_video bitrate="0" file_size="0" profile="youtube" url="dQw4w9WgXcQ"/>
    <encoded_video bitrate="211" file_size="18910223" profile="mobile_high" url="https://123.cloudfront.net/dQw4w9WgXcQ/someVideo.mp4"/>
    <encoded_video bitrate="166" file_size="14896810" profile="mobile_low" url="https://123.cloudfront.net/dQw4w9WgXcQ/someVideo.mp4"/>
    <encoded_video bitrate="284" file_size="25424960" profile="desktop_mp4" url="https://123.cloudfront.net/dQw4w9WgXcQ/someVideo.mp4"/>
  </video_asset>
</video>

Tools of the trade

Cookie Cutter

https://github.com/edx/cookiecutter-xblock

Xblocks

SDK

https://github.com/edx/xblock-sdk

What's out there?

Xblocks

https://openedx.atlassian.net/wiki/display/COMM/XBlocks+Directory

http://xblocks.org

Poll & Survey
LTI consumer
Staff graded assesment
Word Cloud
Vector Drawing

Scorm

Problem builder
Recommender tool

Schoolyourself

Randomized content blocks
Annotations
Drag and Drop V2
Oppia explorations
Office Mix

Google drive
Flow control
Peer instruction tool
Done
Image Explorer

What's not an Xblock?

Xblocks

Djangoapps

Proctoring

Submissions

Teams

Notes

Auxiliary Services

Course pages

Features

Xblocks: up close

How to Xblock

Detail

https://github.com/open-craft/quote-of-the-day-xblock

General guideline

• Download SDK
• Use cookie cutter
• Developer fun!

• Require services
• Use Xblock API

How far can you go?

Extend

What is inside the box

Services in the lms Xblock runtime

Detail

Beyond Xblocks

Xblock on steroids

Extend

Hybrid Xblock - App

Import core modules

Let's do this

Extend

One of two ways:

# common.py

OPTIONAL_APPS = (
    'mentoring',
    'problem_builder',
    'edx_sga',
    'submissions',
    'openassessment',

    # ...
    # Your Xblock here
    'custom_xblock_app',
    # ...
)

# Your preferred way of
# adding fines to lms.env.json

EDXAPP_ENV_EXTRA:
  # ...
  # Your Xblock here
  ADDL_INSTALLED_APPS:
    - "custom_xblock_app"

And then what?

Extend

Access to all the core modules

Management commands

Models

Translations (the django way)

Is this even legal?

Extend

• openassessment.xblock
• edx_sga
• problem_builder
• mentoring

Many examples in the wild

But at which cost?

Extend

+ Still plays nice with OLX and Studio
+ All the platform data to interact
+ Django

- More surface area (security)
- Changes to the platform will break it

How to keep you sanity

Independent services

Keep you sanity

# Service with @XBlock.needs decorator

grades_service = self.runtime.service(self, 'grades')


# Custom Service

from xblock.reference.plugins import Service

class GradeService(Service):
    """Custom Service Class"""
    pass

grades_service = GradeService()

Use Json Handler

With or without fragments

Initialize them, or not

Keep your sanity

Course scoped API

Each handler an endpoint

Simple Pattern

Keep your sanity

https://gist.github.com/felipemontoya/2bc680f6380ec3632faf0400ebdca27e

@XBlock.json_handler

edx-platform

custom services

Pattern: Xblock

Keep your sanity

@XBlock.json_handler
def api_endpoint_example(self, data, suffix=''):
    """  Returns the actual condition state  """

    return {
        'success': True,
        'status': self.any_xblock_method(),
        'grades': self.cutting_edge_method(),
    }

Pattern: Studio

Keep your sanity

Pages

Works on units or student_view

<!--
    Studio Page
    Parameters: 
    data-location="block-v1:SV_test+SV_test+SV_test+type@grade-podium+block@unique_id" 
    data-course-id="course-v1:SV_test+SV_test+SV_test"
    data-extra="You can pass more variables here"
-->
<div id="app-anchor-js"
    data-location="block-v1:SV+CV+2016co+type@grade-podium+block@unique_id" 
    data-course-id="course-v1:SV+CV+2016co"
    data-background-img="https://s19.postimg.org/q8y5al5nn/Wallpaper_01.jpg">
></div>
<script type="text/javascript" src="https://static.edunext.co/static/podium/js/podium.app.require.js"></script>

Pattern: Javascript

Keep your sanity

define = define || RequireJS.define;

(function (require, define) {
  'use strict';

  require.config({
    baseUrl: "../",
    paths: {
      /* Load jquery from google cdn */
      'jquery': ['//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min'],
      /* Load from cdn */
      'backbone': ['https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min'],
      'underscore': ['https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min'],
      'text': ['https://cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min']
    },
    shim: {
      /* Set bootstrap dependencies (just jQuery) */
      'backbone' : ['underscore']
    }
  });

  require([
    'jquery',
    'underscore',
    'backbone',
    'text!/static/template/main.html',
    ], function ($, _, Backbone, template) {
  
    // All your code here
    var extras = $('#page-app').data('extras');

  });

}).call(this, require || RequireJS.require, define || RequireJS.define);

Test. Not negotiable

Keep custom services separate

https://stackoverflow.com/a/6794451/2072496

Keep your sanity

Use docker and the SDK

https://github.com/open-craft/quote-of-the-day-xblock/pull/4

Use Continuous integration tools

Travis-CI, CircleCI, Jenkins

Our experience

Keep your sanity

In contrast

Keep your sanity