Certainly a topic for the front-end standards group, but to give my two
cents:
Many of these new JS libraries, such as React, have some very heavy
dependancies.
React requires JSX which needs to be transpiled into JS, ES6 Class syntax
which needs to be transpiled into ES5, which requires Babel and probably a
task runner like Grunt or Gulp (or webpack), which of course require Node
and NPM... so already you've built a very heavy dependancy chain which
itself needs to be maintained (ex: Gulp 4 is coming with breaking changes)
and all this needs to be integrated into MediaWiki which has its own way of
doing things.
None of that sounds like fun to me, so however you proceed I would
certainly aim to avoid all that <https://getpocket.com/a/read/1434444086>.
On Tue, Jan 31, 2017 at 11:13 AM, Derk-Jan Hartman <
d.j.hartman+wmf_ml(a)gmail.com> wrote:
This discussion seems exactly what we have a Frontend
Standards group for:
https://www.mediawiki.org/wiki/Front-end_standards_group
https://phabricator.wikimedia.org/project/profile/1616/
DJ
On Mon, Jan 30, 2017 at 2:57 PM, Jan Dittrich <jan.dittrich(a)wikimedia.de>
wrote:
Hello Wikitext-l,
-----------------------------------
TL;DR: The Wikidata team is considering to use a MVVM/Single-State
solution
for Wikidata’s UI. What are requirements and
concerns would be important
to
consider?
-----------------------------------
Wikidata’s current UI is built on jQuery UI. Since jQueryUI shall be
faded
out, we are looking at possible future frameworks
or paradigms to build
our
UI on. Our needs are:
- Having a sustainable foundation
- Being able to handle complex state dependencies (simplest are like: "if
element x is in edit mode, set element y to saving mode")
- A solution that is easy to learn for beginners and easy to read and
reason about for our engineers.
State management and data/event propagation goes beyond of what OOUI can
provide, as far as I (Jan) know. So an obvious candidate was looking into
MVVM solutions of which the most well known is the React library.
We had a deeper look at Vue.js which is known for having a large
community,
too, but being easier to understand and not using
an additional patent
clause in its licensing.
We see the following possible advantages:
- Better modularization
- understandability of our code, in particular reasoning about event- and
data-flow
- better separation of concerns and testability for:
-- HTML templates
-- Component interactivity
-- Data manipulation
-- connection to backend-API
- If we use a well documented framework, learning to contribute is much
easier compared to software for which there is only auto-generated
code-level-docs
Here are some answers to obvious questions:
1) Does using a MVVM mean we need to write mixed JS/CSS/HTML in a new
syntax? (aka JSX)? -> No, it is possible, but for most frameworks (Vue,
too) normal HTML templates are used
2) Does that mean that people coming from Object oriented languages will
need to learn a whole new paradigm – reactive, pure-functional
programming?
-> While there are some elements of functional
programming used in
react-like-frameworks, I would (subjectively) say that few additional,
totally new knowledge is needed and most can be covered by "take
parameters, work with them, return values; don't manipulate non-local
values"
3) How does DOM access work? Does this mean no jQuery?
-> DOM can be still be directly accessed. Libraries like jQuery can still
be reused (even if they might not be necessary in many points any more).
However, to change data or dom persistently, you need to tell the library
(which is not unusual, afaic)
There are also some other concerns:
- Should we introduce a new dependency like a framework as Vue?
- What would be the process of introducing such a dependency (if we agree
on one)?
- Can we agree on this (or another?) paradigm for managing complex UIs,
so
that it is not a Wikidata-only solution, but
could be used by other
Wikimedia projects in the future, too?
- How will this work with OOUIjs? OOUI seems to be mainly responsible for
creating DOM elements and this actions are usually owned by the MVVM
framework. One can use hooks to use libraries like OOUI and such, but it
feels like having the same functionality twice. A possible solution would
be using OOUI styles and markup but leaving DOM creation to the
framework.
Do you think using Vue (or a similar framework) is an option for us? What
are requirements and concerns which would be important?
Kind Regards,
Jan
--
Jan Dittrich
UX Design/ User Research
Wikimedia Deutschland e.V. | Tempelhofer Ufer 23-24 | 10963 Berlin
Phone: +49 (0)30 219 158 26-0
http://wikimedia.de
Imagine a world, in which every single human being can freely share in
the
sum of all knowledge. That‘s our commitment.
Wikimedia Deutschland - Gesellschaft zur Förderung Freien Wissens e. V.
Eingetragen im Vereinsregister des Amtsgerichts Berlin-Charlottenburg
unter
der Nummer 23855 B. Als gemeinnützig anerkannt
durch das Finanzamt für
Körperschaften I Berlin, Steuernummer 27/029/42207.
_______________________________________________
Wikitech-l mailing list
Wikitech-l(a)lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
_______________________________________________
Wikitech-l mailing list
Wikitech-l(a)lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l