Download - Haxe React architecture and workflow
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe React architecture and workflow
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.
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
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
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
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
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
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
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’
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
typedef React = State -> View Haxe Meetup, 2 March 2017
React
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
typedef React = State -> View Haxe Meetup, 2 March 2017
React JavaScript syntax
typedef React = State -> View Haxe Meetup, 2 March 2017
React JavaScript syntax• Fancy binding syntax (uni-directional)
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
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe-React• Nearly as fancy, macro-powered, syntax
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe-React• Supports the same binding syntax
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe-React• Or Haxe string-interpolation syntax (advantage: completion)
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
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
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
typedef React = State -> View Haxe Meetup, 2 March 2017
React basics: initial render• Without components, the rendered DOM will never change
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
typedef React = State -> View Haxe Meetup, 2 March 2017
React basics: Component• A component must have a render function returning one element.
typedef React = State -> View Haxe Meetup, 2 March 2017
React basics: Component• Components can hold “state”; state changes schedule a re-render
typedef React = State -> View Haxe Meetup, 2 March 2017
React basics: Component• Components can receive read-only “props” from their parent
typedef React = State -> View Haxe Meetup, 2 March 2017
React basics: Component• A stateless component can be advantageously replaced by a function
typedef React = State -> View Haxe Meetup, 2 March 2017
React basics: avoid inheritance• High-Order Component: extend other components
typedef React = State -> View Haxe Meetup, 2 March 2017
React basics: avoid inheritance• Component wrapper with provided children elements
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
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.
typedef React = State -> View Haxe Meetup, 2 March 2017
React architectures
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
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
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
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
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
typedef React = State -> View Haxe Meetup, 2 March 2017
Code splittingTo reduce the initial payloadTo load features on-demand
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
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?
typedef React = State -> View Haxe Meetup, 2 March 2017
Modular JS https://github.com/*/modular-js
Goal: comply with JavaScript bundlers
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)
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
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
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
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe Modularhttps://github.com/elsassph/haxe-modular
Goal: staying true to Haxe
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
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
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
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”
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
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
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
typedef React = State -> View Haxe Meetup, 2 March 2017
typedef React = State -> View Haxe Meetup, 2 March 2017
HMRHot Module Replacement
aka Hot Reload, Live Reload,…
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
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
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
typedef React = State -> View Haxe Meetup, 2 March 2017
Haxe + React + Hot reload