Learn Noir in an Afternoon (Part 3)

Transcript

Working in the browser

so as promised we're going to be working with the browser and we're going to be using a package called Noir JS if you go on the Noir Lang website in the docs you can check different versions you check the latest version you're going to get one new item called njs njs is a set of typescript libraries that will make it very easy to use Noir in your decentralized app web app whatever you need it in here you're going to find both the reference and a guide for njs

Noir.js package

libraries you have two libraries one which is the back end and the other one which is related with Noir you will have to import both asir is dependence on battenberg back second you can check here the reference and all the methods that are available and also in the wrapper for the back end as for the guides basically right now there's just one guide on how to use this with fit and that's exactly what we're going to be doing on my vs code screen I'm just

Demo

going to start a new terminal and I'm going to check if I do have nargo installed I'm also checking that I do have 0.111 as that's the supported version I'm going to start a new project again with Naro new going to call it circuit I'm just going to compile my circuit as you see I have my circuit

here in Json format you can check here's the bite code and here's the AI I'm going to start a new NP project here now I have my package Json right here since we're here we can already write one of the scripts which will be the start script this will start our development server since we're here we can install

our dependencies we are installing vit and rollup plug-in copy we also need some HTML I'm just going to copy from the docs some HTML that we've put together very basic and ugly styling and our script and just a bunch of divs but before we proceed I'm just going to create a new

file bit config in here I'll also just post from the Noir dos this is just some BD configuration so it knows how to deal with the WMS we are ready to get started with the JS file in here I'll write some event listener I'll also write a function to make easy to display logs on the page

I'm going to import my dependencies I also need to import ort the circuit that we compiled in the beginning our dependencies exported two classes for renberg backend and Noir we are going to be instantiating them

the back end expects the circuit and R expects the circuit and the back end so they are dependent I'll make use of the display function we need to call the init function because that's what is going to be starting the web assembly from my terminal I'm going to run npm start and on my browser I'm going to navigate to Local

Host and here we have our very basic nor app we are ready to prove stuff using nor I'll be faking a user input before I knew it my proof was already

here this is very very fast there's just one step missing which is to verify my proof at the very moment I saved my file v hot reloaded my website and my proof was almost instantly verified this is just an example of how easy it is to develop with no rjs if I take out all the logs I'm left with a very simple

project this wraps up lur Noir in an afternoon I hope you liked it please don't forget to follow Noir langang and Aztec Network on Twitter and join the Noir Discord for more information about Noir