Yesterday, there was a big discussion on Twitter on how hard it is to start hacking on a js project. One comment by Dan Abramov struck me in particular: "Right: don’t use tools, face a problem, choose a tool or roll your own. Wrong: learn tools that don’t solve your problems, hate the tools."

This is spot on. All the solutions presented in this thread do not solve the problems I have when I'm hacking on a new project.

My dream PHP Setup

Back when I was 14, I had the best setup I've ever used in my life. Here it is:

  • Launch WinSCP and connect to fooo.fr.
  • Create a file test.php, write <?php echo 'Hello World'; locally with EditPlus 2, press cmd+s to save, wait 0.5 second for the upload.
  • Open my browser and go to http://fooo.fr/~vjeux/. Click on test.php.
  • ?????
  • Profit

Challenge

I want to get the same attributes but with JavaScript and React. Here are the constraints:

  • No setup: I'm happy to have to setup something initially (dedicated server, apache, php...) but nothing should be required to create a new project. No npm install, react-native init, creating a github project, yo webapp...
  • One file: I want to write a single js file to start with. No package.json, no .babelrc, no Procfile...
  • Sharable: I want to be able to share it with a url without any extra step. No git push heroku master or git push gh-pages.
  • Keeps working: Once online, it should stay there and keep working 6 months later. No npm start to run it, no special port that's going to conflict with my 10 other prototypes...
  • Not generic: I don't care about it being generic, I will use whatever transforms you decided. Happy to write js without semi-colons and using SASS for my CSS if you checked all the boxes above.
  • Not prod-ready: This setup doesn't have to be prod-ready, support unit testing or anything that involves it being a real product. This is meant for hacking on stuff. When the project becomes good, I'll spend the time to add all the proper boilerplate.

So, that's the challenge. Can you make it happen?

