Using cutting edges technologies like Node.js, Angular.js and the emscripten project, you can create super-powerful web app that benefit from the codebase of already existing native application or library. In this presentation, I explain how we used emscripten to port GDevelop, an open source game creator, to a webapp called GDevApp.com which is virtually as powerful and capable as the native app! With asm.js being developed and integrated to browsers and with the development of emscripten, we are likely to see more and more applications and games made using this approach.

1. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
@GDevApp
facebook.com/GDevApp
https://gdevapp.com
Node.js Paris – Fevrier 2015@GDevApp http://gdevapp.com
From a native app to a webapp using Node.js and
emscripten
Flavored with a real world example:

2. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
Student at Ensimag
GDevelop
Open source game creation software
About me
@FlorianRival
florianrival.com
github.com/4ian

3. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
Native app
Full JS (Node .js & Angular.js)
powered app
WTF?

4. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
C++ JS

5. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
C++ JS

6. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
How GD works
Eventsaretranslated
toJavaScript
Assetsanddataare
compiled
Your awesome game

7. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
Architecture of the webapp
GDcore
Interface
(wxWidgets)
Extensions
C++
libGD.js
= The web app
frontbac
k

8. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
Working with Emscripten
1) Expose your classes
3) Use it in JS!
2) Launch emscripten

9. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
1) Expose classes
Original class
(unmodified)
Embind
(Wrapper code)

10. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
1) Expose functions
Original class
(unmodified)
Embind (Wrapper code)

11. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
2) Launch emscripten
Compilation with
Clang
LLVM bitcode
=> asm.js
output.js

12. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
Using Emscripten generated code in Node
All objects binded with emscripten are in gd.*

13. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
Using Emscripten generated code in Node
C++ classes JS objects (constructed with new)
Inheritance Working as expected
Types Converted transparently

14. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
Working with emscripten
Objects created must be deleted
Beware of memory management

15. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
Working with emscripten
Write tests!
Miscompilation?

16. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
Working with emscripten
Huge files
Not a problem on a server
Compress for clients

17. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
Working with emscripten
Can compile entire codebase
without changes!
Compilation to asm.js, performance
are comparable to native app
No plugin, no intrusive changes, real compiler
It Just Works

18. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
Emscripten: For which usage?
Porting part/core of a native app
Reusing a highly specialized library
GDevAppUnity
Game engines
Physics libraries
Emulators
Image manipulation
https://github.com/kripken/emscripten
Tons of examples
On emscripten webpages
Processing

19. @GDevApp http://gdevapp.com Node.js Paris – Fevrier 2015
Thanks!
@GDevApp
facebook.com/GDevApp
https://gdevapp.com
https://gdevapp.com
Node.js Paris – Fevrier 2015@GDevApp http://gdevapp.com