Moving From Angular to React
- 1. Moda Jovem: Moving from Angular to React Ilya Gurevich
- 2. Who am I? ● Recent grad from Georgia Institute of Technology ● Frontend engineer ● Water polo player ● World traveler ● Music head
- 4. Imagine 18,000 kg of beer from New York to Los Angeles
- 5. In the past... ● Takes a long time ● Expensive Call to Broker
- 6. Happening now! Instant Quoting ● Fast ● Algorithmic ● Accurate
- 7. Imagine You own a truck. You need business. Where do you go?
- 8. In the past... ● Confusing ● Overwhelming Search Load Boards
- 9. Happening now! Customized Loads ● One-click interaction ● Specifically tuned for the user
- 10. +
- 11. Frontend Stack
- 12. 3rd Party Tools
- 13. Angular to React
- 14. Why we wanted to change
- 15. The Programmer Answer We want a framework that’s faster and simpler to develop with.
- 16. The Honest Answer? We just wanted to update our framework because everyone else was doing it. Also known as hype driven development
- 17. But Mainly?
- 18. Just kidding We did our research
- 20. Time For Some Reading
- 21. Angular 2 ● Two-way data binding ● Component-based ● Better speed and performance than Angular 1 ● AOT (Ahead-of-Time compilation) ● Directives and filters are awesome Pros
- 22. Angular 2 ● Typescript ● Unclear documentation ● Really high learning curve Cons ● “Angular 2 is terrible” ● Regular DOM ● Large
- 23. VueJS ● Lightweight ● Fast build process ● Angular-type directives ● Component based ● Virtual DOM ● Two-way binding on inputs ● Amazing documentation Pros
- 24. VueJS ● Semi-confusing syntax ● Small community ● Free-form conventions ● Majority of developers are Chinese ● Causes a language barrier Cons
- 25. React ● Component-based ● Virtual DOM ● Light-weight ● Seamless development experience ● Good testing compatibility ● Huge community Pros
- 26. React ● React isn’t a framework ● Fairly new ● Patent difficulties ● JSX learning curve Cons ● Documentation could be better ● Nested props callbacks ● Update values on forms manually
- 27. Why we ultimately chose React
- 28. React over VueJS VueJS is still too small React has a larger community React is better for large applications
- 29. But... VueJS is growing Definitely a framework to look forward to
- 31. Questions to Question How to do proper form validation? Which HTTP client to use? What even is JSX?
- 34. AXIOS
- 35. Immediate Simplifications Angular is a monster compared to React Files are much more organized Small and fast build size
- 36. Bad things Nested Prop Callbacks
- 37. Nested Prop Callbacks One function - showAccepted() ● List ○ LoadsControl ■ Loads ● WebList ○ AcceptDialogWeb ■ ConfirmationDialog ● DriverLocationDialog That’s 7 different components
- 38. Good things JSX is awesome
- 39. Why? ● Conditional rendering is simple ● State changes are intuitive ● HTML + Javascript makes sense ○ Functions in markup ● Testing with jest is easy ● Not restricted to template language
- 40. Long-term implications ● We have some serious tech debt. ● We haven’t converted everything from angular to react. ● Rebuilding the whole website from scratch is time-consuming. ● Given the nature of the industry a new framework will come along that completely changes everything anyways.
- 41. Final Thoughts Was it worth it?
- 42. Yes, definitely
- 43. THANK YOU FOR YOUR TIME