6 ms·

Building an "Easy" Web Application

78 points by luu 2y ago

xnx 2y ago
(2020) > Three days wasted. I should have just written the PHP script . The good news is that any leading class LLM today would certainly be able to one-shot translation of the script from Python to PHP or create it in PHP.
- 65 2y ago
  The LLM religious zealots here on HN are starting to annoy me.
  - OKRainbowKid 2y ago
    What makes their comment any more zealous than yours?
    - sgarland 2y ago
      For the same reason that the followers of The Church of Emacs are heathens, whereas acolytes of The Cult of Vim are righteous warriors.
codelikeawolf 2y ago
> It was also getting harder and harder to debug as JavaScript has no timeout functionality I would have had to wrap that request in another promise. I'm pretty sure you could use an AbortController to address this? But it's one of those things you have to know about. I completely understand the author's frustration with CORS, but I don't think JS is to blame here. I have felt a similar level of frustration whenever I try to use a language other than JS to work with JSON. Does that mean the language sucks? I would say no. I don't think this made a compelling case for avoiding JS, but I would never want to deny someone the catharsis from venting about technology.
Evidlo 2y ago
CORS has killed a lot of my SPA ideas too. Also I've been toying with Svelte which I was told was a lightweight framework. But you still need npm to use it which generates dozens of other boilerplate files. The JS ecosystem does indeed suck.
- rk06 2y ago
  if you want to go no-build (i.e. SPA without nodejs and npm), then your options are limtied to Vue and Alpine
  - webstrand 2y ago
    SolidJS is another option <https://www.solidjs.com/guides/getting-started#buildless-options https://www.solidjs.com/guides/getting-started#buildless-opt...>
- madeofpalk 2y ago
  You don't have to use npm at all. Isn't this the same with any language ecosystem where you opt to use the package manager?
  - Evidlo 2y ago
    I'm fine with a build step, but I just want it to be essentially a lightweight compiler.
totallykvothe 2y ago
I wonder what the environmental impact of CORS is, given that it is the sole reason to spin up a node proxy server every time it kills someone's dreams.
gbro3n 2y ago
The JS Frameworks always feel fun to start with, but then I always end up realising how complex and flakey the tool chain is and switch to something simpler. ASP.NET + alpine.js is my current happy place. If I need a JS lib then I get it from unpkg.com and avoid npm. Then Docker on a Digital Ocean Container App is a really easy way to CI/CD.
- codecraze 2y ago
  Right now my go to stack is go, tailwind, templ and htmx. The whole stack works really well :)
blopker 2y ago
There is another solution, in this specific case. If all they wanted is to start returning the test results before all the tests are done, a streaming http response can be used. In Bottle, returning a generator or iterator will send the response in chucks, instead of all at once. The effect would be that the test results load in one by one, providing the user with feedback. No JavaScript needed.
deleted 2y ago
[deleted]
esprehn 2y ago
You can impose a timeout on a fetch with a one liner: https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout_static https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal... Part of the awkwardness in the post is also mixing what looks like express with promises. I think using an async function as the handler with express 5 would probably feel a lot nicer. I agree about CORS being frustrating. I think we should have allowed totally anonymous fetch requests across domains for saved to home screen PWAs (or with a permission prompt.) Missing that feature means you end up needing native apps for a lot of things that otherwise are totally reasonable web apps. CORS does make sense though because the alternative is drive by attacks against your local network from random web pages. And since the S in IOT stands for security that seemed like a bad idea at the time.
- webstrand 2y ago
  Recently I've been building tools like this in tampermonkey (greasemonkey but newer/oss) since those scripts run in an environment where exceptions can be made to bypass CORS, and do a lot of things that in-page javascript just can't get access to.
- dkkergoog 2y ago
  [dead]
