angular to react moda jovem: moving from · better speed and performance than angular 1 aot...
TRANSCRIPT
![Page 1: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/1.jpg)
Moda Jovem: Moving from Angular to React
Ilya Gurevich
![Page 2: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/2.jpg)
Who am I?● Graduate from Georgia Institute
of Technology● Frontend engineer● Water polo player● World traveler● Music head
![Page 3: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/3.jpg)
What is Loadsmart?
Logistics
Technology
![Page 4: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/4.jpg)
Imagine18,000 kg of beer from New York to Los Angeles
![Page 5: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/5.jpg)
In the past...
● Takes a long time
● Expensive
Call to Broker
![Page 6: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/6.jpg)
Happening now!Instant Quoting
● Automated
● Algorithmic
● Accurate
![Page 7: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/7.jpg)
Imagine
You own a truck.
You need business.
Where do you go?
![Page 8: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/8.jpg)
In the past...
● Confusing
● Overwhelming
Search Load Boards
![Page 9: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/9.jpg)
Happening now!Customized Loads
● One-click interaction
● Specifically tuned for the user
![Page 10: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/10.jpg)
+
![Page 11: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/11.jpg)
Internal Tools
● Google Maps Tracking● Slack Integration● Bria Phone Client● Real-time Shipment
Management
![Page 12: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/12.jpg)
Frontend Stack
![Page 13: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/13.jpg)
3rd Party Tools
![Page 14: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/14.jpg)
Angular to React
![Page 15: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/15.jpg)
![Page 16: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/16.jpg)
Why we wanted to change
![Page 17: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/17.jpg)
The Programmer Answer
We want a framework that’s faster
and simpler to develop with.
![Page 18: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/18.jpg)
The Honest Answer?
We just wanted to update our
framework because everyone else was doing it.
Also known as hype driven development
![Page 19: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/19.jpg)
But Mainly?
![Page 20: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/20.jpg)
Just kiddingWe did our research
![Page 21: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/21.jpg)
Research
![Page 22: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/22.jpg)
Time For Some Reading
![Page 23: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/23.jpg)
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● Unit test friendly
Pros
![Page 24: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/24.jpg)
Angular 2, 4, 6, 7?
● Typescript (debatable)● Unclear documentation● Really high learning curve
Cons
● “Angular 2 is terrible”● Regular DOM● Large● Versions keep on changing,
unclear usage● Verbose and complex
![Page 25: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/25.jpg)
VueJS
● Lightweight● Fast build process● Angular-type directives● Component based● Virtual DOM● Two-way binding on inputs● Amazing documentation● Creator is active in the developer community● Arguably faster than React in some cases
Pros
![Page 26: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/26.jpg)
VueJS
● Semi-confusing syntax● Small community (harder to hire)● Free-form conventions● Majority of developers in the
beginning were Chinese● Caused a language barrier● Lack of common plugins and
components
Cons
![Page 27: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/27.jpg)
React
● Component-based● Virtual DOM● Light-weight● Seamless development experience● Good testing compatibility● Huge community● Constant meaningful and informative updates● React-friendly NPM/Yarn community
Pros
![Page 28: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/28.jpg)
React
● React isn’t a framework● JSX learning curve● Documentation could be
better● Nested props callbacks● Update values on forms
manually (FORMS!)● State management is
potentially difficult
Cons
![Page 29: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/29.jpg)
Why we ultimately chose React
![Page 30: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/30.jpg)
React over VueJS
VueJS is still too small
React has a larger community
React is better for large applications
![Page 31: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/31.jpg)
But...
VueJS is growing
Definitely a framework to look forward to
![Page 32: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/32.jpg)
Immediate Roadblocks
HARD
![Page 33: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/33.jpg)
Other Immediate Roadblocks...
![Page 34: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/34.jpg)
Questions to QuestionHow to do proper form validation?
Which HTTP client to use?
What even is JSX?
ES6? ES7??
![Page 35: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/35.jpg)
These things take time to learn...● React Novice
○ 3-5 days
● React Expert○ Two months
You are always learning!!
![Page 36: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/36.jpg)
![Page 37: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/37.jpg)
AXIOS
![Page 38: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/38.jpg)
Immediate SimplificationsAngular is a monster compared to React
Files are much more organized
Small and fast build size
![Page 39: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/39.jpg)
Bad thingsNested Prop Callbacks
Updating State
![Page 40: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/40.jpg)
Updating State● Updating components in react can be tricky● Component Lifecycle
○ ComponentDidUpdate○ ComponentWillUpdate (unsafe)○ ComponentWillReceiveProps (unsafe)○ ComponentDidMount○ ComponentWillMount○ ShouldComponentUpdate○ Etc…
● Memoization?● Can only be learned with experience over time
![Page 41: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/41.jpg)
Nested Prop CallbacksOne function - showAccepted()
● List○ LoadsControl
■ Loads● WebList
○ AcceptDialogWeb■ ConfirmationDialog
● DriverLocationDialog
That’s 7 different components
![Page 42: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/42.jpg)
The Solution?Use Redux
![Page 43: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/43.jpg)
What’s Redux?● Retrieve and update props globally to be accessible via a provider from any component. ● Re-renders component in real time without memoization● No longer necessary to use nested props callbacks!
![Page 44: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/44.jpg)
Redux Difficulties● Really high learning curve● May take at least a week or two to learn properly + learning React
○ Delays future development if on a time crunch
● Nomenclature can be obscure● Feels very heavy● MobX as an alternative?
Would NOT recommend using Redux without intermediate knowledge of React first
![Page 45: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/45.jpg)
Lots of Setup for Redux● Reducers + Combined
Reducers● Action creators
○ Loading, error, success state
● Providers● Store configuration● Redux devtools● Middleware
![Page 46: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/46.jpg)
Good thingsJSX with ES6/7 is awesome
![Page 47: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/47.jpg)
Why?● Conditional rendering is simple● HTML + Javascript makes sense
○ Functions in markup
● Testing with jest is easy● Not restricted to template language● Destructuring, object rest spread, etc
![Page 48: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/48.jpg)
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.
![Page 49: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/49.jpg)
Final ThoughtsWas it worth it?
![Page 50: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/50.jpg)
Yes, definitely
![Page 51: Angular to React Moda Jovem: Moving from · Better speed and performance than Angular 1 AOT (Ahead-of-Time compilation) Directives and filters are awesome Unit test friendly Pros](https://reader030.vdocument.in/reader030/viewer/2022041017/5ecad6688d24db09c70ababa/html5/thumbnails/51.jpg)
THANK YOUFOR YOUR TIME