1525719 - Create a new "beta" endpoint for wiki pages, and begin converting it to React

Status: RESOLVED WONTFIX

(developer.mozilla.org Graveyard :: Performance, enhancement, P1)

Description

[David Flanagan [:djf]]

We'd like to move towards a React-based frontend for MDN, but we need to figure out how to get there.

I'm filing this bug to track some experimental work we'll do to figure out whether we can incrementally convert Kuma to use React or if we need to start from scratch.

This experimental work will probably look like this:

• Create a new Kuma endpoint en-US/beta/ that does exactly the same thing as en-US/docs/ (but that only works on the staging server and is never visible to end users).

• Modify that new endpoint so that it uses React in some small way (like displaying the MDN logo). As part of this we'll also set up the webpack/babel toolchain, and get flow and jest snapshot tests working. Then we'll measure the performance of this new part-React, part-jQuery page and compare it to the existing /docs endpoint to get baseline data on the performance impact of adding React. (We'll have to decide whether to use React libraries from a CDN or not)

• Do more substantial work with React, perhaps replacing the navigation header at the top of the page, and removing the jQueryUI library that it depends on. And see what the performance impact of that is.

• Attempt to set up client-side navigation (possibly using react-router) to see how fast we can load new documents when we don't have to do a complete page load.

• Investigate server-side rendering of our React content to see what the performance impact of that is and to figure out how to do that for both the logged-out and the logged-in case.

There will be individual user stories for these steps in the Kuma.Next epic on github: https://github.com/mdn/sprints/issues/766 This bug exists for tracking purposes so we can reference it when we've got pull requests to the Kuma repo.

Comment 1

[David Flanagan [:djf]]

First step: https://github.com/mozilla/kuma/pull/5241

Comment 2

[David Flanagan [:djf]]

The second step of this process was a PR that displayed the MDN logo with react. It didn't seem to have any significant performance impact on the site when measured on the staging server with speed curve.

The third step is a larger PR that redoes the entire navigation header: https://github.com/mozilla/kuma/pull/5277

That was just merged today, and will presumably be deployed next week, and we can continue to look at the speedcurve tests to see if there are perf implications.

A possible 4th step is https://github.com/mozilla/kuma/pull/5280 which implements a simple (and imperfect, experimental) client-side navigation on the test /ducks/ URLs. It will be interesting to try this out on staging and see how much faster pages loads are when we're just loading the new HTML and not all the JS and CSS.

Comment 3

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5361

Comment 4

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5362

Comment 5

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5370

Comment 6

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5386

Comment 7

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5387

Comment 8

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5395

Comment 9

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5401

Comment 10

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5402

Comment 11

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5414

Comment 12

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5420

Comment 13

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5426

Comment 14

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5427

Comment 15

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5428

Comment 16

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5429

Comment 17

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5431

Comment 18

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5440

Comment 19

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5483

Comment 20

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5501

Comment 21

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5502

Comment 22

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5510

Comment 23

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5511

Comment 24

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5516

Comment 25

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5552

Comment 26

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub master push: https://github.com/mozilla/kuma/commit/d85d09f9c2a15353ef527464021e061b7712ec3f

Commit merged into master by Schalk Neethling (schalkneethling)
Authored by Ryan Johnson (escattone)

Comment 27

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5626

Comment 28

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub master push: https://github.com/mozilla/kuma/commit/ed4de3c1f03bd9cc96f04c1bfcab2f823e495136

Commit merged into master by GitHub
Authored by Ryan Johnson (escattone)

Comment 29

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5627

Comment 30

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub master push: https://github.com/mozilla/kuma/commit/53f74497a4e8cb44422779c74f30ec3669f3ea26

Commit merged into master by GitHub
Authored by Ryan Johnson (escattone)

Comment 31

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub master push: https://github.com/mozilla/kuma/commit/a5631c5a33f8f4ccc1bacfa0f3050d5ff9d7f34e

Commit merged into master by GitHub
Authored by Ryan Johnson (escattone)

Comment 32

[BMO Automation]

MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.