/FlyWeb-Emoji-Tables

:helicopter: Writing MicroApps with the FlyWeb API

Primary LanguageJavaScriptMIT LicenseMIT

MicroApps with FlyWeb API

This project utilizes the new FlyWeb API from Mozilla.

FlyWeb is a project at Mozilla focused on bringing a new set of APIs to the browser for advertising and discovering local-area web servers.

A Live Demo is also available. Of course, this demo is only showcasing the app itself without the FlyWeb environment.

For a complete FlyWeb environment you'll need Firefox Nightly and must activate dom.flyweb.enabled in about:config.

The companion article to this project can be found here.

There's also a Chrome Extension for discovering FlyWeb services.

Project structure

FlyWeb server and all supporting scripts (polyfills etc.) are located under src/init/

MicroApp and its environment are located under src/app/

The root Ractive component is located in microapp.ts where the whole app gets kicked off.

FlyWeb APIs

For nicer developer experience and more type-safety I've provided several interfaces that follow the FlyWeb Spec.

GitHub Emojis

And last but not least, all of the available GitHub Emojis are strongly-typed and have their own interface and container object. Some of them have been renamed, like 100 to _100 or +1 to plus1.

Other APIs

Additionally, there's a simple interface to the well-known Northwind DB located here.

Preparing the environment

yarn or npm install

Building

  • FlyWeb Server

yarn run build or npm run build

  • MicroApp

yarn run build:microapp or npm run build:microapp

Both of them will produce several files located in dist/. You can now serve the contents from it with a web-server of your choice.

Playing with MicroApps

  • Open the main page of your server in Nightly and allow FlyWeb services.

  • Open Discover nearby FlyWeb services

  • Select Emojis micro-app

  • Have fun!

License

MIT