Interactive programming Flappy Bird in ClojureScript

Bruce Hauman6 HN recommenders · 2015–2020
55K views · demo · evergreen · Uploaded 2014-04-29

Bruce Hauman live-codes Flappy Bird in ClojureScript in about six minutes, using figwheel to hot-reload changes into the running game. The demo shows game behavior being changed interactively without restarting.

It is the canonical demo HN people cite for live interactive development and hot reloading, as proof the workflow is real and not smoke and mirrors.

Watch on YouTube

9 comments from Hacker News

@dustingetz2015 · in “Myself – v1.0.3”

This is called interactive development; if you liked this, check these out: * Interactive programming Flappy Bird in ClojureScript: [VIDEO] * Live-editing React app without refresh: [LINK] These demos aren't smoke and mirrors, I and many others do interactive development, 8 hours a day, writing regular web apps.

RecommendsView on HN
@base6982015 · in “Lisp is still a secret weapon”

If you're starting from from scratch it looks really awesome. No callback hell and in believable tooling. Watch these talks to see what I mean about tooling: Few minutes [VIDEO] Longer [LINK]

RecommendsView on HN
@nprescott2016 · in “Fun vs. Computer Science”

I don't disagree with the article, but I also don't know that pushing the boundaries of interactivity and "fun" are relegated to academia. Iterating on what makes things fun is (probably) highly unscientific and might be better left to people more focused on it directly, such as game programmers. As far as interactive development of games goes, I still marvel at Bruce Hauman's demo[1] of "Interactive programming Flappy Bird in ClojureScript". I think the best hope of achieving what the author is suggesting is in the development of something similar, either direct REPL access to the game environment or DSLs embedded in the game engines (which already exist I'm sure). Outside of the big name engines, I'm curious about what existing options are (leaving out anything browser based because JavaScript is an obvious example), I know of LÖVE[2] but I'm not familiar with how "fun" games made in it are. [1]: [VIDEO] [2]: [LINK]

Strongly recommendsView on HN
@lambdadmitry2017 · in “Re-Frame: a Reagent Framework for Writing SPAs, in ClojureScript”

Well, the CLJS->JS side of story is very polished, Figwheel [1] makes things work smoothly (in-browser errors and warnings, sourcemaps, hot reload all work from the box). You can check out [2] if you are interested. There are two areas that still can be improved in my opinion: * the asset story. Right now I use a gulp task that prepares my assets and outputs CSS into a folder known to Figwheel, which makes hotreloading work automagically. However, if you need a complicated interaction between JS, HTML and CSS (i.e. you use CSS Modules), it can be a bit more involved. * the NPM deps story. AFAIK it's gonna be solved in CLJS core soon, but right now your best bet is to pack all NPM deps using native JS tool (webpack, rollup or w/e) into one file and include it before CLJS-generated JS code. Ah, and in some cases you will need externs, too. It's actually way less complicated then it sounds, and if you need any help, feel free to reach me through mail (my nickname here at gmail.com). I would be happy to help. [1]: [LINK] [2]: [VIDEO]

@freshhawk2017 · in “Show HN: Mesh IDE – a code editor that feels like a spreadsheet”

I'm not sure if the parent did, but I followed what you were looking for and the answer is still "try clojure", perhaps more specifically it is "Try the Clojure libraries figwheel and devcards to do web stuff" but the push for immediate feedback and "interactive programming" is central for everyone. It's a community that took Bret Victor's Inventing on Principle talk to heart, already agreeing due to the REPL centric workflows that most people used. Bruce Hauman has some good talks about his tools, which are GUI application-centric and a joy to use [1][2][3] If you aren't doing web or native mobile GUI stuff then the default tools have immediate unit test/linting/spec compliance feedback triggered every time you save a file. Unless you mean you want a very simplified language, in which case you should look elsewhere. Clojure has definitely chosen the high power side of that trade-off, but this also allows some truly first class tools to be developed. [1] [LINK] [2] [VIDEO] [3] [LINK] <- this one in particular is original and outstanding in my opinion

RecommendsView on HN
@Jach2019 · in “Porting 30K lines of code from Flow to TypeScript”

Does TypeScript let you build a program interactively as a living thing? Example of what dynamic languages for the browser (ClojureScript) have been doing for 5 years now: [VIDEO] Given that frontend work is so often an endless series of tweaks I don't know how people stand doing anything big for a long duration the classic way of edit -> compile (refresh) -> rebuild runtime state to look at what changed/play around/test -> repeat.

@LandR2019 · in “Learn ClojureScript: Functional Programming Concepts”

One of the best things about ClojureScript is figwheel and realtime programming. You can see it in action here [VIDEO]

RecommendsView on HN
@minikomi2020 · in “Ask HN: What change in your programming technique has been most transformative?”

Sounds like you're remembering John Carmack developing VR using racket: [LINK] edit: Also check Arcadia for Clojure: [LINK] And developing flappy bird in clojurescript (canonical figwheel example): [VIDEO]

@Nihilartikel2020 · in “Nubank acquires Cognitect”

From my standpoint as a one man show, it's invaluable to be able to write the web client and backend in the same language, to share code between them... and have that one language NOT be JS. Clojurescript with Rum/Citrus or Reagent/Reframe deliver on the promise of React/Redux with much less fuss and overhead. Editing JSX is a pain in comparison to the Hiccup syntax used more often in CLJS, e.g. [:div {:class shiny} "some stuff" [:button "OK"]] - with the structural editing in any good Clojure editor you can cut, paste, entire blocks of tags, or slurp a tag from outside your div into it, or spit one out, all with a few keystrokes, never stopping to find some closing </div> tag.. I guess some JSX IDEs might do this, but it's really nice that the HTML is represented as just another piece of data, not some weird chimerical syntax bolt on. With Figwheel or ShadowCLJS hot reloading is instantaneous and doesn't even interrupt your webapp. If they're written properly, functions and the app state are not conflated at all, so you can modify any function in your app's rendering or behavior and as long as they aren't incompatible with the runtime state, it will just pop right into your browser. Illustrated well in this video where the author is interactively re-implementing Flappy Bird: [VIDEO] I feel particularly strongly about this having started out doing front end work primarily in cljs but recently being falling into using React/Redux for a contract and being REALLY strung out by t

RecommendsView on HN