I’m starting to learn React in the context of enhancing a React-based site created by others (lightstep.com/incident-reponse/docs).
I’m also developing a non-trivial web application in BaseX (the Project Mirabel system I’ve mentioned before).
For Mirabel I just hacked some pages using RESTXQ and the least CSS and JavaScript I could get away with, cribbing liberally from the out-of-the-box BaseX web apps.
But as I learn about React and its companion, Material UI, I’m thinking that there’s probably a lot of power to combining React with RESTXQ as a way to build a top-notch site with lots of interactivity at relatively low cost (React and MUI provide all the interaction implementation details you might want). But I’m not sure what this would mean in practice.
I’m wondering if anyone else has done this or at least thought about it enough to have some ideas about what to do or not do?
In addition, at the most recent DITA conference, Convex 2022, George Bina presented a very interesting experiment in generating React components for DITA topics where the components did the dynamic content resolution at delivery time rather than at HTML building time, enabling practical incremental update of DITA-based content through a React-based site. The same technique could be applied to RESTXQ by generating XQuery modules for individual topics. But an advantage of a React approach is that it’s more general and could be used with any React-based site. But in any case it’s gotten me thinking more about the generation of information
I see React being used mostly in statically-generated sites that are published through something like Netlify but my Mirabel application is very much almost entirely dynamic in that most of the content is the result of queries.
One could treat BaseX as a supplier of microservices via a REST API and that’s probably how most users of BaseX with React do it, if for no other reason than separate groups are probably responsible for the web stuff and the BaseX stuff.
But in the case of my Mirabel application it’s a single team doing everything with limited web development knowledge but access to talented web designers. So having all the web stuff also in BaseX makes development and maintenance easier with the team we have. We’re not JavaScript programmers but we can manage composing React components together and doing the minimal programming needed to make them behave appropriately.
Clearly I can just have RESTXQ-generated pages import the React libraries and supporting components directly and I can generate JSX code as inline scripting and maybe that’s the best approach for an all-RESTXQ site but maybe there’s something better?
Or does stepping up to a proper React site that uses BaseX as a source of microservices make more sense, even for this small project?
Thanks,
Eliot _____________________________________________ Eliot Kimber Sr Staff Content Engineer O: 512 554 9368 M: 512 554 9368 servicenow.comhttps://www.servicenow.com LinkedInhttps://www.linkedin.com/company/servicenow | Twitterhttps://twitter.com/servicenow | YouTubehttps://www.youtube.com/user/servicenowinc | Facebookhttps://www.facebook.com/servicenow
Hi Eliot,
just my 2 cents here....
I am not a fan of bulky JS frameworks and most of the things they allow to do is perfectly doable with vanilla JS anyway. So I'm not a very expert of React.
That being said I think that usage of frameworks or not in the browser is orthogonal to the use of BaseX for all the server side stuff. BaseX is ok and you can decide at which architectural layer you want to employ it.
We at Nubisware have walked literally all the roads that take you from frontend to backend (and back). All of them involve BaseX + RestXQ to a large extent.
Some solutions use a slim layer between our REST APIs (done with RestXQ) and the Browser. This layer is server side and (not even worth to mention) done in RestXQ too. It is in charge of handling security, generate HTML and serve static CSS, JS and images.
Nowadays we are experimenting again with slightly thicker artifacts in the browser since we are in a flirt with vanilla web-components [1] which introduce a lot of advantages of component based development without being tied up hardly to a vendor biased framework. This scenario looks closer to what you are going for ... In this case the security is managed in specific web components and the JS code makes authorized (be aware that security is a bit trickier here since browsers are untrusted endpoints) calls directly to the REST APIs. In this pattern, since all the frontend code is static, we can use for instance BaseX to serve the content in dev environment while resolving to Nginx for serving it in production.
To make a long story short, go for the way you like and according to your team's preferences but keep using Basex+RestXQ for the backend because it's great! :-D
Marco.
[1] https://www.webcomponents.org/
On 20/05/22 00:17, Eliot Kimber wrote:
I’m starting to learn React in the context of enhancing a React-based site created by others (lightstep.com/incident-reponse/docs).
I’m also developing a non-trivial web application in BaseX (the Project Mirabel system I’ve mentioned before).
For Mirabel I just hacked some pages using RESTXQ and the least CSS and JavaScript I could get away with, cribbing liberally from the out-of-the-box BaseX web apps.
But as I learn about React and its companion, Material UI, I’m thinking that there’s probably a lot of power to combining React with RESTXQ as a way to build a top-notch site with lots of interactivity at relatively low cost (React and MUI provide all the interaction implementation details you might want). But I’m not sure what this would mean in practice.
I’m wondering if anyone else has done this or at least thought about it enough to have some ideas about what to do or not do?
In addition, at the most recent DITA conference, Convex 2022, George Bina presented a very interesting experiment in generating React components for DITA topics where the components did the dynamic content resolution at delivery time rather than at HTML building time, enabling practical incremental update of DITA-based content through a React-based site. The same technique could be applied to RESTXQ by generating XQuery modules for individual topics. But an advantage of a React approach is that it’s more general and could be used with any React-based site. But in any case it’s gotten me thinking more about the generation of information
I see React being used mostly in statically-generated sites that are published through something like Netlify but my Mirabel application is very much almost entirely dynamic in that most of the content is the result of queries.
One could treat BaseX as a supplier of microservices via a REST API and that’s probably how most users of BaseX with React do it, if for no other reason than separate groups are probably responsible for the web stuff and the BaseX stuff.
But in the case of my Mirabel application it’s a single team doing everything with limited web development knowledge but access to talented web designers. So having all the web stuff also in BaseX makes development and maintenance easier with the team we have. We’re not JavaScript programmers but we can manage composing React components together and doing the minimal programming needed to make them behave appropriately.
Clearly I can just have RESTXQ-generated pages import the React libraries and supporting components directly and I can generate JSX code as inline scripting and maybe that’s the best approach for an all-RESTXQ site but maybe there’s something better?
Or does stepping up to a proper React site that uses BaseX as a source of microservices make more sense, even for this small project?
Thanks,
Eliot
*Eliot Kimber*
Sr Staff Content Engineer
O: 512 554 9368
M: 512 554 9368
servicenow.com https://www.servicenow.com
LinkedIn https://www.linkedin.com/company/servicenow | Twitter https://twitter.com/servicenow | YouTube https://www.youtube.com/user/servicenowinc | Facebook https://www.facebook.com/servicenow
Dear Eliot,
I cannot speak for React directly, yet we have had excellent results when using vuejs or Vanilla JS + RestXQ. For all projects involving any sort of HTML frontend, our approach is twofold:
We provide RestXQ Endpoints, usually authentication is handled via the session module, or in more advanced cases using JWT-Auth-Tokens or a combination of both. For simple scenarios we then have our BaseX-Jetty-Server serve the static files, i.e. our HTML + JS Code directly from the filesystem, if it gets more complex we can outsource the web app to nginx for example.
I then map the default servlet to “/” — so files from ./webapp will be served at http://localhost:8984/ I then map the RESTXQ-servlet to “/api” — so calls to these endpoints will be served by RestXQ.
I set up a simple project here outlining this structure https://git.basex.io/ms/ml-example-webapp — everything is served from BaseX and the project is pretty self-contained.
I would not, however, serve the HTML and JS Contents via RestXQ endpoints — while technically possible you might probably use a lot of tooling support that works on plain HTML & JS(X) files and people not familiar with embedding HTML in XQuery Module or functions will likely lose their minds over the inexistence of named entities or escaping of curly braces 😊 Plus: should you ever decide to ditch RestXQ and use another API (not recommended) you could do that more easily.
Hope this is useful to you.
Best Michael
Von: BaseX-Talk basex-talk-bounces@mailman.uni-konstanz.de im Auftrag von Eliot Kimber eliot.kimber@servicenow.com Datum: Freitag, 20. Mai 2022 um 00:18 An: basex-talk@mailman.uni-konstanz.de basex-talk@mailman.uni-konstanz.de Betreff: [basex-talk] BaseX, RESTXQ, and React? I’m starting to learn React in the context of enhancing a React-based site created by others (lightstep.com/incident-reponse/docs).
I’m also developing a non-trivial web application in BaseX (the Project Mirabel system I’ve mentioned before).
For Mirabel I just hacked some pages using RESTXQ and the least CSS and JavaScript I could get away with, cribbing liberally from the out-of-the-box BaseX web apps.
But as I learn about React and its companion, Material UI, I’m thinking that there’s probably a lot of power to combining React with RESTXQ as a way to build a top-notch site with lots of interactivity at relatively low cost (React and MUI provide all the interaction implementation details you might want). But I’m not sure what this would mean in practice.
I’m wondering if anyone else has done this or at least thought about it enough to have some ideas about what to do or not do?
In addition, at the most recent DITA conference, Convex 2022, George Bina presented a very interesting experiment in generating React components for DITA topics where the components did the dynamic content resolution at delivery time rather than at HTML building time, enabling practical incremental update of DITA-based content through a React-based site. The same technique could be applied to RESTXQ by generating XQuery modules for individual topics. But an advantage of a React approach is that it’s more general and could be used with any React-based site. But in any case it’s gotten me thinking more about the generation of information
I see React being used mostly in statically-generated sites that are published through something like Netlify but my Mirabel application is very much almost entirely dynamic in that most of the content is the result of queries.
One could treat BaseX as a supplier of microservices via a REST API and that’s probably how most users of BaseX with React do it, if for no other reason than separate groups are probably responsible for the web stuff and the BaseX stuff.
But in the case of my Mirabel application it’s a single team doing everything with limited web development knowledge but access to talented web designers. So having all the web stuff also in BaseX makes development and maintenance easier with the team we have. We’re not JavaScript programmers but we can manage composing React components together and doing the minimal programming needed to make them behave appropriately.
Clearly I can just have RESTXQ-generated pages import the React libraries and supporting components directly and I can generate JSX code as inline scripting and maybe that’s the best approach for an all-RESTXQ site but maybe there’s something better?
Or does stepping up to a proper React site that uses BaseX as a source of microservices make more sense, even for this small project?
Thanks,
Eliot _____________________________________________ Eliot Kimber Sr Staff Content Engineer O: 512 554 9368 M: 512 554 9368 servicenow.comhttps://www.servicenow.com LinkedInhttps://www.linkedin.com/company/servicenow | Twitterhttps://twitter.com/servicenow | YouTubehttps://www.youtube.com/user/servicenowinc | Facebookhttps://www.facebook.com/servicenow
Michael and Marco,
Thanks for the feedback—that’s very helpful. I will check out the sample project and see how it relates to what I was doing.
I suspect that keeping the page construction concern separate from the data query and serving concern probably makes the most sense as a general architecture approach but I still need to think it through in the context of my team.
Cheers,
Eliot
_____________________________________________ Eliot Kimber Sr Staff Content Engineer O: 512 554 9368 M: 512 554 9368 servicenow.comhttps://www.servicenow.com LinkedInhttps://www.linkedin.com/company/servicenow | Twitterhttps://twitter.com/servicenow | YouTubehttps://www.youtube.com/user/servicenowinc | Facebookhttps://www.facebook.com/servicenow
From: Michael Seiferle ms@basex.org Date: Friday, May 20, 2022 at 5:51 AM To: Eliot Kimber eliot.kimber@servicenow.com, basex-talk@mailman.uni-konstanz.de basex-talk@mailman.uni-konstanz.de Subject: AW: BaseX, RESTXQ, and React? [External Email]
Dear Eliot,
I cannot speak for React directly, yet we have had excellent results when using vuejs or Vanilla JS + RestXQ. For all projects involving any sort of HTML frontend, our approach is twofold:
We provide RestXQ Endpoints, usually authentication is handled via the session module, or in more advanced cases using JWT-Auth-Tokens or a combination of both. For simple scenarios we then have our BaseX-Jetty-Server serve the static files, i.e. our HTML + JS Code directly from the filesystem, if it gets more complex we can outsource the web app to nginx for example.
I then map the default servlet to “/” — so files from ./webapp will be served at http://localhost:8984/https://urldefense.com/v3/__http:/localhost:8984/__;!!N4vogdjhuJM!ANUWxl7-sRF4upuGKwe2eP3myc52VLJ1pYeBYLmFTtMWkvfzPzHUC--wWJteNYX706YfXLUfo-TVz60$ I then map the RESTXQ-servlet to “/api” — so calls to these endpoints will be served by RestXQ.
I set up a simple project here outlining this structure https://git.basex.io/ms/ml-example-webapphttps://urldefense.com/v3/__https:/git.basex.io/ms/ml-example-webapp__;!!N4vogdjhuJM!ANUWxl7-sRF4upuGKwe2eP3myc52VLJ1pYeBYLmFTtMWkvfzPzHUC--wWJteNYX706YfXLUfTrxIVjU$ — everything is served from BaseX and the project is pretty self-contained.
I would not, however, serve the HTML and JS Contents via RestXQ endpoints — while technically possible you might probably use a lot of tooling support that works on plain HTML & JS(X) files and people not familiar with embedding HTML in XQuery Module or functions will likely lose their minds over the inexistence of named entities or escaping of curly braces 😊 Plus: should you ever decide to ditch RestXQ and use another API (not recommended) you could do that more easily.
Hope this is useful to you.
Best Michael
Von: BaseX-Talk basex-talk-bounces@mailman.uni-konstanz.de im Auftrag von Eliot Kimber eliot.kimber@servicenow.com Datum: Freitag, 20. Mai 2022 um 00:18 An: basex-talk@mailman.uni-konstanz.de basex-talk@mailman.uni-konstanz.de Betreff: [basex-talk] BaseX, RESTXQ, and React? I’m starting to learn React in the context of enhancing a React-based site created by others (lightstep.com/incident-reponse/docs).
I’m also developing a non-trivial web application in BaseX (the Project Mirabel system I’ve mentioned before).
For Mirabel I just hacked some pages using RESTXQ and the least CSS and JavaScript I could get away with, cribbing liberally from the out-of-the-box BaseX web apps.
But as I learn about React and its companion, Material UI, I’m thinking that there’s probably a lot of power to combining React with RESTXQ as a way to build a top-notch site with lots of interactivity at relatively low cost (React and MUI provide all the interaction implementation details you might want). But I’m not sure what this would mean in practice.
I’m wondering if anyone else has done this or at least thought about it enough to have some ideas about what to do or not do?
In addition, at the most recent DITA conference, Convex 2022, George Bina presented a very interesting experiment in generating React components for DITA topics where the components did the dynamic content resolution at delivery time rather than at HTML building time, enabling practical incremental update of DITA-based content through a React-based site. The same technique could be applied to RESTXQ by generating XQuery modules for individual topics. But an advantage of a React approach is that it’s more general and could be used with any React-based site. But in any case it’s gotten me thinking more about the generation of information
I see React being used mostly in statically-generated sites that are published through something like Netlify but my Mirabel application is very much almost entirely dynamic in that most of the content is the result of queries.
One could treat BaseX as a supplier of microservices via a REST API and that’s probably how most users of BaseX with React do it, if for no other reason than separate groups are probably responsible for the web stuff and the BaseX stuff.
But in the case of my Mirabel application it’s a single team doing everything with limited web development knowledge but access to talented web designers. So having all the web stuff also in BaseX makes development and maintenance easier with the team we have. We’re not JavaScript programmers but we can manage composing React components together and doing the minimal programming needed to make them behave appropriately.
Clearly I can just have RESTXQ-generated pages import the React libraries and supporting components directly and I can generate JSX code as inline scripting and maybe that’s the best approach for an all-RESTXQ site but maybe there’s something better?
Or does stepping up to a proper React site that uses BaseX as a source of microservices make more sense, even for this small project?
Thanks,
Eliot _____________________________________________ Eliot Kimber Sr Staff Content Engineer O: 512 554 9368 M: 512 554 9368 servicenow.comhttps://www.servicenow.com LinkedInhttps://urldefense.com/v3/__https:/www.linkedin.com/company/servicenow__;!!N4vogdjhuJM!ANUWxl7-sRF4upuGKwe2eP3myc52VLJ1pYeBYLmFTtMWkvfzPzHUC--wWJteNYX706YfXLUfmseV06I$ | Twitterhttps://urldefense.com/v3/__https:/twitter.com/servicenow__;!!N4vogdjhuJM!ANUWxl7-sRF4upuGKwe2eP3myc52VLJ1pYeBYLmFTtMWkvfzPzHUC--wWJteNYX706YfXLUfKBZNLkk$ | YouTubehttps://urldefense.com/v3/__https:/www.youtube.com/user/servicenowinc__;!!N4vogdjhuJM!ANUWxl7-sRF4upuGKwe2eP3myc52VLJ1pYeBYLmFTtMWkvfzPzHUC--wWJteNYX706YfXLUfd4AtrnI$ | Facebookhttps://urldefense.com/v3/__https:/www.facebook.com/servicenow__;!!N4vogdjhuJM!ANUWxl7-sRF4upuGKwe2eP3myc52VLJ1pYeBYLmFTtMWkvfzPzHUC--wWJteNYX706YfXLUfvCtlO2E$
Hello Eliot,
Here is a sample multi container project with eXist-db as the back end. You can replace eXist-db with BaseX.
https://github.com/lcahlander/multi-container-nginx-react-existdb https://github.com/lcahlander/multi-container-nginx-react-existdb
Cheers,
Loren
On May 20, 2022, at 10:40 AM, Eliot Kimber eliot.kimber@servicenow.com wrote:
Michael and Marco,
Thanks for the feedback—that’s very helpful. I will check out the sample project and see how it relates to what I was doing.
I suspect that keeping the page construction concern separate from the data query and serving concern probably makes the most sense as a general architecture approach but I still need to think it through in the context of my team.
Cheers,
Eliot
Eliot Kimber Sr Staff Content Engineer O: 512 554 9368 M: 512 554 9368 servicenow.com https://www.servicenow.com/ LinkedIn https://www.linkedin.com/company/servicenow | Twitter https://twitter.com/servicenow | YouTube https://www.youtube.com/user/servicenowinc | Facebook https://www.facebook.com/servicenow
From: Michael Seiferle <ms@basex.org mailto:ms@basex.org> Date: Friday, May 20, 2022 at 5:51 AM To: Eliot Kimber <eliot.kimber@servicenow.com mailto:eliot.kimber@servicenow.com>, basex-talk@mailman.uni-konstanz.de mailto:basex-talk@mailman.uni-konstanz.de <basex-talk@mailman.uni-konstanz.de mailto:basex-talk@mailman.uni-konstanz.de> Subject: AW: BaseX, RESTXQ, and React?
[External Email]
Dear Eliot,
I cannot speak for React directly, yet we have had excellent results when using vuejs or Vanilla JS + RestXQ. For all projects involving any sort of HTML frontend, our approach is twofold:
We provide RestXQ Endpoints, usually authentication is handled via the session module, or in more advanced cases using JWT-Auth-Tokens or a combination of both. For simple scenarios we then have our BaseX-Jetty-Server serve the static files, i.e. our HTML + JS Code directly from the filesystem, if it gets more complex we can outsource the web app to nginx for example.
I then map the default servlet to “/” — so files from ./webapp will be served at http://localhost:8984/ https://urldefense.com/v3/__http:/localhost:8984/__;!!N4vogdjhuJM!ANUWxl7-sRF4upuGKwe2eP3myc52VLJ1pYeBYLmFTtMWkvfzPzHUC--wWJteNYX706YfXLUfo-TVz60$ I then map the RESTXQ-servlet to “/api” — so calls to these endpoints will be served by RestXQ.
I set up a simple project here outlining this structure https://git.basex.io/ms/ml-example-webapp https://urldefense.com/v3/__https:/git.basex.io/ms/ml-example-webapp__;!!N4vogdjhuJM!ANUWxl7-sRF4upuGKwe2eP3myc52VLJ1pYeBYLmFTtMWkvfzPzHUC--wWJteNYX706YfXLUfTrxIVjU$ — everything is served from BaseX and the project is pretty self-contained.
I would not, however, serve the HTML and JS Contents via RestXQ endpoints — while technically possible you might probably use a lot of tooling support that works on plain HTML & JS(X) files and people not familiar with embedding HTML in XQuery Module or functions will likely lose their minds over the inexistence of named entities or escaping of curly braces 😊 Plus: should you ever decide to ditch RestXQ and use another API (not recommended) you could do that more easily.
Hope this is useful to you.
Best Michael
Von: BaseX-Talk basex-talk-bounces@mailman.uni-konstanz.de im Auftrag von Eliot Kimber eliot.kimber@servicenow.com Datum: Freitag, 20. Mai 2022 um 00:18 An: basex-talk@mailman.uni-konstanz.de basex-talk@mailman.uni-konstanz.de Betreff: [basex-talk] BaseX, RESTXQ, and React?
I’m starting to learn React in the context of enhancing a React-based site created by others (lightstep.com/incident-reponse/docs).
I’m also developing a non-trivial web application in BaseX (the Project Mirabel system I’ve mentioned before).
For Mirabel I just hacked some pages using RESTXQ and the least CSS and JavaScript I could get away with, cribbing liberally from the out-of-the-box BaseX web apps.
But as I learn about React and its companion, Material UI, I’m thinking that there’s probably a lot of power to combining React with RESTXQ as a way to build a top-notch site with lots of interactivity at relatively low cost (React and MUI provide all the interaction implementation details you might want). But I’m not sure what this would mean in practice.
I’m wondering if anyone else has done this or at least thought about it enough to have some ideas about what to do or not do?
In addition, at the most recent DITA conference, Convex 2022, George Bina presented a very interesting experiment in generating React components for DITA topics where the components did the dynamic content resolution at delivery time rather than at HTML building time, enabling practical incremental update of DITA-based content through a React-based site. The same technique could be applied to RESTXQ by generating XQuery modules for individual topics. But an advantage of a React approach is that it’s more general and could be used with any React-based site. But in any case it’s gotten me thinking more about the generation of information
I see React being used mostly in statically-generated sites that are published through something like Netlify but my Mirabel application is very much almost entirely dynamic in that most of the content is the result of queries.
One could treat BaseX as a supplier of microservices via a REST API and that’s probably how most users of BaseX with React do it, if for no other reason than separate groups are probably responsible for the web stuff and the BaseX stuff.
But in the case of my Mirabel application it’s a single team doing everything with limited web development knowledge but access to talented web designers. So having all the web stuff also in BaseX makes development and maintenance easier with the team we have. We’re not JavaScript programmers but we can manage composing React components together and doing the minimal programming needed to make them behave appropriately.
Clearly I can just have RESTXQ-generated pages import the React libraries and supporting components directly and I can generate JSX code as inline scripting and maybe that’s the best approach for an all-RESTXQ site but maybe there’s something better?
Or does stepping up to a proper React site that uses BaseX as a source of microservices make more sense, even for this small project?
Thanks,
Eliot _____________________________________________
Eliot Kimber Sr Staff Content Engineer O: 512 554 9368 M: 512 554 9368 servicenow.com https://www.servicenow.com/ LinkedIn https://urldefense.com/v3/__https:/www.linkedin.com/company/servicenow__;!!N4vogdjhuJM!ANUWxl7-sRF4upuGKwe2eP3myc52VLJ1pYeBYLmFTtMWkvfzPzHUC--wWJteNYX706YfXLUfmseV06I$ | Twitter https://urldefense.com/v3/__https:/twitter.com/servicenow__;!!N4vogdjhuJM!ANUWxl7-sRF4upuGKwe2eP3myc52VLJ1pYeBYLmFTtMWkvfzPzHUC--wWJteNYX706YfXLUfKBZNLkk$ | YouTube https://urldefense.com/v3/__https:/www.youtube.com/user/servicenowinc__;!!N4vogdjhuJM!ANUWxl7-sRF4upuGKwe2eP3myc52VLJ1pYeBYLmFTtMWkvfzPzHUC--wWJteNYX706YfXLUfd4AtrnI$ | Facebook https://urldefense.com/v3/__https:/www.facebook.com/servicenow__;!!N4vogdjhuJM!ANUWxl7-sRF4upuGKwe2eP3myc52VLJ1pYeBYLmFTtMWkvfzPzHUC--wWJteNYX706YfXLUfvCtlO2E$
basex-talk@mailman.uni-konstanz.de
-
Eliot Kimber -
Loren Cahlander -
Marco Lettere -
Michael Seiferle