czwartek, 21 lutego 2019

Hack Week - Browsersync integration for Online

Recently my LibreOffice work is mostly focused on the Online. It's nice to see how it is growing with new features and has better UI. But when I was working on improving toolbars (eg. folding menubar or reorganization of items) I noticed one annoying thing from the developer perspective. After every small change, I had to restart the server to provide updated content for the browser. It takes few seconds for switching windows, killing old server then running new one which requires some tests to be passed.

Last week during the Hack Week funded by Collabora Productivity I was able to work on my own projects. It was a good opportunity for me to try to improve the process mentioned above.

I've heard previously about browsersync so I decided to try it out. It is a tool which can automatically reload used .css and .js files in all browser sessions after change detection. To make it work browsersync can start proxy server watching files on the original server and sending events to the browser clients if needed.

What is the advantage? Developer tools in the browser are not good enough?

  • Changes tracked by git - no need to copy changes from the browser's developer tools to the source files
  • You can setup testing matrix with all apps (writer, calc, impress) and all is reloaded instantly at one time (even on other devices like tablet or smartphone)
  • Fast prototyping

Disadvantages

  • You have to remember to run syntax tests before commiting the changes

To integrate browsersync I needed to do some build system changes. First, all static files are served from 'loleaflet/dist' directory. These files are not the original sources but copies. I modified the Makefiles to create symlinks instead if the browsersync is activated. Thanks to that we can modify sources tracked by git and proxy can detect changes.

To try it out on your own:

  1. Delete your 'loleaflet/dist' folder or
    make clean
    you might need to delete generated 'Makefile' if repository was used before
  2. Install browsersync:
    npm install -g browser-sync
  3. Run 'configure' script with additional --enable-browsersync argument
  4. Run server with:
    LOOL_SERVE_FROM_FS=1 make run
  5. In the other console run browsersync:
    make sync-[writer|calc|impress]
More information can be found in: 'loleaflet/README'

In the video below you can see how it works:

Next step will be to allow browsersync usage with cloud storage integrations like richdocuments, I noticed also some issues with access from other devices (app is still using original server for some resources).

1 komentarz:

  1. My husband and I have been having lots of problems living together, he never gives me attention or makes me happy because he has fallen in love with another woman outside our marriage. I tried my best to make sure that my husband leaves this woman but the more I talk to him about it the more he makes me feel sad and unhappy, My marriage started leading to divorce because he no longer gives me attention. I wanted to forget him but i love him and didn't want to lose him. We have been married for years and he is all I could call a true best friend and best in all, the man that handles my problems perfectly, the man that makes sacrifices for ,my happiness. I wanted him back in my life badly and I was so confused. My Friends told me to buy books about relationships, so I went online for relationship books while I came across a spell caster called Dr Emu. I read testimonies and reviews about him so I contacted him immediately, explained my problems to him. Same day , he casted a spell for me and assured me for 2 days that my husband will return to me and to my greatest surprise the third day my husband came knocking on my door and begged for forgiveness. I am so happy that my love is back again and not only that, we are about to get married again, he proposed. I wouldn't stop talking about him. Contact him today if you need his help via email: emutemple@gmail.com and you will see that your problem will be solved without any delay. Website: https://emutemple.wordpress.com/

    OdpowiedzUsuń