Skip to content
example for kontraktor react/jsx SPA without nodejs (java implementation of jsx, npm and bundling)
JavaScript Java HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src/main bump version add npm files Nov 3, 2018
README.MD Update README.MD Jan 21, 2018
pom.xml bump version add npm files Nov 3, 2018

README.MD

React JSX front end app powered by a java backend, no node/npm/webpack required

Frontend

  • intrinsic react jsx transpilation
  • Ultra fast hot reloading / live editing (Disclaimer: breakpoints cannot be set inside Chrome then: use 'debugger;' instead)
  • built-in npm replacement dependency management ('JNPM') fetches missing imports on demand
  • integrated bundler/transpiler. Integrates google-clojure compiler to compile down to ES5 in production mode
  • Sophisticated java/javascript interoperation. Fulfil Promises from js by java code, server push by calling callbacks from java transparently to js client code.

Has been tested with major react-UI libs: react-material-ui, react-bootstrap and react-semantic-ui (should work with any npm powered js lib)

Server Side

  • Actor based async server (Java 8, node style threading model, but enables multithreading by assigning client sessions to additional threads)
  • (optional) Session handling, timeout, ressurrection (SPA client was away/offline and connects back)
  • Dynamically change connection type (http adaptive long poll or websockets) without code change

Very fast Live Editing / Live Reloading (updates within milliseconds after hitting 'Ctrl-S'):

Watch the video

Jnpm in action, session resurrection:

Watch the video

Getting started

Starter templates and scaffolding

Docs

Kontraktor's JSX transpilation + npm emulation

Talking from JavaScript with the Java Server

Examples for semantic-ui-react and react-bootstrap

Kontraktor home

Run this sample app

IDE

  • add project to your ide (from pom)
  • run ReactMaterialUITestApp with workingdir [...]/examples/webapp-spa/react-ui-lib-examples/react-material-ui
  • goto localhost:8080 in your browser
  • first request triggers download of required npm packages so give it like 50 seconds (wathc console)
  • set DEVMODE to false to get a (dynamically) bundled build

commandline:

git clone https://github.com/RuedigerMoeller/InstrinsicReactJSX.git
cd InstrinsicReactJSX/
mvn clean package
java -jar target/bundle.jar

browser: localhost:8080 (watch console on first request isntalling dependencies ..)

Note:

  • on the initial request, all missing npm dependencies are installed by kontraktor-Jnpm, this migth take up to a minute, once (watch console) per install.
  • as source is kept in separate files during development mode, loading is somewhat slowish (~3 seconds). Set DEVMODE to false inside ReactMaterialUITestApp, restart server in order to see loading time of bundled and minified app. Even then: First request triggers bundling (cached then) as kontraktor-http favors dynamic optimization over 'pre-building' (since 4.18.5 : static build artifacts support).

Simple starter templates and scaffolding

Session resurrection

  • goto localhost:8080 login (just some dummy nick)
  • press greet button
  • restart server
  • press greet button again.

Inner workings of resurrection: once a remote call to an unknown actor is received, a lookup is done from sessionid => userid (+pwd), then a new session actor is created. After that the remotecall is routed. Client receives a notification so it might update stale data.

Of course a real world app might associate arbitrary session data with a session id. Session resurrection is important for SPA apps (especially on mobile) as one frequently loses connection or keeps an SPA open for days without "refreshing".

You can’t perform that action at this time.