This is a collection of tiny demo projects to show off how we can use javascript libraries from scala.js
Some of the projects run in the browser, while some run on node.
ScalablyTyped supports that users contribute their own "sugar" on top
of the generated typings. These projects are called facade projects,
and this project uses react-facade to make it smoother to work with react.
- react and react-dom for rendering with react-facade helpers
- csstypes for a fully typed definition of css
- MobX for state management
- Axios to fetch a json resource
- Material-ui (the old version, 0.20) for graphical components.
sbt> react-mobx/start starts a webpack-dev-server at http://localhost:8001 .
Integrates an image carousel library called react-slick with japgolly's fantastic scalajs-react wrapper
sbt> react-slick/start starts a webpack-dev-server at http://localhost:8005 .
It uses d3 to generate a rather fancy spinning globe. Demo is converted from here
sbt> d3/start starts a webpack-dev-server at http://localhost:8002 .
The demo loads the google maps javascript as distributed by google (see index.html ). It's very simple usage, it just shows the location of a few beaches.
sbt> google-maps/start starts a webpack-dev-server at http://localhost:8004 .
This demo shows how to interact with old-style javascript. Jqueryui is a global library (as in, not a module), so you'll see the code touches an object to include it. It also extends jquery with more functionality, so you'll see an explicit cast to tell the compiler about this. This is poor mans interface augmentation (a mechanism by which typescript does this automatically)
- jquery
- jqueryui
sbt> jquery/start starts a webpack-dev-server at http://localhost:8003 .
This demo showcases a pretty simple todo app (stolen and adapted from scalajs-vue). Some templating is done in index.html, while a bunch of stuff is done in Scala.
From its design it's pretty clear that Vue was designed by javascript people.
Trying to obtain type safety in this mess will probably never be worth it,
but at least now you can try! :)
sbt> vue/start starts a webpack-dev-server at http://localhost:8006 .
This uses react and react-big-calendar
sbt> react-big-calendar/start starts a webpack-dev-server at http://localhost:8007 .
Implements the same github repository search as in the react-mobx demo, just with redux and semantic-ui-react instead, along with a random sampling of graphical components.
sbt> semantic-ui-react/start starts a webpack-dev-server at http://localhost:8009 .
A fancy animation of a horse, stolen from three.js demos,
with a change of loaders from retyped demos
sbt> three/start starts a webpack-dev-server at http://localhost:8008 .
Write your talks in scala.js! This uses highlight.js and reveal.js along with
scalajs-react. adapted from scala-reveal-js,
sbt> reveal/start starts a webpack-dev-server at http://localhost:8010 .
Simple charting using canvas elements. Shows off how to work with the DOM as well
as how to use chart.js. Heavily adapted from the retyped demo,
sbt> chart/start starts a webpack-dev-server at http://localhost:8011 .
Let's be nice and say that Angular is a reasonable alternative for creating a frontend app. If you agree, now is your chance to use it with Scala.js.
Adapted from sherpal's prototype.
sbt> angular/start starts a webpack-dev-server at http://localhost:8012 .
Storybook is a pretty great prototyping and demo tool. It does a lot of webpack and babel itself, so the setup is a bit more hassle than other libraries. On the bright side it comes with hot module reloading out of the box, even with Scala.js
sbt> storybook-react/run starts a webpack-dev-server at http://localhost:8013 .
Demo adapted from documentation
sbt> p5/start starts a webpack-dev-server at http://localhost:8014 .
Demo adapted from scalajs-leaflet
sbt> leaflet/start starts a webpack-dev-server at http://localhost:8015 .
sbt> material-ui/start starts a webpack-dev-server at http://localhost:8016 .
sbt> antd/start starts a webpack-dev-server at http://localhost:8017 .
sbt> react-router-dom/start starts a webpack-dev-server at http://localhost:8018 .
Implements the backend/mainprocess part of an Electron app in Scala.js, though it would be easy to do the frontend as well (in another module).
To start it you'll need electron installed globally:
yarn global add electron
and then start the project like this:
sbt>electron/run
Again adapted from sherpal's work.
This demo is adapted from sri, namely the App with drawer navigation example.
To run this you'll need to follow the getting started guide for react-native.
When you have an emulator running, you can start the demo like this:
sbt>reactnative/run
Note that to we keep things simple here: no production build, no iOS version, etc.
This is a very simple app which uses a few functions from lodash.
sbt> lodash/run runs the demo in node.
This demo is a HTTP endpoint written in express, which runs on node. Adapted from this
sbt> node-express/run will start it.
You'll need for instance curl to test it:
> curl http://localhost:3000/welcome
#Hello, World!
> curl http://localhost:3000/welcome/foo
# Hello, foo!sbt> typescript/run runs the typescript compiler on two files (one of which is meant to fail).
It accepts parameters to specify other files if you want to play around.
Pull requests most welcome!