using react js to drive change at a car maker
TRANSCRIPT
B
Richard McMenamin Digital Meetup 2016
USING REACT TO DRIVE CHANGE AT A CAR MAKER
ABOUT ME front end, UX lead at Capgemini
@richmcm
INTRO
WHAT PROBLEM ARE WE TRYING TO SOLVE?
ENGINEER SUPPLIERS
10 3 5
APPS
MANAGERENGINEERSUPPLIERS
Yes/NoYes/NoYes/NoYes/NoYes/NoYes/No
Question
Question
Question
Evidence Yes/NoYes/NoYes/NoYes/NoYes/NoYes/No
Question
Question
Question
Accept?
SYSTEM DATA
SUPPLIER DATA (SAP) HR DATA (SAP) DELIVERY CAPACITY PARTS DATA
PLATFORM
SUPPLIER DATA (SAP) HR DATA (SAP) DELIVERY CAPACITY PARTS DATA
MARIA DB
CMSWSO2
HTTP SERVER
USERS
MANAGER
SUPPLIER DATA (SAP) HR DATA (SAP) DELIVERY CAPACITY PARTS DATA
ENGINEERSUPPLIERS
MARIA DB
CMSWSO2
HTTP SERVER
MOBILE USAGE
SQLLITE
TEXT IMAGES
ENGINEER
MOBILE FIRST
DECISION
DECISION
DECISION
DID WE CHOOSE REACT?WHY
REACT ECOSYSTEM
THE ALTERNATIVES
DEVELOPER EXPERIENCE
REDUX
+
VIEW (COMPONENTS)
1. INTERACTION5. NEW STATE
2. DISPATCHACTION
3. OLD STATE
4. NEW STATE
ACTIONCREATORS
STORE REDUCERS
DEV TOOLS
SCALING REACT
COMPOSITION
containerComponent containerComponent.js
presentationComponent
presentationComponent.js
presentationComponent.scss
containerComponent containerComponent.js
presentationComponent
presentationComponent.js
presentationComponent.scss
COMPOSITION
containerComponent containerComponent.js
presentationComponent
presentationComponent.js
presentationComponent.scss
COMPOSITION
APPROACH
ITERATIVE APPROACH
INTERACTIVEWIREFRAME
VALIDATEWITH PRODUCT OWNERS
TESTWITH ENGINEERS
ITERATEPROTOTYPE
REACT LINKSIntroduction: https://facebook.github.io/react/ Documentation: https://facebook.github.io/react/docs/getting-started.html Training videos: https://egghead.io/ Using React and Webpack: http://survivejs.com/webpack_react/introduction Community chat: http://www.reactiflux.com/ (via Discord) Redux: http://rackt.org/redux/ (documentation)
How to learn the React ecosystem in an order that makes you productive without feeling overwhelmed by tool fatigue: https://github.com/petehunt/react-howto https://github.com/gaearon/react-makes-you-sad
Code style guide: https://github.com/airbnb/javascript/tree/master/react React cheat sheet: http://reactcheatsheet.com/
THANK YOU
twitter: @richmcmRichard McMenamin