michaelrambeau

BestOfJS Overview

bestofjs-webui is a Single-Page-Application made with React, Redux for the state management, and React-Router.

It can be hosted on any static hosting server.

We use GitHub pages for the production version to take advantage of js.org domain.

Start up

michaelrambeau

import React from 'react'
import ReactDOM from 'react-dom'

const withMouse = (Component) => {
  return class extends React.Component {
    state = { x: 0, y: 0 }

    handleMouseMove = (event) => {
      this.setState({
        x: event.clientX,

michaelrambeau

import React from 'react'
import SalariesBlock from '../blocks/SalariesBlock'
import ExperienceBlock from '../blocks/ExperienceBlock'
import Meta from '../elements/Meta'

const DevelopersTemplate = props => (
  <div className="template">
    <Meta section={props.section} subSection="developers" />
    <SalariesBlock {...props} />
    <ExperienceBlock {...props} />

michaelrambeau

/*
Context: we have an API that throws an error (not wrapped in a Promise).
We want to catch that error at the upper level, without making fail the main function
that should end normally.
*/
function apiRequest() {
  throw new Error('Big Bug')
}

async function action() {

michaelrambeau

// Compound Components

import React from 'react'
import {Switch} from '../switch'

class Toggle extends React.Component {
  // you can create function components as static properties!
  // for example:
  // static Candy = (props) => <div>CANDY! {props.children}</div>
  // Then that could be used like: <Toggle.Candy />

michaelrambeau

/*
Script to run in the latest version of node.js (tested in v10.5.0)
to check the behavior of asynchronous iterators.
*/

// Return a Promise that resolves after 0.5 seconds, to simulate an API request
async function fetchUser(i) {
  return new Promise(resolve => {
    setTimeout(resolve, 500, `User #${i}`)
  })

michaelrambeau

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

michaelrambeau

Simple MongoDB Keyv Adapter

Why?

The MongoDB adapter for keyv is fine but I needed a way to pass an existing connection to the adapter.

In the current implementation, the constructor connects to the MongoDB by itself, I couldn't make it work by extending the current class.

So I created my own MongoDB adapter, based on the existing one, removing the feature about MongoDB GridFS I didn't need.