Using React Js to drive change at a car maker

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


MARIA DB

CMSWSO2

HTTP SERVER

USERS

MANAGER


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





COMPOSITION





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

Using React Js to drive change at a car maker

Technology