npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

raincatcher-tutorial-module

v0.0.2-pre.1

Published

An example Raincatcher module to highlight bridging client and cloud functionality

Downloads

12

Readme

Simple Raincatcher Example Module

This simple module is intended to demonstrate:

  • The structure of a Raincatcher module.
  • The concept of bridging client and cloud functionality in the same module.

These are key concepts when developing Raincatcher modules.

This module is a very simple Raincatcher module that allows the listing and creation of users. The goal of this module is to be integrated into a client and cloud app to allow client interactions (list user, create user) to be pushed to the cloud app.

This module is intended to be used with the raincatcher-tutorial-cloud and raincatcher-tutorial-client apps.

Solution Overview

This module is separated into to sections: client and cloud. On both sides of the module, the mediator topic wfm:user is used for publishing and subscribing using the mediator.

Client

As in all other Raincatcher modules, the client side of the module is based on AngularJS 1. This side of the module presents the user with a list of existing users and allows the user to create a new user.

This functionality is located in the lib/angular folder. A new wfm.users angular module is created with:

  • A single directive (lib/angular/user/user-directive.js) for rendering existing users and the form for creating a new user.
  • A single controller (lib/angular/user/user-controller.js) for updating the data bound in the directive. This controller publishes and subscribes to wfm:user topics to update its state.
  • A single service (lib/angular/services/user-client-service.js) for making http requests to the cloud side of the app.

Cloud

As in all other Raincatcher modules, the cloud side of the solution is based on ExpressJS routes. This side of the app is responsible for storing a set of users on the cloud.

The cloud side of the module is located in the lib/server folder.

The lib/server/router.js file creates an ExpressJS router and mounts the routes on the relevant endpoint configured by lib/config-user.

Bridging Client and Cloud

The client and cloud side of this module are bridged by the lib/angular/services/user-client-service file. This service sets up subscribers for events that other parts of the client can publish.

To highlight this, consider an example flow:

  1. When the UserController is initialised, it publishes the wfm:user:list topic. It also subscribes the to the done state for the wfm:user:list topic.
  2. The UserClientService has subscribed to this topic, so the function is called.
  3. The UserClientService makes a HTTP GET request to the server side of the module using the list function.
  4. The GET handler in the lib/server/router.js receives the http request.
  5. The GET handler subscribes once to the done state for the wfm:user:list topic.
  6. The GET hanlder publishes the wfm:user:list topic. This is subscribed to by the lib/server/userStore User Store.
  7. The User Store publishes the done state for the wfm:user:list topic. This is subscribed to in Step 5.
  8. The GET handler responds with a HTTP response to the UserClientService.
  9. The UserClientService handles the HTTP response and emits the done state for the wfm:user:list topic.
  10. The UserController subscription in Step 1 is fired. This updates the state of the users on the $scope, which in turn updates the UI.

![Client-Cloud Interaction Sequence Diagram](./sequence-diagrams/Client-Cloud Interaction.png)