DocuSign is implementing React to enhance frontend development through a shared component library and a focus on stateless components, promoting consistency and efficiency. The transition aims to facilitate gradual adoption without a complete refactor, allowing teams to build new features while improving UI architecture. Anticipated challenges include integrating existing CSS into the new system and the learning curve associated with React's paradigms.

1. DocuSign’s Road to React

2. Joe Cocco
Engineering Manager
joe.cocco@docusign.com
Claudiu Andrei
Lead Engineer
claudiu.andrei@docusign.com

4. Design System!

5. Success!
● Company wide adoption
● Consistency re-enforces trust
● Saves engineering time

6. Issues at scale
● Only provides CSS
● Teams still have to write HTML
● Updating classes/HTML requires a lot of work

7. Hello World React!

8. Hello React!
● Slowly introduction into existing codebases
● Helps scale our front end
● One framework to learn across all teams

9. Our Goal

10. Our Goal
● Not doing an entire refactor
● Give developers the tools to move forward
● Build new features with React
● Separation of concerns - pure presentational
components

11. Our Plan

12. Our Plan
● Shared component library
● Stateless components
● Shared eslint config
● create-docusign-app (similar to create-react-app)
● Contributors from across teams
● Quality through best practices managed by stakeholders

13. Hurdles

14. Anticipated Hurdles
● Getting existing CSS into the React repo
● Integrating React into existing applications
● Training / learning curve

15. Paradigm

16. Paradigm adoption
● React is more than the React framework
● React is a different way to think about how we build UIs
● Today most of the new frameworks adopted the React ideas

17. Thinking react
● Break ui into component hierarchy
● Focus on composition
● Stateless views
● Declarative everything
● Explicit

18. Redux
● Single source of truth
● Immutable state
● Changes are replayable (made by pure functions)
● Separation of concerns
● Move optimizations into the architecture

19. Incremental introduction
● You have less pressure
● You can focus on one concept at a time
● Your team can understand in depth the architecture
● Your code will be better without a major rewrite
● The adoption of the framework will be easier

20. The Future

21. The Future
● Drag and drop prototyping?
● React Native?
● Email templating?