Have ideas to improve npm?Join in the discussion! »

    faun
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.1 • Public • Published

    Faun

    Circle CI Build License GitHub Version

    Faun is a light-weight library to easily make micro-frontend applications.

    Introduction

    If we treat a huge front-end application as a molecule application, we can just make several atomic applications, and then gather them together with some proper combinations and make it sense to constitute the molecule application. It is what micro-frontend aims for.

    Yet, when we trying to break down a huge application into several independent sub-applications, we might stuck in trouble with some annoying problems, such as:

    • The form to organize sub-applications
      • Where to host sub-applications' bundles and static assets
      • How could a sub-application communicate with other sub-application or framework
    • The behavior when handling router change
      • When route changes, what should be load, and what should be unload
      • How to clean up the global variables, event listeners, and so on

    To avoid making the rules for every applications repeatedly, we made a common rule for building micro-frontend applications, and abstracted them into a library, named Faun.

    [NOTE] Faun is only an implementation of the rules we made and the definition from Micro Frontend, which does not mean Faun could be used as a production-ready micro-frontend framework.

    Features

    • Light weight: only 57 kB with terser
    • COMPLETELY framework-independent
    • Control the sub-applications by sandboxes and snapshots
    • Load sub-applications based on JavaScript entries
    • Style isolation supported
    • History routing cache supported
    • Lifecycle hooks integration
    • Global event bus integration for communication

    Installation

    The package is now under development mode, if you seriously want to play with it, just read Getting Started

    Since the package was ready to switch itself as a published NPM package, its name would be faun at NPM registry, in the near future, it could be installed by:

    $ npm install faun

    Another way to install it is link the AMD-bundled faun.min.js through script tag:

    <script src="https://unpkg.com/faun@latest/dist/umd/faun.min.js"></script>

    Documentation

    Seriously coming soon, now part of the documentation is already in docs folder.

    Getting Started

    To run the project and the examples, you should clone the repository from GitHub:

    $ git clone https://github.com/lenconda/faun.git

    Then install the dependencies. The repository's dependencies are managed by npm:

    cd faun
    $ npm i

    Then you would have to install the dependencies for framework application and sub-applications:

    $ npm run examples:install:vue
    $ npm run examples:install:react
    $ npm run examples:install:framework

    If it is a mode that you think is troublesome and makes you dislike it, just run:

    $ npm run examples:install

    This command will serially install all dependencies for those applications.

    It is the time to run the examples:

    $ npm run examples:start:vue
    $ npm run examples:start:react
    $ npm run examples:start:angular
    $ npm run examples:start:svelte
    $ npm run examples:start:framework

    Or by executing a simpler command:

    $ npm examples:start

    This command will start framework and sub-applications in parallel.

    After finishing the steps above, and if everything goes well, these examples may already be running correctly, the examples will listen to following addresses:

    • Framework App: http://localhost:8080, if there is another process listening on it, the framework will look backward to find a free port, such as http://localhost:8081
    • Vue App: http://localhost:8181
    • React App: http://localhost:8182
    • Angular App: http://localhost:8183
    • Svelte App: http://localhost:8184

    Make sure 8181 to 8184 are not listened by other processes.

    You just open the browser and visit the framework's address.

    Todo

    • Global key-value storage support
    • Custom plugins support
    • Global interceptors support
    • Development kit support
    • Higher test coverage
    • API docs

    FAQ

    Checkout FAQ at here.

    You can make some questions at issues with FAQ tag, or directly contact me at i@lenconda.top or prexustech@gmail.com.

    Community

    lenconda/faun/issues

    Contributing

    Just tell us what can we do for you! Before contributing, please check the Issues first for existing bugs and/or suggestions.

    Want to be a contributor? Please refer to our Contribution Guide.

    Grazie to all contributors!

    Acknowledgements

    • single-spa What an awesome meta-framework for micro-frontends!
    • umijs/qiankun 📦🚀Blazing fast, simple and completed solution for micro frontends.
    • ice-lab/icestark 🐯 Micro Frontends solution for large application

    License

    Faun is licensed under WTFPL.

    Install

    npm i faun

    DownloadsWeekly Downloads

    2

    Version

    0.2.1

    License

    WTFPL

    Unpacked Size

    385 kB

    Total Files

    185

    Last publish

    Collaborators

    • avatar