Facebook built React Native but it was too big for our SDK product. Necessity drove us to build a small ReactNative - PrestoUI. The talk will detail what we learnt, using it for BHIM and the new ways of building applications we found along the way.

1. Why we built a 35kB
React Native alternative ?

2. Hello!
I’m Sahebjot Singh,
Software Engineer at Juspay

3. Juspay
UPI SDK for top AppsUPI for PetroleumNew Juspay Safe
SDK powers 100 million + devices 20 million with BHIM

4. Started using react redux in 2015
Exploring different programming paradigms
Juspay Story!

6. ● Functional Javascript (ramda.js, Rxjs)
● Languages that compile to JS Clojurescript, Elm, Eve
Finding better ways to program

7. SDK Requirements
Dynamic updates to UI and User Flows
SDK size <150kB
Experimented with configurable Html5
components

8. SDK Requirements
React Native to the rescue ?

9. React Native and NativeScript
Hello World apps were 7MB
Library overhead was around 6MB for Android

11. We Investigated!
● Created their own Javascript Executor for Android
● Various Native components

12. PrestoUI - Our alternative
Found a different way to create native
components

13. PrestoUI - Our alternative
● Managed to build it, initial Android SDK size 21kB
● Current library overhead of just 35kB

14. ● Native WebView that is bundled with
Android
● Reflection
HOW ?

15. Reflection
reflection is the ability of a computer program to examine,
introspect, and modify its own structure and behavior at
runtime - Wikipedia
● Performance is an issue
● Solved by
○ Memoization of functions
○ Caching UI View Trees

16. Build BHIM
3 Weeks time
● Team of freshers
● PrestoUI goes to production

17. Functional Programming!
PureScript
● Pure Functional Programming Language
● Strong Types
● Category Theory (Functors / Monads / Applicatives)
● Best of Haskell and Javascript

18. Flow - Goal based DSL
● Transactional apps
● Goal based DSL

19. Goal DSL - Flow Language
billPayFlow :: Flow BillPayFailure StatusScreenAction
billPayFlow = do
_ <- UI.splashScreen
-- Get the mobile operator from the user
operators <- Remote.fetchOperators
operator <- UI.chooseOperator operators
-- Recharge Form & Call Recharge API
mobileNumber <- UI.askMobileNumber
amount <- UI.askAmount
result <- Remote.payBill mobileNumber amount
UI.billPayStatus mobileNumber amount result

20. Next Steps
Auto generate UI Components from designs
● Eliminates designer-to-developer handover process
● Hot Reload
● Pixel perfect

21. Next Steps
School of Functional Programming

22. Steep learning curve
School of Functional Programming
● Zero to Monads in 1 hour
● Simple DSL - Get started with Apps without deep functional
knowledge

23. My Journey
Fresh out of college, As an intern
● Obsessed with the project
● Almost gave up

24. Thanks!
Want to contribute? Just mail us at
presto@juspay.in
https://github.com/juspay/presto-ui
https://github.com/juspay/purescript-presto