ReactJs Meetup at Walmart Labs

ReactJs at Walmart Labs! Print ticket Export Tell a friend Share Thursday, August 10, 2017 6:30 PM

Walmart Labs 860 W California Avenue, Sunnyvale, CA (map)

  • Date: August 10 2017
  • Venue: Walmart Lags at Sunnyvale

Large Scale React Applications with Electrode

  • 7pm - 7:30: @joelchen19 - *
  • data center: 0.5 million worth of equip, can’t handle black friday
  • content delivery acceleration
    • cloud vms: golang
    • static content servers
    • torbit:
    • akamai: cdn, regional content delivery
  • SOA micro services
    • microservices on jvm, closure
  • reporting support
    • kafka
    • graylog
    • splunk
    • internal apm dashboard
    • splunk dashboard

Electrode Backend

  • electrode app -> ci/cd pipelines -> oneops
  • coonecting services
    • swagger -> standarize the document
    • electrode
    • service client
  • configuration
    • local, dev, staging, prod
    • application with Confippet
  • deployment
    • nginx
      • pm2 (nodejs apps) -> app instances
  • metrix reporting
    • electorode APM -> sent to kafka cluster

Electrode Fronent

  • walmart.com website
    • search bar -> search app
    • homepage
    • item
    • account
    • cart
    • checkout
  • before
    • java, spring, handlbars, jquery, backbone.js
  • after
    • react, nodejs, babel, redux, webpack, chapi
  • archetypes
    • npm modules that
npm install -g yo xclap-cli generator-electrode
yo electrode
cd electrode-app
clap dev
  • karma, morcha
  • universal react: SSR
    • server side rendering
      • seo
      • faster visual
    • renderToString
      • ...
  • universal react: utils
    • config, cookies, logs
  • universal react: images
    • import non js in code
import smiley from "./smiley.jpg"
return <div><img src={ {smiley } }></div>
  • static assets
    • upload to cdn
  • optization code:
    • js, css ->
  • optimizaiton: react modules
    • for server side rendering
    • react, reactdom -> babel -> development only code removed

Developing at scale

  • hundres of developers, dozens of teams
  • component sharing
    • very important
  • electrode explorer
    • detected from github
    • show component on the website
  • meta cod review
    • merge npm publish
  • http://electrode.io

Action Item

research:

  • confippet
  • kafka
  • splunk
  • graylog
  • akamai
  • torbit

Managing React componet with Bit

  • 7:30 - 8pm: @ranm8 -
  • Ran Mizrahi, Cocyles, Author of Bit
  • component management tool
  • story of left-pad
  • how many times “isString” is duplicated?
  • 10k tops, github 1000 times, 100+ different implementations
  • 30 components -> 40% of total duplications reduced
  • 15 js repos with 826 files and 107758 lines scanned
  • 107758 codes, 23471 duplicated, 30%

  • duplicating code is bad, really bad
    • hard to maintain and update
    • tech debt
    • wast of time and effort
  • problem with micro-packages
    • creation overhead
    • maintenance
    • doscoverability
  • publish componetns into registry
  • how to manage 500 different packages?
bit init
# create .bit directory
bit import 

Slightly More Advanced Flow™

8pm - 8:30: @naman34 - Facebook Understanding the quirks of the Flow Type-System

  • contributor of FLow
  • Using React and Redux with Flow:
    • react-redux-flux.sugar.sh
  • Agenda
    • basics
    • opaque types
    • variances
    • object types
    • utility types
COMMENTS
Related Post