Building an "Easy" Web Application | Hacker News Reader

Building an "Easy" Web Application

rudyfaile.com

78 pointsluu42 comments

You can impose a timeout on a fetch with a one liner:

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.

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.

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"

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.

> 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.

(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.

The LLM religious zealots here on HN are starting to annoy me.

What makes their comment any more zealous than yours?

For the same reason that the followers of The Church of Emacs are heathens, whereas acolytes of The Cult of Vim are righteous warriors.

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.

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?

I'm fine with a build step, but I just want it to be essentially a lightweight compiler.

if you want to go no-build (i.e. SPA without nodejs and npm), then your options are limtied to Vue and Alpine

SolidJS is another option <https://www.solidjs.com/guides/getting-started#buildless-opt...>

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.

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

> 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.

> [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.

> 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

No.

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.

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.

> Three days wasted. I should have just written the PHP script.

PHP is the right tool for the job of making websites.

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.

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.

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.

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.

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

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/U...

> 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?

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

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.

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?

CORS is enforced by the client, the web browser.

  +----------------------+                               +-----------------------+ |     WordPress Site    | CORS Error           |     (blog.com)        | |     Browser enforces CORS     |                       | Direct request         |    +------------+     | |<-----------------------------------X    | xmlrpc.php |     | |    |     example.com → blog.com    |    |            |     | |    +------------+     | +-----------------------+ security blocks cross-origin presumably uses some python library like Requests. It wouldn't care about CORS.
  +----------------------+     +------------------------+     +-----------------------+ |     |    App Server          |     |     WordPress Site    | |     |    (example.com)       |     |     (blog.com)        | |     |                        |     |                       | |    +------------+      |     |    +------------+     | |<-------->|    | Backend    |<---------->|    | xmlrpc.php |     | |    |     |    | (Bottle)   |      |     |    |            |     | |    +------------+      |     |    +------------+     | +------------------------+     +-----------------------+ Uses requests library           Different origin No CORS checks here!         (Server doesn't care (Not a browser!)                  about origin)

makes sense, thank you. How'd you generate the diagrams so quickly?

My pleasure. Claude 3.5 Sonnet made the diagrams after 3 rounds of prompting.LLM's are surprisingly good at making diagrams in monospaced ascii or MermaidJS.

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.

you're right mostly, person above even created a nice diagram

Can't compete with that!

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... - I don't think Bottle supports this though; you might have to move to a different WSGI server.

Bottle can support it via HTMX: https://htmx.org/extensions/sse/

Fair enough, yes if you hand-crank it in bottle (and no reason why not).

Reply on news.ycombinator.com