1

ReactNativeElastosframework:buildbetterDappsusingReactNative

Author:AdemBilican1–Projectoverview

The main goal of the project is to develop a React Native framework to allow third-partydevelopers toeasily implementdecentralizedapplications (Dapps) for theElastosplatformbyusingthepowerofReactNative1.ReactNativeisaJavaScriptframeworkthatallowsdevelopmentofnativemobileapps for the iOSandAndroidplatformsusing the JavaScript language.Thanks to this recenttechnology,developerscancreatenewapplicationsmuchfasterandeasierthanfocusingonplatformspecificdevelopment(JavaandKotlin forAndroid,Objective-CandSwift for iOS). Inaddition,ReactNativedeveloperscanstillrelyonnativeelementsforeachplatformsbyusingnativemodules2,3.Asastrongsignof thepowerofReactNative,severalbigcompaniesarerelying (entirelyorpartially) tothatframeworktodeveloptheirmobileapps(Figure1).

Figure1:OverviewofbigcompaniesrelyingonReactNativefortheirmobileapps(source:

ReactNativewebsite)

React Native development relies on a JavaScript engine and is therefore compatiblewith theenormousamountofnodepackagesavailableonthenpmrepository4.AnpmpackageisarepositorycontainingcodewritteninJavaScriptandperformingsomespecificaction,thereareforexamplenpmpackage for bitcoin5, ethereum6 and also other more common tasks such as calendar and userinterface.ThenpmjsprojectmakesReactNativeevenmoreinterestingasitproposesgreatsolutionsforalmosteveryproblemJavaScriptdeveloperscanencounter.

Several hybrid application development platforms have recently emerged such as Ionic7,Xamarin8 and Flutter9. The number of hybrid app is increasing every day on the different mobileplatformappstores(Figure2).

