Thu, Jun 7, 2018Repl.it ❤️ React
Despite the negative press covfefe around React.js when it first came out, I instantly fell in love with it. The thing I liked the most about it was the component model. Until then the JavaScript community has been trying for years to come up with the correct abstraction for creating reusable modules, but it was always leaky. Because React components are essentially functions, and because functions are the undisputed champion of reusable code, it worked out extraordinarily well. You don't need dependency-injection, or any other modularity hacks, you simply pass props! Also, the virtual dom made it so that components are, by default, protected from other components prying into their internals. That's just one aspect of what made me love React and it was a significant factor in me applying to work for Facebook in 2013. After I got in, I worked tirelessly to join the team behind React.js, and in early 2014 I was able to do so, and my first task was to build the React Native packager and CLI. When we launched React Native in 2015, you could just run a single command, and you'd have the entire development environment setup. Developers were so thrilled with this, that some tweeted out the command. I learned that when you make things easier, you get a lot more people through the door. So when Haya and I started Repl.it we wanted to go further than zero-config quick-starts and build a platform where you can code in any language, any framework, from anywhere. We initialy focused on education because we thought that teachers and students are underserved by the tech community. However, now that we're in 15% of US schools and growing worldwide, our technology has tranceded the education use-case, and we have an growing community of developers using Repl.it to build and deploy apps. Much of our work is supported by innovations from the React community (our apps are built with React, our IDE plugin system is inspired by Redux, etc.) so now we want to leverage our platform to give back to the community. We want to build easy and accessible tools for you to use. You can use it for developing apps, to debug libraries, or for prototyping. Furthermore, we want help spread the React technology by making it easier for outsiders and underserved communities to learn and participate in the larger developer ecosystem. Today we're excited to announce that you can try, build, and deploy fullstack React apps starting with a few of our favorite React frameworks. Before I go on, just want to note that this is a public beta release (it literary came out today) and we'll be iterating heavily on it for the next couple of months and we rely on your feedback to make it better.
- Mon, Jun 4, 2018
Don't Let Your Development Environment Rot
Most systems -- both natural and artificial -- decay, rot, and eventually die. Software is no different. A lot has been written about fighting "software rot" but there's another type of rot related to software that's not talked about much -- the development environment rot. When starting a new project, you make decisions like what language to use, and which platform/runtime to run on, all of which dictates what your development environment will look like. Then you'll also make explicit choices for the development environment, like how will it run on in development mode, will it run in a Virtual Machine? Maybe on containers? How will the environment be bootstrapped? Also, what does the developer work-flow look like? What test framework and runner to use? How do you package your software? etc., etc. As you develop your software and the months and years go by, slowly but surely, you'll add more components to your system, you'll have a lot more code to test, and the overall complexity of the system increases. Now, we know that if you want to fight code complexity, you refactor your code, but how do you detect and what do you do about development environment complexity? What makes this a tricky question to answer is that the pain is not so apparent to existing developers. Like in the boiling frog fable, the frog doesn't notice the temperature increase until it's too late. Similarly, developers don't see the complexity creep until it's far too complicated that it requires you to stop making progress on your product to stop and fix the development environment rot. So how do we keep the development environment rot in check? A few ways: Keep an eye on the developer on-boarding experience
- Tue, Mar 13, 2018
Repl.it: the IDE That Grows—from Playgrounds to Fullstack Apps
At Repl.it we come to work every day to explore a single idea—what if programming just worked? What if instead of fiddling around with packages, configurations, and mismatching versions, you just open your IDE and start coding. What if developers can go from an idea to coding and shipping software with no time in between. What if teachers who want to teach programming don't have to also work as IT administrators. What if students can just code their homework without having to set up the development environment on every computer they wanted to code on. There exists an inverse relationship between developer tool sophistication and the getting started step. In other words, the more sophisticated our tools are, the harder it is to set up. Some would go as far as to say that programming is getting harder to learn. Given that progress in programming and developer tools will continue we have to actively fight back against the ever-increasing complexity of setting up the dev environment. Online coding playgrounds solve part of the problem by getting people to code as soon as possible. They're pre-setup environments that make a lot of decisions for you. They make it easy to get started, to learn to code, and maybe even prototype simple apps. However, up until now, they lacked universality which is key to computing. In other words, you can only use one language, maybe a few frameworks but you're often limited by what you can do. Today, we're changing this. We want the best of both worlds, an IDE that starts out looking like a playground but can grow with you as soon as you require the extra power. Here is how the IDE can grow from a simple Read-Eval-Print-Loop to a full-stack application development environment: Repl.it will always start out as a simple REPL, with a single file editor and a console. You hit run, a new environment is created, your editor script is evaluated, and then you can interact with the result in the console. If you want to use files, write to files, split your code into modules, etc., you just do that and behinds the scenes the environment will switch to one where you're interacting with the filesystem. Your code will start to compile and run as you'd expect it when you run a project.
- Mon, Mar 12, 2018
Live Server Development and Deployment (Beta)
Repl.it is becoming the platform where developers come to learn and build. With web hosting we also made it possible to host websites and since then we've seen an explosion of websites hosted on Repl.it. Today we're going further by making it possible to deploy servers on Repl.it. Just open a port, run your code, and that's it, it's deployed! For our 90s website competition I built this socket.io-based chat hosted on Repl.it: 90s-chat--amasad.repl.co Here is the repl for it:
- Thu, Mar 8, 2018
Require Ruby Gems
On the heels of our Node.js npm support announcement, we're pleased to announce that we now support Ruby Gems too. We're excited to have the Ruby community join the fun. The way it works is slightly different from our Node or Python implementations. In Node or Python you simple require/import the module you'd like to use, and we'll automagically install the package for you. In Ruby, unfortunately, we couldn't find a reliable way to map requires to Gems so we had to go with a neat feature of Bundler: bundler/inline where you can define your gemspec in the code. This works well for Repl.it because we'd like to make it easy for people to use the repl without having to add files. Here is an example, this uses the gem colorlize to print an ascii drawing of the American flag: We're still working on improving this, look forward to the following the coming days: Per repl caching: install once, there forever
- Wed, Mar 7, 2018
Introducing Node.js package support
Ever since we introduced third-party package support for Python we've seen an explosion of exciting programs on Repl.it. Everything from games to machine-learning applications that just weren't possible before. Today we're happy to announce that we're expanding this to support Node.js. Just require your dependencies and we'll handle the rest for you. Here is a working repl that gets my Github stats. It uses request to fetch the data and underscore to filter the relevant stats. This is an early (open beta) release so please let us know if you hit any bugs or issues. We're currently working on the following: package.json support: if you have a package.json in your project we'll use that instead of parsing the requires. This will likely come in the next couple of days. Caching: if you install a package on a repl it will be cached forever.
- Mon, Feb 26, 2018
New and improved repls page
People use Repl.it in a variety of ways; some use it for building and shipping applications, while others use it for working on homework, and many others use it as a quick prototyping/experimentation tool. Supporting all these use cases (and more) is something we care a lot about, but up until now there wasn't an easy way to, for example, quickly go back to a project that you continue to work on every day. Today we're excited to announce some of the changes that we've been testing for the past couple of weeks. Going to "my repls" the first thing you'll notice is a big "Continue coding" section with the projects that we think you might want to go back and work on. Starring Additionally, you can now star repls, so it's easy to go back to them!
- Wed, Feb 14, 2018
Modular, fast, small: how we built a server-rendered IDE
At Repl.it our mission is to make programming more accessible, which means our coding environment needs to be lightweight, load fast, and work from anywhere in the world. However, as with so many software projects that evolve with time, we accumulated some bloat (luckily, we haven't included a mail client yet) and quite a few ad-hoc hacks to glue everything together. In this post, we'll go over how we designed our new IDE to have a small core (everything is a plugin), to be easily customizable (even on the fly), and to server-render. The old IDE React encourages you to layout and compose your components as they appear on the page. Our workspace started out looking something like this: But this lacks configurability. For every language, we have a slightly different configuration. Some have tabs, console, a web viewer, or language-specific components like python turtle. Additionally, every language has a different engine powering it with its own interface and set of capabilities. All this configuration logic used to get crammed into the top-level component with ever-increasing branching logic. Furthermore, runtime configuration must be explicitly written for every language. Modifying the layout for one language leads to more hardcoded logic and components and single-use components. This, in turn, caused making changes to one component a game of updating and testing every possible parent. Rewrite
- Fri, Jan 26, 2018
Teaching refugees how to code
At Repl.it our mission is to make programming more accessible. We can’t do this alone so it’s great to partner with non-profits and hack clubs that share our mission. Re-coded is one of those non-profits, they're teaching programming in the refugee camps in Iraq and Turkey. Today I’d like to share with you their story of how they found Repl.it useful in overcoming logistical challenges. By: Gabe Jackson At Re:Coded, it’s our goal to provide a world-class education to refugees and displaced persons who would not otherwise have access to such opportunities. In making that goal a reality, we depend on a number of tools in the classroom. One of our favorites is repl.it, an in-browser IDE and REPL that we use for everything from facilitating our selection process to live coding through examples in class to creating personalized homework assignments for students.
- Mon, Jan 22, 2018
Your websites hosted on Repl.it
People in our community build awesome games, apps, and websites on Repl.it's web programming environment, but until now they didn't have any easy way of sharing these creations with other people. But today we're fixing this: every web program you write we will automatically host for you under a subdomain with your name. You're then free to share the website, make it your homepage, submit it as homework, or even build it as your startup company. Here is a quick video of how it works. Notice how fast you can go from a project to a hosted website: Static site hosting is only the start. Pretty soon you'll be able to host all sorts of apps and servers on Repl.it.
- Sun, Nov 12, 2017
New in Repls: autosave, custom urls, and more
We are always excited about launching new features and sharing with you, our dear users, what we’ve been up to. For the past few months, Amjad, Mason and I have been working hard and last night we quietly launched the new repl features. These features required a lot of infrastructure and data changes which is always tricky to execute. We ran into some technical difficulties last night with the data migration but was able to bring the site back up and things have been running relatively smoothly since then. However, since radical changes were required to get this out we’re still working through some of the issues. If you see a bug or if you have a repl that’s not working please let us know and we’ll fix it. We hope we have your support as we work through the issues. One thing we can promise you is that this change will unlock so many amazing features and long-term stability and reliability starting today. Note that the classroom product is not affected by this at all. This is only a “repls” product change. Now on to the new features 🥁🥁 Autosave When we promise we deliver. As of last night your code is autosaved by default. The new interface will include only two buttons: the run and the share button. You don’t need to worry about saving your code anymore, we’ll do it for you, so no code is lost, all your work is saved in (my repls) .
- Thu, Sep 7, 2017
A Few Updates in the Workspace
We strive to make the workspace as useful as possible while keeping it intuitive and approachable. We get a crazy number of requests for features every day, not to mention our own ideas. It becomes a challenging balance between feature creep and simplicity. Lately we've added a few of these features that we hope you'll find useful and, if not, you won't even notice they're there. Formatting in Javascript Javascript is the first language where we've introduced an automatic formatter. If you click the icon we'll run your code through prettier which reprints your code in a consistent style. We've already been using prettier internally since it first came out in and it has been a huge win. We'll be rolling out formatters for other languages in the future. Uploading Files
- Tue, Aug 22, 2017
Two Stories from Our Community
Like any other startup, we go through ups and downs. However, we try to keep a positive energy, and you, my friends, contribute to that by sending your love, support, and thanks everyday. Above all, you inspire us with stories of how our product helped you learn, teach, and even develop a new skill to land a better job. Today I’d like to share with you two stories from two Replers: Ruslan a software developer from Scotland, and Mark a math teacher from Houston. Landing a self-driving job Ruslan (@kuddai), a Physics Major, wanted to land a job in doing software engineering. So he spent a lot of time practicing coding using Repl.it and eventually was able to land a new job software engineering job in the cutting edge field of self-driving! Here is him telling the story: While I was doing my M.S. in Informatics at University of Edinburgh, I realized that I lacked practice in coding interviews because my first major is in Physics. During my preparation (“Cracking coding interview”, “Algorithms by Robert Sedgewick”, hackerrank, etc.) I needed some general place to store my solutions for coding exercises. Eventually, I have chosen repl.it because:
- Tue, Jul 4, 2017
Your Repl.it Profile
We're constantly surprised and delighted by the creativity of people in our community. Whether it be games, animations, utilities, or simply snippets to answer Stackoverflow questions -- it's always fascinating to see! However, we haven't done a good job giving credits to authors for their creations. We're changing this in two ways: We're giving you, dear Repl.it user, your own user profile. Your repls will have your picture and name on the top left hand section above the editor. User profiles Right now, you can go to your account and start crafting your user profile. You can change your profile picture (it defaults to your Gravatar if you have one), add a bio (complete with links to your website or social media accounts), and if you want, even add a school, company, organization or whatever institution you belong to.
- Thu, Jun 1, 2017
One more console
Debugging web projects on Repl.it can be frustrating. Until today, there was no easy way to view your errors and console logs (unless you open your browsers' developer tools). But that's changing because we're introducing our new tabbed console view for environments that has graphics output (like Web and Python Turtle). See it in action: