# Building Highly Scalable, Optimized, Standardized dApp’s from UI to Contracts

- Channel: [Devcon](https://streameth.org/devcon)
- Date: 2017-10-09
- Duration: 11:46
- Topics: blockchain, smart contracts, distributed ledger
- Watch: https://streameth.org/watch/yt-LMw0JeVeLyg
- YouTube: https://www.youtube.com/watch?v=LMw0JeVeLyg

## Description

Visit the https://archive.devcon.org/ to gain access to the entire library of Devcon talks with the ease of filtering, playlists, personalized suggestions, decentralized access on IPFS and more.
https://archive.devcon.org/archive/watch/2/building-highly-scalable-optimized-standardized-dapps-from-ui-to-contracts

Nick Dodson gives his talk on Building highly scalable, optimized, standardized dApps from UI to contracts.

Speaker(s): Nick Dodson
Skill level: Advanced
Track: Developer Infrastructure
Keywords: react, boilerplate, scaffold, solidity, javascript, wallet, identity, faucet, blockapps, infura, dapps, css, redux, scalability, deployment, xss, unix

Follow us: https://twitter.com/efdevcon, https://twitter.com/ethereum
Learn more about devcon: https://www.devcon.org/
Learn more about ethereum: https://ethereum.org/ 

Devcon is the Ethereum conference for developers, researchers, thinkers, and makers. 
Devcon 2 was held in Shanghai, China on Sep 19 - 21, 2016.
Devcon is organized and presented by the Ethereum Foundation, with the support of our sponsors. To find out more, please visit https://ethereum.foundation/

## Transcript

[Music] okay awesome uh so how we all do it diese mm-hmm all right we're almost done the enterprise people are going to come up I'm going to kick ass for business and so but before that i'm going to give a super short talk on some react stuff because a lot of us in the room who's using react right now yeah look at that that's a lot of people right there so just some recommendations maybe we can all get on the same page with theory and react stuff make some useful recommendations and yeah just helpful helpful stuff so but before that I have to do this because you know we got to do it I brought I brought this yeah we all see this that's all it's a hard fork yeah yeah yeah yeah all right come on we survive this we did it we did it okay sorry that was just like some stuff I wanted to do okay so let's see if it works it's a work oh maybe the other way ya know oh good okay good so I'm building this all into a boilerplate it's not a framework all these recommendations so if you like frameworks use a truffle or embark and those things this is just a configured boilerplate so some good defaults but nothing nothing you can't change very small components and things like that so yeah it's all defaults okay so just to give you an overview of kind of some of the stuff that's going to be inside of this boilerplate of which i'm going to give to everyone for free so contract scaffolding so be able to offer the command line just go okay i want to do contract name and something get a solidity file and it tests the contracts in two languages so in javascript and in solidity so and as well and enforces that so that you cannot upload it to github until you either remove the test or actually written it so you have to do either one and as well things like wallet generation and identity and fossa ting I've done during the install and the whole point of this is that if somebody comes to athyrium they're like oh you know I want to build a dab they can download it and hit and basically run install everything gets configured properly they don't need to configure anything else it also runs it runs offline the wallet is generated and faucet it if it can be and and then you hit em p.m. start and everything just runs on a test RPC instance and the contracts are deployed and the interface is configured properly so the idea being that making this whole thing really simple it runs without internet so as well it runs without using a note architecture so I've actually by default added things like block apps and in fira so that you don't even need to run any notes you can just deploy right away so put the user interface stuff for this i'm using max's react boilerplate i don't know if any of you have seen it it is amazing and as well things like multi environment awareness prices are listed in USD first with ether listed second so that you can get so that new users can get sort of a value feel for the prices that are being listed inside the dab and then they can get the actual solid ether price below basic multi contract examples so registry and a factory an example configured in a complex deployment setting and and as I said before offline first so NPM start everything runs you don't need to think about configuring it with any sort of infrastructure or network and so one thing that that I've noticed over the past little while is that there's sort of a data model revelation going on with the front-end world with redux and this sort of Revelation is very similar to that the blockchain space because we're figuring out that's good state management in the application layer and in our global computer seems to be really really effective for humans to build really cool things and it really just comes down to good data management so it's just an interesting thought as I've been working with this stuff for a while so this is the react architecture that i'm using it's called react boilerplate it's available at that link there i highly recommend you use or just analyze this boilerplate when you are building DAPs it's fantastic it's built to scale and has something like it's almost at 10,000 stars on github so it's pretty awesome and Max is really cool max was going to allow me to sleep on his couch in Vienna but turns out he was in Italy or something and with its on Twitter you'll see is a sad it's a sad moment when we couldn't meet so so some components of note in the boilerplate post CSS its module modular CSS that's on the side there using a redux saga example using the new es6 function generators and yield params prams you'll flag there and then as well the main components to manage states and data are Redux immutable jas reselect for selecting things out of state and and redox sagas so i highly recommend you either take a look at this see how they're built or just use it yourself it's fantastic way to manage data on the application side the application layer and then as well I 18 end support for internationalization so we can support things like the Chinese language and the English language and as well Redux router things like that on the etherium integration side of course the web three object I've built a deployment utility that I'll show you which very much like web pack called eath deploy and it's highly config configurable very own opinionated and it just does deployment so it's kind of a interesting utility for the sort of stuff i'm using dapple to do solidity unit testing i'm using solium to do solidity linting because exists now it's pretty cool it's not great some some things don't work but you got to hand it to IX to forget his name who wrote it because it is really cool light wallet which is generated when you install the boilerplate but you can also run a generation command to generate multiple wallets if you want and once again the whole idea here is that you download this boilerplate and you see a full etherium dap that's properly architected to scale highly configured tests in multiple languages has great contract examples can deploy to multiple environments at once and it's all done for you for free and it's just to make a theory I'm really easy for someone new to come along and say okay that's the architecture that's what it looks like and these are some recommendations and test our PC and so forth so this is the scaffolding tool that's built in so you can just run npm run generate and you can scaffold things like components for react routers language adding additional languages and then adding things like a contract so I've added basically contract scaffolding and then on the wallet generation management side you see something like this and basically typing in a passphrase and using the light wallet utility and that generates a nice wallet but it does it outside of the repository because we don't want everyone uploading a thousand wallet files to github which would be real shame and and so this is eat deploy here it's a module I'm still working on and I'm still architecting but you can see it on github and basically it's very much like web pack so simplifying inputs to outputs heavily following the UNIX philosophy and making contract deployment very much like a web pack sort of package Minh packaging so you can see here that on the entry you're going to input your environments things like test RPC whatever you like in the classes to that this doesn't do building it's just for deployment and the output will be a single environment potentially a path things like that you'll have a module here to do things like complex contract scheduling and once again these are all very dumb modules but they do a very specific thing so this is the dual layer contract testing so you can see on the left we have the dapple test and on the right we have a chai theorem test chai theorem is this awesome very light tool to test contracts and that's literally deploying it and then from there you can actually do one line tests and tests all of the methods in a very simple fashion so this gets written right away when you scaffold contracts and it gets enforced right away and it makes you basically write all your tests for your contracts and that gets packaged in with the rest of the DAP architecture and that's what it looks like as its passing so you can see the dapple test on the top and the chai theorem tests at the bottom then as well another concept I want to run by you is if you're accepting third-party content into your DAP that means you're exposed to a ton of vulnerabilities and mainly cross-site scripting jection which someone could inject some JavaScript into your DAP and then do things like change the all the addresses so that you know something like I send a thousand dollars to some guy's wallet versus something else and so to prevent that I highly recommend you use a package called an XSS which is anti script injection package things like spoofing as well so many people can just take all your code host your DAP and then spoof it and change all the addresses once again or do something very low-level easy attack vector so with that I recommend you do solid communication channels and you have a registry of all the people who have spoofed your DAP and where it is so that your users can have some kind of awareness of where the spoof dabs are because it's really not much you can do oh sorry I go back okay okay okay how we doing so far pretty good yeah am I done yeah yeah okay anyway um so I'm basically done but follow the UNIX philosophy is my last point and as well that's where you can get all of this stuff to make building adapt very very easy and super scalable and doing it really quickly so thank you thank you and next week acted in [Music] you