NigelEarle

Knex Setup Guide

Create your project directory

Create and initialize your a directory for your Express application.

$ mkdir node-knex-demo
$ cd node-knex-demo
$ npm init

busypeoples

Introduction To Flow

Intended for developers interested in getting started with Flow. At the end of this introduction, you should have a solid understanding of Flow and how to apply it when building an application.

Part 1: Flow Fundamentals For JavaScript Developers

Covers all the basics needed to get started with Flow.

Part 2: Flow Fundamentals For ReactJS Developers

Covers all the basic needed to get started with Flow and ReactJS.

acdlite

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

seeebiii

public class Constants {

    /**
     * Contains the path to your Lambda function code.
     */
    public static final String LAMBDA_TASK_ROOT = System.getenv("LAMBDA_TASK_ROOT");

    /**
     * The environment variable is set to one of the following options, depending on the runtime of the Lambda function:
     * AWS_Lambda_nodejs, AWS_Lambda_nodejs4.3, AWS_Lambda_nodejs6.10

stipsan

import renderer from 'react-test-renderer'
import Field from '../Field'

// this import is created by our mock, it is inteded to help with testing and
// don't exist in the real package
import { intl } from 'react-intl'

it('should render correctly', () => {
  const component = renderer.create(<Field intl={intl} />)
  expect(component.toJSON()).toMatchSnapshot()

stipsan

import renderer from 'react-test-renderer'
import Viewport from '../Viewport'

it('should render correctly', () => {
  const target = {
    innerHeight: 600,
    innerWidth: 800,
    addEventListener: jest.fn(),
    removeEventListener: jest.fn()
  }

stipsan

import renderer from 'react-test-renderer'
import Canvas from '../Canvas'

it('should render correctly', () => {
  const component = renderer.create(<Form x={0} y={0} />)
  expect(component.toJSON()).toMatchSnapshot()

  const instance = component.getInstance()
  const spy = jest.spyOn(instance, 'calculateGrid')

stipsan

import renderer from 'react-test-renderer'
import Form, { validate } from '../Form'

jest.mock('redux-form', () => ({
  Field: 'Field',
  reduxForm: options => {
    // Wrap the component and return the new component, just like the real hoc does
    return Form => props => {
      // call the validate error to make sure errors are detected
      options.validate({}, props)

stipsan

import renderer from 'react-test-renderer'
import NotificationsContainer from '../NotificationsContainer'

// we can just pass through the component since we pass dispatch prop directly
jest.mock('react-redux', () => component => component)

it('should render correctly', () => {
  const dispatch = jest.fn()
  const component = renderer.create(
    <NotificationsContainer dispatch={dispatch} />

stipsan

import renderer from 'react-test-renderer'
import Input from '../Input'

it('should render correctly', () => {
  const component = renderer.create(<Input />)
  expect(component.toJSON()).toMatchSnapshot()

  // getInstance is returning the `this` object you have in your component
  // meaning anything accessible on `this` inside your component
  // can be accessed on getInstance, including props!