libreoffice online client side development · libreoffice online – client side development by...
TRANSCRIPT
![Page 1: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/1.jpg)
www.CollaboraOffice.com
LibreOffice Online –
client side development
by Mihai Varga
Consultant Software Engineer Intern
+MihaiVarga13 [email protected]
@CollaboraOffice
![Page 2: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/2.jpg)
LibreOffice Conference 2015 | Aarhus 2/37
A brief introduction
![Page 3: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/3.jpg)
LibreOffice Conference 2015 | Aarhus 3/37
A brief introduction
● LibreOffice Online:● development started in April 2015● consists of two major parts:
– the server– the client
● Leaflet● JavaScript
![Page 4: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/4.jpg)
LibreOffice Conference 2015 | Aarhus 4/37
Leaflet
![Page 5: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/5.jpg)
LibreOffice Conference 2015 | Aarhus 5/37
A brief introduction
● how Leaflet usually looks like
![Page 6: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/6.jpg)
LibreOffice Conference 2015 | Aarhus 6/37
Leaflet
● an open-source JavaScript library● interactive maps● tile-based implementation● used by many big companies
![Page 7: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/7.jpg)
LibreOffice Conference 2015 | Aarhus 7/37
Leaflet
● What have we changed ?● added web socket for
communication with the server● binary images● caching more tiles
![Page 8: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/8.jpg)
LibreOffice Conference 2015 | Aarhus 8/37
Loading the document
![Page 9: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/9.jpg)
LibreOffice Conference 2015 | Aarhus 9/37
Loading the document
● used Leaflet's simple CRS (Coordinate reference system)
● the tile at (0, 0) is placed in the left top corner
● request images from server based on the coordinates of the visible area
![Page 10: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/10.jpg)
LibreOffice Conference 2015 | Aarhus 10/37
Loading the document
● the server sends binary .png images → these are transformed into data URIs
● example: An HTML fragment embedding a picture of a small red dot:
![Page 11: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/11.jpg)
LibreOffice Conference 2015 | Aarhus 11/37
Loading the document
![Page 12: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/12.jpg)
LibreOffice Conference 2015 | Aarhus 12/37
Caching
![Page 13: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/13.jpg)
LibreOffice Conference 2015 | Aarhus 13/37
Caching
● tiles outside of the viewing area are pre-fetched and cached
● tiles are not deleted when removed from the DOM tree
![Page 14: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/14.jpg)
LibreOffice Conference 2015 | Aarhus 14/37
Viewing the document
![Page 15: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/15.jpg)
LibreOffice Conference 2015 | Aarhus 15/37
Viewing the document
● implemented a scroll API → scroll bars can be easily plugged in
● based on Leaflet's panning methods
● the document can also be panned with the mouse
● different zoom levels
![Page 16: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/16.jpg)
LibreOffice Conference 2015 | Aarhus 16/37
Viewing the document
● selections are implemented as a SVG overlay
● text can be selected and copied from the document
● the user can shrink / enlarge the selection
![Page 17: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/17.jpg)
LibreOffice Conference 2015 | Aarhus 17/37
Editing the document
![Page 18: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/18.jpg)
LibreOffice Conference 2015 | Aarhus 18/37
Editing the document
● typical scenario: key strokes are sent to the server → tiles are invalidated → new tiles are requested and repainted → cursor is moved, etc.
![Page 19: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/19.jpg)
LibreOffice Conference 2015 | Aarhus 19/37
Editing the document
● how are key strokes captured?● we have a hidden text area in which the
user types● keyboard events are intercepted● browser compatibility issues, the
keyboard event is different across browsers
![Page 20: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/20.jpg)
LibreOffice Conference 2015 | Aarhus 20/37
Editing the document
● images and shapes can be moved and resized
![Page 21: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/21.jpg)
LibreOffice Conference 2015 | Aarhus 21/37
Editing the document
● copying● the ClipboardEvent is captured in the
hidden text area● due to security issues, access to the
user's clipboard is quite restricted● the event must be handled
synchronously when captured, else it will 'expire'
![Page 22: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/22.jpg)
LibreOffice Conference 2015 | Aarhus 22/37
Editing the document
● what's next for copying● there is ongoing work for a Clipboard
API (current status: Working Draft)● very little support for rtf● plain text or html currently works better● alternatives: zeroclipboard library
– but this uses flash which will soon be deprecated
![Page 23: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/23.jpg)
LibreOffice Conference 2015 | Aarhus 23/37
The toolbar
![Page 24: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/24.jpg)
LibreOffice Conference 2015 | Aarhus 24/37
The toolbar
● we've extended Leaflet's API to provide methods for building / using the toolbar
● most of the methods work through a UNO command
● it's easy to plug in and out different toolbar components
● can be easily integrated in an already existing JavaScript application
![Page 25: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/25.jpg)
LibreOffice Conference 2015 | Aarhus 25/37
The toolbar
Cloudsuite toolbar
![Page 26: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/26.jpg)
LibreOffice Conference 2015 | Aarhus 26/37
The toolbar
A closer look at the toolbar
![Page 27: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/27.jpg)
LibreOffice Conference 2015 | Aarhus 27/37
The toolbar
Searching
![Page 28: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/28.jpg)
LibreOffice Conference 2015 | Aarhus 28/37
The toolbar
● a few other features not available through UNO commands:● goToPage / goToPart● Enable editing / viewing mode● Zoom in / out● Enable mouse selection or panning
![Page 29: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/29.jpg)
LibreOffice Conference 2015 | Aarhus 29/37
The toolbar
![Page 30: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/30.jpg)
LibreOffice Conference 2015 | Aarhus 30/37
Testing
![Page 31: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/31.jpg)
LibreOffice Conference 2015 | Aarhus 31/37
Testing
● automated testing is possible● Leaflet was already using the mocha
JavaScript framework● nice way of testing the new and the old
features of Leaflet● we can replay an editing session
![Page 32: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/32.jpg)
LibreOffice Conference 2015 | Aarhus 32/37
Testing
● the tests have to be run in the browser
● an alternative is to use PhantomJS, but it currently only has hixie-76 websockets
● PhantomJS 2.x promises RFC 6455 websockets, so this will be the way to go
![Page 33: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/33.jpg)
LibreOffice Conference 2015 | Aarhus 33/37
Testing
● performance while editing● tile loading time it's really good on
average (< 100 ms)● we are still working on improving it● might have to do with how binary images
are loaded in the browser
![Page 34: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/34.jpg)
LibreOffice Conference 2015 | Aarhus 34/37
Demo
![Page 35: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/35.jpg)
LibreOffice Conference 2015 | Aarhus 35/37
![Page 36: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/36.jpg)
LibreOffice Conference 2015 | Aarhus 36/37
![Page 37: LibreOffice Online client side development · LibreOffice Online – client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com](https://reader030.vdocument.in/reader030/viewer/2022021721/5bed0ce809d3f2a7378b90e6/html5/thumbnails/37.jpg)
LibreOffice Conference 2015 | Aarhus 37/37
Thank you!
● Slides will also be available on http://mihai-varga.blogspot.com/ (sometime soon)