araes 2y ago
I sympathize with the authors pain, and at least from the comments, it sounds like most have a similar view of CORS. Many weeks of face -> keyboard in response. At some point trying to write JS, I really started believe that the people who implemented CORS did it just to break every single part of the world wide web that might ever be enjoyable. It really felt like somebody held out a beautiful idea with AJAX, and requests lacking synchronization, and then the only response was endless exploits, security holes, patches that took away functionality, and posts like the authors. "This idea seems so simple...nevermind, 'Access-Control-Allow-Origin' ERROR"
adltereturn 2y ago
I agree with your point of view; CORS will at least torment you for a while until you finally resolve it. With the help of GPT, I have at least tried 1. Vite proxy, 2. Java Spring WebMvcConfigurer CORS config, and 3. Nginx proxy... This is really exhausting.
theincredulousk 2y ago
not a web person - why does the original approach not have the CORS problem? Isn't it still generating the request from the same local machine?
- mths 2y ago
  Also not a web person, but my guess is that the bottle app makes the requests from the "server" end, so even though you're accessing the app in your browser, the browser is only communicating with the local app server and thus isn't in the way to enforce CORS.
  - theincredulousk 2y ago
    you're right mostly, person above even created a nice diagram
    - mths 2y ago
      Can't compete with that!
- kenny_r 2y ago
  CORS is enforced by the client, the web browser. +----------------------+ +-----------------------+ | User Browser | | WordPress Site | | (viewing from | CORS Error | (blog.com) | | example.com) | Browser enforces CORS | | | +------------+ | Direct request | +------------+ | | | Frontend |<-----------------------------------X | xmlrpc.php | | | | App | | example.com → blog.com | | | | | +------------+ | | +------------+ | +----------------------+ +-----------------------+ Browser security blocks cross-origin requests (CORS is browser-only!) The bottle app presumably uses some python library like Requests. It wouldn't care about CORS. +----------------------+ +------------------------+ +-----------------------+ | User Browser | | App Server | | WordPress Site | | (viewing from | | (example.com) | | (blog.com) | | example.com) | | | | | | +------------+ | | +------------+ | | +------------+ | | | Frontend |<-------->| | Backend |<---------->| | xmlrpc.php | | | | App | | | | (Bottle) | | | | | | | +------------+ | | +------------+ | | +------------+ | +----------------------+ +------------------------+ +-----------------------+ Same origin Uses requests library Different origin Browser allows this No CORS checks here! (Server doesn't care (Not a browser!) about origin)
kennywinker 2y ago
Ah yes, another “this hammer is a terrible paintbrush!” blog post. Bonus points for the dig at node_modules bloat. You can write a post like this about the frustrations of any language / tool / framework - just go in with random expectations and limited understanding - and when you encounter an obstacle don’t attempt to learn why it’s there.
- robertlagrant 2y ago
  I don't think this is fair at all. I can definitely go and install Flask (or even Bottle) right now and make a web server with 1 or about 4 dependencies, all well-vetted, and start creating web applications and APIs. They're both ways to create web applications, and for the author's use case, which isn't a load of custom CSS, offline-first, can-be-a-mobile-app-as-well, many-people-need-to-work-on-this-codebase-at-once, it is a real problem for NodeJS applications. At least Deno is TypeScript-native, so that's one whole set of build chain linkage sorted.
  - kennywinker 2y ago
    And I can install flask and get mad at it because auth isn’t built in, or it doesn’t auto generate endpoints based on my markdown api spec or whatever idk i haven’t used flask in a while. CORS is a basic part of browser security. Yes it’s frustrating when you first encounter it, but the next step is to understand it and why it’s actually quite a good thing that it exists. Or you could write a blog post i guess.
rk06 2y ago
Is there a way one can make a JS fetch() call and instruct browser to not send cookies etc, so CORS limitation won't be applied? CORS is basically happening because of the sensitive data that browser sends by default, so if browser is not sending such info, then CORS also need not be applied
- robertlagrant 2y ago
  > CORS is basically happening because of the sensitive data that browser sends by default, so if browser is not sending such info, then CORS also need not be applied Can you cite where this behaviour is defined?
  - deleted 2y ago
    [deleted]
  - rk06 2y ago
    I am just asking if there is a way around it. I know CORS is in palce due to browser sending cookie and auth info by default with HTTP requests. other poster mentioned that fetch does have this behavior, but I have not seen if such requests will be blocked by CORS or not
    - robertlagrant 2y ago
      Ah okay. It didn't appear to be a question at all. In that case, I'd say yes that might well make sense. CORS is a bit of a cudgel.
