ssorallen / React Play
Licence: mit
Render React components in the Play Framework with JDK8's JavaScript engine
Stars: ✭ 216
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Play
Play Reactive Slick
This is Play Template with a nice User Interface. If you want to use Play as web framework and Postgres as Database then this demo project can be used as a starting point for your application.
Stars: ✭ 40 (-81.48%)
Mutual labels: play-framework
Play2 Html5tags
HTML5 form tags module for Play Framework
Stars: ✭ 101 (-53.24%)
Mutual labels: play-framework
Play Redis
Play framework 2 cache plugin as an adapter to redis-server
Stars: ✭ 152 (-29.63%)
Mutual labels: play-framework
Lila
♞ lichess.org: the forever free, adless and open source chess server ♞
Stars: ✭ 10,315 (+4675.46%)
Mutual labels: play-framework
Playaccesslogger
Generates access logs compatible with Apache httpd (enhanced combined format)
Stars: ✭ 21 (-90.28%)
Mutual labels: play-framework
Scala Play React Seed
❄️ Java Play 2.7.x + React seed project with full-fledged build process
Stars: ✭ 180 (-16.67%)
Mutual labels: play-framework
Scala Play Angular Seed
🍀 Scala Play 2.7.x + Angular 8 with Angular CLI seed project with full-fledged build process
Stars: ✭ 85 (-60.65%)
Mutual labels: play-framework
Play2 Crud
Simple CRUD & DAO implementation for play2
Stars: ✭ 146 (-32.41%)
Mutual labels: play-framework
Spark Submit Ui
This is a based on playframwork for submit spark app
Stars: ✭ 53 (-75.46%)
Mutual labels: play-framework
Crypto Coin Alerts
An application that let you set alerts for the prices of several cryptocurrencies
Stars: ✭ 72 (-66.67%)
Mutual labels: play-framework
Play Guard
Play2 module for rate limiting, based on token bucket algorithm
Stars: ✭ 123 (-43.06%)
Mutual labels: play-framework
Pujangga
Pujangga - Indonesian Natural Language Processing Tool with REST API, an Interface for InaNLP and Deeplearning4j's Word2Vec
Stars: ✭ 47 (-78.24%)
Mutual labels: play-framework
Pac4j
Security engine for Java (authentication, authorization, multi frameworks): OAuth, CAS, SAML, OpenID Connect, LDAP, JWT...
Stars: ✭ 2,097 (+870.83%)
Mutual labels: play-framework
Play26 Swagger Reactivemongo
A fully featured CRUD app built with Play 2.6, Swagger and ReactiveMongo
Stars: ✭ 36 (-83.33%)
Mutual labels: play-framework
Api First Hand
API-First bootstrapping tool for building RESTful web services from a Swagger/OpenAPI spec
Stars: ✭ 138 (-36.11%)
Mutual labels: play-framework
React.js on the Play Framework
- JDK8 shipped with a JavaScript runtime: Nashorn
- React supports server side rendering via
React.renderToString
. - The Play Framework is a web framework that runs on the JVM
With these powers combined, Play can use the same JavaScript sent to the client to render its templates on the server.
To try it out:
- Install JDK8 for your platform
- Clone this repository
- Follow the instructions to install and get started with Play 2.3.x
- Run the app with
play run
- View http://localhost:9000/ in your browser
What am I looking at?
This app is using the JavaScript from my React Reddit Client but with one key, huge, fantastic change: the first view you see is rendered on the server.
The magic is in the Nashorn
The part that makes this all work is the Nashorn JavaScript engine that ships with Java 8. By eval'ing components on the server, React can produce a string that's rendereable as plain old HTML.
The server:
def index = Action {
// Pass 'null' to force the correct class loader. Without passing any param,
// the "nashorn" JavaScript engine is not found by the `ScriptEngineManager`.
//
// See: https://github.com/playframework/playframework/issues/2532
val engine = new ScriptEngineManager(null).getEngineByName("nashorn")
if (engine == null) {
BadRequest("Nashorn script engine not found. Are you using JDK 8?")
} else {
// React expects `window` or `global` to exist. Create a `global` pointing
// to Nashorn's context to give React a place to define its global namespace.
engine.eval("var global = this;")
// Evaulate React and the application code.
engine.eval(new FileReader("target/web/web-modules/main/webjars/lib/react/react-with-addons.js"))
engine.eval(new FileReader("target/web/public/main/javascripts/components/App.js"))
Ok(views.html.main("React on Play") {
play.twirl.api.Html(engine.eval("React.renderToString(React.createElement(App));").toString)
})
}
}
The client receives the same React and App JavaScript files and executes the same code the server did. Unlike most other use cases, it will be working on pre-rendered HTML as opposed to an empty container.
The client:
<div id="application">
@content
</div>
<script src="@routes.WebJarAssets.at(WebJarAssets.locate("react-with-addons.min.js"))"></script>
<script src="@routes.Assets.at("javascripts/components/App.js")"></script>
<script>
React.render(
React.createElement(App, null),
document.getElementById("application")
);
</script>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].