haxe react architecture and workflow

typedef React = State -> View Haxe Meetup, 2 March 2017

Haxe React architecture and workflow


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.


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


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


Haxe on JavaScript• JavaScript is our VM – one of the fastest, most stable, and richest• Other companies are building/maintaining very solid libraries


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


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


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

https://github.com/massiveinteractive/haxe-react

https://github.com/haxe-react

https://github.com/tokomlabs/haxe-react-addons


First, understand JavaScript• Learn how things work in vanilla

JavaScript first• Play with React using ‘create-react-app’


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

http://philippe.elsass.me/


React


React JavaScript syntax• XML in your JavaScript?

(heresy!)• It’s called JSX• It’s only metadata


React JavaScript syntax


React JavaScript syntax• Fancy binding syntax (uni-directional)


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


Haxe-React• Nearly as fancy, macro-powered, syntax


Haxe-React• Supports the same binding syntax


Haxe-React• Or Haxe string-interpolation syntax (advantage: completion)


Haxe-React• Optimiser can generate inline objects at compile time in place of

React.createElement() calls for optimal performance


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


React basics: initial render• Initial render in HTML• Should be called only once, targeting a root DOM element• Multiple roots allowed


React basics: initial render• Without components, the rendered DOM will never change


React basics: initial render• Only components are able to trigger re-renders• A dynamic application will need at least one in the initial render


React basics: Component• A component must have a render function returning one element.


React basics: Component• Components can hold “state”; state changes schedule a re-render


React basics: Component• Components can receive read-only “props” from their parent


React basics: Component• A stateless component can be advantageously replaced by a function


React basics: avoid inheritance• High-Order Component: extend other components


React basics: avoid inheritance• Component wrapper with provided children elements


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


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.


React architectures


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


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

https://github.com/elsassph/haxe-react-redux


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

https://github.com/elsassph/haxe-react-mmvc


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


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


Code splittingTo reduce the initial payloadTo load features on-demand


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


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?


Modular JS https://github.com/*/modular-js

Goal: comply with JavaScript bundlers

https://github.com/*/modular-js


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)


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

https://github.com/explorigin/modular-js

https://github.com/jcward/modular-js


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

https://github.com/kevinresol/modular-js

https://github.com/MatthijsKamstra/modular-js


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


Haxe Modularhttps://github.com/elsassph/haxe-modular

Goal: staying true to Haxe

https://github.com/elsassph/haxe-modular


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



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



Haxe Modular – Usage• Explicitly load a components on demand:• The class (and its dependencies) will be loaded (once) asynchronously when

requested


Haxe Modular – Usage• With React-router:• The view class (and its dependencies) will be loaded (once) when navigating

to a specific “route”


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


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


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


HMRHot Module Replacement

aka Hot Reload, Live Reload,…


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


Hot Module Replacement – What?• Not rocket science• Requires app code to be broken into reloadable chunks


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


Haxe + React + Hot reload

haxe react architecture and workflow

Engineering