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

meetup-web-platform

v7.1.1775

Published

A collection of Node web application utilities developed for the Meetup web platform

Downloads

103

Readme

npm version Build Status Coverage Status styled with prettier

Web platform

This is the base platform for serving Meetup web apps including the public website and admin. It provides a Hapi webserver and a set of conventions for composing applications with React + Redux.

In general, application-specific code will live outside of this package.

Docs

Public modules

Releases

This package uses semver versioning to tag releases, although the patch version is determined exclusively by the Travis build number for pushes to master. Major and minor versions are hard-coded into the Makefile.

Manual pushes to master and PR merges to master will be built by Travis, and will kick off the yarn publish routine. The currently-published version of the package is shown on the repo homepage on GitHub in a badge at the top of the README.

Development/Beta releases

When developing a consumer application that requires changes to the platform code, you can release a beta version of the platform on npm by opening a PR in the meetup-web-platform repo. When it builds successfully, a new beta version will be added to the list of available npm versions. The generated version number is in the Travis build logs, which you can navigate to by clicking on 'Show all checks' in the box that says 'All checks have passed', and then getting the 'Details' of the Travis build.

At the bottom of the build log, there is a line that echos the GIT_TAG. If you click the disclosure arrow, the version number will be displayed, e.g. 0.5.177-beta.

You can then install this beta version into your consumer application with

> yarn install meetup-web-platform@<version tag>

Each time you push a change to your meetup-web-platform PR, you'll need to re-install it with the new tag in your consumer application code.

The overall workflow is:

  1. Open a PR for your meetup-web-platform branch
  2. Wait for Travis to successfully build your branch (this can take 5+ minutes)
  3. Get the version string from the build logs under GIT_TAG
  4. (if needed) Push changes to your meetup-web-platform branch
  5. Repeat steps 2-3

Introductory Resources

Basic knowledge of reactive programming using RxJS 5 is a pre-requisite for being able to work in this repository. https://www.learnrxjs.io/ manages a good list of starting resources, specifically:

Suggestions:

  • Reference the api docs regularly while watching videos (http://reactivex.io/rxjs/).
  • Play around with the JSBin in the egghead.io videos (console.log to each transformation step, etc).

Modules

Server

The server module exports a startServer function that consumes a mapping of locale codes to app-rendering Observables, plus any app-specific server routes and plugins. See the code comments for usage details.

Client

Rendering 'empty' state with <NotFound>

To correctly render a 'not found' state for a feature, you should render a <NotFound> component, which the server will use to set the response status to 404.

Example:

import NotFound from 'meetup-web-platform/lib/components/NotFound';

class GroupContainer extends React.Component {
	render() {
		if (!this.props.group) {
			return (
				<NotFound>
					<h1>Sorry, no matching group was found</h1>
				</NotFound>
			);
		}

		return <GroupDetail group={this.props.group} />;
	}
}

Tracking

Activity tracking happens on every HTTP request, and is tagged with

platform: 'WEB',
platform_agent: <read from package.json:config.agent>

The platform also tracks clicks similar to Meetup classic.

More info in Confluence here

Dev patterns

Async

Use Promises or Observables to handle async processing - the latter tends to provide more powerful async tools than the former, particularly for long processing chains or anything involving sequences of values, but Promises are good for single async operations. Do not write functions that fire callbacks.

When using Observables, you can always throw an Error and expect the subscriber to provide an onError handler. When using Promises, call Promise.reject(new Error(<message>)) and expect that the caller will provide a .catch() or onRejected handler.

Error Handling

Guidelines:

  1. Use Error objects liberally - they are totally safe until they are paired with a throw, and even then they can be usefully processed without crashing the application with a try/catch.
  2. Use throw when there is no clear way for the application to recover from the error. Uncaught errors are allowed to crash the application and are valuable both in dev and in integration tests.
  3. Populate state with the actual Error object rather than just a Boolean or error message String. Error objects provide better introspection data. For example, a validation process might return null (for no validation errors) or new Error('Value is required') rather than true (for "is valid") or false.
  4. Many errors will have an associated Redux action, such as LOGIN_ERROR - keep the corresponding state updates as narrow as possible. For example, LOGIN_ERROR should only affect state.app.login - all affected UI components should read from that property rather than independently responding to LOGIN_ERROR in a reducer. Do not create a high-level error properties state
  5. When using Promises or Observables, always provide an error handling function (catch for Promises, error for Observables)