Front-end standards group/2017-02-22

2017-02-22 Attending: Jan Dittrich, Jan D., Julien G., Joaquin O.-H., Timo T., Volker E., Sam S., Bartosz D.

Action & Code

New quests

Wikidata's next UI library?

(Jan Dittrich, WMDE) Wikidata is currently discussing the future architecture and foundation of it’s UI (since the current framework, jQueryUI is deprecated). We wonder in particular what a good way to manage state/UI interactions, since Wikidatas UI has potentially many interacting elements. We had a look at current JS libraries and their approaches to it, in particular the MVVM vue.js.

• You can use the sandbox item to try out what the current UI feels and the states it needs to manage: https://www.wikidata.org/wiki/Q4115189
• Mentioned:
  • https://en.wikipedia.org/wiki/Reactive_programming
  • http://vuejs.org/,
  • http://redux.js.org/

JD: Wikidata in it's current way, changing UI cause a ripple effect. It's strongly state-dependent.
Lots of edit possibilities, all causes state messing.

React, also looked at vue, they give you components which are wired in their state.
In particular in vue.js you have message templates. You can write […]
FE dev can then write hooks
is relying on different functions, OOjs UI's JS is very difficult to use (subjective opinion)

OOUI:
TT: Observers are a fairly new thing, wasn't really at the time OOjs UI came into place. Manage your state in Redux, whenever your widget state's update,
OOjs has few base classes,
VE uses them, a bit more simplified MVC . OO.Class + EventEmitter as base for data model. For each entity, its data object is injected into ui object. UI will listen for on-update event on data object and update its rendering accordingly. Redux to detect changes and change OOjs UI component

When you have a mass change, like a button "change all", you've got […]

JOH: We've got some experience with Redux and jQueryUI it needed a lot of manual checking. (mentioned also by Jan)
It makes the code easier to reason about if you have a declarative way to render the UI.

JD: Trying Redux and OOjs UI: https://codepen.io/j4n/pen/dNKeKm

JDittrich: Wire up Redux and OOjs UI manual. No additional dependency.

Advantage of vue would be virtual DOM diffing
TT: While the Mustache Templates aren't supporting partial updates, it's on the roadmap.

MobileFrontend: Mustache for Templates, OOUI for interface, use actual rendering values in Templates
Once we have live rendering in the templates, you would get that for free.

JOH: I imagine, there's other libraries smaller libraries with a better license, namely these two https://preactjs.com/ and https://infernojs.org/ seem to be the better maintained ones

UI state management in OOUI?
BD: not really, no. the individual widgets only store their own state

JG: Most of them are very similar. Ideally we don't want to be stuck within one library again. That's why I prefer the React-like libraries over vue.js

Hovercards use Redux

Possible candidates with this discussion are:

• Redux-like +…
• Redux-like + OOUI
• Redux-like + Vue tryout

Social

No topics today.