From jQyery to React
•Télécharger en tant que ODP, PDF•
1 j'aime•700 vues
A lightning talk presented at framsia meetup about how Xeneta transitioned from a jQuery based frontend to using React.js
Recommandé
Contenu connexe
En vedette
Dernier
Dernier (20)
From jQyery to React
- 1. FROM JQUERY TO REACT MARIUS NIELSEN marius@xeneta.com
- 3. ALL NEW UI ELEMENTS WERE WRITTEN WITH REACT
- 4. ANY TIME WE CHANGED OLD UI ELEMENTS, WE PORTED TO REACT
- 5. AT FIRST WE CONTINUED TO USE JQUERY + PLUGINS AS BEFORE
- 6. RESULTING IN LOTS AND LOTS OF ComponentDidMount / componentDidUpdate
- 7. IT SLOWED US DOWN, AND RESULTED IN COMPLEX COMPONENTS
- 9. WE STARTED TO DROP PLUGINS
- 10. SHIMS REPLACED CONVENIENT JQUERY METHODS
- 11. BOOTSTRAP JQUERY PLUGINS WERE IMPLEMENTED IN REACT
- 12. BEFORE WE KNEW IT:
- 14. THE RESULTS:
- 15. REDUCED SIZE ON SCRIPT FILES 1.8 MB TO 650 KB (UNCOMPRESSED)
- 16. MUCH LESS CODE TO MAINTAIN!
- 17. NO CATCH-ALL OVERLY GENERIC PLUGINS
- 19. RICH UI GOT EASIER TO CREATE BY REUSING SMALLER COMPONENTS
- 21. AT THIS POINT THE STEP TO FULL SINGLE PAGE ARCHITECTURE WAS SMALL
- 22. TO SUM IT UP WE'RE NOT GOING BACK!
- 23. NEXT STEPS FOR US
- 24. OPEN SOURCE OUR LIBS?
- 25. HIRE MORE GREAT DEVELOPERS xeneta.com/company/careers
- 26. MAKE MORE AWESOME PRODUCTS
Notes de l'éditeur
- Short intro to Xeneta Short intro of me
- February 23rd 2014 Added react to our repository
- We already had a handful of jQuery plugins we depended on, and we continued to use them
- jQuery tangled in with react: Hard to read and maintain code Hard to ensure behavior is as expected More complexity than needed
- More code than needed in the components
- We questioned the notion that jQuery and jQuery plugins saved us time
- Convenient methods not related to the DOM in jQuery had to be replaced, es5/6 shims was the solution.
- We use bootstrap 2. Implementing bootstrap plugin code in react was straight forward
- July 4th 2014 A little less than 5 months, most of the porting done in about one month.
- Dropped libs and plugins, more reusable code
- Wrote components to do exactly what we needed them to do, improving them further as needed.
- API based backend Fast and rich UI Data caching in the client Modularity We could do SPA without react too, but it made the steps to actually do it easier. Looked at react routers, wrote our own to get full control and use cases not covered in other libs
- Custom router Data lib