Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React-based UI? #45

Open
siefkenj opened this issue Jan 18, 2022 · 9 comments
Open

React-based UI? #45

siefkenj opened this issue Jan 18, 2022 · 9 comments

Comments

@siefkenj
Copy link

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
Copy link
Contributor

davidfarmer commented Jan 19, 2022 via email

@siefkenj
Copy link
Author

It would replace most of the existing Javascript

@davidfarmer
Copy link
Contributor

davidfarmer commented Jan 19, 2022 via email

@siefkenj
Copy link
Author

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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

davidfarmer commented Jan 21, 2022 via email

@siefkenj
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@davidfarmer @siefkenj