$30 off During Our Annual Pro Sale. View Details »

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.

Jan Holesovsky

October 17, 2020
Tweet

More Decks by Jan Holesovsky

Other Decks in Programming

Transcript

  1. Collabora
    Office
    OPENSUSE-LIBREOFFICE CONF’20
    Required
    Magic
    advanced technology
    History of Online and
    Mobile
    @JHolesovsky,
    By Jan Holešovský
    Collabora Productivity

    View Slide

  2. It all started attempting to
    create a mobile app...

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  6. But how to get it further?
    Tiled rendering!

    View Slide

  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

    View Slide

  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!

    View Slide

  9. Online, finally!

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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!

    View Slide

  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!

    View Slide

  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!

    View Slide

  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

    View Slide

  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

    View Slide

  18. Thank you!
    By Jan Holešovský
    @Jholesovsky,

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

    View Slide