Chapter 2. How it works

Unlike rich text editors like TinyMCE Opens in new window or CKEditor Opens in new window, XMLmind XML Editor Web Edition (XXEW for short) is not a standalone program entirely written in JavaScript. XXEW consists in two programs: <xxe-client>, a 100% JavaScript frontend running in the web browser and xxeserver, a Java™ application backend running on a server computer.
Figure 2-1. XXEW architecture
how_it_works.svg
<xxe-client> cannot function without being connected to an xxeserver through the WebSocket Opens in new window ("ws://" URL) protocol or preferably, the WebSocket Secure ("wss://" URL) protocol.
<xxe-client> is lightweight and thus loads quickly in the web browser. It does just two things: display as HTML+CSS a view of the XML document being edited and interact with the user.
xxeserver does everything else: load, validate, modify, save, close the XML document, execute commands received from <xxe-client> in order to modify the XML document, compute which HTML+CSS representing the view of the XML nodes is to be sent to <xxe-client>, etc. xxeserver is in fact a server variant of the proven XMLmind XML Editor Desktop Application Opens in new window. Of course, as a full-fledged server program, xxeserver can run on headless server computers and can handle multiple, concurrent <xxe-client>s.

Benefits of this architecture

  • <xxe-client> is lightweight(1) and thus loads quickly in the web browser.
  • Being just a server variant of the XMLmind XML Editor desktop application, xxeserver shares with the desktop application almost all its code, commands, configurations(2), add-ons and user preferences. This also means that fixing a bug or enhancing the desktop application will almost certainly fix the same bug or improve xxeserver in the same way.
  • Because the state of <xxe-client> —including the XML document being edited— is maintained by xxeserver (see "<xxe-client> peer" in the figure above), this state can be fully automatically recovered when needed too(3). For example, if the user of <xxe-client>clicks the "Go back" button of the browser and then clicks "Go forward", then she/he will automatically find <xxe-client> as she/he left it. Same reassuring behavior if the user clicks the "Reload current page" button of the browser or if she/he closes and then reopens the browser tab/window containing <xxe-client>.
 (1) <xxe-client> is a custom HTML element Opens in new window. Its implementation comprises about 7 000 lines of CSS and 17 000 lines of JavaScript (non obfuscated, non minified) at the time of this writing.
 (2) More information in "How to adapt an existing ".xxe" configuration file to XXEW".
 (3) This feature is so useful and so reassuring to the user that it is turned on by default. See boolean attribute @autorecover of custom HTML element Opens in new window <xxe-client>.