Upgrade to Pro — share decks privately, control downloads, hide ads and more …

History of Online and Mobile

History of Online and Mobile

Read about the history of Collabora Online, LibreOfficeKit, Leaflet and other building bits that led to the Collabora Online as we know today.

F8c4a0762b9b23480dc49b6a5871f814?s=128

Jan Holesovsky

October 17, 2020
Tweet

Transcript

  1. Collabora Office OPENSUSE-LIBREOFFICE CONF’20 Required Magic advanced technology History of

    Online and Mobile @JHolesovsky, <kendy@collabora.com> By Jan Holešovský Collabora Productivity
  2. It all started attempting to create a mobile app...

  3. Col .. 3 collabora online . org 2011-2012: “Android: Get

    something on the screen” Pioneered by Tor Lillqvist and Michael Meeks, LibreOffice was cross-compiled to Android • Research work at SUSE • Sheer amount of limitations on the way • Linker – a limited about of dynamic libraries in one app • Fontconfig, using the assets, … • Mergelib, components constructors – Matúš Kukan • First loader – Iain Billett • Debugging a nightmare! • But resulted in the first version showing LibreOffice on the screen
  4. Col .. 4 collabora online . org The 1st iteration

    just showed the entire LibreOffice UI Not usable for real work, but showed it was possible! • See the menus and toolbars
  5. Col .. 5 collabora online . org 2012-2013: Rendering whole

    pages Just a viewer • But closer to what the mobile UI is supposed to look like • Scrolling the entire document: problem
  6. But how to get it further? Tiled rendering!

  7. Col .. 7 collabora online . org 2013: Tiled rendering

    • Collabora Productivity was spun off by SUSE, and got a client CloudOn – who needed a mobile app on iOS • So far their business was streaming MSO instance to the user, but wanted a native app • At that time, tiled rendering was used by many, iOS even had a convenient widget for this • LibreOfficeKit was started • Thin C/C++ API to access internals of the LibreOffice core • Focused on the tiled rendering • Callbacks for the events that come from the core – triggered by timers or users actions
  8. Col .. 8 collabora online . org 2014-2015: LibreOfficeKit used

    for rendering Tomaž Vajngerl introduced tiled rendering into the Android app • Thanks to Smoose who helped co-funding this • Using the compositing code from Mozilla • The document consists of “tiles”, each can be rendered separately • Editing made possible thanks to Miklos Vajna • TDF tender helped • It’s easy to re-draw a tile after invalidation!
  9. Online, finally!

  10. Col .. 10 collabora online . org 2015: The first

    Online code • Finally Collabora has found (co-)funding for developing Online – thanks to IceWarp • Initially a viewer • Extended to editing app (one editor) • Then shared editing – one editor who could edit, the others viewers • Was possible to switch who was editing, but still only one person • After several years – collaborative editing • Reusing the “multiple views” feature in LibreOffice (that I think nobody have been using until then ;-) - and suddenly it is the core of everything) • Server part in C++, client part re-using LeafletJS
  11. Col .. 11 collabora online . org 2016-2018: More in

    the Android app, but not enough Christian Lohmaier, Ximeng Zu, Mert Tumer and many more are adding various features • But the Android app is not catching up • Lots of LibreOfficeKit improvements triggered by the Online development
  12. Col .. 12 collabora online . org 2017: Online got

    dialogs routing in the meantime • Until now, we were re-writing various dialogs we needed for the functionality in JavaScript • Turned out to be unbearable long-term • Solution: Route the existing dialogs as pixels • Dialogs not using the tiled rendering, invalidating only the relevant parts etc. • Many corner case fixed • Like different users can have dialogs in different languages, or both open the same dialog type • Dialogs had to be made asynchronous
  13. Col .. 13 collabora online . org 2018: Sharing more

    of Online and Mobile • Turns out that having three (web, iOS, Android) distinct implementations of the editing functionality on top of LibreOfficeKit is extremely hard to maintain • Android version lagging behind terribly, iOS not in a great shape either • But Online flourishing • Idea: Share the code, have even the Mobile apps inside a webview • Jan Iversen started prototyping, Tor Lillqvist took it to the next level • The iOS app switched to this approach • Surprisingly the performance of this solution is reasonably good!
  14. Col .. 14 collabora online . org 2019: Use the

    Online as the base for the Android app Idea the same as what Tor Lillqvist has done for the iOS • Make the app UI just a WebView • Reuse loolwsd for the document rendering • Use the existing JavaScript to compose the tiles, handle the UI, everything… • Share code! At the same time a lot of iOS improvements • Thanks to Adfinis co-funding!
  15. Col .. 15 collabora online . org 2019: Start of

    rendering core dialogs via JS • Developed by Szymon Klos • First for the mobile apps and online • To re-use the sidebar for navigation using one finger • Actions called via .uno commands This is the sidebar!
  16. Col .. 16 collabora online . org 2020: Further improvements

    everywhere • Chromebook support – Android app extended to handle that • JS dialogs on the next level – now the Notebookbar is using the same thing • .uno: commands were not enough • Reusing the uitest API! • Great – because improvements in the handling of JS dialogs improve the testing possibilities in LibreOffice and vice versa
  17. Col .. 17 collabora online . org The future •

    More JS dialogs usage everywhere • Even the sidebar in the desktop case? • Reduce usage of LeafletJS (loleaflet) • Use canvas for the rendering • All the Writer / Calc / Impress do now, but need bugfixing • Reduce usage of POCO • Paper cut fixing • Lots of good feedback from the Google Play reviews
  18. Thank you! By Jan Holešovský @Jholesovsky, <kendy@collabora.com> • And particularly

    big thanks to everybody who has contributed: either code or financially!