Relay, scrolling connections

react relay

Relay doesn't solve for you how you should render your components. Relay is "universal" and doesn't even assume it will be running in a browser context. It focuses only on providing an abstraction to work with GraphQL – the same way React focuses only on rendering. Each library solves one single problem at a time (and hell, both are complex enough problem to solve already).

Because these libraries are very generic, it's now up to the community to solve the "more specific" parts. Just search on NPM and you can find tons of React libraries already, some might help you to solve part of the problem you want to solve.

This article demonstrates one use-case: implementing a component handling the scroll of a list to pull more data of a GraphQL connection with Relay.

🎉 There are some OpenGL in the Project September fashion app!

react opengl gl-react

🎉 Hooray! We recently released an iOS app called Project September.

This application is built with nice tech stack including React Native and GraphQL. The backend is powered by Scala, a robust functional language, and we use many other cool techs.

This fashion app needed some fancy features: one was demo-ed at last React.js conference with the ability to do localized blur on text over images.

We have developed gl-react to abstract GL in React paradigm – with two companion libraries gl-react-dom and gl-react-native that glues React Native with OpenGL.

Let's first see 2 demos of OpenGL usage in our app, and then we'll write a bit about how it's hard to get animations right.

Universal GL Effects for Web and Native

react webgl gl-react

Last February, I talked about gl-react at React.js conference.

Checkout talks of this conference if you are interested by React subject. I want to thanks the incredible team behind React.js for the awesome conference and giving me the opportunity to come to San Francisco.

This article will cover some more technical detail of gl-react that wasn't explained in the talk.

Also, I'll try to not go TOO MUCH into technical detail neither, because it would take weeks to cover gl-react features and its implementation tricks!

Making performant React applications

react vdom

^ Sorry guys, you may have notice the blog post date is wrong. I won't change the URL, but thanks to how time works, this will be fixed in one month anyway :-D

ReactEurope conference was to me incredibly inspiring and promising. Yersterday got tons of news and tweets from JavaScript community.

One tweet and blog post by the great @aerotwist got my attention.

I would like to express here my opinion and feedback on using React.

I've been using React for almost 2 years now, and always in performance intensive use-cases, from Games to WebGL.

I've created glsl.io and I'm working on Diaporama Maker. Both applications are built with React and combined use of HTML, SVG, WebGL.

Diaporama Maker is probably the most ambitious piece of software I've ever personally done.

In short, Diaporama Maker it is a WYSIWYG editor for web slideshow (mainly photo slideshows). It is a bit like iMovie with the web as first target. The project is entirely open-sourced.

Currently, I am able to render the whole application at 60 FPS and this is still unexpected and surprising to me (press Space to run the diaporama on diaporama.glsl.io demo). Well, more exactly, this would not have been possible without some optimizations that I'm going to detail a bit at the end of this article.

IBEX, my js13k game

gamedev js13k

I've just finished and submitted my game for js13kgames, a contest where you have to make a web game in less than 13 kilobytes of a ZIP archive.

PLAY IT HERE / github

I had a lot of fun making this game and I think it is by far the best game I ever finished. It is a bit a continuation of my "antsim" game prototype in the idea that you don't control directly the entities but you are at an higher level with simple interactions.

The game should be performant enough but however require that you have a good hardware to support WebGL and some advanced limits (I used too much uniforms). I'll talk more about the compatibility and performance issues in a next postmortem article.

If it doesn't work for you, please report me a dump of http://webglreport.com/.


48 hours to prototype an Ant Sim Game

gamedev ludumdare javascript phaser

I gamejam-ed last weekend to the Ludum Dare theming "Beneath the Surface" (29th edition).

I enjoyed that time a lot. What changed from the previous Ludum Dare for me is that I'm now —and happy to be— a father, and I'm enough trained to wake up at 3am so I could be there attending the beginning!

This article is my diary of this incredible 48 hours past to develop "Anthill", a minimalist anthill simulation game. This postmortem will explain what went right and what went wrong for this compo.

The Game

I haven't played any Ant Simulation Game but I recently played a lot "Banished", an awesome city-building strategy game, and I was inspired by the "assign jobs to people" gameplay of this game.


Developing a complete game in 48 hours (including sleeping) is tough, especially that it is also about making the graphics and the music!

The game resulting of these 2 days is more a prototype than a finished game: the simulation remains minimalist and fastly boring, the food is the only resource you have to care about.

Here is a 300x accelerated screencast of the developement of "Anthill":