search

PreTeXtBook / JS_core

Javascript for standard PreTeXt
0 stars 8 forks source link

React-based UI? #45

Open siefkenj opened 2 years ago

siefkenj commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

It would replace most of the existing Javascript

davidfarmer commented 2 years ago

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 commented 2 years ago

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

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 commented 2 years ago

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

  1. Code like https://github.com/PreTeXtBook/JS_core/blob/3d2df44c9813ac6f47cbefb363fc88cee1f0d61c/login.js#L76 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: https://github.com/PreTeXtBook/JS_core/blob/3d2df44c9813ac6f47cbefb363fc88cee1f0d61c/edit.js#L30 What is its purpose?

davidfarmer commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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