evanlucas

Gitlab CI Code Coverage with node-tap

1. Set the 'Test coverage parsing' to ^Statements\s*:\s*([^%]+)
2. In your .gitlab-ci.yml file, run tap with the --coverage-report=text-summary flag

gaearon

import React, { Component } from 'react'
import Subapp from './subapp/Root'

class BigApp extends Component {
  render() {
    return (
      <div>
        <Subapp />
        <Subapp />
        <Subapp />

ryanflorence

<MatchMedia queries={{ mobile, tablet }}>
  {media => (
    media.mobile ? (
      <div>mobile</div>
    ) : media.tablet ? (
      <div>tablet</div>
    ) : (
      <div>desktop</div>
    )
  )}

idibidiart

Building a Maintainable, Agile Architecture for Realtime, Transactional Apps

A maintainable application architecture requires that the UI only contain the rendering logic and execute queries and mutations against the underlying data model on the server. A maintainable architecture must not contain any logic for composing "app state" on the client as that would necessarily embed business logic in the client. App state should be persisted to the database and the client projection of it should be composed in the mid tier, and refreshed as mutations occur on the server (and after network interruption) for a highly interactive, realtime UX.

With GraphQL we are able to define an easy-to-change application-level data schema on the server that captures the types and relationships in our data, and wiring it to data sources via resolvers that leverage our db's own query language (or data-oriented, uniform service APIs) to resolve client-specified "queries" and "mutations" against the schema.

We use GraphQL to dyn

rgrove

Can't share the complete code because the app's closed source and still in stealth mode, but here's how I'm using React Router and Redux in a large app with server rendering and code splitting on routes.

Server

1. Wildcard Express route configures a Redux store for each request and makes an addReducers() callback available to the getComponents() method of each React Router route. Each route is responsible for adding any Redux reducers it needs when it's loaded. (This isn't really necessary on the

vasanthk

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

1. Clarify and agree on the scope of the system

• User cases (description of sequences of events that, taken together, lead to a system doing something useful)
  • Who is going to use it?
  • How are they going to use it?

ryanflorence

We're excited to have you attend one of our workshops! Here's a JavaScript (re)fresher to help you get up-to-speed on some features of the language we'll be using.

Let and Const

JavaScript has always had var:

var name = 'Ryan'

withtwoemms

{"GET": {"account/settings": {},
         "account/verify_credentials": {"include_email": "None",
                                        "include_entities": "None",
                                        "skip_status": "None"},
         "application/rate_limit_status": {"resources": "None"},
         "blocks/ids": {"cursor": "None", "stringify_ids": "None"},
         "blocks/list": {"cursor": "None",
                         "include_entities": "None",
                         "skip_status": "None"},
         "direct_messages": {"count": "None",

vjeux

JedWatson/classnames (2650855 dls, 1465 stars)
yannickcr/eslint-plugin-react (2077066 dls, 710 stars)
rackt/react-router (1833204 dls, 9050 stars)
facebook/react-dom (782024 dls, 33044 stars)
gaearon/react-hot-loader (708042 dls, 3250 stars)
rackt/redux (568969 dls, 10743 stars)
rackt/react-redux (495498 dls, 1509 stars)
jsdf/coffee-react-transform (463488 dls, 380 stars)
JedWatson/react-input-autosize (455277 dls, 107 stars)
reflux/reflux (393281 dls, 4316 stars)

iammerrick

A lot of times I'll see developers author a component like this:

const Component = ({shouldShowSomething}) => {
  return (
    <div>
      <div>Some Elements</div>
      { shouldShowSomething ? <div>Something</div> : null }
    </div>
 );