1 / 20

Enabling realtime collaborative data-intensive web applications

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

kay
Download Presentation

Enabling realtime collaborative data-intensive web applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Enabling realtime collaborative data-intensive web applications A case study using serverside JavaScript Betreuer: Sascha Roth Kooperationspartner: Pentasys AG Tobias Höfler 29.04.2013

  2. Outline • Node.js – Introduction & Survey • Prototypical implementation of a real-time collaboration tool • Conclusion & Outlook Tobias Höfler 29.04.2013

  3. Node.js - Introduction • Developedby Ryan Dahl in 2009 • JavaScript Interpreter • JavaScript outside ofthebrowser • Extends Googles V8 withlow-level bindings • Filesystem, Sockets,... • Every bindingisasynchronous, eventloop • Single threaded • Currentversion: 0.10 Tobias Höfler 29.04.2013

  4. Node.js - Survey • Hypotheses • JavaScript developersareunsatisfiedwiththecurrenttoolsupport • Developers do not likethesyntaxof JavaScript • JavaScript codeishardtomaintain • Node.jsissuitableforenterpriseapplications • Participants • 100 completeanswers • Countries: • Germany: 37% • USA: 22% • UK: 3% • Mostly Web-Developers Tobias Höfler 29.04.2013

  5. Node.js - Survey • Key resultsabout JavaScript • 53.7% aresatisfiedwiththeireditors • Most popular: IntelliJ, WebStorm, Emacs • Missingfeatures: codecompletion, codenavigation, debugging • 65% likethesyntaxof JavaScript • CoffeeScriptandTypeScriptare not planedtobeused in future • 44% do not think, JS ishardtomaintain • 65% said JS codeis easy toread • 42% usetestingframeworks • The usageoftestingframeworksinfluencesmaintainability Tobias Höfler 29.04.2013

  6. Node.js - Survey • Key resultsaboutNode.js • 88% haveheardaboutNode.js • Node.jsprojectstendtobesmaller • 41.5% ofprojects: 1 poeple • 22.6% ofprojects: 3 poeple • Typicalkindsofprojects • 61.9% ofprojects : Web Application Tobias Höfler 29.04.2013

  7. Node.js - Survey • Key resultsaboutNode.js • ReasonsforusingNode.js • Simplicity • Performance • „Good fit for Web Applications“ • No „phaseshift“ • Realtime capabilities • Event-driven • 64.8% confirmedtheenterprisereadiness • Scalability • Stability • Short time tomarket • Same languageatclient & server Tobias Höfler 29.04.2013

  8. Prototypical implementation of a Real-Time collaboration tool Tobias Höfler 29.04.2013

  9. Demo Tobias Höfler 29.04.2013

  10. The Real-Time Architecture • Proposedby Alex MacCaw (JavaScript Web Applications) • Real-Time architecture = event-driven • Drivenbyuserinteractions • Client-side MVC • Whichmodelupdatesneedtobedistributed ? • Who needstobenotified ? • PubSubpattern Tobias Höfler 29.04.2013

  11. Prototypical Implementation – Fundamental Architecture Tobias Höfler 29.04.2013

  12. Prototypical Implementation – Technology Stack • Client UI withTwitter Bootstrap • Client MVC withEmberJS: • Model: CollaborativeEditor.Documents= Ember.A([]); CollaborativeEditor.Document= Ember.Object.extend({ name : null, lastModified: null, numberOfPeopleEditing: null, tags : Ember.A([]) }); Tobias Höfler 29.04.2013

  13. Prototypical Implementation – Technology Stack • Client MVC withEmberJS: • Controller: CollaborativeEditor.DocumentsController = Ember.ArrayController.extend({ createNewDoc : function() { ... }, ... Tobias Höfler 29.04.2013

  14. Prototypical Implementation – Technology Stack • Client MVC withEmberJS: • View: <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> Tobias Höfler 29.04.2013

  15. Prototypical Implementation – Technology Stack • ServersidewithNode.js • Socket.iolibraryforrealtimecommuniction • Abstracts underlyingtechnology(Long-polling, Web-sockets,...) • Server: • Client: socket.on('storeAndDistributeDocument', function(doc, callback) { documentManager.storeDocument(doc); socket.broadcast.emit('newDoc', doc); callback(); }); socket.emit('storeAndDistributeDocument', doc, function() { ui.addDocument(doc); }); Tobias Höfler 29.04.2013

  16. Prototypical Implementation – Technology Stack • Share.jslibraryforconcurrentediting • ConcurrentEditingofplaintext • Operational Transformation based • Database • Redis Tobias Höfler 29.04.2013

  17. Conclusion & Outlook Tobias Höfler 29.04.2013

  18. Conclusion & Outlook • Node.jsisenterpriseready • Node.jsis a good fit for real-time web applications • Event-drivenitself • Non-blocking IO • Offerslotof real-time functionalities • Pattern for Tricia real-time functionalities • Further Research: • Collaborative editingofrichtext • Collaborative editingofgeneralmodels Tobias Höfler 29.04.2013

  19. Thank you for your attention Tobias Höfler 29.04.2013

  20. OT

More Related