Flow/Epic Front-End

From mediawiki.org

The Flow team is working on revised front-end code (browser CSS, HTML, and JavaScript) for Flow, codename "Epic Front-End".

The new version of Flow using it is in the frontend-rewrite branch.

It has possible features of

  • floating Table of Contents on the right for navigation and indicating progress on the board dropped from first sprint
  • Agora enhancements (all in local code, some proposed for core)
    • revised Agora button styling
    • new drop-down menu replaces flyout menu
    • new Agora colored tooltip
    • Design/WikiFont for symbols
  • remembers stat, e.g. user's choice of regular/collapsed/small view of topics on the board.
  • new sort by Recent active topics as well as default by Newest topics.

Implementation[edit]

Templating[edit]

The new front-end uses handlebars.js on the client to render templates supplied by ResourceLoader, and lightncandy in PHP to render the same templates pre-compiled at commit-time. Tracking bug 63443, security review is bug 63445. WMF will likely standardize on a templating library similar to Knockout but the PHP implementation is not ready yet.

Jon Robson has moved this into a separate Extension:Mantle, that page has some documentation on how to use it. Extension:MobileFrontend uses similar "Hogan" client-side templates, only in its JavaScript front-end.

See Flow/Architecture/Templating for Flow's approach to handlebars, helper functions, adding JS interactivity, etc.

Earlier[edit]

A rough prototype HTML-only prototype is at http://area51.yar.gs/wmf/flow1/ , not connected to any back-end. The code for now is at https://github.com/shahyar/wmf-flow1 , project tracking in Trello