- 63stack 2y ago
  The default is quite the opposite. Whether fetch sends credentials is controlled by the 'credentials' option, which defaults to "same-origin". https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#including_credentials https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/U...
robertlagrant 2y ago
If you want a little more interactivity you could use SSE[0] to push results as they come back. [0] https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events https://developer.mozilla.org/en-US/docs/Web/API/Server-sent... - I don't think Bottle supports this though; you might have to move to a different WSGI server.
- lormayna 2y ago
  Bottle can support it via HTMX: https://htmx.org/extensions/sse/ https://htmx.org/extensions/sse/
  - robertlagrant 2y ago
    Fair enough, yes if you hand-crank it in bottle (and no reason why not).
unavoidable 2y ago
> I feel like every time I look at JavaScript it’s different . So much truth in this. It's amazing that JS has managed to survive (even thrive!) in spite of the constant fundamental backwards-breaking changes every few cycles. Maybe that speaks to the lack of web based alternatives than anything else.
- cxr 2y ago
  > [JavaScript's] constant fundamental backwards-breaking changes wat TC-39 literally has "Don't break the Web" as an explicit goal. You are conflating "JavaScript" with something else (possibly some popular packages written in JS, for example—by people who have no control or say over the standard, usually, and with dubious taste to begin with). By all means, avoid those packages and tastemakers. JS is still JS and still works despite their whims.
  - DrillShopper 2y ago
    > You are conflating "JavaScript" with something else (possibly some popular packages written in JS, for example—by people who have no control or say over the standard, usually, and with dubious taste to begin with). Those are functionally part of the language
    - cxr 2y ago
      No.
beretguy 2y ago
> Three days wasted. I should have just written the PHP script. PHP is the right tool for the job of making websites.
theanonymousone 2y ago
Trying to traverse the web landscape and/or getting out of one's comfort zone is of course a very valid incentive. But if one wants to "transforms a small Python utility" by "turning it into a web application", I believe more efficient paths could be tried. Streamlit is not mentioned in the article, yet I can argue that is unbeatable and that by a large margin in how quick it is to get from a Python script to a decent, functioning web application. In general, going one-language, full-stack (Vaadin, Streamlit etc..) is probably the right path for anyone who doesn't want do front-end but has to. IMHO of course.

78 points by luu 2y ago

xnx 2y ago

(2020) > Three days wasted. I should have just written the PHP script . The good news is that any leading class LLM today would certainly be able to one-shot translation of the script from Python to PHP or create it in PHP.

65 2y ago
The LLM religious zealots here on HN are starting to annoy me.
- OKRainbowKid 2y ago
  What makes their comment any more zealous than yours?
  - sgarland 2y ago
    For the same reason that the followers of The Church of Emacs are heathens, whereas acolytes of The Cult of Vim are righteous warriors.

codelikeawolf 2y ago

> It was also getting harder and harder to debug as JavaScript has no timeout functionality I would have had to wrap that request in another promise. I'm pretty sure you could use an AbortController to address this? But it's one of those things you have to know about. I completely understand the author's frustration with CORS, but I don't think JS is to blame here. I have felt a similar level of frustration whenever I try to use a language other than JS to work with JSON. Does that mean the language sucks? I would say no. I don't think this made a compelling case for avoiding JS, but I would never want to deny someone the catharsis from venting about technology.

Evidlo 2y ago

CORS has killed a lot of my SPA ideas too. Also I've been toying with Svelte which I was told was a lightweight framework. But you still need npm to use it which generates dozens of other boilerplate files. The JS ecosystem does indeed suck.

rk06 2y ago
if you want to go no-build (i.e. SPA without nodejs and npm), then your options are limtied to Vue and Alpine
- webstrand 2y ago
  SolidJS is another option <https://www.solidjs.com/guides/getting-started#buildless-options https://www.solidjs.com/guides/getting-started#buildless-opt...>
madeofpalk 2y ago
You don't have to use npm at all. Isn't this the same with any language ecosystem where you opt to use the package manager?
- Evidlo 2y ago
  I'm fine with a build step, but I just want it to be essentially a lightweight compiler.

totallykvothe 2y ago

I wonder what the environmental impact of CORS is, given that it is the sole reason to spin up a node proxy server every time it kills someone's dreams.

gbro3n 2y ago

The JS Frameworks always feel fun to start with, but then I always end up realising how complex and flakey the tool chain is and switch to something simpler. ASP.NET + alpine.js is my current happy place. If I need a JS lib then I get it from unpkg.com and avoid npm. Then Docker on a Digital Ocean Container App is a really easy way to CI/CD.

codecraze 2y ago
Right now my go to stack is go, tailwind, templ and htmx. The whole stack works really well :)

