enabling realtime collaborative data-intensive web applications

20
Fakultät für Informatik Technische Universität München Enabling realtime collaborative data-intensive web applications 1 Betreuer: Sascha Roth Kooperationspartner: Pentasys AG Tobias Höfler 29.04.2013 A case study using serverside JavaScript

Upload: kay

Post on 08-Feb-2016

42 views

Category:

Documents


0 download

DESCRIPTION

Enabling realtime collaborative data-intensive web applications. A case study using serverside JavaScript. Betreuer: Sascha Roth Kooperationspartner: Pentasys AG. Outline. Node.js – Introduction & Survey Prototypical i mplementation of a real-time collaboration tool - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Enabling  realtime  collaborative data-intensive web applications

Fakultät für Informatik Technische Universität München

Enabling realtime collaborative data-intensive web applications

1

Betreuer: Sascha RothKooperationspartner: Pentasys AG

Tobias Höfler 29.04.2013

A case study using serverside JavaScript

Page 2: Enabling  realtime  collaborative data-intensive web applications

Outline

1. Node.js – Introduction & Survey

2. Prototypical implementation of a real-time collaboration tool

3. Conclusion & Outlook

Tobias Höfler 29.04.2013 2

Page 3: Enabling  realtime  collaborative data-intensive web applications

Node.js - Introduction

Developed by Ryan Dahl in 2009

JavaScript Interpreter

JavaScript outside of the browser

Extends Googles V8 with low-level bindings• Filesystem, Sockets,...

Every binding is asynchronous, event loop

Single threaded

Current version: 0.10

Tobias Höfler 29.04.2013 3

Page 4: Enabling  realtime  collaborative data-intensive web applications

Node.js - Survey Hypotheses

• JavaScript developers are unsatisfied with the current tool support• Developers do not like the syntax of JavaScript• JavaScript code is hard to maintain• Node.js is suitable for enterprise applications

Participants• 100 complete answers• Countries:

– Germany:37%– USA: 22%– UK: 3%

• Mostly Web-Developers

Tobias Höfler 29.04.2013 4

Page 5: Enabling  realtime  collaborative data-intensive web applications

Node.js - Survey

Key results about JavaScript

• 53.7% are satisfied with their editors– Most popular: IntelliJ, WebStorm, Emacs– Missing features: code completion, code navigation, debugging

• 65% like the syntax of JavaScript– CoffeeScript and TypeScript are not planed to be used in future

• 44% do not think, JS is hard to maintain• 65% said JS code is easy to read• 42% use testing frameworks• The usage of testing frameworks influences maintainability

Tobias Höfler 29.04.2013 5

Page 6: Enabling  realtime  collaborative data-intensive web applications

Node.js - Survey

Key results about Node.js

• 88% have heard about Node.js

• Node.js projects tend to be smaller– 41.5% of projects: 1 poeple– 22.6% of projects: 3 poeple

• Typical kinds of projects– 61.9% of projects : Web Application

Tobias Höfler 29.04.2013 6

Page 7: Enabling  realtime  collaborative data-intensive web applications

Node.js - Survey

Key results about Node.js

• Reasons for using Node.js– Simplicity– Performance– „Good fit for Web Applications“– No „phase shift“– Realtime capabilities– Event-driven

• 64.8% confirmed the enterprise readiness– Scalability– Stability– Short time to market– Same language at client & server

Tobias Höfler 29.04.2013 7

Page 8: Enabling  realtime  collaborative data-intensive web applications

Tobias Höfler 29.04.2013 8

Prototypical implementation of a Real-Time collaboration tool

Page 9: Enabling  realtime  collaborative data-intensive web applications

Tobias Höfler 29.04.2013 9

Demo

Page 10: Enabling  realtime  collaborative data-intensive web applications

The Real-Time Architecture

Proposed by Alex MacCaw (JavaScript Web Applications)• Real-Time architecture = event-driven• Driven by user interactions

Client-side MVC

Which model updates need to be distributed ?

Who needs to be notified ?

PubSub pattern

Tobias Höfler 29.04.2013 10

Page 11: Enabling  realtime  collaborative data-intensive web applications

Prototypical Implementation – Fundamental Architecture

Tobias Höfler 29.04.2013 11

Page 12: Enabling  realtime  collaborative data-intensive web applications

Prototypical Implementation – Technology Stack

Client UI with Twitter Bootstrap

Client MVC with EmberJS:

• Model:

Tobias Höfler 29.04.2013 12

CollaborativeEditor.Documents = Ember.A([]);

CollaborativeEditor.Document = Ember.Object.extend({name : null,lastModified : null,numberOfPeopleEditing : null,tags : Ember.A([])

});

Page 13: Enabling  realtime  collaborative data-intensive web applications

Prototypical Implementation – Technology Stack

Client MVC with EmberJS:

• Controller:

Tobias Höfler 29.04.2013 13

CollaborativeEditor.DocumentsController = Ember.ArrayController.extend({createNewDoc : function() {

...},...

Page 14: Enabling  realtime  collaborative data-intensive web applications

Prototypical Implementation – Technology Stack

Client MVC with EmberJS:

• View:

Tobias Höfler 29.04.2013 14

<script type="text/x-handlebars" data-template-name="documents"> <div class="hero-unit"> <h2>Documents</h2> </div> <a href="#" class="btn" {{action "createNewDoc"}}> <i class="icon-plus"></i> </a> <table class="table table-striped"> ... {{#each controller}} <tr> <td>{{name}}</td> <td>{{lastModified}}</td>

Page 15: Enabling  realtime  collaborative data-intensive web applications

Prototypical Implementation – Technology Stack

Serverside with Node.js

Socket.io library for realtime communiction• Abstracts underlying technology (Long-polling, Web-sockets,...)• Server:

• Client:

Tobias Höfler 29.04.2013 15

socket.on('storeAndDistributeDocument', function(doc, callback) {documentManager.storeDocument(doc);socket.broadcast.emit('newDoc', doc);callback();

});

socket.emit('storeAndDistributeDocument', doc, function() {ui.addDocument(doc);

});

Page 16: Enabling  realtime  collaborative data-intensive web applications

Prototypical Implementation – Technology Stack

Share.js library for concurrent editing• Concurrent Editing of plain text• Operational Transformation based

Database• Redis

Tobias Höfler 29.04.2013 16

Page 17: Enabling  realtime  collaborative data-intensive web applications

Tobias Höfler 29.04.2013 17

Conclusion & Outlook

Page 18: Enabling  realtime  collaborative data-intensive web applications

Conclusion & Outlook

Node.js is enterprise ready

Node.js is a good fit for real-time web applications• Event-driven itself• Non-blocking IO• Offers lot of real-time functionalities

Pattern for Tricia real-time functionalities

Further Research:• Collaborative editing of rich text• Collaborative editing of general models

Tobias Höfler 29.04.2013 18

Page 19: Enabling  realtime  collaborative data-intensive web applications

Tobias Höfler 29.04.2013 19

Thank you for your attention

Page 20: Enabling  realtime  collaborative data-intensive web applications

OT

29.04.2013 20