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

• works similar to git
• https://bitsrc.io/

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