blopker 2y ago

There is another solution, in this specific case. If all they wanted is to start returning the test results before all the tests are done, a streaming http response can be used. In Bottle, returning a generator or iterator will send the response in chucks, instead of all at once. The effect would be that the test results load in one by one, providing the user with feedback. No JavaScript needed.

deleted 2y ago

[deleted]

esprehn 2y ago

You can impose a timeout on a fetch with a one liner: https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout_static https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal... Part of the awkwardness in the post is also mixing what looks like express with promises. I think using an async function as the handler with express 5 would probably feel a lot nicer. I agree about CORS being frustrating. I think we should have allowed totally anonymous fetch requests across domains for saved to home screen PWAs (or with a permission prompt.) Missing that feature means you end up needing native apps for a lot of things that otherwise are totally reasonable web apps. CORS does make sense though because the alternative is drive by attacks against your local network from random web pages. And since the S in IOT stands for security that seemed like a bad idea at the time.

webstrand 2y ago
Recently I've been building tools like this in tampermonkey (greasemonkey but newer/oss) since those scripts run in an environment where exceptions can be made to bypass CORS, and do a lot of things that in-page javascript just can't get access to.
dkkergoog 2y ago
[dead]

araes 2y ago

I sympathize with the authors pain, and at least from the comments, it sounds like most have a similar view of CORS. Many weeks of face -> keyboard in response. At some point trying to write JS, I really started believe that the people who implemented CORS did it just to break every single part of the world wide web that might ever be enjoyable. It really felt like somebody held out a beautiful idea with AJAX, and requests lacking synchronization, and then the only response was endless exploits, security holes, patches that took away functionality, and posts like the authors. "This idea seems so simple...nevermind, 'Access-Control-Allow-Origin' ERROR"

adltereturn 2y ago

I agree with your point of view; CORS will at least torment you for a while until you finally resolve it. With the help of GPT, I have at least tried 1. Vite proxy, 2. Java Spring WebMvcConfigurer CORS config, and 3. Nginx proxy... This is really exhausting.

theincredulousk 2y ago

not a web person - why does the original approach not have the CORS problem? Isn't it still generating the request from the same local machine?

mths 2y ago
Also not a web person, but my guess is that the bottle app makes the requests from the "server" end, so even though you're accessing the app in your browser, the browser is only communicating with the local app server and thus isn't in the way to enforce CORS.
- theincredulousk 2y ago
  you're right mostly, person above even created a nice diagram
  - mths 2y ago
    Can't compete with that!
kenny_r 2y ago
CORS is enforced by the client, the web browser. +----------------------+ +-----------------------+ | User Browser | | WordPress Site | | (viewing from | CORS Error | (blog.com) | | example.com) | Browser enforces CORS | | | +------------+ | Direct request | +------------+ | | | Frontend |<-----------------------------------X | xmlrpc.php | | | | App | | example.com → blog.com | | | | | +------------+ | | +------------+ | +----------------------+ +-----------------------+ Browser security blocks cross-origin requests (CORS is browser-only!) The bottle app presumably uses some python library like Requests. It wouldn't care about CORS. +----------------------+ +------------------------+ +-----------------------+ | User Browser | | App Server | | WordPress Site | | (viewing from | | (example.com) | | (blog.com) | | example.com) | | | | | | +------------+ | | +------------+ | | +------------+ | | | Frontend |<-------->| | Backend |<---------->| | xmlrpc.php | | | | App | | | | (Bottle) | | | | | | | +------------+ | | +------------+ | | +------------+ | +----------------------+ +------------------------+ +-----------------------+ Same origin Uses requests library Different origin Browser allows this No CORS checks here! (Server doesn't care (Not a browser!) about origin)

kennywinker 2y ago