If you liked this article, you might be interested in my Twitter feed as well.
 
  • Daiwei

    I had exactly the same need, so I created my own solution https://github.com/d6u/web-playground

    - No setup: one time install initial "npm i -g web-playground". Run "wpg" (literally, no additional options) in a empty directory for each new projects, and run "wpg" (again, no additional options) again to start browser and hacking.
    - One file: it only supports one JS file, unfortunately/fortunately?
    - Sharable: "wpg -b" will bundle all JS and CSS into a single index.html file, you can just send it using email.
    - Keeps working: well, keep a static html running is easy
    - Not generic: has built in SCSS and Babel support (still babel 5 sorry)
    - Not prod-ready: wpg is really limited for just very early prototyping

  • chestozo

    Why not jsbin.com? The only thing that I am not sure of is "Keeps working"...

  • RusAlexander

    You want to back in place where no git push, but where you been uploading via ftp woth a source control hell. With more things you have to learn on start, web servers set up, url rewrite, cgi... instead today you have npm install && npm start

  • Pop Vasile

    I guess there's nothing easier to use than Meteorjs + React. Nothing.

  • Jesse Sibley

    Can totally relate to this. Definitely going to give this a shot!

  • Joel
  • http://www.pkasid.com Paris Kasidiaris

    Maybe you should give a try at http://www.sourcelair.com.

    It is an in-browser IDE that supports JavaScript (browser and Node.js) out of the box. It provides you with a boilerplate for each project you create (no need to create any files yourself to get started).

    It also provides each of your projects with a public URL (subdomain) mapped to its web server, which you can share with anyone and works even hours after you logged out.

    There are several other fancy features that you might be interested in, but I guess that this should be enough for you to just give it a try. I have to make the disclaimer though that I am one of the co-founders of SourceLair.

    Hope I helped 😊.

  • http://pixelhunter.me voronianski

    Your challenge is about to introduce one more level of complexity or new tool that newbies will need to learn. What is the problem with a http://fooo.fr/~vjeux/ and uploading there `test-something.html` file? My solution to your problem is this gist - https://gist.github.com/voronianski/f67f4973687434f474b4 It's simple html file that includes browser bundles of React and ReactDOM with Babel in-browser transpiler.

  • http://www.salsitasoft.com Matthew Gertner

    Isn't the requirement for an IDE that automatically uploads your files to a server when they are saved orthogonal to the JS-related question (which a few people in this thread seem to have answered adequately)?

  • tiptronic

    Hm... 'No setup' seems to mean: No setup except installing node, npm, wpg and its dependencies 😉

  • tiptronic

    So you can put Meteorjs + React on a clean VPS and just click and run? Wow - that's easy 😉

  • http://daiwei.lu Daiwei

    And of cause you also have to buy a computer, finished first time config, figure out how to use terminal, set currect PATH in shell 😉

  • tiptronic

    Not true (because you don't need to buy a computer to get some webspace) - AND (btw), if you rent some basic VPS in close to no cases is node and npm installed (Aoache, PHP, Perl, Python mostly is) - nor do you have shell-access. So my commentary was not meant as joke, but out of practical experience...

  • http://daiwei.lu Daiwei

    Understood. But wpg is not meant to run on server anyway. It's very basic and only supports browser code. If you have nothing but a browser setup, you should be able to use codepen.io. However, you can bundle the result of wpg (which is also very basic, not meant for production) into a single html file, which I think you upload to anywhere for the internet to view.

  • tiptronic

    Don't get me wrong - I like the idea of wpg pretty much, I was merely commenting the 'No setup' portion of the comment 😉
    I will try wpg asap - so thanks for this hint (and tool) anyway!

  • http://daiwei.lu Daiwei

    Haha, I see. Sorry for being so serious. I was half joking at the beginning. But yes, any feedback is welcome.

  • http://pixelhunter.me voronianski
  • nickdreckshage

    Ask and you shall receive (or be careful what you wish for...)! https://github.com/ndreckshage/sambell -- doesn't hit everything but working in that direction. 1 file for a universal single page app!

  • Eduárd Moldován

    Reading this a few months later - any solution?

  • dothash

    It's not every step you wanted it to be, but it's not much you need to do before start hacking / prototyping.
    https://github.com/rocjs/roc

  • http://www.hire-php-developers.co.uk Jonathan Doherty

    Nice article.

  • Marks Polakovs

    It's not quite what you want, but https://hyperdev.com/ seems to be scratching a similar itch.

  • gansai

    https://plnkr.co/ - PLUNKER

    https://codepen.io/ - CODEPEN

    These are quick prototyping solutions on the web, as far as front end is concerned.

    (currently blogging @ http://iotenthu.com

 

Related Posts

  • March 6, 2012 Github Oauth Login – Browser-Side (15)
    I'm working on an application in the browser that lets you take notes. I don't want to have the burden to save them on my own server therefore I want to use Github Gists as storage. The challenge is to be able to communicate with the Github API 100% inside the browser. Since it is a […]
  • September 11, 2011 WebGL – Julia 3D Representation (0)
    At school we've been studying Lie Algebra and we were asked to make a 3D representation of a Lie Group. We chose to represent Julia Set in the Quaternion domain. We were really impressed to see that it was possible to generate many different forms given such a simple […]
  • April 3, 2014 Hack is to PHP what ES6 is to JavaScript (11)
    PHP and JavaScript are both renowned to be languages with a lot of quirks. However two major initiatives on both sides, Hack for PHP and ES6 for JavaScript made the languages much better and modern. In this article I'm going to show all the ES6 features that are also in Hack. Arrow […]
  • August 14, 2009 Mysqli Wrapper – Short and Secure Queries (29)
    Mysqli Wrapper is shortening the code required to run queries, make them 100% safe against SQL Injections and gives a handy Array as result. No more pain writing queries! You can view the source at the MysqliWrapper Github Repository. When developing a PHP application, SQL […]
  • November 4, 2013 Bitwise Truthiness (0)
    In this blog post, I explore another form of truthiness in Javascript. What happens if you use a bitwise operator on a value like 0|value or ~~value. Context We recently turned on the JSHint bitwise rule by default and the following code was caught. var isValid = false; for […]