Repl.it 1.0: IDE that Grows from Playgrounds to Fullstack Apps
repl.it
repl.it
At the time, Emscripten -- the predecessor to ASM.js that compiles native code to JavaScript -- was coming on the scene so we tried using it to compile Python, Ruby, and Lua and more to JavaScript. Much to our surprise it actually worked and we became the first production app to use Emscripten. We launched on HN in 2011 (https://news.ycombinator.com/item?id=3056490) and the reception was nothing short of amazing. Programmers used Repl.it as a portable repl and a bunch of learn-to-code and MOOC companies used our open-source stuff to build interactive coding experiences in the browser.
Unfortunately soon after that, we got busy with work and life and the project lingered for almost 5 years. I went to work at Codecademy as the #1 employee (which at the time was using open-source parts of Repl.it) and then left for Facebook where I worked on JavaScript Infrastructure and React Native. Around 2016 Haya (cofounder and wife) and I were looking for a new side-project but then decided that since no-one really built our vision for what Repl.it could become we decided to give it another shot. As soon as we started improving it we started seeing growth, within a few months it got to a point where we were spending a considerable sum just keeping the service up. We didn't want to start a company but we were faced with the choice of either shutting down something that users obviously love or we quit our jobs and start a startup. We chose the latter.
One thing that's interesting about our small team is that we've built expertise in both the frontend (IDE) and the infrastructure (container management and remote development environment protocols). For the IDE, we recently shipped a big rewrite that allowed us to do server-side rendering (important since we're committed to speed) and a plugin architecture based on the ideas behind Redux with a very small core (https://repl.it/blog/ide). Everything in the IDE is a plugin, which is simply a reducer, a receiver, and a React component. The reducer builds up the state required for the plugin to work, the receiver dispatches actions in response to other actions flowing through the system, and the component renders. Even something as core to the IDE as the file tree is built as a plugin with no privileged hooks into the core. For the backend, we've designed a set of protocols and hooks for remote development. The protocol can expand capabilities as you require them. For example, every program starts out using the simple (loop (print (eval (read)))) protocol and then if you decide to use files/modules then it will switch to something that knows how to handle file manipulation and change events. The IDE can also react to what you require, for example, if you open a port then it will open a webview would pop open so you can see the result.
Last but not least, Repl.it has a growing community of aspiring programmers. Some of our hardcore fans are teenage programmers and so we've built a place for them to share, vote on, and discuss their projects (https://repl.it/ibuiltthis?sort=top). One interesting thing that we've noticed about kids on our platform is that they continue to build 90's-style website. I've commented on a recent HN thread with links to some of their creations (https://news.ycombinator.com/item?id=16506825).
Happy to answer any questions.
Just wanted to say thanks for building it, and keep up the great work!
And then some more general questions - Can I hook a CI into the deploy loop? (Maybe that doesn't quite make sense given the model is something like Jupyter notebook meets Glitch.) Also, is there a repo being managed behind the scenes like GitHub does in Gist, and if so, any plans to open access to those?
A bit of context: for every language/environment we have a Dockerfile (naturally) and a JSON configuration that describe how it runs, how it install packages, how it runs unit tests, how it formats code, etc. When we build the container we insert a program that we call pid1, it's the container's interface to the rest of the world.
The container manager creates pools of these containers with some rudimentary predictive logic to make sure we have enough containers to deliver on our promise of "loads in 2 seconds". When we take a container out of the pool, if we're reviving a container, we mount a GCS-backed fuse filesystem with the user code (it needs to be backed by GCS to handle persistence, say you're writing to a log file, it should be there next time you load your project). We then send the relevant setup command to pid1 (either init, or wakeup) which sets up the repl to start the user app, the repl, or what have you.
> What actually happens behind the scenes to make a deploy go live
We poll the container for published ports and the moment we see an open port we add a record to an etcd which stores the routing state. We then send a command to the client that we published a port, which will react by opening an iframe. Then the iframe or any request to the published url will hit our outer reverse proxy which will query etcd to find the container and if the container is alive we will send the traffic to the relevant container manager which has another reverse proxy which sends the traffic to the container.
If the container however is dead (from idling or because of an error) we revive via picking a container out of one the pools and going through the initialization phase described above.
Finally, we also host our own docker image registery so that we can push new images, whether new languages, new versions or what have you.
There is a lot more to talk about here so I or someone on the team will write a post soon.
0. No docs. There's plenty of odd and unexplained behavior that needs documenting - at least until stuff is less broken.
1. Can't eval single forms from editor. Whole files only.
2. Can't eval anything from files other than main.
3. Lots of delays and hangs. Very slow. Every eval takes multiple seconds. Some repl starts take 30 seconds.
4. Weird inconsistent behavior. Sometimes it will render function return values from editor eval to the repl, sometimes not.
5. Once you drop a new file, stuff breaks in strange ways. E.g. main.clj no longer seems connected to the user namespace.
6. Can't load other files, (load "other.clj") doesn't find it.To address your points but please feel free to add this to our feedback board too.
>0. No docs. There's plenty of odd and unexplained behavior that needs documenting - at least until stuff is less broken.
This is definitely an area we need to fix but to your other comment there shouldn't be any unexplained behavior. If there is it's a bug. Please report it here: https://repl.it/bugs
>1. Can't eval single forms from editor. Whole files only.
Meaning you want to highlight code and eval it? That's something we've seen requested before and would love to implement.
> 2. Can't eval anything from files other than main.
Yes so if you start adding files we switch to executing code via `lein exec main.clj`. We should probably drop the REPL in the same namespace as well. Do you know if there is an easy way to connect the REPL to a running program?
> 3. Lots of delays and hangs. Very slow. Every eval takes multiple seconds. Some repl starts take 30 seconds.
should be fixed now.
>4. Weird inconsistent behavior. Sometimes it will render function return values from editor eval to the repl, sometimes not.
This should be consistent. It's the first time we hear about this, can you please report it with some repro steps?
> 5. Once you drop a new file, stuff breaks in strange ways. E.g. main.clj no longer seems connected to the user namespace.
Related to point #2
> 6. Can't load other files, (load "other.clj") doesn't find it.
It works, you shouldn't add the extension in `load`. See working example: https://repl.it/@amasad/Load-example
Is this an avenue you're at all perusing / interested in -- or else, do you have any sense of how other business could rely on your product?
I noticed two small issues. First, if you enable gzip on static assets, it will help images load faster. Second, Mason's picture is 2MB, bigger than everything else combined!
In particular, it would be great update a function or class select it and press a button to run the updated version in the REPL so that you wouldn't have to copy and paste it there manually.
Additionally, and perhaps counter-intuitively the server-side solution was better for folks in areas with bad internet and computers. Downloading 10mb of JavaScript is a lot for some people and sometimes their computers would run out of memory parsing the JS.
Is a Typescript option in the pipeline? It's my favorite :)
This would make Repl.it a fantastic product for API example code testing.
It seems as if this project has gone from open source to a closed source service ? [ https://github.com/replit/jsrepl ]
Are Facebook, Google, and all the other name brands you are using to promote your product using your proprietary service, or the older open source stuff? If you have gone closed source, you should only be using names that are using the proprietary product.
It seems like putting "Open Source" on your front page in a big headline is a bit misleading if you are now a proprietary service. Labeling "Open Source" as a key feature seems disingenuous if you used to be open source but are no longer. If the case now is just that you use open source software, I don't think "Open Source" as headline is appropriate, as that is true of almost any company. The implication with listing "Open Source" as a headline is that your product is open source.
The "open-source" section on the homepage is intended to show that some open-source projects (for example Jest https://facebook.github.io/jest/ were repl.it is embedded on the homepage) use us as a playground, for bug reports etc.
As for the logos they are either users or customers of the the Classroom product: https://repl.it/classroom
Google, for example, uses the Classroom product to spread programming education. I think they have a program where they send teachers to schools to teach computer science. And there teachers wanted to use Repl.it etc.
Thanks a lot for the great classroom product, and your support. It made my work a lot easier.
Also why is your comment kinda-greyed out?
In addition, their product can be used to help open-source projects with documentation, code running, etc.
When I read "Open Source" near the bottom, that's what I read (the we help you with your open source projects).
Also, any company is allowed to use names as long as they have an agreement with the company in place. Whether or not those companies use 1 of the company's products or all of them doesn't matter much. You see this a lot on Enterprise-oriented websites. Not all customers who leave case studies will use all the products.
As I understand it, this is no longer the case (as compared to say an open core company). They had some open source software. They abandoned it. They hope to open source their tech in the future, but currently they are closed source proprietary tech on top of the usual Linux, node, etc infrastructure.
They may be used by, or useful for open source projects, but currently they are not what most people would consider an open source company. I think that requires at least an open core, which to my understanding is not currently available.
Repl.It was easily the best tool out there for quickly prototyping solutions and testing them out for the languages that I don't use often and don't have a dedicated environment set up for.
As part of that month, I started tracking each of the online REPLs I ended up using and threw them all into a gist[2]. Turns out you can do a lot of programming from the browser these days.
[1]: http://adventofcode.com/2017
[2]: https://gist.github.com/danprince/0f4a200319c95209c9c028b296...
[0] https://github.com/atom/xray#web-compatibility [1] http://glitch.com/
1. Codepen (pure HTML+CSS+JS+frameworks)
2. jsfiddle.net/ (pure HTML+CSS+JS+frameworks)
3. Cloud 9 (full ide?)
4. https://anvil.works/ (pure Python)
5. CaptainDuckDuck ?
6. Repl.It
8. Runkit.io (pure node.js)
Other ?
Right now I'm using the remote deployment feature of PyCharm to run tensorflow code on different remote GPU servers, but I'd like to uncouple the IDE from my local machine.
Ideally, I'd like Github to offer such service, so that I can edit the code in my repo right on github.com, specify a remote server to run it on, and seamlessly transfer/run it on that server with a click of a button.
codesandbox.io
However, fun thing to share is that a lot of kids get started programming on Repl.it and continue to use it as their IDE.
In the end, I transitioned to Visual Studio Code, but VS Code doesn't have the same inline repl (or I've yet to get it to work correctly). It sucks by comparison, but it has the advantage of actually working locally.
It would be great if Parinfer [0] were integrated into the Clojure (and Scheme?) REPL.
Thank you very much!
I like the idea of trying out new languages/frameworks using this. I would be concerned building any serious projects using Repl though. I'm worried about how much 'lock in' there is at the moment. How difficult would it be to move from Repl to AWS for example? My guess is that it would be significantly more difficult than moving from AWS to Azure or something like that. If their service is unique enough it will be a pain to move, I would imagine. But this is obviously also their advantage. I bet this is similar to the when first cloud hosting platform launched. You no longer had to rack the servers yourself but if that company failed, you were screwed. :)
For the setups that are using platform-specific features we'd like to also minimize the fear of lock-in by open sourcing our development images and the repl protocol.
Are there plans to include Erlang or Elixir or $your_favorite_language by chance?
Yes I love both these languages and will add support for them soon.
Port listening -> auto-deploy?
So cool. Now all I need is for the code editor to feel more powerful.
The repl itself is free though (unless you want private projects you can pay, kind of like Github).
Goodbye Jupyter notebooks pretty much
How do I get to a bash shell? I know how to work around the inability to run management commands but I want to show a noob the normal way to do things.
> We know a lot of seasoned users
It's actually the other way around. Seasoned users can work out how to get round the lack of a shell. Beginners will be thoroughly confused.
Just as a possible user.. I use Rubymine for my Ruby on Rails development. Not only does it give me autocomplete on my application specific methods, it understands RVM (Ruby Version Manager) and understands where all of the dependencies are locations and has indexed those as well.
I can jump into an ActiveRecord definition as easily as my own methods. And it does this when I simply open the project directory.
Sublime Text 3 and some of the other editors can do the autocomplete/inspect method for full project and dependencies, but not without manual config changes (and some googling).
This example always runs the tests when you hit cmd-enter. I was wondering how you would have a running program with tests.
I looked in https://repl.it/ibuiltthis but couldn't easily find examples of NodeJS projects. Could you point me at one? (Feel free to point me at a better forum for these noob questions.)
I started moving my blog to Repl.it, can be found here: https://repl.it/@amasad/blog
Being hosted on Repl.it -- can you still SEO things for google?
But also, we're VC-backed, however, we're not the kind of startup that wants to grow at all expenses. We want to get that dough.