Ah yes, another “this hammer is a terrible paintbrush!” blog post. Bonus points for the dig at node_modules bloat. You can write a post like this about the frustrations of any language / tool / framework - just go in with random expectations and limited understanding - and when you encounter an obstacle don’t attempt to learn why it’s there.

robertlagrant 2y ago
I don't think this is fair at all. I can definitely go and install Flask (or even Bottle) right now and make a web server with 1 or about 4 dependencies, all well-vetted, and start creating web applications and APIs. They're both ways to create web applications, and for the author's use case, which isn't a load of custom CSS, offline-first, can-be-a-mobile-app-as-well, many-people-need-to-work-on-this-codebase-at-once, it is a real problem for NodeJS applications. At least Deno is TypeScript-native, so that's one whole set of build chain linkage sorted.
- kennywinker 2y ago
  And I can install flask and get mad at it because auth isn’t built in, or it doesn’t auto generate endpoints based on my markdown api spec or whatever idk i haven’t used flask in a while. CORS is a basic part of browser security. Yes it’s frustrating when you first encounter it, but the next step is to understand it and why it’s actually quite a good thing that it exists. Or you could write a blog post i guess.

rk06 2y ago

Is there a way one can make a JS fetch() call and instruct browser to not send cookies etc, so CORS limitation won't be applied? CORS is basically happening because of the sensitive data that browser sends by default, so if browser is not sending such info, then CORS also need not be applied

robertlagrant 2y ago
> CORS is basically happening because of the sensitive data that browser sends by default, so if browser is not sending such info, then CORS also need not be applied Can you cite where this behaviour is defined?
- deleted 2y ago
  [deleted]
- rk06 2y ago
  I am just asking if there is a way around it. I know CORS is in palce due to browser sending cookie and auth info by default with HTTP requests. other poster mentioned that fetch does have this behavior, but I have not seen if such requests will be blocked by CORS or not
  - robertlagrant 2y ago
    Ah okay. It didn't appear to be a question at all. In that case, I'd say yes that might well make sense. CORS is a bit of a cudgel.
63stack 2y ago
The default is quite the opposite. Whether fetch sends credentials is controlled by the 'credentials' option, which defaults to "same-origin". https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#including_credentials https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/U...

robertlagrant 2y ago

If you want a little more interactivity you could use SSE[0] to push results as they come back. [0] https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events https://developer.mozilla.org/en-US/docs/Web/API/Server-sent... - I don't think Bottle supports this though; you might have to move to a different WSGI server.

lormayna 2y ago
Bottle can support it via HTMX: https://htmx.org/extensions/sse/ https://htmx.org/extensions/sse/
- robertlagrant 2y ago
  Fair enough, yes if you hand-crank it in bottle (and no reason why not).

unavoidable 2y ago

> I feel like every time I look at JavaScript it’s different . So much truth in this. It's amazing that JS has managed to survive (even thrive!) in spite of the constant fundamental backwards-breaking changes every few cycles. Maybe that speaks to the lack of web based alternatives than anything else.

cxr 2y ago
> [JavaScript's] constant fundamental backwards-breaking changes wat TC-39 literally has "Don't break the Web" as an explicit goal. You are conflating "JavaScript" with something else (possibly some popular packages written in JS, for example—by people who have no control or say over the standard, usually, and with dubious taste to begin with). By all means, avoid those packages and tastemakers. JS is still JS and still works despite their whims.
- DrillShopper 2y ago
  > You are conflating "JavaScript" with something else (possibly some popular packages written in JS, for example—by people who have no control or say over the standard, usually, and with dubious taste to begin with). Those are functionally part of the language
  - cxr 2y ago
    No.

beretguy 2y ago

> Three days wasted. I should have just written the PHP script. PHP is the right tool for the job of making websites.

theanonymousone 2y ago

Trying to traverse the web landscape and/or getting out of one's comfort zone is of course a very valid incentive. But if one wants to "transforms a small Python utility" by "turning it into a web application", I believe more efficient paths could be tried. Streamlit is not mentioned in the article, yet I can argue that is unbeatable and that by a large margin in how quick it is to get from a Python script to a decent, functioning web application. In general, going one-language, full-stack (Vaadin, Streamlit etc..) is probably the right path for anyone who doesn't want do front-end but has to. IMHO of course.