Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

From jQyery to React

596 views

Published on

A lightning talk presented at framsia meetup about how Xeneta transitioned from a jQuery based frontend to using React.js

Published in: Technology
  • Be the first to comment

From jQyery to React

  1. 1. FROM JQUERY TO REACT MARIUS NIELSEN marius@xeneta.com
  2. 2. ALL NEW UI ELEMENTS WERE WRITTEN WITH REACT
  3. 3. ANY TIME WE CHANGED OLD UI ELEMENTS, WE PORTED TO REACT
  4. 4. AT FIRST WE CONTINUED TO USE JQUERY + PLUGINS AS BEFORE
  5. 5. RESULTING IN LOTS AND LOTS OF ComponentDidMount / componentDidUpdate
  6. 6. IT SLOWED US DOWN, AND RESULTED IN COMPLEX COMPONENTS
  7. 7. WE EXPERIENCED PAIN
  8. 8. WE STARTED TO DROP PLUGINS
  9. 9. SHIMS REPLACED CONVENIENT JQUERY METHODS
  10. 10. BOOTSTRAP JQUERY PLUGINS WERE IMPLEMENTED IN REACT
  11. 11. BEFORE WE KNEW IT:
  12. 12. THE RESULTS:
  13. 13. REDUCED SIZE ON SCRIPT FILES 1.8 MB TO 650 KB (UNCOMPRESSED)
  14. 14. MUCH LESS CODE TO MAINTAIN!
  15. 15. NO CATCH-ALL OVERLY GENERIC PLUGINS
  16. 16. SMALLER, SIMPLER COMPONENTS
  17. 17. RICH UI GOT EASIER TO CREATE BY REUSING SMALLER COMPONENTS
  18. 18. HAPPIER DEVELOPERS!
  19. 19. AT THIS POINT THE STEP TO FULL SINGLE PAGE ARCHITECTURE WAS SMALL
  20. 20. TO SUM IT UP WE'RE NOT GOING BACK!
  21. 21. NEXT STEPS FOR US
  22. 22. OPEN SOURCE OUR LIBS?
  23. 23. HIRE MORE GREAT DEVELOPERS xeneta.com/company/careers
  24. 24. MAKE MORE AWESOME PRODUCTS

×