to react or not to react · react native for apps 20. the learning curve too minimalistic concept...
TRANSCRIPT
![Page 1: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/1.jpg)
Building a highly scalable exchangeTo react or not to react
Sreekanth G SChief Technology OfficerHatio Innovations Private LimitedA BillDesk Company
![Page 2: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/2.jpg)
Me
Thinker Blogger
Technologist
Programmer
Traveler
Writer
Crypto Evangelist
Ideologist
2
![Page 3: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/3.jpg)
What this presentation is not
A coding exerciseA programming tutorialA technology recommendationOr a demo presentation
</>3
![Page 4: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/4.jpg)
Instead it is about
Our self-learningAnd a retrospection on
What we didAnd what we did wrong
4
![Page 5: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/5.jpg)
We built a crypto currency exchange
5
![Page 6: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/6.jpg)
Our initial stack
Ruby on RailsPostgreSQLDockerised DeploymentsOrchestration using Rancher
6
![Page 7: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/7.jpg)
The best part
Very easy to buildShortest time to marketHandles things pretty wellUntil…
7
![Page 8: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/8.jpg)
The woes
Scaling Experience
Availability
8
![Page 9: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/9.jpg)
What went wrong
The stack couldn’t scale
Rails view rendering wasn’t efficient
Nothing but jQuery in Frontend
And Rails for Backend wasn’t the solution
9
![Page 10: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/10.jpg)
RCA – The three letter horror
Heavy long running SQL queries
Lack of efficient caching
502 Bad Gateways on Upstream unavailability
No way to let customers know that we are down
10
![Page 11: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/11.jpg)
Data, data, data
Almost a single page app.Most time spent on Trading.
Data is extremely important. Realtime updates.Customers make decisions based on data.
11
![Page 12: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/12.jpg)
Realtime updates
WebSocket updates
Charts & Graphs
XHR Requests
Events, alerts and notifications
12
![Page 13: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/13.jpg)
Scaling – The mammoth task
Scaling is a multistep solutionSplit into - Fixing the SQL queries - Caching of responses- Decoupling the frontend
13
![Page 14: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/14.jpg)
Fixing the backend issues
SQL Query Optimizations – Moving to Aurora
Caching of requests & data – Memcached & Redis
Archiving of stale data – Adopting the ELK Stack
Taking care of complex weightlifting – C# & .NET
14
![Page 15: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/15.jpg)
Initial JavaScript days
For simple DOM manipulations
Handling of event life cycles – WebSocket updates
using jQuery bundled with Rails
and Vue.js for simple data bindings
15
![Page 16: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/16.jpg)
Limitations of this setup
Cluttered and spaghetti JavaScript code
Never ending conflicts across multiple framework
Frontend was still tightly coupled with backend
View rendering was a toll on App Server
16
![Page 17: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/17.jpg)
Decoupling the frontend
Deciding on a single frontend framework
Multiple contenders –
Vue, React, Backbone and Angular
Roadmap for Mobile Apps – Android & iPhone
17
![Page 18: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/18.jpg)
The difficult choice
18
![Page 19: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/19.jpg)
Vue React
Lightweight Flexible
Vue Specific Components Pure JavaScript
Better Documentation Larger Community
HTML Templating Optional JSX Templating
Very easy to Integrate Higher learning curve
Limited support for Mobile Apps React Native
Difficult to hire engineers Very good talent pool
19
![Page 20: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/20.jpg)
The shortlist
React it is.
Rich Library Support
Very good talent pool
React Native for Apps
20
![Page 21: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/21.jpg)
The learning curve
Too minimalistic
Concept of a state store was new
One-way data binding was challenging
Not so good documentation
21
![Page 22: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/22.jpg)
JSX as a pain point
Developers used to write HTML/ErbDifficulty and inertia learning JSX
22
![Page 23: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/23.jpg)
The good part - Components
Code became components
- Reusable code, with Single Responsibility
- Easier to manage
- Without any or very low side effects
23
![Page 24: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/24.jpg)
Components & Actionslet handleMarketTradeHistory = activeMarket => { return dispatch => { const marketTradeHistoryChannel = pusher.subscribe( `market-${activeMarket}-trade-history` ); marketTradeHistoryChannel.bind("market_trade_history", data => { data.trade_history.map(item => dispatch(processTradeHistoryData(item))); }); }; };
24
![Page 25: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/25.jpg)
Dispatchers to do the workexport function processTradeHistoryData(data) { return dispatch => { dispatch({ type: ActionType.ADD_TRADE_ORDER, payload: { amount: data.a, created_at: data.T, order_type: data.M, price: data.p, vol: data.q } }); }; }
25
![Page 26: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/26.jpg)
The good part – Clean Data
Data is better handled
- Single storage of data and state
- One-way data binding, with clean hierarchy
- You cannot accidentally pollute data
26
![Page 27: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/27.jpg)
The good part – Invisible DOM
The declarative approach
- You do not directly touch DOM
- Updates are batched and automatic
- Think about what and not how
27
![Page 28: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/28.jpg)
100s of lines of code to a few
Componentization made code smaller
Legacy JavaScript code wasn’t reusable
No way to debug or test
Now it’s decoupled and self handling
28
![Page 29: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/29.jpg)
MVC to Pure API
Functionality interwoven with View
Single codebase, hard to maintain
Transition to Pure API, everything returns data
View can be anything, Web or Mobile!
29
![Page 30: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/30.jpg)
React Native
Future Apps in React Native
Pure API model complements this approach
Frontend developers can collaborate
UX and Apps coming under an umbrella
30
![Page 31: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/31.jpg)
BenchmarkingLoad times between page loads and data population:
Category Load Time
RoR with No Optimization 2.80s
RoR with Backend Optimization 2.03s
RoR with React Frontend 1.80s
RoR with Backend Optimization & React Frontend 1.07s
31
![Page 32: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/32.jpg)
Unsolved Issues
Virtual DOM is at times slow
Upgrading and updating is not easy as expected
High memory consumption – 16.3 MB
Slow startup times – 219 ms
32
![Page 33: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/33.jpg)
The learnings
Scale is not a frontend/backend only problem
Customers tolerate informed issues, not 502s
Developer happiness is extremely important
Initial learning curve can be future productivity
33
![Page 34: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/34.jpg)
The takeaways
Rewriting entire code base isn’t easy.
When you are forced to do it, decide wisely.
React is not a one stop solution, it was a fit for us.
At the end of the day, its about delivering.
34
![Page 35: To react or not to react · React Native for Apps 20. The learning curve Too minimalistic Concept of a state store was new One-way data binding was challenging Not so good documentation](https://reader033.vdocuments.net/reader033/viewer/2022050101/5f40825026accb2dbf5c5d06/html5/thumbnails/35.jpg)
Thank You@sreekanthgs
35