Frontend Guide

[Myles-Trevino]

I've redone the section on the frontend to be up to date with Lexos 4. Let me know if there are parts you would like elaboration on or sections you would like added.

https://github.com/WheatonCS/Lexos/wiki/The-Lexos-4-Frontend

[scottkleinman]

This is good. Here are some things that might be added.

• For new developers, some instructions for getting started with ESLint (possibly setting it up in VS Code, which is becoming the go to editor).
• Code samples of some common CSS layout patterns (e.g. .vertical-splitter). I looked into doing this with JSDoc-style document generators, but I couldn't find any tools I felt confident in using.
• Explanations of common Javascript pipeline patterns. Currently, how elements are injected into the UI and then manipulated, requires following a breadcrumb trail of functions, often through multiple files. In theory, it's well structured, but my experience is that it is extremely hard for a developer not familiar with the pattern to replicate when trying to create a new feature. What I have in mind is a basic pipeline like (1) inject element (on page load or in response to an event), (2) style the element, (3) get content by ajax, (4) style the content, (5) show the element. This would help the developer know what helper functions are already available.
• Another aid would be guidance for generating a JSDoc website. I found that helpful. It would probably only be good for private use whilst the code base is in a state of flux, but would could generate a final version with each release. If people find this helpful, annotating function comments with @see would be a nice enhancement.

I'll let you know if I think of anything else.

[mleblanc321]

@see is an interesting suggestion, as is JSDoc ... but documenting workflow/pipeline of developer actions is really important ... i hope @Myles-Trevino could use a couple of examples if steps (1) - (5)?

[mleblanc321]

@myles - excellent doc(s); tu; especially like your writing style, e.g.:
"Familiarize yourself with the basics of jQuery Core before working on Lexos JS."

[Myles-Trevino]

I've added a page for setting up VS Code here. @mleblanc321 You may find this helpful since you've just switched.

As for documenting dynamic elements I'm not sure there is a good way to do that since it will always heavily depend on the dynamic element being added. Some are as simple as one line, some are necessarily more complicated, and a single order of operations won't work for all of them. I'll try to add something on the different types of operations that are commonly done on dynamic elements in Lexos though.

[scottkleinman]

This is awesome! You've really covered a lot here — and very clearly.

Understood about documenting dynamic elements. Hopefully a few examples of the more complex operations will suffice just to give developers a sense of what to look for and what patterns to emulate for consistency.