You are browsing a read-only backup copy of Wikitech. The live site can be found at wikitech.wikimedia.org

Tool:Interaction Timeline: Difference between revisions

From Wikitech-static
Jump to navigation Jump to search
imported>Dbarratt
(Update link to AHT)
 
imported>Dbarratt
m (→‎React: Fix grammer error)
Line 21: Line 21:
The tool is a [https://reactjs.org/ React] application that uses [https://redux.js.org/ Redux] for state management and [https://redux-observable.js.org/ Redux Observable] for side effects. It attempts to do as much as it can on the client or by using [[mw:API:Main_page|MediaWiki's API]] directly. Unfortunately, MediaWiki's API does not provide a mechanism to query two users and get a single contribution history. A small PHP application using [https://www.slimframework.com/ Slim] was created to query the [[Help:Toolforge/Database|Toolforge Replicas]].
The tool is a [https://reactjs.org/ React] application that uses [https://redux.js.org/ Redux] for state management and [https://redux-observable.js.org/ Redux Observable] for side effects. It attempts to do as much as it can on the client or by using [[mw:API:Main_page|MediaWiki's API]] directly. Unfortunately, MediaWiki's API does not provide a mechanism to query two users and get a single contribution history. A small PHP application using [https://www.slimframework.com/ Slim] was created to query the [[Help:Toolforge/Database|Toolforge Replicas]].


During deployment, the <code>client</code> application is generated as static HTML, CSS, and JavaScript. The <code>server</code> application handles the HTTP requests and returns the static HTML pages or handles the custom API requests. The tool uses the [[Help:Toolforge/Kubernetes#PHP|PHP Kubernetes]] backend in order to use a newer version of PHP then what is available on the tool itself. Likewise, the <code>client</code> application use the [[Help:Toolforge/Kubernetes#Available container types|Node Kubernetes]] backend in order to use a newer version of Node.js.
During deployment, the <code>client</code> application is generated as static HTML, CSS, and JavaScript. [[Help:Toolforge/Web/Lighttpd|Lighttpd]] handles the HTTP requests and routes the requests to either the static HTML page or the <code>server</code> application which handles the custom API requests. The tool uses the [[Help:Toolforge/Kubernetes#PHP|PHP Kubernetes]] backend in order to use a newer version of PHP then what is available on the tool itself. Likewise, the <code>client</code> application use the [[Help:Toolforge/Kubernetes#Available container types|Node Kubernetes]] backend in order to use a newer version of Node.js.
 
== Technical Debt ==
 
=== Redux & Redux Observable ===
Since the release of [https://reactjs.org/blog/2019/02/06/react-v16.8.0.html React 16.8], it has been possible to [https://reactjs.org/docs/hooks-reference.html#usereducer use a reducer] for state management without using another library. Likewise, side effects can be handled with React's [https://reactjs.org/docs/hooks-reference.html#useeffect useEffect] hook. It seems wise to remove Redux and Redux Observable and replace them with the native React alternatives (See [[phab:T226995|T226995]]). This would also mean moving away from [https://reactjs.org/docs/components-and-props.html#function-and-class-components class-based] React components to [https://reactjs.org/docs/components-and-props.html#function-and-class-components functional] components since only functional components support [https://reactjs.org/docs/hooks-intro.html Hooks].
 
=== React ===
Since Wikimedia has chosen [https://vuejs.org/ Vue] as its preferred JavaScript framework, it might be wise to migrate the application to Vue. This might provide a learning opportunity for anyone who is familiar with React, but not with Vue.
 
=== PHP ===
It is somewhat clumsy that the tool is split into a "server" and a "client" application. It may be better to unify the server and client into a single JavaScript application. To that end, it would be worth considering using a "full stack" framework like [https://nextjs.org/ Next] (React) or [https://nuxtjs.org/ Nuxt] (Vue) that can support both the front-end as well as the server-side code in a single application.

Revision as of 18:11, 21 October 2020

Toolforge tools
Crystal Clear app package utilities.png Interaction Timeline
Interaction Timeline Logo.svg
Website https://interaction-timeline.toolforge.org/
Description Chronological history for two users on pages where they have both made edits.

Help

Maintainer(s) Anti-Harassment Tools (View all)
Source code https://github.com/wikimedia/InteractionTimeline
License GNU General Public License 3.0
Issues Open tasks · Report a bug

The Interaction Timeline shows a chronological history for two users on pages where they have both made edits. The original development plan can be found on meta.

Technical Details

The tool is a React application that uses Redux for state management and Redux Observable for side effects. It attempts to do as much as it can on the client or by using MediaWiki's API directly. Unfortunately, MediaWiki's API does not provide a mechanism to query two users and get a single contribution history. A small PHP application using Slim was created to query the Toolforge Replicas.

During deployment, the client application is generated as static HTML, CSS, and JavaScript. Lighttpd handles the HTTP requests and routes the requests to either the static HTML page or the server application which handles the custom API requests. The tool uses the PHP Kubernetes backend in order to use a newer version of PHP then what is available on the tool itself. Likewise, the client application use the Node Kubernetes backend in order to use a newer version of Node.js.

Technical Debt

Redux & Redux Observable

Since the release of React 16.8, it has been possible to use a reducer for state management without using another library. Likewise, side effects can be handled with React's useEffect hook. It seems wise to remove Redux and Redux Observable and replace them with the native React alternatives (See T226995). This would also mean moving away from class-based React components to functional components since only functional components support Hooks.

React

Since Wikimedia has chosen Vue as its preferred JavaScript framework, it might be wise to migrate the application to Vue. This might provide a learning opportunity for anyone who is familiar with React, but not with Vue.

PHP

It is somewhat clumsy that the tool is split into a "server" and a "client" application. It may be better to unify the server and client into a single JavaScript application. To that end, it would be worth considering using a "full stack" framework like Next (React) or Nuxt (Vue) that can support both the front-end as well as the server-side code in a single application.