4 ms·

so I'm looking at the demo at https://stackblitz.com/edit/stackblitz-webcontainer-api-starter-qx8gmp?file=README.md https://stackblitz.com/edit/stackblitz-webco

so I'm looking at the demo at https://stackblitz.com/edit/stackblitz-webcontainer-api-starter-qx8gmp?file=README.md https://stackblitz.com/edit/stackblitz-webcontainer-api-star... Alright, looks like a lot of work went into this. What's the unique use case here? Help me out. I don't really understand why people would want to write code like this.

0x1ceb00da 2y ago
Creating online playgrounds that execute in the users browser.
- kristopolous 2y ago
  ok, that's a busy and crowded field with at least a dozen entrenched players: gitpod, codeanywhere, codepen, replit, jsfiddle, coder, jsbin, playcode, aws cloud9, codeenvy, github codespaces, and just plain old jupyter notebooks, just to name the ones I can think of. Is this really just a metoo product?
  - DANmode 2y ago
    Why do different technical subcultures choose each of these almost as often as the others? 1. Network effects are stronger than we realize, due to being in the networks 2. UX detail matters more than most of us here give credit.
    - kristopolous 2y ago
      Or maybe it's not too hard to create a web ide and relatively cheap to run. I'd imagine if you took a deep dive into web-assembly, lots of pieces are already there. It's really probably around 3-4 big pieces to try to piece together. Sounds like a pretty rewarding payoff.
  - rezonant 2y ago
    > gitpod, coder, AWS cloud9, codenvy, codespaces These run your code on a cloud server > codeanywhere This runs your coding interview on a cloud server > codepen, replit, jsfiddle, jsbin, playcode, jupyter These aren't really IDEs, they run some limited html and css on the client or in some cases some code in other languages on a cloud server. They are intended for small shareable snippets that demonstrate something. They generally don't have a full filesystem view, and thus are a specialized flavor of coding environment. > web containers This runs your frontend and backend code (yes, http servers) in a local browser backed filesystem that's fully local with no cloud servers which has a full terminal and process system as well as WASM adapted (and environment tweaked) versions of your development tools. There is no competitor that does quite this, to my knowledge. It might seem like these are all the same, but they are not if you look closer. It's pretty crazy tech, and really genius.
    - ryandv 2y ago
      > This runs your frontend and backend code (yes, http servers) in a local browser backed filesystem This runs your development environment in the browser. Why not just run natively on the operating system, which already gives you filesystem access, terminals, and processes?
      - fragmede 2y ago
        because of all the problems with that, especially at scale. obviously that works, since that's how we've done it since the before times, but the shortcomings of that are what has lead to the rise of SaaS.
        kristopolous 2y ago
        What problems get fixed by this approach and how does it become less wall time to fully address it? I'm phrasing it carefully because sometimes solutions are really just the original problem redecorated in some new paradigm of dealing with it and doesn't actually reduce the responsibility, time, skills or cognitive requirements to surmount it. For instance, many automation tools replaced writing shell scripts with YAML or Ruby DSL. You gotta solve the same exact problems in the end, but now you do it in YAML. What used to take 3 hours, now only takes 3 hours. So, what problems are actually being fixed here? Alternatively it may just bring you more joy to with with it, which is what a lot of these tools actually do. That's fine as well.
  - lolinder 2y ago
    The demo's use of Stackblitz is actually really confusing here, because it makes it seem like their IDE is what's being demoed when it's not. WebContainers is a (proprietary) library for anyone to use to build playgrounds that execute client and server code on the frontend alone. It sounds like it was extracted from Stackblitz's implementation for separate use. WebContainers is not competing in that crowded field (though Stackblitz is) because as far as I know no one else offers a library to build your own. This is partly because it's a pretty niche offering—developers of server-side or full-stack frameworks are the most obvious target users.
  - nsonha 2y ago
    playground is a minor usecase, to me the big one is giving you a new option for scaling: shifting compute to client devices. They are powerful these days, and offline-first beyond data syncing is also desirable.
- rezonant 2y ago
  It's far beyond that. Web containers in Stackblitz is an entirely local in-browser IDE, complete with frontend and backend support, NPM, git, a full VS Code based IDE experience and end to end debugging (step right from your frontend right into your backend code). It runs (well, simulates?) HTTP and WebSockets right within the environment.
curtisblaine 2y ago
Thin clients. Your workstation only needs to run a browser, all the tooling is already provided. Allows you to access your environment from anywhere.
- fragmede 2y ago
  In this case, the environment is running locally, so while the code may be backed by cloud storage, the resources being used are the local machine.
