RRU 058: React.js and WebAssembly to Rewrite Native Apps with Florian Rival




React Round Up show

Summary: <h2 dir="ltr"><strong>Sponsors</strong></h2> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.netlify.com/">Netlify</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://sentry.io/">Sentry</a> use code “devchat” for 2 months free</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="http://triplebyte.com/react">Triplebyte</a></strong></p> </li> </ul> <h3 dir="ltr"><strong>Panel</strong></h3> <ul> <li dir="ltr"> <p dir="ltr"><strong>Lucas Reis</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Charles Max Wood</strong></p> </li> </ul> <p dir="ltr"><strong>Special Guest: Florian Rival</strong></p> <h3 dir="ltr"><strong>Episode Summary</strong></h3> <p dir="ltr"><strong>Florian is a software engineer working for Facebook. He has previously worked with React Native making apps. He has also created an open source game creation software called <a href="https://gdevelop-app.com/">GDevelop</a>. Florian talks about his inspiration for GDevelop. He delves into the nature of GDevelop as a desktop app built on the web. Florian talks about his decision to not go full JavaScript in his app and to redo the interface. He ultimately decided to combine C++ and JavaScript, and top it with a React interface.</strong></p> <p dir="ltr"><strong>Florian discusses how C++ is used in this web application and how it connects to react. The panel discusses the use cases for WebAssembly and the performance quality. They discuss the bundle sizes in WebAssembly compared to other languages and compatibility with different browsers.</strong></p> <p dir="ltr"><strong>Florian talks about how WebAssembly and React work together in his app. He talks about some of the issues and solutions you had in desiging the UI and how he created the editable lists and trees. Florian concludes by saying that any LLVM language can be compiled into web assembly</strong></p> <p dir="ltr"><strong>Links</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/topics/react-native">React Native</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/facebook/react">React</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/KhronosGroup/WebGL">WebGL</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/topics/javascript">JavaScript</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/topics/html">HTML</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/topics/storybook">Storybook</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.quora.com/What-is-feedback-loop">Feedback Loop</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/topics/cpp">C++</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction">The DOM</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/angular/angular.js">Angular</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/Wolfr/clank">Clank</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/topics/qt5">QT5</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/emscripten-core/emscripten">Enscripten</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://cmake.org/">C Make</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.investopedia.com/terms/e/enterprisevalue.asp">EV computation</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/topics/csharp">C#</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://webassembly.org/">WebAssembly</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://airbrake.io/blog/software-design/domain-driven-design">Domain Driven Design</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://slack.com/">Slack</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/frontend-collective/react-sortable-tree">React Sortable Tree</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/fabricjs/fabric.js">Canvas</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://godotengine.org/">Godot</a> </strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://pixycam.com/pixy-cmucam5/">Pixy</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://llvm.org/">LLVM</a></strong></p> </li> </ul> <h3 dir="ltr"><strong>Picks</strong></h3> <p dir="ltr"><strong>Lucas Reis:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong>American food</strong></p> </li> </ul> <p dir="ltr"><strong>Charles Max Wood:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong>Podfest</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Alita: Battle Angel</strong></p> </li> </ul> <p dir="ltr"><strong>Florian Rival:</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://material-ui.com/">Material UI</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.gatsbyjs.org/">Gatsby</a></strong></p> </li> </ul>