Functional Reactive Game Programming

RxJS 5, Immutable.js and three.js (WebGL)
https://github.com/Lorti/corsair
https://manu.ninja/functional-reactive-game-programming-rxjs-5-immutable-js-and-three-js

Transcript

1. Functional Reactive Game Programming
 RxJS 5, Immutable.js and three.js @manuelwieser
2. Manuel Wieser Lead Developer
 Technical Lead/Senior Front-End Developer
 karriere.at Lecturer
 Hypermedia User Experience Engineering
 FH OÖ Campus Hagenberg
4. RxJS RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.
5. const button = document.querySelector('button'); Rx.Observable.fromEvent(button, 'click') .subscribe(() => console.log('Yay!'));
6. Immutable.js Immutable data encourages pure functions (data-in, data-out) and lends itself to much simpler application development and enabling techniques from functional programming.
7. const map1 = Immutable.Map({ a: 1, b: 2, c: 3 }); const map2 = map1.set('b', 1337); map1.get('b'); // 2 map2.get('b'); // 1337
8. three.js The aim of the project is to create an easy to use, lightweight, 3D library. The library provides <canvas>, <svg>, CSS3D and WebGL renderers.
9. const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); function render() { requestAnimationFrame(render); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); } render();
10. const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, windowWidth / windowHeight, 0.1, 1000); camera.position.z = 5; const renderer = new THREE.WebGLRenderer(); renderer.setSize(windowWidth, windowHeight); document.body.appendChild(renderer.domElement);
11. const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube);
12. function render() { requestAnimationFrame(render); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); } render();
14. Thank you for your attention Code
 GitHub.com/Lorti/Corsair Blog manu.ninja
 Twitter @manuelwieser