from jqyery to react

26
FROM JQUERY TO REACT MARIUS NIELSEN [email protected]

Upload: marius-nielsen

Post on 09-Jul-2015

297 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: From jQyery to React

FROM JQUERY TO REACTMARIUS NIELSEN

[email protected]

Page 2: From jQyery to React
Page 3: From jQyery to React

ALL NEW UI ELEMENTSWERE WRITTEN WITH REACT

Page 4: From jQyery to React

ANY TIME WE CHANGED OLD UI ELEMENTS,WE PORTED TO REACT

Page 5: From jQyery to React

AT FIRST WE CONTINUED TO USE JQUERY + PLUGINS AS BEFORE

Page 6: From jQyery to React

RESULTING IN LOTS AND LOTS OFComponentDidMount / componentDidUpdate

Page 7: From jQyery to React

IT SLOWED US DOWN,AND RESULTED IN COMPLEX COMPONENTS

Page 8: From jQyery to React

WE EXPERIENCED PAIN

Page 9: From jQyery to React

WE STARTED TO DROP PLUGINS

Page 10: From jQyery to React

SHIMS REPLACED CONVENIENTJQUERY METHODS

Page 11: From jQyery to React

BOOTSTRAP JQUERY PLUGINSWERE IMPLEMENTED IN REACT

Page 12: From jQyery to React

BEFORE WE KNEW IT:

Page 13: From jQyery to React
Page 14: From jQyery to React

THE RESULTS:

Page 15: From jQyery to React

REDUCED SIZE ON SCRIPT FILES1.8 MB TO 650 KB (UNCOMPRESSED)

Page 16: From jQyery to React

MUCH LESS CODE TO MAINTAIN!

Page 17: From jQyery to React

NO CATCH-ALL OVERLY GENERIC PLUGINS

Page 18: From jQyery to React

SMALLER, SIMPLER COMPONENTS

Page 19: From jQyery to React

RICH UI GOT EASIER TO CREATEBY REUSING SMALLER COMPONENTS

Page 20: From jQyery to React

HAPPIER DEVELOPERS!

Page 21: From jQyery to React

AT THIS POINT THE STEP TO FULLSINGLE PAGE ARCHITECTURE WAS SMALL

Page 22: From jQyery to React

TO SUM IT UPWE'RE NOT GOING BACK!

Page 23: From jQyery to React

NEXT STEPS FOR US

Page 24: From jQyery to React

OPEN SOURCE OUR LIBS?

Page 25: From jQyery to React

HIRE MORE GREAT DEVELOPERSxeneta.com/company/careers

Page 26: From jQyery to React

MAKE MORE AWESOME PRODUCTS