michaelrambeau

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

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

// 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

/*
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

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

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

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

require('dotenv').config()
const { send } = require('micro')
const mongoose = require('mongoose')

const Restaurant = require('./models/Restaurant')
require('./models/Tag')
mongoose.Promise = global.Promise

module.exports = (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*')

michaelrambeau

import React from 'react'
import Home from './Home'
import Header from './Header'
import ProjectList from './ProjectList'
import ProjectItem from './ProjectItem'
import { Route, Switch } from 'react-router-dom'

const NoMatch = () => (<div>No match!</div>)

const ProjectItemReadme = () => (<div>This is a wonderfull project!</div>)

michaelrambeau

Comparing 2 implementations of the same function, with and without currying.

To be run from Ramda playground: http://ramdajs.com/repl/