haxe react “magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef react =...
TRANSCRIPT
![Page 1: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/1.jpg)
typedef React = State -> View 29 May 2016
Haxe React “Magic”
Or: how I learned to stop building everythingmyself and love the JavaScript ecosystem.
![Page 2: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/2.jpg)
typedef React = State -> View 29 May 2016
The JavaScript ecosystem is ripe for plunder
• 250K public JavaScript packages
• Most active language on Github
• Google, Facebook, Microsoft, Netflix,… • All fighting for developers’ attention
![Page 3: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/3.jpg)
typedef React = State -> View 29 May 2016
The JavaScript ecosystem is ripe for plunder
![Page 4: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/4.jpg)
typedef React = State -> View 29 May 2016
The JavaScript ecosystem is ripe for plunder
• Qualified monkeys on expensive typewriters?
• Bound to stumble on a good idea eventually!
![Page 5: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/5.jpg)
typedef React = State -> View 29 May 2016
First, understand the enemy
• Writing effective externs requires good understanding
• Learn how things work in vanilla JavaScript first
![Page 6: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/6.jpg)
typedef React = State -> View 29 May 2016
First, understand the enemy
• 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 interaction: http://philippe.elsass.me
![Page 7: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/7.jpg)
typedef React = State -> View 29 May 2016
Here’s the plan1. React
2. Code splitting
3. JS bundlers
4. Profit!
![Page 8: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/8.jpg)
typedef React = State -> View 29 May 2016
React: all the cool kids are doing it
• Essentially a nice way of building views
• Refreshingly productive and straight forward
![Page 9: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/9.jpg)
typedef React = State -> View 29 May 2016
React: all the cool kids are doing it
• XML in your JavaScript? (heresy!)
• It’s called JSX
![Page 10: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/10.jpg)
typedef React = State -> View 29 May 2016
React: all the cool kids are doing it
![Page 11: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/11.jpg)
typedef React = State -> View 29 May 2016
React: all the cool kids are doing it
• Fancy binding syntax (uni-directional)
![Page 12: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/12.jpg)
typedef React = State -> View 29 May 2016
React: all the cool kids are doing it
• React is a Virtual DOM engine from Facebook/Instagram
• Not a framework / not an architecture (unlike Angular)
• Straightforward and robust
![Page 13: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/13.jpg)
typedef React = State -> View 29 May 2016
React: Native ???
• Potential outside the browser
• React-Native aims to drive native (iOS, Android, Win, Mac,…) using a JavaScript Virtual DOM
• Similar approach than Titanium Appcelerator
• Warning: expert native knowledge is still recommended
![Page 14: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/14.jpg)
typedef React = State -> View 29 May 2016
Haxe-React
• First experimented by @fponticelli, leader of the JavaScript assimilation
• New approach from scratch by Massive Interactive’s @dpeek and @elsassph
• Fully leverages Haxe type system and compiler
![Page 15: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/15.jpg)
typedef React = State -> View 29 May 2016
Haxe-React
• Nearly as fancy, macro-powered, syntax
![Page 16: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/16.jpg)
typedef React = State -> View 29 May 2016
Haxe-React
• Supports the same binding syntax
![Page 17: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/17.jpg)
typedef React = State -> View 29 May 2016
Haxe-React
• Or Haxe string-interpolation syntax (advantage: completion)
![Page 18: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/18.jpg)
typedef React = State -> View 29 May 2016
Haxe-React
• JSX parser is complete but has a few limitations (whitespace)
• Generator supports all the advanced features like spread operator and optimized syntax (inline JSON instead of React.createElement)
![Page 19: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/19.jpg)
typedef React = State -> View 29 May 2016
Haxe-React
• Lots of externs for JS React components are already available https://github.com/tokomlabs/haxe-react-addons
• Could be extended to other Virtual DOM engines, like https://github.com/Matt-Esch/virtual-dom or a Haxe-based one ;)
![Page 20: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/20.jpg)
typedef React = State -> View 29 May 2016
Atom Haxe+JSX highlighting: https://github.com/massiveinteractive/haxe-react/issues/23
![Page 21: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/21.jpg)
typedef React = State -> View 29 May 2016
How to link React library with Haxe?
• Ambient (global), with script in the HTML• Compile with: -D react_global
• Or using JavaScript require (more on that later)
![Page 22: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/22.jpg)
typedef React = State -> View 29 May 2016
React: production-ready
• It works great, right now, it’s stable and well supported. Enjoy.
![Page 23: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/23.jpg)
typedef React = State -> View 29 May 2016
![Page 24: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/24.jpg)
typedef React = State -> View 29 May 2016
Code splitting
• At some point, your app will get too big
• On the web that can be sooner than you think
![Page 25: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/25.jpg)
typedef React = State -> View 29 May 2016
Code splitting
• Until recently trend was concat/minify
• Now it’s all about dependency graphs and optimizing entry-points
• Can we follow this practice in Haxe?
![Page 26: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/26.jpg)
typedef React = State -> View 29 May 2016
Modular JS https://github.com/explorigin/modular-js
![Page 27: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/27.jpg)
typedef React = State -> View 29 May 2016
Modular JS https://github.com/explorigin/modular-js
• Create one JS file for each Haxe class, using AMD module system
• Then use a JavaScript bundler (more on that later) to recombine it
• Risks: experimental, requires a fully custom JavaScript generator
![Page 28: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/28.jpg)
typedef React = State -> View 29 May 2016
Modular Haxehttps://github.com/elsassph/modular-haxe-example
![Page 29: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/29.jpg)
typedef React = State -> View 29 May 2016
Modular Haxehttps://github.com/elsassph/modular-haxe-example
• Break monolithic codebase, with full type integrity, into multiple JS modules
• Natural fit for lazy-loading of large features
• Risk: experimental, requires to lightly patch the compiler output
![Page 30: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/30.jpg)
typedef React = State -> View 29 May 2016
Modular Haxe – How? https://github.com/elsassph/modular-haxe-example
• Use --exclude or --excludeFile to exclude classes/packages• Eg. compile Main app excluding Module code,
• and Module excluding shared code
• Use @:expose to mark classes shared between modules
• Patched JS allows the modules to merge their code• Think: Flash Runtime Shared Libraries, eg. loading SWFs in the same
ApplicationDomain
![Page 31: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/31.jpg)
typedef React = State -> View 29 May 2016
Modular Haxe – Usage https://github.com/elsassph/modular-haxe-example
• Lazy loading can’t be simpler
• (helper can even load and apply a CSS file at the same time)
![Page 32: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/32.jpg)
typedef React = State -> View 29 May 2016
Modular Haxe – Limitationhttps://github.com/elsassph/modular-haxe-example
• Not designed for fine granularity
• You can’t @:expose everything (and change existing Haxe libraries)
• Expect some redundancy (core classes, 3rd party libraries)
• Can you guess what would work well?
![Page 33: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/33.jpg)
typedef React = State -> View 29 May 2016
Modular Haxe + React!
• React library is external and global
• Modularization based on pages or complex components (ex: video player)
• Modules can encapsulate views and related state/logics.
• Minor redundancies to expect and limited exclude/expose effort
![Page 34: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/34.jpg)
typedef React = State -> View 29 May 2016
![Page 35: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/35.jpg)
typedef React = State -> View 29 May 2016
Npm – node.js package manager
• The tool you will use to manage external JavaScript modules
• Learn it, tame it, it’s unavoidable and unstoppable
![Page 36: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/36.jpg)
typedef React = State -> View 29 May 2016
Npm – node.js package manager
• Also a huge repository of (usually crossplatform) command line tools
![Page 37: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/37.jpg)
typedef React = State -> View 29 May 2016
Module systemsrequire(‘react’)
![Page 38: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/38.jpg)
typedef React = State -> View 29 May 2016
Module systems: CommonJS
• Most popular (thanks to node.js)
• Synchronous by design
• Needs to be transformed for the browser
![Page 39: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/39.jpg)
typedef React = State -> View 29 May 2016
Module systems: CommonJS
• Fits very naturally with Haxe classes / imports
![Page 40: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/40.jpg)
typedef React = State -> View 29 May 2016
Module systems: AMD
• Asynchronous by design
• Browser-friendly, using SystemJS or RequireJS at runtime
• Can be bundled into one JS
• This is what modular-js generates
![Page 41: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/41.jpg)
typedef React = State -> View 29 May 2016
![Page 42: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/42.jpg)
typedef React = State -> View 29 May 2016
Module bundlingAka compiling JavaScript
![Page 43: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/43.jpg)
typedef React = State -> View 29 May 2016
Module bundling
• Most bundlers support both CommonJS and AMD modules
• Bundlers package modules and their dependencies into one or more (code splitting) JS bundles
• Dependencies can be transformed/processed by loaders
![Page 44: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/44.jpg)
typedef React = State -> View 29 May 2016
Module bundling
• Dependencies are not only code: loaderscan also transform other assets, like raw text, JSON, CSS,… and even images.
• Which means you can easily package assets in your JS bundles.
![Page 45: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/45.jpg)
typedef React = State -> View 29 May 2016
Choosing a bundlerhttps://webpack.github.io/docs/comparison.html
(slightly biased)
![Page 46: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/46.jpg)
typedef React = State -> View 29 May 2016
Browserify
• Oldest, so “less cool”
• Very simple, fast and lightweight tool
• Loaders are plugins (batteries not included)
• Lots of misinformation around its (lack of) features but it’s as capable as the cool kids: https://t.co/Wi0G3spkIB
![Page 47: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/47.jpg)
typedef React = State -> View 29 May 2016
Webpack
• Somehow the most popular / cutting edge
• Provides many loaders out of the box
• “Cumbersome” to configure
![Page 48: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/48.jpg)
typedef React = State -> View 29 May 2016
![Page 49: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/49.jpg)
typedef React = State -> View 29 May 2016
JSPM
• Package manager and bundler
• Based on SystemJS (dynamic modules loader)
• Simple to use
• Renewed popularity (it used to be slow)
• Smart code-splitting (bundle arithmetic)
![Page 50: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/50.jpg)
typedef React = State -> View 29 May 2016
And using Haxe?Any bundler will work, really.
![Page 51: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/51.jpg)
typedef React = State -> View 29 May 2016
One more thing…Putting it all together
![Page 52: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/52.jpg)
typedef React = State -> View 29 May 2016
![Page 53: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/53.jpg)
typedef React = State -> View 29 May 2016
Hot Module Replacement
• Aka Hot Reload, Live Reload,…
• Must have feature if you’re not has-been
• Some assets auto-reload, like CSS.
• For code it’s not magic: the application needs special logic to handle changes and refresh itself
• Every module bundler has its API.
![Page 54: Haxe React “Magic”wwx.silexlabs.org/2016/assets/presentations/philippe-elsass.pdftypedef React = State -> View 29 May 2016 Here’s the plan 1. React 2. Code splitting 3. JS bundlers](https://reader033.vdocuments.mx/reader033/viewer/2022060321/5f0d29a37e708231d438fb7f/html5/thumbnails/54.jpg)
typedef React = State -> View 29 May 2016
Haxe + React + Hot reloadhttp://github.com/elsassph/haxe-react-hot-boilerplate