Figure2:Statisticsabouthybridappdevelopment(source:https://www.polidea.com)

2

ReactNative remains thebestalternativewhen it comes tohybridappdevelopmentas ithasseveral benefits: uses JavaScript as a language,was initially developedand supportedby Facebookand has a growing open source community. Therefore, we decided to develop a React NativeframeworkthatwillcontainallthenecessarycoderelatedtotheElastosplatformsothatthirdpartydevelopers can start implementing their Dapps without worrying about anything related to theblockchaintechnologyitself.

TheElastosplatformThe Elastos platform relies on several modules that are essential for the well-being of the

project: carrier (for p2p), wallet (for ELA wallet) and DID (for decentralized ID sidechain). ThosemoduleswereimplementedusingnativeCandC++languagesforbetterperformance.Tobeabletousethosemodulesonanymobileplatform(iOSorAndroid)thedeveloperswillfirstneedtobuildthelibraryforthecorrespondingplatformandarchitecture.Oncethelibraryisbuilt,thedeveloperneedstotakecareaboutitscorrectinclusionintotheprojectbydefiningthelocationofthelibraryaswellas identifying the path for the header files. Finally, after going through the documentation thedevelopercanstartworkingontheapp itself.Tomakedevelopmentmucheasier fordevelopers inthefuturetoimplementDapps,weaimtocreatedifferentnpmpackagesforthedifferentmodulesofthe Elastos project so developers will not need to take care of building and correctly using thedifferent libraries intheirDapps. Inadditiontotheseparatenpmpackageforeachmodule,wewillcreateahigher levelmodularReactNativeframeworkthatcancontainapre-selectedlistofElastosmodulesaccordingtothedevelopersneed.TheframeworkwillbepresentedasasimpleboilerplateappcontainingalltheessentialElastosmodules.2–Technicaldetails

TheconnectionbetweenthenativemodulelibrariesandtheJavaScriptcodeismadeviabridges.Thebridgeimplementationisspecifictoeachmobileplatform.ForiOS,wewillrelyonObjective-C++(combinationofObjective-CandC++code).ForAndroid,wewillusetheJNI(JavaNativeInterface).AsimplerepresentationofthecommunicationbetweenJavaScriptandthenativecodeisrepresentedinFigure3.

Figure3:CommunicationbetweenJavaScriptandnativelibrariesviaabridge

Thebridgesneedtobeimplementedforeachfunctionpresentinthedifferentnativelibraries.Thatway,wewillhave2main repositories containing thedifferentbridges for thedifferentnativemodules (carrierandwallet) resulting innpmpackages.Whennew librarysupportwill come in thefuture,forexampleHIVEsupportfordatastorage,anewrepositorywiththecorrespondingbridgeswillbecreated.AconcreteexampleoftheimplementationofthebridgeforthegenerateMnemonic()functionfromthewalletlibraryisrepresentedinFigure4fortheiOSplatform.

3

Figure4:ExampleimplementationofthebridgeforthegenerateMnemonic()functionfortheiOSplatform

Themain goal of this proposal is to explain in detail the implementation of amodular React

Native framework that will generate a boilerplate mobile Dapp (iOS and Android) with all theelementsrelatedtotheElastosblockchainalreadypresentandfunctional.TheaimofthisprojectistoattractmoredeveloperstoworkontheElastosplatform,thereforecreatingnewappsandbringingmorerecognitiontotheproject.3–Developmentreleasesandcorrespondingmilestones

TheprojectstartedinSeptember2018underthedirectionofKiranPachhaiandanalphareleaseis already available in the different CR repositories10. The following section is a summary of thefeatures available for the alpha release as well as the planning for the future releases (beta andcandidaterelease)fortheElastosReactNativeframeworkproject.

3a–AlphareleaseThe initialalpharelease isavailableonthedifferentrepositoriesof theCyberRepublicGitHub

account.Thisfirstreleaseputthefoundationfortheprojectbyhavingessentialfunctionsfor2mainElastos modules (wallet and carrier) implemented. The team also created 2 separate repositoriescontainingdemoapplicationsusingtheexistingimplementedbridges.Theactualstateoftheprojectatitsalphareleaseisasfollow

1. elastos-ReactNative-framework: main react native framework repo. This repository willcontainthecodeforthehighlevelnpmpackagethatwillcreateaboilerplateElastosDapp

2. react-native-elastos-carrier:carriermodulenpmpackagerepository.Thisrepositorycontainsthebridgesimplementedforthecarrierfunctionalities.

3. react-native-elastos-carrier-demo: carrier demo repository using the bridges from therepositorymentionedpoint2.

4. react-native-elastos-wallet-core: wallet module npm package repository. This repositorycontainsthebridgesimplementedforthewalletfunctionalities.

5. react-native-elastos-wallet-core-demo: wallet demo repository using the bridges from therepositorymentionedpoint4.

We will rely on the existing codebase to continue with the beta release. The alpha releasehelped us realize the feasibility of the project and we were successfully using the implementedbridgesonthedifferentdemoDapps.

4

3b–BetareleaseThebetareleasewillprovidecompleteandfunctionalpackages forthe2essentialmodulesof

the react native project: carrier and wallet. A list of essential milestones has been defined andpresentedbelow.Astheimplementationofthemissingbridgescorrespondstoalongtermmilestoneithasbeensplitto4smallermilestonesthatareincludedinthefirst4milestonesofthebetarelease.Basedontheprogressachievedso far foralpharelease, thebetareleasewill contain the followingimprovements:

1–Projectstartandreorganization(2weeks)The first step to start the project will rely on a reorganization process of the existing

codebaseavailableondifferentGitHubrepositories:1. Cleaningtheexistingcode:addingpropercommentstothecode,removingunnecessary

elements.2. Creating issues relatedtomilestones:anewprojectwith thecorrespondingmilestones

willbecreatedonGitHubtokeeptrackoftheprogress.3. Reorganizingtherepositories,addingproperREADME.mdfiles4. Makingsurethattheactualstateofthealphareleaseisstable+Addingthemissingbridgesimplementationtoexistingrepositories–Part1

2–Addingintegrationteststothebridgerepositories(2weeks)Tests are essential for the stability of the project. Each repository should have a list of

specific tests to ensure that the communication between JavaScript and the native libraries isproperlyworking. For that purpose,wewill check that the informationwe are obtaining from thenative libraries is correct. We will use the MochaJS11 platform to write the tests for the project.MochaJSisaJavaScripttestframeworkthathelpsdeveloperrunadvancedtestsforJavaScript.

+Addingthemissingbridgesimplementationtoexistingrepositories–Part2

3–Addingcontinuousintegrationtothebridgerepositories(2weeks)Asthedevelopmentofthedifferentrepositoriesreliesontheworkofmultipledevelopers,

we need the take care of the continuous integration of the code. We will rely on CircleCI12 andimplement the required code so that tests are automatically run for every new pull request. Bychecking every pull request we ensure the stability and proper functioning of the differentrepositories.

+Addingthemissingbridgesimplementationtoexistingrepositories–Part3

4–AddingalintertotheReactNativeframework(2weeks)Alinterisatoolthatautomaticallychecksforpotentialerrorsinthecode.Addingalinterto

theprojectwillallowdeveloperstobeawareoferrorsearlyonandcorrectthemaccordingly.ESLint13is commonly used as a linter for projects relying on the JavaScript language. To properly function,ESLintrequiresalistofpre-definedrulestocheckforerrors.TheJavaScriptstyleguidefromAirbnb14coversthemajorityofthecommonrules,wewilluseitasalistofrulesforourlinter.

+Addingthemissingbridgesimplementationtoexistingrepositories–Part4

5–Releasingstableversionsofcarrierandwalletnpmpackages(2weeks)WewillreleasestableversionsofthenpmpackagesonnpmjsorasaGitHubrepositoryonce

all thebridges for thewalletandcarrier repositoriesare implemented.Thebridges repositories forthe different modules (carrier and wallet) should be presented as npm packages to make theirinstallationandusageeasier.Forthealpharelease,thesizeofthenativerepositorieswasanissuetogenerate an npm package as it was exceeding the limit of npmjs. The core team is taking care ofreducingthedependenciessizeofthenativelibrariesandshouldthereforeopenthewayofcreatingnpmpackages.Ifthecreationandpublishingofnpmpackageisnotpossiblevianpmjs,thepackageswillbeavailableasGitHubrepositories.

6–Writingadeveloperorienteddocumentationforeachmodules(2weeks)Start implementing a detailed documentation for each modules using Slate15:

Documentationisanessentialpartforbetteradoption.Stripe’sAPIhadalwaysbeenagoodexampleof APIwith concrete example and a clean interface. Following the sameprocedure,wewill createseparatedocumentationpagesforeachmodule.

5

3c–ReleaseCandidateThereleasecandidaterepresentsthefinalversionoftheproject.Forthislastpart,wewillneed

toimplementthefollowingfeaturestomaketheprojectcomplete:1–CreatingacommandlineinterfacefortheReactNativeframework–Part1(2weeks)ImplementaCLI(commandlineinterface)forthecreationofaboilerplateReactNativeapp

with everything that is needed already implemented. By creating a new command line tool, forexamplecreate-react-native-elastos-dappwitha listofparameters (suchasforoptionalmodulestoincludes for example) developerswill startworking on their Dappsmuch faster directly from theircommandlinetool. 2–Creatinganewwebsitefortheproject(2weeks)

Createanewwebsitefortheframework:aname,alogoandanewwebsitewillbecreatedfortheproject.Theseareessentialelementsforthevisibilityoftheprojectandtoletdevelopersbeawareofitsexistenceandhowtouseit.

3–CreatingacommandlineinterfacefortheReactNativeframework–Part2(2weeks)Seepoint1

4–Makingtheframeworkmodular(2weeks)

Make the frameworkmodular, third-party developers should be able to download only apartoftheframework:Thedevelopersshouldbeabletoeitherdownloadthecompleteframeworkorsimplychoosefromthelistofavailablemodules.

5–Completingtheframeworkwithsimpleguidelinesandresources(2weeks)

AdddesignandsimpleUI/UXelementstotheframework:Inadditiontosomelintingrules,theframeworkcanalsocontainashortlistofimageresourcessuchastheElastoslogoandotherUIelementsbasedonthemostrecentdesignguidelines. 4–TeamStructure

The teamwill remain identical as theone thatalreadydeveloped thealpha releaseof theproject.Thelistofteammembersisasfollow:

Adem Bilican (ademcan@ademcan.net): Adem is an independent mobile app developerfocusingonprojectsrelatedtotheblockchaintechnology.HeiscurrentlytheleadmobiledevattheQRL project16 and developed the mobile wallet for the QRL17. Adem is also involved in thedevelopmentofthemobileappfortheSapienNetworkproject18,asocialmediaplatformrelyingontheEthereumblockchainforbetterprivacyandsecurity.

EricDualc(ericdualc@outlook.com):Ericisamobiledeveloperexperiencedwithblockchaindevelopment.Hehadthechancetoparticipateinseveraladvancedprojects,oneofthembeingthecreation of a new token from scratch. He successfully participated on the alpha release of the RNprojectandmadethewalletfunctionalitiesavailablefortheAndroidplatform.

JackyLi(liyangwood@gmail.com):JackyisalongtimedeveloperfortheElastoscommunity.Hismainfocuswasthecarriermodulesupportforboth iOSandAndroid.BasedonhisexpertisehedeveloperachatapplicationthatisbasedontheElastoscarrierandisavailableasademoappforthealphareleaseoftheRNproject.

The 3 developerswill be involved part-time (50% to 60%) on the project. The planning insection 5 (Timeline and budget estimation) is based on the part-time involvement of the 3 coredevelopersontheproject.5–Timelineandbudgetestimation According to the teamavailabilityand thedifferentmilestones, the timelineof theprojectand the corresponding rate (inUSD)are represented inTable 1. Thepaymentsareexpected tobemadeintheELAcrypto-currency,theconversionfromUSDtoELAshouldbemadeatthetimeofthepayment.

6

Table1:Rate(inUSD)foreachmilestoneofeachrelease

6–Marketingplanning

Oneofthemainissueswithcryptocurrenciesandblockchainrelatedprojectshasbeenmassadoptionandthefiattocryptoon/offramp19.Duetothehighlytechnicalsideofthoseprojects,onlyahandfuloftechnologyenthusiastsanddeveloperswereattractedsofar.Themainchallengeofsuchprojectsistobeabletobringcryptocurencies/blockchainusetotheday-to-daylifeoftheirusers.Oneapproach is todevelopapplications thatwouldbenefit from theuseof theblockchain (fornotionsrelatedtoprivacyandsecurity).

The best way to reach potential users in their daily life passes via the mobile platforms.Averageusersreachouttotheirsmartphonealmost50timesperdayforauseperdayof3hours20.However,thedevelopmentofmobileapplicationsrequiresimportantfinancialandtimeinvestment.Inadditiontothefinancialside,thedevelopmentofdecentralizedapplicationsrequireaknowledgeabouthowthespecificblockchaintheappismadeforworks.Everyblockchainhavetheirownspecificfunctionalitiesandthatcanbeaverydifficultbarrierfordevelopers.Mostoftheblockchainprojectsfocus on the development of the chain itself and its features using native code for performance.However, to create products for the end-user, one should not underestimate the front-end. Thosepoints are even more important for the Elastos project as its main goal is to provide the newgenerationoftheInternet(comparedtocryptocurrencyfocusedprojects).

Thedevelopmentofmobileappsbecamemucheasier in therecentyearsbytheadvancesmade in hybrid app development technologies (such as React Native). By combining the ease todevelopnewmobileappsandloweringtheentrybarriertothedevelopmentofdecentralizedapps,blockchainprojectswillbeabletoreachmorepeopleandbecomepartoftheirusersday-to-daylife.With thecurrentproposalweaim toattractmoremobileappdevelopers to theElastosprojectbylowering theentrybarrierandprovidinghelpandsupport for theemergenceofnewdecentralizedapplications.

StatisticsaboutblockchaintechnologyusewithJavaScriptprogramminglanguage

The React Native Elastos frameworkwill allow third-party developers to easily implementnewDappsusingtheJavaScriptlanguage.ToshowtheemergenceoftheJavaScriptlanguageontheblockchain technology21we searched for the list of npm packages on the npmjs.org with specifickeywords(Table2).

Release Milestone Timeline RequestedUSD

Beta

1.Projectstartandreorganization 2weeks 9’500 2.Addingintegrationteststothebridgerepositories 2weeks 9’500 3.Addingcontinuousintegrationtothebridge

repositories2weeks 9’500

4.AddingalintertotheReactNativeframework 2weeks 9’500 5.Releasingstableversionsofcarrierandwalletnpm

packages2weeks 8’500

6.Writingadeveloperorienteddocumentationforeachmodules

2weeks 3’200

RC 1.CreatingacommandlineinterfacefortheReact

Nativeframework–Part12weeks 1’600

2.Creatinganewwebsitefortheproject 2weeks 2’400 3.CreatingacommandlineinterfacefortheReact

Nativeframework–Part22weeks 1’600

4.Makingtheframeworkmodular 2weeks 1’600 5.Completingtheframeworkwithsimpleguidelines

andresources2weeks 800

7

Keyword Numberofnpmpackages

“blockchain” 2373

“bitcoin” 2170

“ethereum” 2286

“dapp” 548

Table2:numberofnpmpackagesthatcontainsthecorrespondingkeyword

Then, we also searched for the most common JavaScript libraries for several blockchainrelated projects and summarized their GitHub statistics to get a better idea of the adoption ofJavaScriptinthatdomain(Table3).

Repository StarsonGitHub ContributorsonGitHub Weeklydownloads

bitcoinjs-lib 3307 61 19481

ethereumjs-util 390 29 111230

truffle 7671 127 22456

ripple-lib 799 66 7834

Table3:blockchainrelatedJavaScriptlibrarieswithcorrespondingstatistics

Aswecan see inTable2andTable3, theblockchain technology is alreadyhighlyusedbyJavaScript developers. The fact that JavaScript can be used in both front-end and back-endprogramingisaverypowerfulbenefitthatotherprogramminglanguagesdonothave.

ReactNativeElastosframeworkusagescenario

The original project focuses on 2 modules of the Elastos ecosystem: carrier and wallet.Future developmentsmay also include othermodules such as DID and HIVE. Based on the actualproposalthefollowingusagescenariosoftheReactNativeframeworkcanbeconsidered:

• Identitymanagement(alternativetoUport22)• Alternative ELAmobile wallets: a strong cryptocurrency would be represented by several

alternativemobilewallets(suchasBitcoinandEthereum)• 2FA(multi-factorauthentication)withDID• Socialmediaplatforms(alternativetoWhatsapp,Twitter,Facebook...)Recently, several blockchain related projects started integrating React Native in their

developmentstacksuchas:• TheQuantumResistantLedgermobilewallet17• LedgerLiveMobile23• Savvy24• Lykke25(recentlylookingforaReactNativemobiledeveloperfortheirmobileapp)• Kraken26• TenX27

Inadditiontothemobileappsprojects,thelibrariescanbeadaptedtomakedappdevelopment

easierinotherplatformsaswell(Desktopandweb).ThatispossiblethankstotheJavaScriptlanguagebeingusedandpresenteverywhere(back-endandfront-end).

HowtomaketheRNElastosframeworkasuccess?

Everysuccessfuldevelopmentframeworksharessomecommonpoints.Tomaketheframeworkattractivetodevelopersweneedtoprovidethefollowingessentialelements:

1. Opensourceframework:wealreadyaddedtheMITlicensetoourexistingrepositoriesandwillkeepthesamelicenseforanynewrepositoryintheproject.

2. Support from the community: we need to let the community know more about the RNframeworkandexplainindetailwhatitis.ThevastmajorityoftheElastoscommunityisnotawareoftheRNframeworkand/oritsutility.

8

3. Theprojectshouldbeactive.Byprovidingthedevelopmentofthe3coredeveloperswewillbring continuous improvements and activity to the different repositories. We will have aspecificprojectboardonGitHubwiththelistofallthemilestonesandactivelyworkoneachoftheminawellorganizedmanner.Ourweeklydevmeetingandstandupmeetingwillhelpusdiscusstheactualstateoftheprojectandsolveanypotentialblockingissues.

4. To reach a broader audience, we will need to be present on several social medias. Asmentionedinthedetailedproposalweaimtocreateawebsiteandalogofortheproject,wewill also choosea strongand specificname.ThecreationofaTwitteraccountwillbealsoveryhelpful.Thewebsitewillhaveablogsectionwithfrequent(technicalandnon-technical)article publications related to the development of the project, seehttps://ademcan.net/blog/forexamples.

5. TheprojectwillbepresentedtoabroaderdevelopercommunityviasharingplatformssuchasProductHunt,HackerNews,Reddit,BetaPageandothersimilaralternatives.

References1. ReactNative·AframeworkforbuildingnativeappsusingReact.Availableat:

https://facebook.github.io/react-native/index.html.2. NativeModulesiOS·ReactNative.Availableat:https://facebook.github.io/react-

native/docs/native-modules-ios.3. NativeModulesAndroid·ReactNative.Availableat:https://facebook.github.io/react-

native/docs/native-modules-android.4. NodePackageManager.Availableat:https://www.npmjs.com/.5. bitcoinjs-lib.Client-sideBitcoinJavaScriptlibraryAvailableat:

https://www.npmjs.com/package/bitcoinjs-lib.6. ethereum.AnodeimplementationofEthereumAvailableat:

https://www.npmjs.com/package/ethereum.7. Ionic.Ionic-Cross-PlatformMobileAppDevelopment.IonicFrameworkAvailableat:

https://ionicframework.com/.8. XamarinAppDevelopmentwithVisualStudio.VisualStudioAvailableat:

https://visualstudio.microsoft.com/xamarin/.9. Flutter-Beautifulnativeappsinrecordtime.Availableat:https://flutter.dev/.10.CyberRepublicGitHub.GitHubAvailableat:https://github.com/cyber-republic.11.MochaJS,aJavaScripttestframeworkrunningonNode.js.Availableat:https://mochajs.org/.12.ContinuousIntegrationandDelivery-CircleCI.Availableat:https://circleci.com/.13.ESLint-PluggableJavaScriptlinter.ESLint-PluggableJavaScriptlinterAvailableat:

https://eslint.org/.14.JavaScriptStyleGuide.(Airbnb,2019).15.Lord,R.BeautifulstaticdocumentationforyourAPI.(2019).16.QRL-TheQuantumResistantLedger.Availableat:https://theqrl.org/.17.QRLmobilewalletbasedonthereact-nativeframework :theQRL/mobile-wallet.(TheQuantum

ResistantLedger,2019).18.Sapien-aWeb3.0socialnewsplatform.Availableat:https://www.sapien.network/.19.Krueger,F.TheFiat-to-CryptoOn+OffRamps.FredKrueger(2018).20.Turner,A.SmartphoneAddiction&CellPhoneUsageStatisticsin2018.(2018).21.2technologiesyoucan’tignore:JavaScriptandblockchain.Availableat:

https://www.pluralsight.com/resource-center/guides/javascript-and-blockchain.22.uPort.me.Availableat:https://www.uport.me/.23.LedgerLive(Mobile).ContributetoLedgerHQ/ledger-live-mobiledevelopmentbycreatingan

accountonGitHub.(Ledger,2019).24.Jobopening:MobileSoftwareEngineeratSavvy.https://www.workable.comAvailableat:

https://savvyio.workable.com/j/5D8B37A11B.25.Lykke–Buyandsellcryptocurrencyanddigitalassets.Availableat:https://www.lykke.com/.26.KrakenDigitalAssetExchange-MobileDeveloper.Availableat:

https://jobs.lever.co/kraken/fe17fb56-690c-458e-b1fd-734508c06f6a.27.Smith,S.RebuildingtheTenXWalletinReactNative.OfficialTenXBlog(2019).Availableat:

https://blog.tenx.tech/rebuilding-the-tenx-wallet-in-react-native-489bac2a0848.