CodeFest 2019. Florian Rival (Facebook) — Beyond Web-Apps: WebAssembly, JS and React to rewrite native apps

16b6c87229eaf58768d25ed7b2bbbf52?s=47 CodeFest
April 08, 2019

CodeFest 2019. Florian Rival (Facebook) — Beyond Web-Apps: WebAssembly, JS and React to rewrite native apps

Can we port an existing native desktop application to a complete «JS powered» web-app matching (or even exceeding) the quality of the legacy desktop app? Sounds like a good challenge! This is what I decided to do with my game making software. Let’s see how web technologies and the JavaScript ecosystem can help. Spoiler alert: At the end, it works.

16b6c87229eaf58768d25ed7b2bbbf52?s=128

CodeFest

April 08, 2019
Tweet

Transcript

  1. 1.
  2. 4.

    3

  3. 7.

    “ open-source, cross-platform game creator designed to be used by

    everyone An editor for games Visual programming 3
  4. 8.

    “ open-source, cross-platform game creator designed to be used by

    everyone An editor for games Visual programming Output HTML5 games 3
  5. 9.

    4

  6. 10.

    5

  7. 11.

    6

  8. 13.

    The editor is getting old The editor is getting old

    Lots of cross-platforms issues with the UI toolkit, support for macOS and Linux is bad. 7
  9. 14.

    The editor is getting old The editor is getting old

    Lots of cross-platforms issues with the UI toolkit, support for macOS and Linux is bad. Iterating on the software is slow (C++ ) 7
  10. 15.

    The editor is getting old The editor is getting old

    Lots of cross-platforms issues with the UI toolkit, support for macOS and Linux is bad. Iterating on the software is slow (C++ ) Building UI is slow... 7
  11. 16.

    The editor is getting old The editor is getting old

    Lots of cross-platforms issues with the UI toolkit, support for macOS and Linux is bad. Iterating on the software is slow (C++ ) Building UI is slow... ...and limited to old UI components... 7
  12. 17.

    The editor is getting old The editor is getting old

    Lots of cross-platforms issues with the UI toolkit, support for macOS and Linux is bad. Iterating on the software is slow (C++ ) Building UI is slow... ...and limited to old UI components... ...and UX would need some enhancements 7
  13. 18.

    The editor is getting old The editor is getting old

    Lots of cross-platforms issues with the UI toolkit, support for macOS and Linux is bad. Iterating on the software is slow (C++ ) Building UI is slow... ...and limited to old UI components... ...and UX would need some enhancements The entry barrier for new contributors is high (C++ ) 7
  14. 19.

    The editor is getting old The editor is getting old

    Lots of cross-platforms issues with the UI toolkit, support for macOS and Linux is bad. Iterating on the software is slow (C++ ) Building UI is slow... ...and limited to old UI components... ...and UX would need some enhancements The entry barrier for new contributors is high (C++ ) It's time to react! It's time to react! 7
  15. 21.

    “ React is perfect for React is perfect for making

    complex UI making complex UI 9 . 1
  16. 22.

    “ React is perfect for React is perfect for making

    complex UI making complex UI Well, really?... Well, really?... 9 . 1
  17. 23.

    “ React is perfect for React is perfect for making

    complex UI making complex UI Well, really?... Well, really?... Can we have Can we have 9 . 1
  18. 24.

    “ React is perfect for React is perfect for making

    complex UI making complex UI Well, really?... Well, really?... Can we have Can we have list and trees of hundreds of list and trees of hundreds of elements, elements, 9 . 1
  19. 25.

    “ React is perfect for React is perfect for making

    complex UI making complex UI Well, really?... Well, really?... Can we have Can we have list and trees of hundreds of list and trees of hundreds of elements, elements, dynamic panels, dynamic panels, 9 . 1
  20. 26.

    “ React is perfect for React is perfect for making

    complex UI making complex UI Well, really?... Well, really?... Can we have Can we have list and trees of hundreds of list and trees of hundreds of elements, elements, dynamic panels, dynamic panels, 2d/3d visualizations 2d/3d visualizations 9 . 1
  21. 27.

    “ React is perfect for React is perfect for making

    complex UI making complex UI Well, really?... Well, really?... Can we have Can we have list and trees of hundreds of list and trees of hundreds of elements, elements, dynamic panels, dynamic panels, 2d/3d visualizations 2d/3d visualizations, nested , nested dialogs, dialogs, 9 . 1
  22. 28.

    “ React is perfect for React is perfect for making

    complex UI making complex UI Well, really?... Well, really?... Can we have Can we have list and trees of hundreds of list and trees of hundreds of elements, elements, dynamic panels, dynamic panels, 2d/3d visualizations 2d/3d visualizations, nested , nested dialogs, dialogs, drag'n'drop, search, drag'n'drop, search, 9 . 1
  23. 29.

    “ React is perfect for React is perfect for making

    complex UI making complex UI Well, really?... Well, really?... Can we have Can we have list and trees of hundreds of list and trees of hundreds of elements, elements, dynamic panels, dynamic panels, 2d/3d visualizations 2d/3d visualizations, nested , nested dialogs, dialogs, drag'n'drop, search, drag'n'drop, search, 9 . 1
  24. 30.

    color pickers, tabs, file trees, color pickers, tabs, file trees,

    a "real app" feeling a "real app" feeling, copy- , copy- paste things paste things, handle key- , handle key- board shortcuts board shortcuts , display , display and edit code in a rich editor and edit code in a rich editor show charts... show charts... 9 . 2
  25. 31.

    color pickers, tabs, file trees, color pickers, tabs, file trees,

    a "real app" feeling a "real app" feeling, copy- , copy- paste things paste things, handle key- , handle key- board shortcuts board shortcuts , display , display and edit code in a rich editor and edit code in a rich editor show charts... show charts... Can we make ambitious Can we make ambitious apps? apps? 9 . 2
  26. 32.
  27. 33.

    “ JavaScript is perfect for JavaScript is perfect for most

    applications most applications Well, really?... Well, really?... 10
  28. 34.

    “ JavaScript is perfect for JavaScript is perfect for most

    applications most applications Well, really?... Well, really?... what if we what if we 10
  29. 35.

    “ JavaScript is perfect for JavaScript is perfect for most

    applications most applications Well, really?... Well, really?... what if we what if we already have a native already have a native codebase? codebase? 10
  30. 36.

    “ JavaScript is perfect for JavaScript is perfect for most

    applications most applications Well, really?... Well, really?... what if we what if we already have a native already have a native codebase? codebase? Or have advanced Or have advanced 10
  31. 37.

    “ JavaScript is perfect for JavaScript is perfect for most

    applications most applications Well, really?... Well, really?... what if we what if we already have a native already have a native codebase? codebase? Or have advanced Or have advanced simulations/computations, simulations/computations, 10
  32. 38.

    “ JavaScript is perfect for JavaScript is perfect for most

    applications most applications Well, really?... Well, really?... what if we what if we already have a native already have a native codebase? codebase? Or have advanced Or have advanced simulations/computations, simulations/computations, or need consistent perfs? or need consistent perfs? 10
  33. 40.

    X-platform toolkit (wxWidgets) GDevelop C++ codebase GDevelop C++ codebase Core

    classes (game, scene, object, textures...) 11 Game exporter (JS "transpiler")
  34. 41.

    X-platform toolkit (wxWidgets) GUI (windows, dialogs...) Filesystem GDevelop C++ codebase

    GDevelop C++ codebase Core classes (game, scene, object, textures...) 11 Game exporter (JS "transpiler")
  35. 42.

    X-platform toolkit (wxWidgets) GUI (windows, dialogs...) Filesystem React.js powered interface

    GDevelop C++ codebase GDevelop C++ codebase Core classes (game, scene, object, textures...) 11 Game exporter (JS "transpiler")
  36. 43.

    X-platform toolkit (wxWidgets) GUI (windows, dialogs...) Filesystem React.js powered interface

    Node.js/browser adapters GDevelop C++ codebase GDevelop C++ codebase Core classes (game, scene, object, textures...) 11 Game exporter (JS "transpiler")
  37. 44.

    X-platform toolkit (wxWidgets) GUI (windows, dialogs...) Filesystem React.js powered interface

    Node.js/browser adapters GDevelop C++ codebase GDevelop C++ codebase Core classes (game, scene, object, textures...) 11 Game exporter (JS "transpiler")
  38. 45.

    X-platform toolkit (wxWidgets) GUI (windows, dialogs...) Filesystem React.js powered interface

    Node.js/browser adapters GDevelop C++ codebase GDevelop C++ codebase Core classes (game, scene, object, textures...) 11 Game exporter (JS "transpiler") libGDevelop.js
  39. 46.

    X-platform toolkit (wxWidgets) GUI (windows, dialogs...) Filesystem React.js powered interface

    Node.js/browser adapters GDevelop C++ codebase GDevelop C++ codebase Core classes (game, scene, object, textures...) 11 Game exporter (JS "transpiler") libGDevelop.js GDevelop JS codebase
  40. 47.

    12

  41. 48.

    13

  42. 58.

    Using Emscripten Using Emscripten git clone https://github.com/emscripten-core/emsdk.git cd emsdk &&

    ./emsdk install latest && ./emsdk activate latest ./emcc tests/hello_world.c node a.out.js For large projects, Emscripten provides replacements that swap GCC or Clang by Emscripten in build system (automake, CMake...) 15
  43. 60.

    Expose existing classes Expose existing classes class ObjectsContainer { Object&

    InsertObject(const Object& object, size_t position) { ... }; Object& GetObject(const gd::String& name) { ... }; } class Layout : public ObjectsContainer { public: void setName(const gd::String & name_) { name = name_; }; const gd::String & getName() { return name; }; // ... } 16
  44. 61.

    Expose existing classes Expose existing classes class ObjectsContainer { Object&

    InsertObject(const Object& object, size_t position) { ... }; Object& GetObject(const gd::String& name) { ... }; } class Layout : public ObjectsContainer { public: void setName(const gd::String & name_) { name = name_; }; const gd::String & getName() { return name; }; // ... } interface Layout { void setName([Const] DOMString name); [Const, Ref] DOMString getName(); // Inherited from ObjectsContainer [Ref] Object insertObject([Ref] gdObject object, unsigned long pos); [Ref] Object getObject([Const] DOMString name); } "WebIDL" bindings for Emscripten WebIDL binder: 16
  45. 63.

    Use Emscripten classes Use Emscripten classes Module().then(gd => { const

    layout = new gd.Layout(); layout.setName("My game level"); const object = new gd.Object(); object.setName("My character"); layout.insertObject(object, 0); console.log(layout.getName()); // "My game level" console.log(object.getObject("My character")); // Returns a gd.Object }); 17
  46. 64.

    Use Emscripten classes Use Emscripten classes Module().then(gd => { const

    layout = new gd.Layout(); layout.setName("My game level"); const object = new gd.Object(); object.setName("My character"); layout.insertObject(object, 0); console.log(layout.getName()); // "My game level" console.log(object.getObject("My character")); // Returns a gd.Object }); Converted, including JS strings (to char*) Primitive types? 17
  47. 65.

    Use Emscripten classes Use Emscripten classes Module().then(gd => { const

    layout = new gd.Layout(); layout.setName("My game level"); const object = new gd.Object(); object.setName("My character"); layout.insertObject(object, 0); console.log(layout.getName()); // "My game level" console.log(object.getObject("My character")); // Returns a gd.Object }); Converted, including JS strings (to char*) Primitive types? If I pass an object? Objects references are converted to pointers (or references) by the webIDL generated glue code 17
  48. 66.

    Use Emscripten classes Use Emscripten classes Module().then(gd => { const

    layout = new gd.Layout(); layout.setName("My game level"); const object = new gd.Object(); object.setName("My character"); layout.insertObject(object, 0); console.log(layout.getName()); // "My game level" console.log(object.getObject("My character")); // Returns a gd.Object }); Converted, including JS strings (to char*) Primitive types? If I pass an object? std::iostream is binded to console.log Objects references are converted to pointers (or references) by the webIDL generated glue code Can I debug? 17
  49. 67.

    18

  50. 69.

    Things to know Things to know const layout = new

    gd.Layout(); // ... gd.destroy(layout); // Binded objects need manual destruction Memory management requires care! 19
  51. 70.

    Things to know Things to know const layout = new

    gd.Layout(); // ... gd.destroy(layout); // Binded objects need manual destruction Memory management requires care! console.log(layout); // { ptr: 6804120 } 19
  52. 71.

    Things to know Things to know const layout = new

    gd.Layout(); // ... gd.destroy(layout); // Binded objects need manual destruction Memory management requires care! console.log(layout); // { ptr: 6804120 } Wasm memory 19
  53. 72.

    Things to know Things to know const layout = new

    gd.Layout(); // ... gd.destroy(layout); // Binded objects need manual destruction Memory management requires care! console.log(layout); // { ptr: 6804120 } Wasm memory 19
  54. 73.

    Things to know Things to know const layout = new

    gd.Layout(); // ... gd.destroy(layout); // Binded objects need manual destruction Memory management requires care! console.log(layout); // { ptr: 6804120 } Wasm memory The content of gd.Layout 19
  55. 74.

    Things to know Things to know const layout = new

    gd.Layout(); // ... gd.destroy(layout); // Binded objects need manual destruction Memory management requires care! console.log(layout); // { ptr: 6804120 } Wasm memory The content of gd.Layout 19
  56. 75.

    Things to know Things to know const layout = new

    gd.Layout(); // ... gd.destroy(layout); // Binded objects need manual destruction Memory management requires care! console.log(layout); // { ptr: 6804120 } Wasm memory The content of gd.Layout 19
  57. 76.

    Things to know Things to know const layout = new

    gd.Layout(); // ... gd.destroy(layout); // Binded objects need manual destruction Memory management requires care! For React: console.log(layout); // { ptr: 6804120 } Wasm memory The content of gd.Layout 19
  58. 77.

    Things to know Things to know const layout = new

    gd.Layout(); // ... gd.destroy(layout); // Binded objects need manual destruction Memory management requires care! For React: componentDidMount() { this._project = new gd.Project(); } componentWillUnmount() { gd.destroy(this._project); } console.log(layout); // { ptr: 6804120 } Wasm memory The content of gd.Layout 19
  59. 78.

    Things to know Things to know const layout = new

    gd.Layout(); // ... gd.destroy(layout); // Binded objects need manual destruction Memory management requires care! For React: componentDidMount() { this._project = new gd.Project(); } componentWillUnmount() { gd.destroy(this._project); } or use an Effect Hook console.log(layout); // { ptr: 6804120 } Wasm memory The content of gd.Layout 19
  60. 80.

    Things to know (2) Things to know (2) Output files

    can be large (~3mb for GDevelop), but Output files can be large (~3mb for GDevelop), but gzip helps. gzip helps. 20
  61. 82.

    Things to know (3) Things to know (3) A complete

    test set is invaluable for ensuring that no errors are in the bindings. 21
  62. 83.

    Things to know (3) Things to know (3) A complete

    test set is invaluable for ensuring that no errors are in the bindings. abort(16). Build with -s ASSERTIONS=1 for more info. 21
  63. 84.

    Things to know (3) Things to know (3) A complete

    test set is invaluable for ensuring that no errors are in the bindings. abort(16). Build with -s ASSERTIONS=1 for more info. What can go wrong? 21
  64. 85.

    Things to know (3) Things to know (3) A complete

    test set is invaluable for ensuring that no errors are in the bindings. abort(16). Build with -s ASSERTIONS=1 for more info. Wrong type for a parameter What can go wrong? 21
  65. 86.

    Things to know (3) Things to know (3) A complete

    test set is invaluable for ensuring that no errors are in the bindings. abort(16). Build with -s ASSERTIONS=1 for more info. Wrong type for a parameter Parameter forgotten What can go wrong? 21
  66. 87.

    Things to know (3) Things to know (3) A complete

    test set is invaluable for ensuring that no errors are in the bindings. abort(16). Build with -s ASSERTIONS=1 for more info. Wrong type for a parameter Parameter forgotten Using a deleted object What can go wrong? 21
  67. 88.

    X-platform toolkit (wxWidgets) GUI (windows, dialogs...) Filesystem React.js powered interface

    Node.js/browser adapters GDevelop C++ codebase Core classes (game, scene, object, textures...) Game exporter (JS "transpiler") libGDevelop.js 22 GDevelop JS codebase
  68. 89.

    X-platform toolkit (wxWidgets) GUI (windows, dialogs...) Filesystem React.js powered interface

    Node.js/browser adapters GDevelop C++ codebase Core classes (game, scene, object, textures...) Game exporter (JS "transpiler") libGDevelop.js 22 GDevelop JS codebase
  69. 93.

    Find a component library Find a component library Extensive list

    of high quality components Good theming support 24
  70. 94.

    Find a component library Find a component library Extensive list

    of high quality components Good theming support Accessibility 24
  71. 95.

    Find a component library Find a component library Extensive list

    of high quality components Good theming support Accessibility Documentation quality 24
  72. 99.

    Virtualized lists Virtualized lists const ObjectRow = () => <div>...</div>;

    const ObjectsList = (props) => props.map(group => <ObjectRow ... />) react-sortable-hoc react-virtualized 26
  73. 100.

    Virtualized lists Virtualized lists const ObjectRow = () => <div>...</div>;

    const ObjectsList = (props) => props.map(group => <ObjectRow ... />) const SortableObjectRow = SortableElement(props => ( <ObjectRow ... /> )); const ObjectsList = (props) => ( <List rowRenderer={({ ... }) => { <SortableObjectRow /> }) /> ); const SortableObjectsList = SortableContainer(ObjectsList); <SortableObjectsList onSortEnd={({ oldIndex, newIndex }) => ...} ... react-sortable-hoc react-virtualized 26
  74. 113.

    Don't forget the DOM Don't forget the DOM <svg onPointerMove={...}

    onPointerUp={...} width={this.props.imageWidth} height={this.props.imageHeight} > <polygon fill="rgba(255,0,0,0.2)" stroke="rgba(255,0,0,0.5)" fileRule="evenodd" points={vertices.map(vertex => `${vertex.getX()},${vertex.getY()}` ).join(' ')} /> {vertices.map((vertex, j) => ( <circle onPointerDown={...} key={`vertex-${j}`} fill="rgba(255,0,0,0.75)" cx={vertex.getX()} cy={vertex.getY()} r={5} /> ))} </svg> 33
  75. 118.

    Profile the rendering Profile the rendering shouldComponentUpdate/memoization is often the

    answer Measure performance in production (React development build is way slower) 35
  76. 120.

    Inspect calls to WebAssembly Inspect calls to WebAssembly Beware of

    overhead in binding code/wasm call when calling functions, in particular if renderings 36
  77. 121.

    Inspect calls to WebAssembly Inspect calls to WebAssembly Beware of

    overhead in binding code/wasm call when calling functions, in particular if renderings objects.filter(object => object.getType() !== "") // N wasm calls + string conversion .map(object => object.getVariables(project)); // N wasm calls + string conversion Won't be noticeable in most UI situations, but can be if used in renderings or long lists/trees 36
  78. 122.

    Inspect calls to WebAssembly Inspect calls to WebAssembly Beware of

    overhead in binding code/wasm call when calling functions, in particular if renderings objects.filter(object => object.getType() !== "") // N wasm calls + string conversion .map(object => object.getVariables(project)); // N wasm calls + string conversion Won't be noticeable in most UI situations, but can be if used in renderings or long lists/trees It might be useful to store strings/values on the JS side if you know they won't change. 36
  79. 126.

    Stick to your components Stick to your components <FlatButton style={{fontSize:

    12}}> Help </FlatButton> <FlatButton> Help </FlatButton> ☺ ☺ Avoid custom/adhoc styles, that won't scale: 38
  80. 127.

    Stick to your components Stick to your components <FlatButton style={{fontSize:

    12}}> Help </FlatButton> <FlatButton> Help </FlatButton> ☺ ☺ <HelpButton /> Avoid custom/adhoc styles, that won't scale: Make a component for it! #DesignSystem 38
  81. 128.
  82. 129.

    Don't unit test your visual Don't unit test your visual

    components... components... Well actually, do, but only for part where there Well actually, do, but only for part where there is is logic logic 39
  83. 134.

    Use types Use types Will tell you that you (or

    someone else) forgot to Will tell you that you (or someone else) forgot to pass/remove a prop pass/remove a prop Flow Typescript 41
  84. 135.

    Use types Use types Will tell you that you (or

    someone else) forgot to Will tell you that you (or someone else) forgot to pass/remove a prop pass/remove a prop Flow Typescript Help auto-completion Help auto-completion 41
  85. 136.

    Use types Use types Will tell you that you (or

    someone else) forgot to Will tell you that you (or someone else) forgot to pass/remove a prop pass/remove a prop Flow Typescript Help auto-completion Help auto-completion Avoid most silly (or not so silly) mistakes Avoid most silly (or not so silly) mistakes 41
  86. 137.

    Use types Use types Will tell you that you (or

    someone else) forgot to Will tell you that you (or someone else) forgot to pass/remove a prop pass/remove a prop Flow Typescript Help auto-completion Help auto-completion Avoid most silly (or not so silly) mistakes Avoid most silly (or not so silly) mistakes Help to "document" your objects Help to "document" your objects 41
  87. 138.

    Use types Use types Will tell you that you (or

    someone else) forgot to Will tell you that you (or someone else) forgot to pass/remove a prop pass/remove a prop Flow Typescript Help auto-completion Help auto-completion Avoid most silly (or not so silly) mistakes Avoid most silly (or not so silly) mistakes Help to "document" your objects Help to "document" your objects ... all of these which becomes really useful when you're back on some module you (or someone else) wrote a few months ago 41
  88. 139.

    Use types Use types Will tell you that you (or

    someone else) forgot to Will tell you that you (or someone else) forgot to pass/remove a prop pass/remove a prop Flow Typescript Help auto-completion Help auto-completion Avoid most silly (or not so silly) mistakes Avoid most silly (or not so silly) mistakes Help to "document" your objects Help to "document" your objects ... all of these which becomes really useful when you're back on some module you (or someone else) wrote a few months ago Types shine when you or someone else is refactoring some parts of the app 41
  89. 140.

    X-platform toolkit (wxWidgets) GUI (windows, dialogs...) Filesystem React.js powered interface

    Node.js/browser adapters GDevelop C++ codebase Core classes (game, scene, object, textures...) Game exporter (JS "transpiler") libGDevelop.js 42 GDevelop JS codebase
  90. 141.

    X-platform toolkit (wxWidgets) GUI (windows, dialogs...) Filesystem React.js powered interface

    Node.js/browser adapters GDevelop C++ codebase Core classes (game, scene, object, textures...) Game exporter (JS "transpiler") libGDevelop.js 42 GDevelop JS codebase
  91. 145.

    Consider your packaging options Consider your packaging options GDevelop Electron

    Web app Embed in a native app Squoosh.app Spotify Steam Chat 43
  92. 147.

    Build over Electron APIs Build over Electron APIs class MaterialUIContextMenu

    extends React.Component { ... } class ElectronContextMenu extends React.Component { ... } 44
  93. 148.

    Build over Electron APIs Build over Electron APIs class MaterialUIContextMenu

    extends React.Component { ... } class ElectronContextMenu extends React.Component { ... } export default class MaterialUIMenuImplementation { buildFromTemplate(template) { return template.map((item, id) => { if (item.type === 'separator') { return <Divider key={'separator' + id} />; } else if (item.type === 'checkbox') { return ( <MenuItem ... /> } else { return ( <MenuItem ... /> } } showMenu() { ... } } 44
  94. 149.

    Build over Electron APIs Build over Electron APIs export default

    class ElectronMenuImplementation { buildFromTemplate(template) { this.menuTemplate = template; return undefined; } showMenu(dimensions) { if (!electron) return; const { Menu } = electron.remote; const browserWindow = electron.remote.getCurrentWindow(); this.menu = Menu.buildFromTemplate(this.menuTemplate); this.menu.popup({ window: browserWindow, x: Math.round(dimensions.left), y: Math.round(dimensions.top + dimensions.height), async: true, // Ensure the UI is not blocked on macOS. }); } } class MaterialUIContextMenu extends React.Component { ... } class ElectronContextMenu extends React.Component { ... } export default class MaterialUIMenuImplementation { buildFromTemplate(template) { return template.map((item, id) => { if (item.type === 'separator') { return <Divider key={'separator' + id} />; } else if (item.type === 'checkbox') { return ( <MenuItem ... /> } else { return ( <MenuItem ... /> } } showMenu() { ... } } 44
  95. 150.

    X-platform toolkit (wxWidgets) GUI (windows, dialogs...) Filesystem React.js powered interface

    Node.js/browser adapters GDevelop C++ codebase Core classes (game, scene, object, textures...) Game exporter (JS "transpiler") libGDevelop.js 45 GDevelop JS codebase
  96. 151.

    X-platform toolkit (wxWidgets) GUI (windows, dialogs...) Filesystem React.js powered interface

    Node.js/browser adapters GDevelop C++ codebase Core classes (game, scene, object, textures...) Game exporter (JS "transpiler") libGDevelop.js 45 GDevelop JS codebase Result? Result?
  97. 152.

    46

  98. 154.

    What are users saying? What are users saying? “ Wow,

    what a difference a year can make 47
  99. 155.

    What are users saying? What are users saying? “ Wow,

    what a difference a year can make “ Amazing how much easier and streamlined the engine has become 47
  100. 156.

    What are users saying? What are users saying? “ Wow,

    what a difference a year can make “ but I have to admit, once you worked a bit with it, it could be really more productive on many aspects than GD4 “ Amazing how much easier and streamlined the engine has become 47
  101. 157.

    What are users saying? What are users saying? “ Wow,

    what a difference a year can make “ but I have to admit, once you worked a bit with it, it could be really more productive on many aspects than GD4 “ Amazing how much easier and streamlined the engine has become It works! It works! 47
  102. 158.

    “ The The native web app native web app is

    is better better than the native app than the native app 48
  103. 159.

    “ The The native web app native web app is

    is better better than the native app than the native app Ultra fast iterations, Ultra fast iterations, 48
  104. 160.

    “ The The native web app native web app is

    is better better than the native app than the native app Ultra fast iterations, Ultra fast iterations, ultra ultra fast testing (storybook) fast testing (storybook) 48
  105. 161.

    “ The The native web app native web app is

    is better better than the native app than the native app Ultra fast iterations, Ultra fast iterations, ultra ultra fast testing (storybook) fast testing (storybook), near , near perfect cross-platform perfect cross-platform 48
  106. 162.

    “ The The native web app native web app is

    is better better than the native app than the native app Ultra fast iterations, Ultra fast iterations, ultra ultra fast testing (storybook) fast testing (storybook), near , near perfect cross-platform perfect cross-platform, faster , faster startup time startup time 48
  107. 163.

    “ The The native web app native web app is

    is better better than the native app than the native app Ultra fast iterations, Ultra fast iterations, ultra ultra fast testing (storybook) fast testing (storybook), near , near perfect cross-platform perfect cross-platform, faster , faster startup time startup time, auto updates, , auto updates, 48
  108. 164.

    “ The The native web app native web app is

    is better better than the native app than the native app Ultra fast iterations, Ultra fast iterations, ultra ultra fast testing (storybook) fast testing (storybook), near , near perfect cross-platform perfect cross-platform, faster , faster startup time startup time, auto updates, , auto updates, more contributors, more contributors, 48
  109. 165.

    “ The The native web app native web app is

    is better better than the native app than the native app Ultra fast iterations, Ultra fast iterations, ultra ultra fast testing (storybook) fast testing (storybook), near , near perfect cross-platform perfect cross-platform, faster , faster startup time startup time, auto updates, , auto updates, more contributors, more contributors, "try it "try it online", online", 48
  110. 166.

    “ The The native web app native web app is

    is better better than the native app than the native app Ultra fast iterations, Ultra fast iterations, ultra ultra fast testing (storybook) fast testing (storybook), near , near perfect cross-platform perfect cross-platform, faster , faster startup time startup time, auto updates, , auto updates, more contributors, more contributors, "try it "try it online", online", tablets/phones port tablets/phones port 48