React-based UI?

[siefkenj]

I don't know if this is the right place to ask, but what would the community think of a React-based UI?

React would allow for the easier creation of a sophisticated UI (with caching and built-in search, for example). It might also make it easier to hack on an individual component, since React leads to modular design. A project like https://github.com/aknuds1/html-to-react would allow the existing html code to be retro-fitted to React code.

I may take some time to see if I can get a prototype working, but I wanted to know if there would be interest first!

[davidfarmer]

I am unsure what you are asking. Is this to replace all the existing JavaScript, or to add new functionality (so it would exist alongside what we currently have)?

…

On Tue, 18 Jan 2022, Jason Siefken wrote: I don't know if this is the right place to ask, but what would the community think of a React-based UI? React would allow for the easier creation of a sophisticated UI (with caching and built-in search, for example). It might also make it easier to hack on an individual component, since React leads to modular design. A project like https://github.com/aknuds1/html-to-react would allow the existing html code to be retro-fitted to React code. I may take some time to see if I can get a prototype working, but I wanted to know if there would be interest first! — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you are subscribed to thisthread.[AABTULDRDT5J3ZEWWUN3RKTUWX3V3A5CNFSM5MIO7Q6KYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C 7NFSM4QQCXFEQ.gif] Message ID: ***@***.***>

[siefkenj]

It would replace most of the existing Javascript

[davidfarmer]

Some existing 3rd party JavaScript cannot be replaced: MathJax, Sage Cells, GeoGebra, etc . Since replacing the existing PreTeXt JavaScript would take work, we would need a better understanding of the (long-term?) benefits. The issue would be different if we were starting from scratch.

…

On Tue, 18 Jan 2022, Jason Siefken wrote: It would replace most of the existing Javascript — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because youcommented.[AABTULDA7Q4BGKLULDXFMDDUWY7IXA5CNFSM5MIO7Q6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXH JKTDN5WW2ZLOORPWSZGOHSICHGI.gif] Message ID: ***@***.***>

[siefkenj]

Some existing 3rd party JavaScript cannot be replaced: MathJax, Sage Cells, GeoGebra, etc . Since replacing the existing PreTeXt JavaScript would take work, we would need a better understanding of the (long-term?) benefits. The issue would be different if we were starting from scratch.

Of course. I was talking about the Javascript in this repository, which if I understand correctly controls the book navigation UI and the animation features (e.g., clicking to expand a solution, etc.).

The main features I would want are

• asynchronous loading of pages, so clicking to the next section would happen instantly without a page reload
• integrated and improved search e.g., you type and instantly a list of sections matching your keywords are returned with the matched words highlighted. This would be in a popup menu and would not reroute the UI until a link is clicked. (For example, see the search in the upper right of https://www.typescriptlang.org/docs/handbook/2/mapped-types.html )

These features could be developed with jQuery, but I think it would be a pain, whereas the React ecosystem has prebuilt tools for this.

[siefkenj]

In terms of long-term benefits, here are a few:

1. Code like

   JS_core/login.js

   Line 76 in 3d2df44

   the_form += '<form name="loginform" class="modal-content animate" onSubmit="return validateLogin();" action="">';

   becomes way more maintainable. The validity of the HTML is verified during the compile phase.
2. Testing becomes easier: the Jest testing framework is built to work with React applications and can simulate button clicks, etc.
3. Typescript support. Typescript is a typed superset of Javascript that compiles to Javascript. I have found that using Typescript in my projects has revealed many errors that I missed.
4. Bundling with module support. As I understand the current Javascript is concatenated together? With a transpiler, you can use Javascript import statements which are compiled away when the code is bundled into a single file. This makes development much more modular. Also, the compiler ensures that all code is syntactically correct. (I see the leading semi-colons at the start of files as a form of defensive programming. They would be uneeded...)

Would you be able to give me a quick rundown of what the different files in this repository are for? There's no readme... Also, perhaps you could point out what the most finicky parts are (i.e., the parts of the UI that were hardest to get right)?

I also notice a huge Javascript object defiened here:

JS_core/edit.js

Line 30 in 3d2df44

objectStructure = {

What is its purpose?

[davidfarmer]

It certainly is the case that the PreTeXt JavaScript is primitive, largely due to not having
a lot of contributors (most contributors are textbook authors, who have other priorities).
I don't think I even know enough to evaluate what you are suggesting. If talking during
one of the Friday drop-in sessions was an option, that would be good.

The large edit.js file is my attempt at creating a way to edit PreTeXt in the browser.
Still pre-beta.

[siefkenj]

If talking during one of the Friday drop-in sessions was an option, that would be good.

I didn't know about these. Can you link me to information? Is one happening today?

[davidfarmer]

Emailing you now. A half-hour left today.

…

On Fri, 21 Jan 2022, Jason Siefken wrote: If talking during one of the Friday drop-in sessions was an option, that would be good. I didn't know about these. Can you link me to information? Is one happening today? — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because youcommented.[AABTULCJPQORQW4LAHD5BFLUXHLOBA5CNFSM5MIO7Q6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOHS5T7GA .gif] Message ID: ***@***.***>

[siefkenj]

Okay. I have a little demo mocked together.
Still lots of issues to solve, and I don't know what the overall structure of the project should be, but modifications should be easy!

https://siefkenj.github.io/pretext-react/index.html
with source code at: https://github.com/siefkenj/pretext-react