Transitioning smoothly to React

Transcript

1. TRANSITIONING SMOOTHLY TO REACT REACTJS PARIS - 2016-03-22
2. YANNICK CROISSANT Senior Software Engineer Front End @ Deezer @yannickc yannickcr
3. DEEZER Codebase from 2007 Large single page app Mainly jQuery and Handlebars ~ 200 000 SLOC ~ 400 JavaScript Files
4. PROBLEMS Huge coupling across entire application Duplicated templates between frontend (Handlebars) and backend (PHP) Became more and more di cult to maintain over the years
5. WHY REACT Can be integrated seamlessly in the existing codebase Forces us to decouple our code and think with components Can ultimately solve the frontend/backend code duplication Great community and ecosystem First step to embrace modern frontend practices
6. OUR APPROACH
7. DON'T FREEZE ANYTHING (OR ANYONE)
8. DON'T FOLLOW STATE OF THE ART JAVASCRIPT (FOR NOW)
9. THINK PROGRESSIVE ENHANCEMENT INSTEAD
10. ALL YOU NEED TO START USING REACT IS A DOM NODE R e a c t . r e n d e r ( < B u t t o n l a b e l = " A d d " / > ) , d o c u m e n t . q u e r y S e l e c t o r ( ' . w r a p p e r ' ) ) ;
11. STEP BY STEP MIGRATION App Menu Page Component Component Component Component Button Button Button Button Legacy React
12. STEP BY STEP MIGRATION App Menu Page Component Component Component Component Button Button Button Button Legacy React Start with some simple components at the bottom of your
13. STEP BY STEP MIGRATION App Menu Page Component Component Component Component Button Button Button Button Legacy React Progressively replace legacy UI components with their React
14. STEP BY STEP MIGRATION App Menu Page Component Component Component Component Button Button Button Button Legacy React Go up the DOM tree and convert legacy UI components one
15. STEP BY STEP MIGRATION App Menu Page Component Component Component Component Button Button Button Button Legacy React Until you reach the application root
16. YOU HAVE TO SOMETIMES TAKE SHORTCUTS AND CREATE "DUMMY" REACT COMPONENTS c l a s s D a t a g r i d e x t e n d s R e a c t . C o m p o n e n t { c o m p o n e n t D i d M o u n t ( ) { / / I n i t j Q u e r y p l u g i n $ ( t h i s . r e f s . d a t a g r i d ) . c r e a t e D a t a g r i d ( { t y p e : ' s e a r c h ' , i d : t h i s . p r o p s . q u e r y , s o n g s : t h i s . p r o p s . t r a c k } ) ; } c o m p o n e n t W i l l U n m o u n t ( ) { / / D e s t r o y i n s t a n c e $ ( t h i s . r e f s . d a t a g r i d ) . d e s t r o y ( ) ; } r e n d e r ( ) { r e t u r n < d i v r e f = " d a t a g r i d " > < / d i v > ; } }
17. IMPROVED CODEBASE In parallel with the React migration we also modernized our architecture and tooling ES6/2015 with the help of Clear dependency management using Depencency bundling with Replacing custom routing solution with to enforce coding style and good pratices : React speci c linting rules for ESLint Babel npm Browserify React Router ESLint ESLint-plugin-React
18. EVERYTHING IS NOT PERFECT Still a lot of global objects Should be cleaned with the migration of the last scripts Every component has state Need to rethink data handling in the whole application (Flux, Redux) Pages are not rendered on server anymore Server rendering with Node.js + React Some unit tests, but not enough :( Mocha, Jest, Enzyme Some di culty migrating existing functional tests
19. CONCLUSION Don't search for perfection, at least not at the beginning Start small, solve one problem at a time Progressively enhance existing code, do not freeze everything for a rewrite It will take time so have a clear target and a well planned roadmap
20. THANK YOU ANY QUESTIONS? @deezerdevs By the way, we are hiring ;) jobs.deezer.com