The Apereo OAE Bootcamp offers an introduction into back-end and front-end development for the Apereo OAE project.
The back-end development part focuses on learning the different extension points behind the scenes in the service layer of OAE. A back-end component for OAE that exposes a REST API is built from scratch.
Back-end development topics include:
- Node.js NPM module system
- OAE back-end application life-cycle
- Data-modelling with Apache Cassandra and writing CQL queries from Node.js
- Using the OAE APIs to expose back-end functionality for the web VIA RESTful APIs
- Writing back-end unit tests using Grunt and Mocha. If time permits, the following will also be covered:
- Integrating with OAE's ElasticSearch query and index functionality
- Integrating with OAE's Activity and Notifications functionality
- Integration with OAE's Admin Configuration functionality
The front-end development part focuses on writing a UI widget using the REST APIs developed in the back-end development part.
Front-end development topics include:
- Integrating with the OAE Widget loading system
- Writing internationalizable templates with TrimPath and the widget i18n and l10n functionality
- Interacting with the core OAE UI APIs
- Using bootstrap 3 to design responsive UI layouts for your widgets
- Writing front-end unit tests using Grunt and CasperJS
9. MULTI-TENANCY
• Support multiple institutions on same installation
• Easily created, maintained and configured
• Each institution has its own URL, branding, skinning and
users
• Share infrastructure
• Institutions can share and collaborate with other
institutions
19. OAE ARCHITECTURE
The Apereo OAE project is made up of 2 distinct source code
platforms:
• “Hilary”
• Server-side RESTful web platform that exposes the OAE
services
• Written entirely using server-side JavaScript in Node.js
• “3akai-ux”
• A client-side / browser platform that provides the HTML,
JavaScript and CSS that make up the UI of the application
21. APPLICATION SERVERS
• Written in server-side JavaScript, run in Node.js
• Light-Weight
• Single-Threaded
• Event-Driven
• Non-Blocking
• Uses callbacks/promises and an event queue to stash work to be done after I/O or other heavy processes
complete
• App servers can be configured into functional specialization:
• User Request Processor
• Activity Processor
• Search Indexer
• Preview Processor
22. APACHE CASSANDRA
• Authoritative data source
• Provides high-availability and fault-tolerance without trading away
performance
• Regarding CAP theorem, Cassandra favours Availability and
PartitionTolerance over Consistency, however consistency is
tunable on the connection-level (we always use “quorum”)
• Uses a ring topology to shard data across nodes, with
configurable replication levels
• Used by: Netflix, eBay,Twitter
23. ELASTICSEARCH
• Lucene-backed search platform
• Built for incremental scaling and high-availability
• Exposes HTTP RESTful APIs for indexing and querying
documents
• RESTful query interface uses JSON-based Query DSL
• Powers all of Hilary search functions (Library Search,
Members / Memberships Search)
• Used by: GitHub, FourSquare, StackOverflow,WordPress
24. RABBITMQ
• Light-weight message queue platform written in
Erlang
• Used for distributing tasks to specialized
application server instances
• Supports active-active queue mirroring for high
availability
• Used by: Joyent
25. REDIS
• REmote DIctionary Server
• Fills a variety of functionality in OAE:
• Broadcast messaging (could move to RabbitMQ)
• Locking
• Caching of basic user profiles
• Holds volatile activity aggregation data
• Comes with no managed clustering solution (yet), but has slave replication for active fail-
over
• Some clients manage master-slave switching, and distributed reads for you
• Used by:Twitter, Instagram, StackOverflow, Flickr
26. ETHERPAD
• Open Source collaborative editing application written
in Node.js
• Originally developed by Google and Mozilla
• Licensed under Apache License v2
• Powers collaborative document editing in OAE
• Collaborative documents sharded by ID to dedicated
Etherpad instances
27. NGINX
• HTTP and reverse-proxy server
• Used to distribute load to application servers,
etherpad servers and stream file downloads
• Useful rate-limiting features based on source IP
• Proxy web socket connections to Hilary and Etherpad
• Used by: Netflix,WordPress.com
29. IDE
• OAETeam uses mostly SublimeText 2 and Aptana Studio 3
• http://www.sublimetext.com/2
• http://www.aptana.com/products/studio3/download
• Useful things in an IDE:
• Syntax highlighting
• Automatic “linting”
• Variable assistance (don’t expect much from dynamic
scripting language)
• File-system navigation
30. GITHUB
• OAETeam uses it for:
• Version control
• IssueTracking
• Code Integration Workflow (Pull Requests)
• TravisCI Integration for:
• Running unit tests on all commits and pull requests
• Packaging up and uploading all commits to Amazon S3 so they can be easily pulled
down and deployed
• Packaging up and uploading all tagged releases to Amazon S3 for production releases
• Coveralls Integration for:
• Reporting on trends in unit tests code coverage (e.g., indicates if test coverage drops
from 90.2% to 90.15%)
33. NPM
• Used to download packages and manage versions
• Packages can be installed from:
• Central NPM repo: npm install oae-tasklist
• Git: npm install git+https://github.com/oaeproject/oae-tasklist
• File-system directory: npm install ../oae-tasklist
• package.json file describes metadata about a module and its
dependencies
• When a package is installed, they are placed either locally in a
./node_modules directory or globally (npm install -g) in a shared location
such as /usr/local/share/npm/lib/node_modules
34. EXTENDING OAE WITH NPM
• NPM module represents a logical set of functionality (e.g., a
back-end REST API, or a set of related widgets)
• NPM modules in 3akai-ux are searched for custom widgets
• NPM modules in Hilary (that start with oae-) are searched
for init.js and rest.js to integrate to the application
container
• New dependencies can be added to package.json file and
then fetched / installed running “npm install”
35. PACKAGE.JSON
• Describes metadata about a package:
• Version
• Author
• Unique package id
• Required for installing a package as a module
77. UITEMPLATING
• Template
<div id="example_template"><!--
<h4>Welcome {firstName}.</h4>
You are ${profile.age} years old
--></div>
• Input
oae.api.util.template().render($("#example_template"), {
“firstName”: “John”,
“profile”: {
“placeofbirth”: “Los Angeles”,
“age”: 45
}
});
• Result
<h4>Welcome John.</h4>
You are 45 years old.
78. UITEMPLATING
• Template
<div id="example_template"><!--
{if score >= 5}
<h1>Congratulations, you have succeeded</h1>
{elseif score >= 0}
<h1>Sorry, you have failed}
{else}
<h1>You have cheated</h1>
{/if}
--></div>
• Input
oae.api.util.template().render($("#example_template"), {
“score”: 6
});
• Result
<h1>Congratulations, you have succeeded!</h1>
79. UITEMPLATING
• Template
<div id="example_template"><!--
{for conference in conferences}
<div>${conference.name} (${conference.year})</div>
{forelse}
<div>No conferences have been organized</div>
{/for}
--></div>
• Input
oae.api.util.template().renderTemplate($("#example_template"), {
“conferences”: [
{“name”: “Apereo Miami”, “year”: 2014},
{“name”: “Apereo San Diego”, “year”: 2013},
{“name”: “Sakai Atlanta”, “year”: 2012}
]
});
• Result
<div>Apereo Miami (2014)</div>
<div>Apereo San Diego (2013)</div>
<div>Sakai Atlanta (2012)</div>
80. UI RELEASE PROCESSES
• Grunt
• Task-based build system implemented in JavaScript
• Similar in theory of operation to Make, Rake
• Rich ecosystem of plug-ins to do most tasks
• Easy to implement new task when a plugin doesn’t exist yet
• Used for running test suites, production builds, linting tools
81. UI RELEASE PROCESSES
• Production Build
• Optimizes the static assets to reduce throughput, request frequency, and optimize caching
across versions
• Require.js Optimization:
• Concatenate JavaScript dependencies (reduces number of web requests significantly)
• Minify / Uglify JavaScript files (reduces payload sizes significantly, even when gzip enabled
on web server)
• Hash optimization:
• Hash the contents of static assets and append result to the filename, then cache them
indefinitely on the browsers
• When the files change, the hash in the filename changes to force reloading of the
updated asset
• If files never change across version, client never reloads file until their cache is cleared