How intertwined are py4web and its JavaScript components?

[FredUZ]

Hello py4web community,

I have started to take a closer look at py4web now, and I am trying to understand its capabilities and possibilities. A large point of interest for me is, how much freedom it gives me regarding my frontend choices.

I don't have any experience with vue.js or comparable JavaScript fameworks.

I see that it ships with vue.js, which seems to be a mandatory component in the _dashboard app. Also the current version that it gives me is 2.6.12.

How fundamental are these JavaScript components for the py4web experience?

How would I for example implement vue.js 3 or another frontend framework?

I am mainly trying to understand how py4web interacts with its javascript components, what they are necessary for, and how I would combine them with other frontend frameworks.

Also: How does my own app (based on the scafforld app) even get to the vue.js files in the _dashboard app? I don't see it imported anywhere in the template or utils.js. I can only see that utils.js uses it.

Best regards,

Frederik

[Alexander Beskopilny]

You can use py4web   with any  javascript  framework.
You don't have to use vuejs at all
some examples
https://github.com/ali96343/facep4w
https://github.com/ali96343/capp

[Jim Steil]

You don't have to use any js framework.

Cloning from _scaffold does not bring in vue.  Vue is used in dashboard and some of the examples, just as a reference.

Personally, I've avoided using any javascript front-end framework by integrating htmx into my apps.  Gives me all the front-end magic without all the cognitive load of learning a js front-end framework.

-Jim

[Alexander Beskopilny]

Here's a good read on the py4web-components
https://github.com/web2py/py4web/tree/master/apps/examples/components

The most important  element of components is the url_signer

(here is other attempt to integrate js   into  py4web
  https://github.com/ali96343/unbundler/
  )

[FredUZ]

Thank you two for the input!

I am still experimenting with some components to get a feel of what happens when I disable JavaScript. So far, auth as well as form and grid don't seem to depend heavily on the utils.js file, which comes with making a new app from the scaffold app.

flash does not work, but maybe I can write one that does not depend on JS.

I do see some vue related stuff in the utils.js file, though. Still not entirely sure what it does.

I have taken a glance at htmx, and I do like it so far. Thank you for the tip.

I am approaching this from a "progressive enhancement" perspective and try to get my sites working in a rudimentary way without any JS, but use it to enhance the user experience when it is enabled. htmx could come in quite handy there.

I have yet to try out the url_signer, but coming from the documentation it did not appear to use any JS components, so I'm hopeful that it will work without JS as well.

Do you know for what else the JS from the utils.js file is used?

Best regards,

Fref

[Massimo]

utils.js is indeed orthogonal to py4web and contains some functions that I have found useful. For example here are some examples of things you can do if you have utils.js.

var x = "this is {number} example".format({number: "one"});

Q("input[type='button']")[0].style="color: 'red' ";

var a = Q.clone({any: 'object'});

var b = Q.eval("1 + 1");

var d = Q.get_session_token(); // retrieve the py4web session token from cookies

Q.store('mykey', {any: 'object'}); // in local storage

var e = Q.retrieve("mykey"); // from local storage

Q.upload_helper // function from http://jsfiddle.net/eliseosoto/JHQnk/ to upload images in text fields in py4wb forms

T.translations = {'dog': {0: 'no cane', 1: 'un case', 2: '{n} cani', 10: 'tanti cani'}};
var translation = T('dog').format({n: 5}) // "5 cani"

Q.debounce (f, 300);

Q.throttle (f, 300);

<div id="container"></div>

<script>Q.load_and_trap("GET", "/target", {},  "container"</script>

given:

def target():

     form = Form(.....)

     if form.accepted:

              return "hello world"

     return str(form.render())

and

<input type="text" class="type-list-string"/>  renders the input as tags

It should be cleaned up and documented. Can cohexist with any framework.

[FredUZ]

If I start getting more into JavaScript, I will probably find those very useful indeed. For now my understanding is that utils.js is an optional JS addon for flash, form, grid, and auth (am I forgetting anything?) that makes it nicer for the user, but could be omitted. Is that what "orthogonal" means in this context?

[Massimo DiPierro]

Correct

--
You received this message because you are subscribed to the Google Groups "py4web" group.
To unsubscribe from this group and stop receiving emails from it, send an email to py4web+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/py4web/e15f09d5-cb23-440e-a09a-6e1a92cec123n%40googlegroups.com.