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.button just 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
COMMENTS
Related Post