[HN Gopher] WebContainers: Dev environments. In your web app
___________________________________________________________________
WebContainers: Dev environments. In your web app
Author : tosh
Score : 117 points
Date : 2024-07-13 06:31 UTC (16 hours ago)
(HTM) web link (webcontainers.io)
(TXT) w3m dump (webcontainers.io)
| kristopolous wrote:
| so I'm looking at the demo at
| 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 wrote:
| Creating online playgrounds that execute in the users browser.
| kristopolous wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| > 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 wrote:
| > 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 wrote:
| 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 wrote:
| 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.
| fragmede wrote:
| Terraform is better than the world of sh scripts that
| stopped working if you looked at the wrong and can't
| really test. True, it brings in new problems, but what
| used to take 3 hours to write and then 7 hours to do a
| smoke test of and then another week to apply across one
| on-prem DC with a team of five, can now actually be
| tested with Terratest, you can run it against 100
| different AWS accounts/regions/whatever, and be done
| deploying in a couple of hours. Of course, you didn't
| have 100 AWS accounts before there was AWS, but that kind
| of isolation is required to operate these days (under
| certain conditions).
|
| That's as far as how I read "now you do it in YAML",
| anyway, because you're right, we did just trade 3 hours
| of sh scripting for 3 hours of fighting with spaces
| across three yaml files.
|
| The problem that is fixed is that of the deployment of
| dev environments. Instead of each individual developer at
| BigCo having to set up their laptop juuuuust right,
| BigCoITDept spins this up, pre configured, and the
| developer can be shuttled off to the code mines faster.
| kristopolous wrote:
| That makes sense. Control over the developers
| workstations with preconfigured IDEs that are centrally
| managed sounds like something many corporations would
| backflip for.
|
| I personally hate it because I think subjecting artisnal
| crafts to taylorism rarely produces excellent results,
| but I know their sentiments and the vast majority of
| programs need be merely sufficient.
| jappgar wrote:
| wait, what?
|
| SaaS is about offloading deployment complexity not
| development complexity.
|
| if anything, SaaS/PaaS has made _development_ more
| complex than ever. Webcontainers being yet another
| example.
| fragmede wrote:
| No, you're right. I'm referring to the deployment
| complexity of said development environment though.
| mindwok wrote:
| Because the browser is slowly becoming the OS anyway, and
| the reason why is that it's way easier to distribute an
| application via the browser than natively. No app stores,
| no downloads, no updates, no installers, and mostly
| consistent across devices.
| karmajunkie wrote:
| imagine you're working in a highly regulated field.
| because of these regulations, you need to have absolute
| control over the development environment which is exactly
| as oppressive as it sounds, so you want to do your best
| to preserve the flexibility of a modern workstation.
| rty32 wrote:
| Do these tweaked versions have 100% parity with the real
| environments? My experience is that you would often run
| into hard limitations, making it difficult to use for
| serious development.
| rezonant wrote:
| There are limitations, so you can't do literally
| everything in it, but you can do quite a lot-- I'd say it
| easily covers the most common 80%.
| fragmede wrote:
| The code being run here is being run on WASM, so IF the
| 'real' environment is WASM (aka Cloudflare workers), it
| would actually be closer to prod than running it
| normally.
| lolinder wrote:
| 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.
| rezonant wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| bluelightning2k wrote:
| I've always been very impressed with StackBlitz. What they've
| done not only here but Sandpack also. Absolutely next level.
|
| And they do all this work then open source it instead of keeping
| it as a technical advantage.
|
| Strongly recommend their blog.
|
| Not affiliated just a fan.
| QuiiBz wrote:
| Sandpack is made by CodeSandbox, not StackBlitz:
| https://github.com/codesandbox/sandpack
| bberenberg wrote:
| Is this open source somewhere? I haven't found it.
| jFriedensreich wrote:
| its NOT open source. the github package just loads stuff from
| their servers and does not contain the actual web container
| code
| meiraleal wrote:
| I had to check again if they made it opensource or if it is
| still just fake marketing misleading but yeah, still the same
| bullshit. You didn't even take the effort to validate if your
| "support" is really valid.
| moffkalast wrote:
| Dev environments? In _my_ web app?
|
| It's more likely than you think!
| curtisblaine wrote:
| There ought to be an open source version of this. Wondering if
| it's "just" compiling the respective binaries needed by the tool
| chain (node, esbuild, who knows what else) to WebAssembly and
| providing proxied network access (for the registry).
| Alternatively, wondering if this could work with the various
| linux-on-a-webpage demos that were recently posted here.
| fragmede wrote:
| That demo is really impressive. It's click, scroll, click to get
| to it though. I'd make it a big button on the main page with
| marketing copy around it.
|
| Bonus points for also buying https://webcontainer.io/ (no s) and
| pointing it at the right place.
|
| Also, this is like the better funded, more productized cousin of
| https://webvm.io/
| nickstinemates wrote:
| Where/what is the demo you're referencing? I'd like to watch
| it.
| fragmede wrote:
| Not a video demo, the demo of their product, at
| https://webcontainer.new/
| meiraleal wrote:
| Why impressive? Looks like every other modern code
| playground.
| lolinder wrote:
| The code playground is hosting the WebContainer, it's not
| the WebContainer. The demo is what's running in the
| Preview pane.
|
| That took a while for me to figure out, too. I think from
| the marketing materials Stackblitz uses WebContainers
| internally as well?
|
| This is one of the reasons I prefer open-source, when the
| marketing is confusing I can just look at the
| implementation.
| ericmsimons wrote:
| Thanks for this feedback- we'll definitely make it easier to
| land on the webcontainer.new demo from the homepage. I think
| our main concern initially was that without docs context it
| might be too confusing what's going on, but I think we could
| find ways to ease that in that experience itself
| fragmede wrote:
| My eyes glazed over the docs context and scrolled until there
| was a bright blue button to click. If that hadn't been there
| I probably would have just bounced off of the page for being
| too wordy in a time of infinite distraction.
|
| Personally, I'd be direct and add something to the effect of
|
| > The page that you see on the right is being rendered to
| your browser by an instance of vite, running on your laptop,
| npm and all, being served directly to your browser. This is
| what sets us apart from other web dev environments.
|
| to the readme.md on webcontainers.new and to the copy
| directing people to click that blue button. As a sibling
| comment says, "looks like every other modern code
| playground", which is what it _looks_ like, but it isn 't.
| You and your team have put in a lot of hard work to
| differentiate on that specific thing.
|
| Your target market is developers, which raises the bar for
| technical understanding. Respect your customers' intelligence
| and just give it to them straight.
|
| imo. you didn't ask for suggestions but this is the Internet
| :)
| jappgar wrote:
| Your scientists were so preoccupied with whether they could that
| they never stopped to think if they should.
| ramesh31 wrote:
| There's a special kind of hell awaiting anyone silly enough to
| build anything on this.
| speed_spread wrote:
| We've said the same thing the day Node.js was invented and
| look where we are now. Whatever you build based on these bad
| ideas _is_ that special hell.
| pjmlp wrote:
| Keyboard doesn't echo on Android Chrome, only after return is
| pressed.
| tcper wrote:
| Good tech, but only good fit for StackBlitz.
|
| Don't know who will need this product to run a node.js enviroment
| in browser.
| seveibar wrote:
| We used this to build an interactive cli in the browser for
| Seam, and I'm currently working on using it to host a local
| typescript language server for tscircuit so that the playground
| has autocomplete. Imo a very useful technology
| tcper wrote:
| You can use xterm.js to implement interactive cli in
| browsers, and you can use backend language server to
| implement autocomplete.
|
| xterm.js is just not so fashion.
| ericmsimons wrote:
| We originally thought the same but a few years back started
| seeing increasing demand outside of stackblitz itself.
|
| Surprisingly a very large and growing number of use cases
| across interactive edu tools, AI code execution
| (https://webcontainers.io/ai), SaaS dev envs for end users to
| write code, amongst others
| jrvarela56 wrote:
| Your application and development environment (editor + 'server')
| are in the same runtime.
|
| This seems important for iterating JS/TS programs ala Smalltalk.
| libming_ wrote:
| StackBlitz has always struck me as a solution in search of a
| problem.
|
| Buyer beware: WebContainers is closed-source and there are
| hundreds of open issues from users. Most of them are ignored for
| weeks and months at a time as the company pivots from one thing
| to the next: https://github.com/stackblitz/webcontainer-
| core/issues
| paulgb wrote:
| "It's a solution in search of a problem and also has hundreds
| of issues from users" is kind of a funny juxtaposition, in the
| same sense that "nobody goes there, it's too crowded" is.
| lolinder wrote:
| StackBlitz != WebContainers.
|
| StackBlitz is another code playground.
|
| WebContainers is a library that they've extracted from their
| codebase and are selling that allows other people to build
| full-stack code playgrounds on their sites.
| ericmsimons wrote:
| stackblitz ceo here, just to clarify:
|
| we haven't ever pivoted from webcontainers, not sure what
| you're talking about there. it's been our main thing since
| forever :)
|
| stackblitz itself is a product suite built on top of
| webcontainers. note that many issues in the repo you linked are
| not for webcontainers specifically, but instead mostly for
| stackblitz specific functionality.
|
| we have about 3m devs/mo using us for free on stackblitz.com,
| so we do the best we can for free public issue triage but do
| prioritize our paying customers (we are a business after all :)
| ericmsimons wrote:
| Hi HN! Cofounder of StackBlitz/WebContainers here, cool to wake
| up and see this on the front page unexpectedly :) Happy to answer
| any questions!
|
| Btw one emergent use case we've seen growing rapidly has been
| code execution for AI agents. Would love
| thoughts/questions/feedback if you're working on things in that
| space: https://webcontainers.io/ai
| spankalee wrote:
| What's the patent you mention on the site? Are any other web-
| based terminal, shell, or Node emulators at risk of violating
| it? Is it for a specific implementation technique? It's kind of
| scary to see in the docs, to be honest.
| ericmsimons wrote:
| Good question, here's the link to it: https://patents.google.
| com/patent/US20220417315A1/en?q=(stac...
|
| It's somewhat specific to our use case as you'll see when you
| read through. A motivation for securing this was that we've
| had issues (one instance in particular) where we caught a
| direct competitor directly copy+pasting code from our
| compiled builds into their own competing product. Asking them
| nicely to stop didn't do anything, nor getting emails from
| our lawyers.
|
| The main lever a startup has to solve this is to keep
| innovating and being the best product in the market, which is
| what we have done & continue to do. But having a patent is a
| useful lever for general deterrence from bad actors like
| this. (Also want to say thanks and give credit to Vinay
| Hiremath, cofounder of Loom, who went through similar in the
| early days of Loom and helped point us down the path of
| securing a patent)
| spankalee wrote:
| Thanks for the direct answer!
| nojvek wrote:
| What does webcontainers exactly mean? Browsers don't allow me to
| call arbitrary other urls since the called server needs to allow
| with cross domain request headers.
|
| What happens if I close browser tab? does that make the
| webcontainer go poof? What about memory and CPU requirements?
|
| The idea sounds like a great hack, but the whole point of cloud
| IDEs is that it uses someone else's resources. I could get a 64
| CPU with a bunch of H100s to dev on, run some script in
| background, and shut it when I'm done.
| spankalee wrote:
| WebContainers is pretty awesome, and at this point if I were a
| server runtime (especially Deno and Bun), I would try to maintain
| a first-party web platform version for exactly the type of
| linkable, ephemeral, no-install, sandboxed, local dev
| environments of your that WebContainers provides.
|
| I do wish this were open source, and the mention of a patent
| scares me - I feel like lots of people have tried this over the
| years, are they running afoul of some patent not fully linked to
| from the WebContainers site? - but I understand the investment
| that StackBlitz has made and the need to make money.
___________________________________________________________________
(page generated 2024-07-13 23:01 UTC)