Flash Forward: Cross-Platform Game Development with Haxe ...
Haxe React architecture and workflow
-
Upload
philippe-elsass -
Category
Engineering
-
view
431 -
download
2
Transcript of Haxe React architecture and workflow
![Page 1: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/1.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe React architecture and workflow
![Page 2: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/2.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Definition• What Haxe is:• Haxe is an open source toolkit based on a modern high level strictly typed
programming language, a state-of-the-art light-speed cross-compiler, a complete cross-platform standard library, and ways to access to each platform's native capabilities.
• What Haxe is NOT:• Haxe is not a high level framework. It's a toolkit that can be used to build
cross-platform tools and frameworks.
![Page 3: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/3.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Write or reuse?• Massive.co has contributed many state of the art open-source
libraries for the Haxe language• Unit testing, code coverage, MVC, dependency injection, event signals,…
• It is a big effort and responsibility to write and maintain OSS
![Page 4: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/4.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Crossplatform or not?• The Haxe language can target many platforms • JavaScript, Flash, C++, C#, Java, Python, Lua, Php…
• We usually make sure to write dependency-free, universal, libraries• But ultimately our business is focusing on HTML/JS
![Page 5: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/5.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe on JavaScript• JavaScript is our VM – one of the fastest, most stable, and richest• Other companies are building/maintaining very solid libraries
![Page 6: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/6.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Why Haxe on JavaScript?• JavaScript is predominantly ES6 and TypeScript nowadays• Yet people (and companies) continue betting on other langs• Dart, Elm, PureScript, ScalaJS, OcamlJS,…
• And we love Haxe because it’s faster, smarter and easy to learn
![Page 7: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/7.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React on Haxe• Most popular view-layer library• No need for Facebook hatin’• It’s opensource and well maintained• and many companies contribute to creating
something much wider than its core
![Page 8: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/8.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React on Haxe• Building great Haxe support alone is a big effort• Core library by Massive.co (@dpeek then @elsassph)• https://github.com/massiveinteractive/haxe-react
• React-native and other externs by @kevinresol and @zabojad• https://github.com/haxe-react• https://github.com/tokomlabs/haxe-react-addons
![Page 9: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/9.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
First, understand JavaScript• Learn how things work in vanilla
JavaScript first• Play with React using ‘create-react-app’
![Page 10: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/10.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
First, understand JavaScript• Anything you can do in JavaScript can be
expressed in Haxe (depending on how dirty you’re willing to feel)• For articles on Haxe-JS interop:
http://philippe.elsass.me
![Page 11: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/11.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React
![Page 12: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/12.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React JavaScript syntax• XML in your JavaScript?
(heresy!)• It’s called JSX• It’s only metadata
![Page 13: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/13.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React JavaScript syntax
![Page 14: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/14.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React JavaScript syntax• Fancy binding syntax (uni-directional)
![Page 15: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/15.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React: all the cool kids are doing it• React is a Virtual DOM engine from Facebook/Instagram • Only view layer, not an architecture (unlike Angular)• Straightforward and robust• Not limited to HTML DOM – there are renderers for canvas, PixiJS…• Not limited to the browser – react-native is maturing
![Page 16: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/16.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe-React• Nearly as fancy, macro-powered, syntax
![Page 17: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/17.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe-React• Supports the same binding syntax
![Page 18: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/18.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe-React• Or Haxe string-interpolation syntax (advantage: completion)
![Page 19: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/19.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe-React• Optimiser can generate inline objects at compile time in place of
React.createElement() calls for optimal performance
![Page 20: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/20.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe-React• JSX parser is complete with a few minor limitations • Generator supports all the advanced features* like spread operator,
default values or functional stateless components• Optimiser does better than JS compilers
* React is feature rich, learn it properly
![Page 21: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/21.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React basics: initial render• Initial render in HTML• Should be called only once, targeting a root DOM element• Multiple roots allowed
![Page 22: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/22.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React basics: initial render• Without components, the rendered DOM will never change
![Page 23: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/23.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React basics: initial render• Only components are able to trigger re-renders• A dynamic application will need at least one in the initial render
![Page 24: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/24.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React basics: Component• A component must have a render function returning one element.
![Page 25: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/25.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React basics: Component• Components can hold “state”; state changes schedule a re-render
![Page 26: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/26.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React basics: Component• Components can receive read-only “props” from their parent
![Page 27: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/27.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React basics: Component• A stateless component can be advantageously replaced by a function
![Page 28: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/28.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React basics: avoid inheritance• High-Order Component: extend other components
![Page 29: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/29.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React basics: avoid inheritance• Component wrapper with provided children elements
![Page 30: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/30.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Advanced React: containing updates• Warning: state changes can be costly!• State changes schedule a re-render• Children may re-render in depth, unless you prevent it:• Carefully add ”key” attributes• extend PureComponent• override shouldComponentUpdate(nextProps, nextState):Bool
• Prevent re-render only if needed, and as early as possible
![Page 31: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/31.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React: production-ready• React works great, right now, it’s stable
and well supported. Enjoy. • React’s approach is inspiring many
other frameworks, some using JSX.• Haxe React is in serious shape and used
in large productions at Massive.
![Page 32: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/32.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
React architectures
![Page 33: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/33.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Architecture• React is just a view layer – it doesn’t enforce any architecture• Basic props and callbacks don’t scale• Haxe React comes with 2 examples: Redux and MMVC
![Page 34: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/34.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Architecture: Reduxhttps://github.com/elsassph/haxe-react-redux
• Disclaimer: Redux is NOT an architecture itself• Redux is a popular state library for Model-Intent architectures• Sample follows one possible architecture pattern with Redux• Warning: expect to do a lot of refactoring
![Page 35: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/35.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Architecture: MVChttps://github.com/elsassph/haxe-react-mmvc
• Massive’s MMVC offers a battle-tested architecture inspired by RobotLegs, used on large scale, large complexity applications• Macro-based Dependency Injection, Command and View mediation• MMVC fits naturally with React Components: just add an interface
![Page 36: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/36.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Advanced React : the “context”• Architecturing React apps requires more than “props”• Libraries and framework need to provide data to any child• This mechanism is the React “context”• Recommendation: do not use this “context” liberally
![Page 37: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/37.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Advanced React : the “context”• This mechanism should be used through black boxes:• “Provider” React components inject values in context• “Consumer” React components query those values
• Examples of uses:• Redux: components need to access the store• MMVC: components mediation• React-router: components need to trigger navigation
![Page 38: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/38.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Code splittingTo reduce the initial payloadTo load features on-demand
![Page 39: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/39.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Code splitting• Haxe compiler historically outputs a single, optimized, JS file• Traditional JavaScript do concat and minify JS files into one• Problem: single big JS bundle = bad user experience
![Page 40: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/40.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Code splitting• Modern JavaScript has embraced the multi-
file approach and figured: • Bundling with code splitting • Hot module replacement during development
• Can we benefit from that in Haxe?
![Page 41: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/41.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Modular JS https://github.com/*/modular-js
Goal: comply with JavaScript bundlers
![Page 42: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/42.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Modular JS• Create one JS file for each Haxe class• Then use a JavaScript bundler as with regular JS (profit!)
• Risks: • Experimental with multiple approaches/forks• Custom JavaScript generator• No sourcemaps• Requires excellent understanding of JS bundlers• Unclear code-splitting strategy (and no project examples)
![Page 43: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/43.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Modular JS - AMD• Asynchronous module system (RequireJS)• https://github.com/explorigin/modular-js (creator, unmaintained)• https://github.com/jcward/modular-js (used in production)
• Bundlers: SystemJS, Webpack
![Page 44: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/44.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Modular JS - CommonJS• As popularized by nodejs, used by ES6/TypeScript• https://github.com/kevinresol/modular-js• https://github.com/MatthijsKamstra/modular-js (fork)
• Bundlers: SystemJS, Webpack, Browserify
![Page 45: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/45.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Modular JS – Why choose it?• Modular-js is a sensible choice if you’re 100% going JS.• But it requires you to become an expert in Haxe JS output, the custom JS
generator, JS in general, and your JS bundler of choice.
• Competes with Haxe Modular
![Page 46: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/46.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe Modularhttps://github.com/elsassph/haxe-modular
Goal: staying true to Haxe
![Page 47: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/47.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe Modular – Goals https://github.com/elsassph/haxe-modular• Use (tweak) regular Haxe compiler output• No JS bundler dependency (but could)• Adaptable to other Haxe targets
![Page 48: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/48.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe Modular – The promise https://github.com/elsassph/haxe-modular• Automatically split monolithic Haxe JS (and sourcemap!) output• Hot-reload capable (React reload built-in)• Bundle NPM dependencies together separately• Will be used in production at Massive
• Risks: • Experimental
![Page 49: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/49.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe Modular – Usage• Explicitly load a components on demand:• The class (and its dependencies) will be loaded (once) asynchronously when
requested
![Page 50: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/50.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe Modular – Usage• With React-router:• The view class (and its dependencies) will be loaded (once) when navigating
to a specific “route”
![Page 51: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/51.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe Modular – How? • Bundle.load(classRef) or RouteBundle.load(classRef) are macros• classRef is memorised and code replaced by Require.load(bundleId)• Normal Haxe JS output is sent to a temp file to be processed post-build
![Page 52: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/52.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe Modular – How?
PlayerView
temp/output.js bin/index.js
PlayerView
temp/playerview.js
output.js.map index.js.map playerview.js.map
haxe-split
![Page 53: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/53.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe Modular – How?
output.js
output.js.map
Acorn.js Output AST Graphlib.js Dependency graph
Sourcemap.js *.js.map
output.js *.js
Analysis
Generation
![Page 54: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/54.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
![Page 55: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/55.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
HMRHot Module Replacement
aka Hot Reload, Live Reload,…
![Page 56: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/56.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Hot Module Replacement – What?• Server monitors local files• Client has socket connection to server• Server send changes to client• Client reloads files in a smart way
![Page 57: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/57.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Hot Module Replacement – What?• Not rocket science• Requires app code to be broken into reloadable chunks
![Page 58: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/58.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Hot Module Replacement – How?• Must have feature; makes or breaks JS bundlers and frameworks• Reload code but also assets, like images and CSS.• It’s not magic: the application needs special logic to handle changes
and refresh itself
![Page 59: Haxe React architecture and workflow](https://reader033.fdocuments.in/reader033/viewer/2022052214/58ce97ad1a28ab8c3b8b6aad/html5/thumbnails/59.jpg)
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe + React + Hot reload