Awesome Open Source
Awesome Open Source

Demos for ScalablyTyped

This is a collection of tiny demo projects to show off how we can use javascript libraries from scala.js

React demos

All react demos are now moved to separate repositories by the react library they use. See slinky demos here

Browser demos

d3

Demo

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:8001 .

google-maps

Demo

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:8002 .

jquery

Demo

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)

Libraries used

  • jquery
  • jqueryui

sbt> jquery/start starts a webpack-dev-server at http://localhost:8003 .

Vue

Demo

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:8004 .

Three.js

Demo

A fancy animation of a horse, stolen from three.js demos. sbt> three/start starts a webpack-dev-server at http://localhost:8005 .

Reveal.js

Demo

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:8006 .

Chart.js

Demo

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:8007 .

Angular 8

Demo

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:8008 .

P5

Demo

Demo adapted from documentation sbt> p5/start starts a webpack-dev-server at http://localhost:8009 .

Leaflet

Demo

Demo adapted from scalajs-leaflet sbt> leaflet/start starts a webpack-dev-server at http://localhost:8010 .

Onsenui

Demo Adapted from documentation

sbt> onsenui/start starts a webpack-dev-server at http://localhost:8011 .

phaser

Demo Adapted from animation/create-from-sprite-config example

sbt> phaser/start starts a webpack-dev-server at http://localhost:8012 .

Pixi

Demo This is the translation of some of the examples into Scala.

Pixi.js is a library to render blazingly fast 2D animations on Canvas, using WebGL under the hood.

sbt> pixi/start starts a webpack-dev-server at http://localhost:8013 .

You will be presented with a menu that has the same structure as the examples from the Pixi website.

Electron

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).

Start the project like this:

sbt>electron/run

Again adapted from sherpal's work.

Node demos

lodash

This is a very simple app which uses a few functions from lodash. sbt> lodash/run runs the demo in node.

node-express

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!

typescript

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.

cypress

sbt> cypress/run runs a basic test

Your demo here! :)

Pull requests most welcome!


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (253,470
Scala (39,283
Angular (12,662
Jquery (7,886
Expressjs (7,171
Electron (6,104
Demo (4,286
D3 (1,384
Google Maps (1,186
P5js (860
Chartjs (781
Scalajs (451
Lodash (394
Leafletjs (296
Phaserjs (217
Jquery Ui (212
Related Projects