firtoz 2y ago
I have a version of Anthropic Artifacts working in my project here. Claude generates the code (backend or frontend), I wrap it into a little package, boom, instant deployment.

0x1ceb00da 2y ago

Creating online playgrounds that execute in the users browser.

kristopolous 2y ago
ok, that's a busy and crowded field with at least a dozen entrenched players: gitpod, codeanywhere, codepen, replit, jsfiddle, coder, jsbin, playcode, aws cloud9, codeenvy, github codespaces, and just plain old jupyter notebooks, just to name the ones I can think of. Is this really just a metoo product?
- DANmode 2y ago
  Why do different technical subcultures choose each of these almost as often as the others? 1. Network effects are stronger than we realize, due to being in the networks 2. UX detail matters more than most of us here give credit.
  - kristopolous 2y ago
    Or maybe it's not too hard to create a web ide and relatively cheap to run. I'd imagine if you took a deep dive into web-assembly, lots of pieces are already there. It's really probably around 3-4 big pieces to try to piece together. Sounds like a pretty rewarding payoff.
- rezonant 2y ago
  > gitpod, coder, AWS cloud9, codenvy, codespaces These run your code on a cloud server > codeanywhere This runs your coding interview on a cloud server > codepen, replit, jsfiddle, jsbin, playcode, jupyter These aren't really IDEs, they run some limited html and css on the client or in some cases some code in other languages on a cloud server. They are intended for small shareable snippets that demonstrate something. They generally don't have a full filesystem view, and thus are a specialized flavor of coding environment. > web containers This runs your frontend and backend code (yes, http servers) in a local browser backed filesystem that's fully local with no cloud servers which has a full terminal and process system as well as WASM adapted (and environment tweaked) versions of your development tools. There is no competitor that does quite this, to my knowledge. It might seem like these are all the same, but they are not if you look closer. It's pretty crazy tech, and really genius.
  - ryandv 2y ago
    > This runs your frontend and backend code (yes, http servers) in a local browser backed filesystem This runs your development environment in the browser. Why not just run natively on the operating system, which already gives you filesystem access, terminals, and processes?
    - fragmede 2y ago
      because of all the problems with that, especially at scale. obviously that works, since that's how we've done it since the before times, but the shortcomings of that are what has lead to the rise of SaaS.
      - kristopolous 2y ago
        What problems get fixed by this approach and how does it become less wall time to fully address it? I'm phrasing it carefully because sometimes solutions are really just the original problem redecorated in some new paradigm of dealing with it and doesn't actually reduce the responsibility, time, skills or cognitive requirements to surmount it. For instance, many automation tools replaced writing shell scripts with YAML or Ruby DSL. You gotta solve the same exact problems in the end, but now you do it in YAML. What used to take 3 hours, now only takes 3 hours. So, what problems are actually being fixed here? Alternatively it may just bring you more joy to with with it, which is what a lot of these tools actually do. That's fine as well.
- lolinder 2y ago
  The demo's use of Stackblitz is actually really confusing here, because it makes it seem like their IDE is what's being demoed when it's not. WebContainers is a (proprietary) library for anyone to use to build playgrounds that execute client and server code on the frontend alone. It sounds like it was extracted from Stackblitz's implementation for separate use. WebContainers is not competing in that crowded field (though Stackblitz is) because as far as I know no one else offers a library to build your own. This is partly because it's a pretty niche offering—developers of server-side or full-stack frameworks are the most obvious target users.
- nsonha 2y ago
  playground is a minor usecase, to me the big one is giving you a new option for scaling: shifting compute to client devices. They are powerful these days, and offline-first beyond data syncing is also desirable.
rezonant 2y ago
It's far beyond that. Web containers in Stackblitz is an entirely local in-browser IDE, complete with frontend and backend support, NPM, git, a full VS Code based IDE experience and end to end debugging (step right from your frontend right into your backend code). It runs (well, simulates?) HTTP and WebSockets right within the environment.

curtisblaine 2y ago

Thin clients. Your workstation only needs to run a browser, all the tooling is already provided. Allows you to access your environment from anywhere.

fragmede 2y ago
In this case, the environment is running locally, so while the code may be backed by cloud storage, the resources being used are the local machine.

firtoz 2y ago

I have a version of Anthropic Artifacts working in my project here. Claude generates the code (backend or frontend), I wrap it into a little package, boom, instant deployment.