ReactJS meetup at Trulia

[0700..0730] CSS in React

7pm - 7:30: @joeseifi - css in react!

CSS3: good, bad, ugly

good

• css3 (the good)
• familiarity

bad

• flat -> sass
• needs vendor prefixes
• no variables, no funcitons

ugly

• global namespace pollution
• important, specificity wars and eventually !important
• nondeterministic, depends on source order
• encapsulation
• changes & dead code eliminations are manual

methodlogies

(like flux for css)

• OOCSSS
• SMACSS
• BEM

pre/post processors

(like babel for css)

• SASS
• LESS
• cssnext -> fun

##Exmaples ## (like a button)

<button class="btn btn->

JSX & DOM

CSS3, SASS

Let’s try inline style in react

json react

const styles = {

}

style in json

export const LikeButton = ({ linkes }) =>

import style spread values

SO FRAMEWORK FOR CSS IN JS

• RADIUM
• react-css-modules
• styled-components

RADIUM REACT

export const styles = {
  // json styles
}

import Radium

@Radium

decorate with

Radium Notes

• wraps your function oro component with @decorators
• creates a class to manage state for :hover, :active, :focus
• style similar child elements with .map()
• styles are inline, extract into CSS for production?

INLINE Style

• no globals (with caveats)
• built in dead code elimations, only used components
• presentation logic is in your view, find and edit
• some

React-css-modules

• based on interpoerable cs

CSSModules

• @CSSModules
• styleName = “badge”

REACT-CSS-MODULES NOTE

• styles object or this.props.styles[your classname[
• config your component classnmaes via localIdentName
• webpack css loader
• generated classname
• no overruling, intentionally nor unintentionally
• composition same as @extend in sass
• others from icss :global :export :import
• use extract text plugin in production

STYLED COMPONENTS

• import styled from ‘styled-component’
• const StyledLikeButton = styled.buttonjust css
• in component.js
• import StyledLikeButton from ""
• <StyledLikeButton className="btn-:>

STYLED COMPONENTS NOTE

• autoprefixing included for free
• write plain css, now weird polyfills needed
• generated classnames are namespaced btn-primary gjkSC
• injecdts style tags into the document head
• supports server-side rendering, but not extract text plugin
• keyframes helper keeps your rules local to your component

What’s next

• web components and shadow DOM
• cssnext -> gateway to css4
• css4
• view examples on github joe seifi joeshub/css-in-react

Action Item

• checkout github site!

[0730..0800] Reactjs Proj Sturcture using atomic design

7:30 - 8pm: @abritinthebay - reactjs proj structure using atomic design Gregory Wild-smith @bleacher report

Legacy Code

Atomic Design

• designer come up with the idea

• a method of componet and design organization

• atoms build molecules which build cells which building organism

• We’re not designing pages, we’re designing systems of

bleacher report

• ArticleSummaryComponent
  • sidebar, everywhere
• Contentstream component

We use SASS

• sass and mixin

@include cell("articleSummary") {
  @include media_target("small") {
  }
}

@include location(".featuredArticles") {
  //
  # include
}

where it leaves

• components
  • atoms
  • cells
  • molecules
  • organisms
    • flyin.js
    • ooter.js

compose, don’t encapsulate

• encapsulation
• composition

return <FooComponent {props} >

Component Modeling

• again - avoid unnecessary encapsulation.
• smaller is good, but abstracted is better
• component state is almost never needed
• somethign feels weird, stop, examine and refactor
• keep styles out of components

It’s more about concept

• not about the code
• using redux extensively

[0800..0830] Migration to GraphQL/Relay

@dmnd_ - lessons learned migrating to Graphql/Relay Desmond

Our

• Flexport: travel agent for port and move some stuff, figure out star* in real world. project manager role
• backend -> 1 rails monolith, 208 controller 376 models
• frontend -> 5 react app, ~1000 components, 90 Flux stores, 21 mixins

Flux problems

• 20 engineers
• scaling issue

Overfetching

{
  hero {
    name
    height
  }
}

Missing data

TypeError
Cannot read property 'physica; of undefined

error prone

• store, subscripts, dependency, child moved

Undesciplined flux stores

• become mutable global variables

Let’s migrate to GraphQL & Relay!

• How?
• Option A: GraphQL first
• jbuilder template thing: how the data is constructed
• Option B: “SPIKE”
• pick part of the app
• it was better

SPIKE

• get to try the new stuff first
• do incrementally over time
• start with single drop down:
• created relay component
• move one by one

Lessons

Generalized N+1 Query prevention

• related to overfetching ->
• by making graphql schema -> it’s easy to find N+1 queries
• annotate and get graphql query -> exactly what relationship will be loaded and nested object will be fetched
• accumulate bunch of joins and eagerloading

How to do forms

• multistage forms
• using local component state -> store in the relay store like redux store style.
• relay store is only persist on backend data

Global IDs

• global ids for every record
• graphql schema -> there is a ruby gem to identify data
• redux, global identifier. all in one bucket to distingush things

Permissons

• policy -> permissions, rails controller
• model -> doesn’t show, empty set
• when using graphql -> rails controller disappear
• graphql, write goes to mutation: rails controller, forced
• for get: different.

Flow

Later

• Flexport HQ on May 18 2017
• incremental apply

QA

• form validation, how to?
  • on the backend and front.
• look at other tools
  • relay, apollo?, mobix?
• Mobix seems cool
• Relay2??
• Data-loader => js backend to batch the backend
• Shovifying?, ruby backend
• graphql schema and mutation
• regression test
• GraphQL is more strict on format
• define GraphQL schema -> must specify type
• caching in graphql, we don’t cache things any way