 because everyone benefits with accessibility and we are doing this, this, improving, we are in the process but yeah and when you are already you can even add the logo of the W3C level of accessibility they have the three logos of the three levels so it's really important also that you you know share this information with the world and I think it will be like developers and designers will feel really good about it because it's really something really something important to do. Thanks Nancy but also from a from a legal perspective especially if you are in North America a lot of the legal demands have also been where there have been lawsuits in millions and millions by very very prestigious companies like if you all have heard of Target all the universities all the universities I'm sure all of you use Netflix all of them have been fine for for not providing the basic aspects of subtitles or they've been fine for not for users for not being able to do essential functions like using e-commerce websites or even you know buying a plane ticket so there's also legal mandates especially if you all have contributors from the US or otherwise but yes we don't have much time but I also wanted to say thank you but before I say thank you we also wanted to talk a little bit about what we provide and how we can help so we have a pro bono mandate with one of our funders called open technology fund they fund a lot of open source technology to advance privacy and security especially of those who have been historically marginalized and if your tool for falls within their remit where it works on open source it works on preserving privacy and security and works on curtailing censorship and surveillance we can provide our services you know whether it's coaching or training or audits or even implementation pro bono and but then we also work a lot outside open source and yeah we look forward to collaborating more these are our details I'm happy to have a chat where some of us are also going to be at the social event in the evening and tomorrow so you can find us there but thank you so much for listening I also have some Indian suites so if anyone wants a few thank you so much we're so happy to see such a lovely room thank you so much for listening to us and hope you have a great day and hope you learned a lot about our web accessibility thank you thank you Nancy and Rashi for the wonderful talk in which you know open source can also be used for the accessibility I think this is the one of the different talk in the total summit I believe so and also thanks for the Indian suites which you mentioned and if you have any questions you can ask no the platform is free for the questions yeah so uh uh do you have any uh uh publish publish about the general rule about the guidelines for improving accessibility on websites campaigns we have two campaigns campaigns one it's accessibility campaign and the other it's usability campaign and if you click on there you will find resources even results about our testing with big blue button jitsimid and other tools that we tested and information about general concepts of accessibility and inclusion I've just gone ahead with the slides of the organizations we've worked with so we work with briar we work with a lot of open source tools horizontal circular the teams here just a few to give you an example I'll go back to the other side localization lab and a lot of people also like doing audits beforehand because they like translating this service into seven or eight languages so there's a lot of localization element also in it and if you want to do accessibility work in a different language we will also need people who understand that language and complemented with that also being an accessibility expert so there are two things that go hand in hand for example if it's in vietnamese or it's in hindi or in espanol we need localization and accessibility experts to go hand in hand any more questions you mentioned accessibility for pdf files that is really hard topic I guess um I mean just just when was it a few months ago the new standard came out from adobe about accessibility um how do you deal with companies that ask you and provide pdfs I mean how do you deal with making them accessible those pdfs hopkins university is the correct pronouncing stop hopkins university and they for at first they send us all the pdfs and we did remediation with this pdf there there is an automatic validator on adobe and after that you need to do manually all the tagging on the elements of the pdf and it takes a lot of time because also you cannot like there is no control c so if you made a mistake you need to redo everything and then what we proposed it was like a training accessibility training for pdf with the they are in Africa with the team that creates the designs because it's actually really easy to make it the original file accessible and then when you convert it to pdf it's like you may not need to do anything so you can drag this accessibility from the original if you don't consider accessibility from the beginning then you need to fix a lot of things and also adobe has limitations so even if you have like if you have like a really complex content in your pdf like a diagram or something you cannot do it accessible like you better offer an alternative text or something but so yeah like the thing is like we need to think before like think about accessibility before we create something and not after designs data graphs conversing because it contains a lot of information that is very important often from the accessibility point you want to see the data are you having any insights or what are you doing in this direction think about data and the you know the basic recommendations regarding accessibility and data it will be like if you have a complex table we recommend you that you divide that information in just two simple tables or try to create just tables that have one heading of in the one first heading in the column or one first heading in the row so you present as simple as information as possible and this way you can make the table accessible in a pdf because if not it will be crazy and also with graphs at maybe the graphic if it's too complicated data the graphic can be accessible but you will always have the table so if it's an html table accessible with one heading and with one row it will be really easy so we recommend to have both the table and the graph so you can have like once who benefit from the graph and once who benefit from the table ma'am i have a question how do you manage with the graphs diagrams then table is fine how do you do with graphs oh figure even the even pictures yes okay thank you very much any more queries do you have yes thank you very much both of you thank you yes oh it's time for sweets oh we still have more time yes yeah hi everyone hi say hi yes yeah now we have another session how rest error handling ease web development this is from kwan hope i spelled right the chief technology officer of agri connect he's a full-stock developer focusing in iot which is my area actually and he's also false developer i wish all of you enjoyed this session yeah you're welcome kwan hello so i think most of people here are Vietnamese right so i will speak into language okay so who is a computer student uh okay so have you been ever heard about rust programming language ah you you okay ah you i think you will speak about the rust okay rust uh here this is the most cost of the rust programming language many operate many open source software use some animal as much cost uh today i will uh tell about my experience when i use rust programming language to try uh web app and how it helps uh my experience better uh a bit introduction about me i am the open source developer and i work on many fields from the web development and the system and the embedded programming and i also use rust for web and also embedded uh so i have a small start up about in Ho Chi Minh City uh let me uh introduce a bit about rust programming uh what is selling point from before when we uh start with other programming language we see about how we uh cast the error in those uh languages like in python we deal with one equal exception handling so in python when you run this code you have to add because this code can have some error we need to cast it so that we can decide what to do in the case uh birth uh one downside of python exception handling is when we look into the signature of the function we don't know what error can happen there are some drawbacks such as this is a version of python language when i run this code usually this code will make mistakes so i usually have to add this line to make mistakes but a limitation of languages that use exception handling like python here is for example i look at the uh look at the signal of this code i don't know what error can be made to make this line usually i have to try to try again first of all i usually read the data i have to read the data some people know the data they say this code can make mistakes but when the data is not enough then i have to test but with this is the exception the error handling of c language and it's even worse for example in c there is a variable the same variable for every function that can throw error and you also not sure when you look into the function you also don't know what error can happen and i will see this code doesn't have any place to make it move to this error after i call this code i have to check this code and even this code is shared with a lot of codes for example i call a lot of c code each c code will change this code and i don't know what error is from the code so when i call this code i have to do a lot of things to make it move to this code and this is the way to make mistakes this is how to handle error you can look into this this is a function that declares in this you can see that it specifies which error that can happen for c language, when you open a code you have to open the code that can make a mistake and this is the way to make a mistake so i can see if this code is a success or a failure this is how we handle error that can happen from a function code this one is with you much this is one nice syntax of rust to check the return error of the function it can be a successful it can be error but it can be many errors and you can catch one specific error with this specific error what do you want to do and with this specific error what do you want to do so we look into what is special about rust so we look into what is special about rust now we look into what is special about rust which is different from other traditional languages but as you have noticed just now I opened this code and it says this is the value of the data that succeeds it is T and when the error is made, it will go back and forth Here, when we undertake the return type of a function, it contains two elements. One is the type of value when function success and one is in case of error. For example, this is the function to pass a string to integer. It can be success for example if this string can be passed to integer, then it returns okay, true. It means that this is the success case and with this string yet it cannot be passed to any integer, so it returns error. This is an example of the function to pass a string to integer. For example, when we want to pass a string to a integer, then in this case, the string is 2, then we know that this 2 will pass a string to integer. This 2 will return okay, okay, it is a string of this string and it will not be passed to any integer, so it returns error. And inside this error, there will be a value, this value will correspond to the function that we have described here. For this function, it means that this string is passed in error. In this case, people use the type that implement this string so that they can change the error throughout from many nested code. In Rust, thank you. In Rust, we can use any type of data for this error. But normally, in applications, people will use any type of data that implement this, so that later it will be passed. When a string is called to the nested code, then the nested code is called to the nested code or to the nested code, then every time it is called to the nested code, the errors will come out and come out. So people use this type of data to pass the errors from many nested codes. And this string is a special concept that only appears in Rust and some other learning languages. That is, when you learn about traditional languages such as Python, Java, you will not see this string. This is one thing about Rust. Rust doesn't allow you to skip the error. So when you call some function that can fall, you must have to handle the error case so that you cannot make a mistake or you cannot produce a bug. For a special point of Rust, when you meet a string that is unable to make a mistake, then Rust will force you to handle that error case. In many languages, when you call a string, even though the string can make a mistake, but you always think, don't worry, I will be lucky, this string will not make a mistake when it runs. After that, you will pass that error step. For Rust, it cannot be like that. For example, I call this string, Rust2String. This string is able to make a mistake because in the process of reading, it can be damaged or something like that, it cannot be read. If that is a mistake, then Rust will force you to make a mistake so that you cannot make a mistake. If you want to make a mistake, then Rust will want you when you try to skip the error. This is the comparison between the Rust style and the additional style, but I will skip this. We might think that when Rust always forces you to handle the error, you might think that it will make your code long. For example, this is when you call many functions and each of them can return an error, you have to cast the error of this function and cast the error of this function and then cast the error of this function. You think that you have to do many things, your code may be long. When you use Rust with the Rust rule, you have to make any mistake. You might think that if you do that, your code will be too long. For example, you call three functions, one, two, three. You have to cast the error of the first function, you have to cast the error of the second function, you have to cast the error of the third function. In the beginning, I thought so, but Rust still has a different function to help your code to be shorter. Rust has a question mark operator that makes you your code shorter than you think. For example, here is the original code and here is the code with a question mark. It reduces a lot. This is the code when you use that word. The meaning of this word is that when you call this function, it makes a mistake. You cast the error of the second function. You think that this function has a sign that the error returns an error. You call here and you hide the error and it returns to here. If it succeeds, it goes down. If it fails, it stops and it returns to here. If it succeeds, it goes down. Other than that, for example, I think that the result is a success or failure. The question mark operator not only it can be used in the function that returns result, but also can be used with the function that returns option. Or it can be used in the function that has a sign and does not have a sign. This is similar to other languages, they always use it. But when you use it, there are also many people who know how to use it. They are too busy. They think that if this code returns to this function, I think I will be lucky. It will not return to it. Then they will pass the test step and they will call again. Then it will be a failure or a failure. But the option is different from the null. It is like the result that it will return the real value inside. Even if the result returns to OK, it also returns the real value inside OK. When it returns to error, it returns the real value inside the error. The option is that when this code returns to the function that has a sign, it returns the sign inside the option. And when the code returns to the function that does not have a sign, then what I can accept is a failure. At that time, I will have to deal with it. I will have to pull it out like this. This code also helps. For example, if the code returns to this function, it returns to an option. I use to hide that it returns here. It stops here. In the box that returns to NIN, it stops here and returns NIN to the function. Then it calls to the second function. If it meets NIN, it stops here. It returns NIN to the function. And if it returns to something, it keeps going. This is the comparison between Rust and other modern language. This is the comparison between Rust and other modern languages. This is code in Go. And this is code in Rust. We can see that how Rust error handling makes you your code shorter a lot. This is a video between code in Go and code in Rust. Both these two stages of code have to be dealt with. But in Rust, you can make it shorter by using the command. Now we go back to the title of this presentation. That is how Rust is the web development. That is how we explore how we take advantage of Rust results time to do web development. How we explore how we take advantage of Rust results time to do web development. When you do a web application, in the process of handling a request, it is through many steps that you can go back to your mistakes. For example, when you apply a web application and will you need to process a request, there are many possibilities that error can happen. For example, first you need to check if user has been logged in. And when you check it, the error can happen when you read the session from the disk or from the disk. For example, when you do a web application, when you check if user has been logged in, the error can happen when you read the session from the disk or from a database like Redis. And next, when you first data from a database system, the error can happen if the schema does not match the application code. For example, in the web, when you want to read the user's information from the database, for example, if you want to take a name, email, the birthday of the user, then sorry, you can find out that the structure of the database is not connected to your application. For example, if you expect that the user will have a birthday message, but actually when you design the data, it does not have that feel. That is also an error when you do a web application. Another step is when you process the request, you process and compute the data before returning to user. Then the error can happen if the data is not in expected format or some commutation fail. For example, when you read the user's birthday from the database, you hope that it will be a month-long date, but the data in the database is not a month-long date, then the error can happen if the data is not in expected format or some commutation fail. Or when you render the web response to the user, then the error can happen when you use some template engine to render the HTML. For example, when you make a web application for the user, then you hope that the text area will be red, and the text area will be red. But the code in your template, because you know that it does not understand the template engine, it will make a mistake. For example, when you make a web application, you will see the mistakes that will happen. In this case, I will help you in this case. For example, when you make a web application that is a bit ugly, they will not make any mistakes, they will make a mistake. For example, when you make a web application that is white, it will not make any mistakes. Or if it is worse, it will make a server error. But in these cases, in the correct way, there will be a notification for the user to know what is happening. Then it will go to the log to let the users know that it is making a mistake right now, with this example, to let the user know to fix it. So how we apply Rust in DustGate? We take advantage of the result type. And the result type can represent the true state of some functions, like if the function is okay, we return the normal response. And if the function returns error, we return the error response like 400 or 500. How do we apply Rust in the web? We will use the result type to create a response similar to the normal response. For example, we treat the request with a ham, a ham to return it to OK. The normal response will be similar to a successful response, that is, the code is 200 or 2.1. And the error response will be the response with the code 400 or the code 4.3. And most of the frameworks on Rust's web support the way of doing things like this. We will use the result type to return two different responses. Most of the web frameworks support this usage of the result that returns a successful result in case of OK and return the error response in case of error. Oh, thank you. Sorry. I need to speak quickly at this stage. It's almost time. This is a video. This is one example. This is a function that you process a request. You call some function to retrieve the data from database and it can be error. So in case of error, you stop here and return the error response. And in the case of success, you continue. This is an example of a web processing code. You will call, when you receive the request, you call a ham to retrieve the data from the database and it can be error. For example, in case of error, you click on the question mark and it stops here and returns the error response. So here, you click on the question mark and it stops here and returns the error response. There is a note when I do the Rust Web Web when I use the three variables, usually the three variables have different error data, but usually the data is not returned to the response. So at that time, the way I do it, I will define a middle key. I will write an error share to change the data from the database to the middle key and then the middle key to implement the share from the framework to return the response. When I use this data, I also use the middle key of mine. So hello everyone, we need to start now. So welcome Mr. Pum. Okay, thanks for coming today. So we're glad you're here. And stay is your now. Enjoy the show. Thank you. Okay, yeah, so hello everyone. My name is Pum. So today I'm going to talk about how you can build interactive apps with Rust and WebAssembly. By interactive, I mean with visual and with image. So my name is Pum. Right now I'm starting job next week as software engineer and database, but so far I have been co-founder of Careers Garden. We are like a group in Thailand who do interactive things. So like for me myself, I have two interests. First interest is my life is about low-level computing. I'm interested in hardware, in reverse engineering and building operating system. But my other interests is art and culture. So let me show you some of my past projects. So I have worked in an embedded system in space before. So this is called the Messe, the molecular encoded storage for space exploration. It's a DNA storage that can store data in DNA. And we write a hardware to record the experiment in space. Another project I did this with MIT and with a Thai choreographer called Cyber Subin. So you might have seen that a little bit earlier. So in this project, it's an interactive project where it's an AI where a human can dance with AI. So like you might see that a little bit earlier, the audience have the microphone and they can say to the AI, for example, they want to change their energy or they want to change the rotation. And the AI would respond to that dance. So we show this off in Taipei a little bit earlier. So I'm from this group called Careers Garden. So we do a lot of like communities and projects in Thailand. So we talk about biology, we talk about maths in Thailand. So the last project we did is actually two days ago. So this is called the Algorave, a bit of titans. So we have 12 artists in Thailand, six of them who create visual like this you see on the screen, like the visual projected on the building. And six of them they do sound. So they create music with code. So everyone use like slightly different tech stack. So some of them they use pure data, they connect data together to make music like operators. And some of them they write JavaScript or GLSL to make image. Okay. So this is like a thought experiment I had before. What happened if we combine like the rigidity of operating systems, like the way we can express so much with so little, with the art form of art and culture. So what if we can build a tool that would allow us to use very low level components to create art essentially. So this is like, that was the source idea for my project. So this one is called visual assembly canvas. So essentially it's a tool where you can create very interactive apps with essentially just writing assembly and very low level tool. So you can see on the left, this is assembly code. So this is a code I wrote to decode the image. So this is like completely in assembly, but then you can connect different blocks, different tools. So you can create different image. So this is like what I did at home. So I would have a MIDI keyboard and I would have a MIDI, MIDI launchpad and you can make it so that when you click these, it would make a sound. So instead of having to use a guitar or a piano, you can just write assembly. So you can do the reverse too. So you can like encode an animation frame. So for example, I have an animation of that Apple and I write assembly to decode that. So you can do that. So I think this project really encompassed two things from like the two dynamic I told you earlier. There's the computing element, but there's also the interactive, the art, the visual. So today let's first focus on the computing. The question is why do we need to build our own operating system, our own compiler? The reason is, do you remember what it was like, let's say 50 years ago? 50 years ago, I imagine that like when you were getting a new computer, let's say Amiga, you might get something that's very easy to work with. You can write in a language that's very close to computer. But for today, imagine like how, what you have to do just to build a web app. You have to know like JavaScript, you have to know React, you have to know Webpack. There's a lot of abstraction. So the idea is, what if you just build your own operating system, then it's a lot easier than you have much more control and it's very portable. I actually got the idea from this game called Shenzhen I.O. I'm not sure how to pronounce this, but essentially it's a game where you work in, as a member in a Chinese factory, and you have to build your own circuit. So you have to connect them together and you have to write assembly to like to connect it. So at the start of the game, you have to print out back a paper that would be like the instruction. So you would have to know, okay, there's an ad, there's a sub instruction, right? And then you would write that together and connect it together. Like this is just a game, but people have gone really crazy about it. Like some people, they try to make like a little display. Some people, they try to write Mandelbrot in pure assembly. Some people, they write a maze game. So it's very amazing, like what people can do with just assembly. So that's an inspiration for me. Like, so what if you can do that, but like not as a game, but something you would use in real life? What if you can build an OS and an instruction set from scratch? I got an inspiration from this person at the 100 Rabbit Labs. So he built a project called the UXN project. So he said he likes to go on a boat. He likes to go sailing, but on a boat the internet's very bad, right? You don't have internet. So the programs he used to have were very big and bulky like Photoshop and Ableton. So he wanted to build his own operating system that would allow him to have very specific, very small stack. So the UXN is actually a runtime. So it's like ARM, it's basically like, yeah, x86 assembly or ARM, and Favora is his operating system, and Tau is his language. So basically by just one or two person, they build their own OS, they build their own image. So this is the entirety of that, of like the system. So imagine how much instruction ARM or even x86 has, there's so much stuff. But in here you can build a whole system with just 100 lines of code. Yeah, this is literally all you need. And he also have made a little signs. So this is a comic book where you can read from front to back, and you would know how to program in assembly for the system. So it's very cute. I would recommend checking it out. And the thing is like starting with that assembly, you can build anything, like even with GUI. So their team, they have built a Solitaire game, they have built calculators and clocks and complete GUI, but starting with building the instruction set. So you can see this is their own language. And they even build like a music tool where you can control your music instruments. And they can even run it on all hardware because like if you want to run your web app, imagine like how much computing power that has, you can't just run it on like all machine, right? But if you write your own OS, you can run it wherever you want, you can run it on a toaster, you can run it on an old Game Boy. So that was my goal. I want to build my own OS just for fun and my own language from scratch. And I want it to be able to run on web assembly so that everyone can use it. Yeah, so that actually took me about 320 hours just to like completely build this. And it took me around 850 commits. So that took me like about I think for three months. Yeah. So just a bit of a content warning. So the content here is going to get very nerdy. So if you don't understand, don't worry, just talk to me later. So let's start with very simple question. What is the ECS computation or ECS calculation you can do? Yeah, one plus one, right? Super easy. Every kid can do it. So in order to build a computer, you have to start with that. You have to start with one. So you have one. You have one and you do one plus one, right? So of course in my program, you can do that very easily. You can just do a push. So this is a stack machine. So you have number 10. You have number 25. 25 times 10 is 230, which is 00FA in hex. Okay, but how the heck do you build this? There's a model of computation called Turing machine, right? The actual Turing machine isn't a machine like this. It's actually a math equation. So the question is what do you see here? I see tape, right? There's like a very long tape. So that tape represents what we call memory. So in order to build a proper computer, I think Alan Turing or even other computation model tell us that we need four things. We need memory. We need register. We need instruction. And we need a way to run that together. Don't worry. I'll go about this one by one. So first you need memory, right? You need a place to store your data. So how do you make memory? Of course, in Rust, it's very easy. So you just allocate, like, a big vector. But to make this realistic, if you look at this, you only have limited memory, right? You don't have infinite memory. So I give myself... Sorry. So I give myself about six... Yeah. So this number of memory size is about 60,000. Yeah. And then you have a chunk of memory. But the problem was, what do you do with that? The question is, you have to divide the memory into memory space, right? So the first chunk of memory, I might say, okay, I want this to be our instruction, like push or pop or add. And I want this to be the data. I want this to be something else. And I want this to be our stack. So you have to divide up the memory. So in Rust, it's very easy. You can use a constant. Okay, but if you have a big memory, you can't really do anything. So you need a data structure for computation. In this case, I choose a stack. So in computer science, there's pretty much stack machine and register machine. But personally, I like stack machine because it's really easy to implement. So to operate on a stack, you need access to the register because you need a stack pointer. Don't worry, I'll explain what that is. And you need a stack, which is like the stack of data. So what do you need for a stack machine? First, you just need push. You need to put item on top of the stack. Second, you need pop. You need to pop that out. And you need peak to know what is on the top. Push, pop, peak, and you're done. And next, you would need something that's called register. So what the heck is a register? If you have never done, like, computer science before, here's a quick explainer. So register is basically at your CPU. You need to have a data source to store, like, the very basic things. So for me, I have... First, I need a program counter, which just counts what line I am. So right now, I'm basically at line 3. But if you count the memory, it's like 1, 2, 3, 4, 5. So you can see the program counter is now at 5. So as you move on, like, in assembly, this will count downwards. And then you have the stack pointer, which just keeps tracks of, like, where are you at the stack? Like, are you here? Are you here or are you here? So we know, like, what's the current size of the stack. So if you write that in Rust, again, very easy. It's basically just a number storage, right? Then you need instructions. So what the heck is an instruction? If you have ever decompiled your program, your computer uses a lot of instruction. So ARM is, like, I think quite a lot, but I think x86 is, like, way more. So you would have instruction like this, like, for example, move the memory. So in Stack Machine, good news is you only need a very few. So maybe you just need push, add the data, pop, get the data out, and you would need instruction to do math, right? To add, to multiply, to divide. And you might need instruction to operate on the stack. Yeah, I'm not going to go all over this, but basically this is all I have implemented, and it's enough for literally everything. So in Rust, you can use something called, like, an enum with value. So I would have, like, an enum value for push, for pop, for load, for store. So you can add any instruction here. Finally, you would need something that's called a Fesh, that's called an execute. So to put this simply, before computer were even a thing, before this in Cold War, in wartime, there used to be a room called Computing Division. So there used to be a room where everyone is not using, like, mechanical computer, but they have pen and paper, or, like, a little bit later, they have, like, more machines, but then people would literally just write on their paper to compute. So similarly in computer, we must have something that's called a Fesh, decode and execute. So Fesh means to get the instruction we want to push. Decode means what that instruction is, we don't know what it means, and execute means to run it. So in this example, our machine is going to have two things, right? We have the memory space, and we have the register of the CPU. So it's kind of like, I recommend this video from Tom Scott, if you have never heard of this before. So yeah, you have the CPU and you have the RAM, and every time it's like, you take, like, Fesh, decode and execute, and every time it goes and read the instruction and it runs that instruction. So to implement that in Rust, again, pretty easy. So you would write, so you need a Fesh first. So Fesh is you look into the memory, like, what that instruction is, right now I know, okay, it's a push. I want to do a push. Then I decode that instruction to know, like, what do I have to do? Like, what is that in terms of memory? Like, what is that instruction? And then I have execute, which is basically run that instruction. So here's an example of instruction. So for example, what do you do with ad? You have two numbers, A and B, and you add them together. Or what do you have to do with increment? You just get the number and you increment them. So almost every instruction, you can write it as something like this. Okay. And finally, you have the tip. So every time the machine process is going to fetch, decode and execute the operation. So this is all you really need to make a fully functional, like, stack machine. You need memory, register, instruction, and a cycle. But okay, what next? So if you have a computer, but you can't do anything, it's like too boring, right? You can't really do much. So I took the time to kind of imagine what do I want to do with my computer? So I go to the drawing board a bit and I draw, okay, I want to visualize the memory. I want it, I want to see what the memory looks like. I want to make it beautiful. So it's easier to look at. And I want the machine to be able to wire to other hardware, like MIDI keyboard, or make music. So we just stay dream a bit. But back to reality, right now, like what we have built is essentially just a test case. It's like very simple. You have the instruction and you can run it, but you can't really type it. You need to hard code it. So that's why the next step is you need what's called an assembler. So assembler is for, if you don't know, assembler is essentially, if you write assembly, like in the text format, you need to convert that into the byte code that the machine understands. So there's a very good book I wrote called Crafting Interpreters. So this is like a very good book. They taught you how to build compilers and interpreters. Essentially, if you want to build an assembler, there's three steps. First, build a scanner. So a scanner is essentially reading your text file and trying to understand what kind of talking it is. For example, in assembler, you may have a label definition. You may have, oh, this is a string definition. So you have to understand what kind of token it is. Is it a string? Is it a number? What kind of token? And then the scanner would go over each token and try to produce it. So then we have the parser. Oh, yeah, sorry. It goes over each character and try to build a token. So the next step is to build a parser. So the parser, what does it do? Very simply, it goes over each token, right? And then it understands what to do with them. In this case, I want to read each token and I want to actually build a set of instruction that my machine can understand. And then finally, we have assembler. So assembler is you already have a sequence of bytecode, but you want to compile it to binary. So in this case, it's very simple. You just read that bytecode and you try to save it into a binary format. So you might add a little bit of header and you might segment it a little bit. Yeah, but this is really all you need to make a fully functional assembler. You need to read the text, essentially. You need to understand the format and you need to turn that text into opcodes. So this is what the end result looks like. So in here, I have a program. So this is a loop in assembly. So I declare a label here called loop. And then I basically write some assembly. So if you have never done this before, don't worry. It's essentially like if you write a for loop in C, but you can see here at the end result is producing hex 64, which is 100. So now we basically build a fully functional assembler that can understand this text and run it. Okay, so here's where I want to stop for a bit. And let me tell you where this project took a big turn. So I went to a music festival in Thailand called DH. So DH is an EDM festival where people do electronic music. But I think in the electronic music, a lot of people, they actually write code. So they don't use guitar, they don't use drums, but they actually write code and it actually makes graphic like this. And it's like very cool. So that's like another inspiration from me. I want to actually build a tool that can make music with code. Okay, here's another inspiration I get. So when I was working on the AI dance project, so this is called Cyber Subin for those of you who come a bit later. So Cyber Subin is a project where we make an AI dance. So we basically get the data from Thai human dancer in Thailand. It's called the corn dance. And we use the data from the corn dance to try to understand how to change the dance data. The interesting thing is that when we were building this project, my team member, he used a tool called Max MSP. So it's a tool that looks like this. So you can write like programs and you can connect them together. Or when we were at the ARCH, the artists were using a program called Pure Data that can create music. So do you see the difference and similarities? Like both of these, they are very similar. They have nodes and they are wired up together to make programs. So I think this is like very good when you want to do visual computing because you see the result. Like this is 3D. And you can use it a lot of ways from doing music festival to doing like AI dance project. By the way, this was written in 3.js and TypeScript. So if you're interested in AI dance, you can come talk with me. Another inspiration I have is a game. Does anyone know Minecraft? I think some of you know. Some of you may be too young or too old. So Minecraft is a game where you can place blocks. But Minecraft has a lot of mods. It's game modifications. And there's a mod called TIS3D. So in this mod, you can write assembly. But in Minecraft, it's very weird. So they would have a spec sheet like this piece of paper. And you can read to understand how to write assembly. And you can write the assembly like move, loop, sub and jump. And the program would run in Minecraft. So you can use this in Minecraft to build a factory to automate a lot of things. But just with writing assembly and you can see the instruction. So that really inspired me to kind of push this project to the next level. So it's not just an assembly or an OS runtime anymore. But I want to make it interactive. And I want to make it visual. So how do you do that? First things first, you need a UI, right? You can't really do visual. You can't do 3D. You can't do music. We just come online. So first I use Reactflow, which is a library in the JavaScript world. So Reactflow allows you to make flowcharts. You can connect things together. And then I write some components in React, such as this visualization. So in here, it kind of draws like each row, right? So one is the color red. Seven is the color white. And then now, just with this very simple assembly, you can draw any image. So it's like very interesting. Or if you can connect it together, you can create a construct which can send the data together. Like this send instruction would send data from here to here and here to here. So now you can wire up different machines and they can calculate complex things. So in computer science, there's a concept called message passing and actor model. So what is message passing? So look at a program like this or this. So in order to create this very complex, you basically send a message from one instruction to another. For example, first instruction, you might want to say draw a circle. And then you might want to send a message there that, okay, please add more circle. And then if you add more message, then it's going to form like a very good program. Same here. So the concept of message passing is that different programs can send message to each order and change the behavior. So the very easy way to program that is what's called actor model. So in actor model, every single program is an actor. So you are an actor, I am an actor, and we can send message to each order. So for example, I may send a message to you like please stand up, please sit down. Or you can send a message to me, please shut up. It's already over time. Something like that. So everyone can have their own message and pass it so that we can control the behavior of other systems. So in Ross, you can use this very easy. You just use a vector and store data, store message. Like I have inbox, which is the message from you to me and an outbox, which is a message from me to you. And then we write a program that basically tries to route the message. Yeah. So like look at this. So I have this program, which is an assembly program. And then when I want to send the data from here to here, it basically sends a message from here to here and from here to here. So by sending message, you can chain together like very complex programs. Okay. So I think we, I'm not sure if we still have time, but we can do a bit of demo. Sorry. Do you know how many time left? Okay. 10 minutes. Perfect. That's actually more than a thought. Yeah. So, okay. So let's like do a bit of a demo and try to understand like how the heck this even works. Okay. Okay. So let me open my notes. Okay. Okay. First thing, let's talk about like the actor model. Let's try to understand like what this thing is. So first thing you have to know about actor is first is all about message. So it's all about like what message do we want to send to other people. So let me open a rush rover here. Okay. So as you can see, this is like my rush code base. And let's open the code call message. Okay. Sorry. One moment. Message. Okay. Never mind. It's here. So you can see like each message is a structure and is structure here. It has an action, which is like what do you want to do and the sender, which is like where should we send this message to. So if you look at the action here, my program has just like a few action, like each machine, they can send the data from me to you. We can read the data or we can tell them to reset. So let me actually show you like how that looked like in practice. So here, actually, let me just clear everything. And let me start with a very simple program. So I'm going to create a new machine, right? So here just to run it to see if it works. And then I'm going to send a message from this to the other, other system. So I'm going to say a send zero one. So this is like sending the data, sending the message. And then I'm going to add a pixel block. So this is where you can draw stuff. And I'm going to send this. Okay. Maybe I need to send to. Okay. Not sure if this working correctly. Let me, let me do this. Okay. So here you can see I have 128 and I send it. So there's like two data here. So we can actually inspect this to see like how the data is being sent. Yeah. Actually, I might show you that a little bit later, but let me just show you like how, how this works. So first we have to understand like, what are the blocks? Okay. Yeah. I think this is pretty a good start when to understand this. So you can see like, this is a enum called a block data. So every block in the system has its own enum. For example, the machine block is where you can write code. The pixel block is where you can generate pixel art, like the type flag you see earlier. And the pot block is where you can put data. Yeah. So maybe like, so maybe let's look at the plot block. I think that one should work. So first we have the clock block, which generates like a clock signal and a plot block. So if I write this, then look at what happens. So it's going to send a rising clock signal. And then, yeah, and then it dropped a bit. So at every frame, there's a, there's a data that's being sent. So maybe if we stop for a bit and we try to get like the block state, like this, so you can see like, this is the internal JSON of the system. Then you can see every block has a structure. So maybe like the clock one is block three and that one is block four. Yeah. Okay. Nevermind. So because it's being sent very fast right now, like you can see the inbox. And the outbox is empty. But if I put it into like a mailbox that is already overflowing, you might get to see it. Okay. So here's how the ticking works. So if you go to like the definition of each block, like I might go to, let's say a pixel block. You can see this is like what happens at every tick. So at every tick, the blocks try to process the data. For example, I have the pixel block here. Then the pixel block, when it gets a new data, we do a match and it may be my push a new data. So it might display some message. Yeah. Or it might read a message. So this is like basically the call loop that makes it work. And another important part is the canvas data. So in canvas here, it kind of stores the whole structure of the, of the canvas. So that means like what kind of blocks there are, how is it connected to each order? And then just with that connection, we can write a program that would handle the routing. For example, in this here, we have a function called root messages. So it would try to understand like it would try the new message that are generated to send that to the correct recipient. Yeah. Okay. I think another part I want to touch on is the WebAssembly part. So let's go to the WebAssembly code base. So in WebAssembly, you can basically like generate or expose a bit of controllers or you can expose some functions or some methods. So for example, in this case, I have a bunch of methods that I want to expose. So for example, from the JavaScript side, I want to get some method that would allow me to get the canvas state, or I would want some method that would allow me to add a new block. And then from the JavaScript side, I can call that method. Yep. Yeah. So that's like a quick rundown of how that works. Okay. So since we don't, we don't have any more time. So my last message is when you're building a site project is where you're recommended to learn in public. That means just write a blog, give a talk, or share it a little bit so that other people can kind of learn from it and give you feedback. So I have been writing a blog like every day that I do this project. So right now it's about 30 blocks. Yeah. So that would very, that is very helpful. So I think that is it for my talk. Thank you so much for listening. Bye bye. Okay. I think maybe time for one question. Okay. So yeah, any question? Yeah. If no question, feel free to just ask me later. Okay. So thank you. Thank you. Thank you very much. And yeah, we have a tea and coffee break till four and we'll continue after that. Thank you very much. All of you. Thank you very much to you also. Yes. Thank you. Come back. Come back. So now we are going to have a talk on decoding the black box, understanding the go compiler from Jyotsana Gupta. She's a senior software engineer. Gojek. I hope it's right pronunciation. And Jyotsana Gupta is an open source enthusiastic who previously worked as senior software engineer at Gojek. Bangalore. She has been involved with the Mozilla community since 2015, contributing in her free time as an odd on content reviewer. Mozilla tech speaker and Mozilla representative to have notable roads include serving as a two time add ons featured advisory board member and a judge in the Firefox quantum extension challenge. Jyotsana is a coder by profession and a passionate settler settler. She's also Firefox add ons mentor and the creator of the privacy themed add on private x in recognition to her contributions to Mozilla. Her name is listed in about credits of every Mozilla browser. Apart from professional experience and volunteering Jyotsana recharges by playing catminton, table tennis, carom, chess and basketball. She enjoys eating fruits in an extra filly and meanie and manic and shoe holic and a neat fric. As a Scorpio, she loves spending time in her room or exploding the world. If not found engaging in her hobbies, she's likely dreaming for hours, maybe days. I welcome you Jyotsana Gupta for this presentation. Thank you so much. Hello everyone. I'll be talking about decoding the black box understanding the go compiler. So I just firstly want to understand how many of you are familiar with Golang or have worked on Golang or cool. Only one person or two person, three person. Cool. So I'll start with the basics of a compiler irrespective of go compiler of it's a Java compiler or C++ compiler. But before proceeding with that, I'll just talk about me. This sums up pretty much my professional life. Right inside is the ex previous works, which I have done involvement with the communities or I have worked with a gogic. I've been a part of Mozilla community for a long period of time since eight years almost. And currently I work as a senior software engineer at Fold which is a fintech startup. And apart from that, I'm a Docker captain and I also run women who go Bangalore chapter. Now let's proceed with the actual topic, decoding the black box. So what happens when you write a code and you run go build, right? In go, you use go build to run to compile your code. So I'll just focus on that part. So if the source code is your input, right? So in that part, once it the source code is being passed to the lexer or basically scanner. So this is the third part. So lexer actually reads the source code file and finally it converts it into the tokens. So if you see tokens are the very small, you can the smallest unit of meaning and it is also known as scanner and everything everything near code gets scanned by lexer. And then they get converted into the tokens and that tokens could be something like keywords like if else or inbuilt statements, right? So those are the identifiers, literals or operators. And at this stage at lexer stage, it also discards the white spaces in the comments. So whatever the comments you provide right in your source code file, those are also discarded during this stage. This is one of the first stage which happens during your compilation. Next stage happens when lexer produces the output to the parser. Parser ultimately consumes the output of lexer and it creates those tokens into the AST. AST is basically a syntax tree. So abstract syntax tree. So at this level, your syntax tree gets created or constructed. And you can say that it's a grammatical representation of any program. So all the tokens which were created during the lexer phase, right? They will be compiled or assembled into the AST form at this stage. And what will parser will do? It will check the code base against the grammatical rule of your programming language. It could be Golang here, it could be Java, it could be C as well. So it just ensures that your program has been structured correctly. For example, if you haven't used semicolon in Java, right? It will be thrown at this level. So in Go, it doesn't matter right now, it's optional. But by default, it added the semicolon. So in Java, it will be added at this level. And after this, parser will produce the AST, abstract syntax tree, which will be used in semantic analysis and time checking phase. So in this process, what happens? AST is being checked. You can think of it as a way like a building inspector is there. And it has come, the person has come just to see how your building looks like as compared to the blueprint. Blueprint, you can say AST is one of the blueprint. And also based on the regulations. Regulation as in rules and regulations of your programming language. So this means ultimately involves checking the AST, programming grammatical rules and also how you are adhering to the grammatical rules of any language. In this context, I'm talking about Go. And it also ensures that operations are performed on the compatible types. For example, if you are using in teaser or instead of a function, it will throw error at this level. So in this stage, those kind of errors would be being detected and compiler will halt the compilation process immediately at this stage. So next one is after the type checking and semantic analysis, what happens is the code, intermediate code generation happens. What happens is intermediate code generation, you can say it is as intermediate representation, which is actually a lower level representation of your program. The program which you wrote, the source code, it's actually gets converted into the intermediate representation and through the translation of AST into the sequence of instructions. And it is independent of the target machine's architecture. So any code, the source code is getting translated from tokens to AST tree and then finally back to the intermediate representation. These are all part of the, these are all our platform agnostic. So it doesn't matter on which target machines your architecture would be. It will just perform the operations automatically. And it serves as a middle ground between the lecture and the optimization of the final output. So as to make the optimizations more better. At this step, after the IR, intermediate representation has been generated, now next step is optimization of that IR. So at optimization level, what happens, why we do it is because of you, we want to make the compilation more effortless, efficient and faster. So at this step, this step is quite important because there are two types, there are two ways to do that. One of the methods is SSA, which is basically static single assignment. In this one variable, each variable is uniquely assigned. So go compiler maintains that and through this data dependency is also excluded. So in turn, what happens is the compilation becomes more smoother, faster and efficient. And for example, they are different techniques to do the optimization. One of them is like eliminating unnecessary calculations or reducing the number of instructions. So are reducing the memory uses. So those kind of optimizations compiler will do at this stage. And SSA is very important in this context. And after the optimization, the optimized IR is converted into the machine code, which is actually your binary statements or instructions, which are ultimately be understandable by your processor. So at this stage, as I mentioned, this phase converts the optimized IR into the machine code and the binary instructions that your processor understands ultimately, right? And so all the instructions which were written the IR are mapped directly to the binary instructions in this phase. And if you remember, I previously mentioned that all the previous stages, they were platform agnostic, but this stage is not platform agnostic. In this stage, during the translation itself, the specifics of the target machines are considered, as for example, number of number and types of the registers. So those are being considered while doing the compilation. So this happens at this stage. In previous stages, the target machines architecture was not considered at all. So this one is the last stage, I would say, where we link all the code with your binaries. So it is the final step and different pieces of your generated machine code are being clubbed into a single executable file, which also includes your binary. So in Go what happens is there is a static linking happening. What does it mean? Basically in Java static, it's a dynamic linking. You can think of it a way. So your application will have some dependency libraries, right? So if you compile all of them into one binary, that happens in Go, which is called as static linking. But if in the external libraries are being compiled, they are not included in the single binary. Those are called as dynamic linking. So linking has to resolve through the undefined symbols and all. So your program will ultimately be structured in a way that this function is linked at this so and so place. And hence it will be faster ultimately. So it happens at the compiler phase itself and every dependency in Go is included in the binary, which ultimately makes the Go compilation process faster as compared to Java or C++. And once the linking is completed, you get an executable file that that is getting operated on the that is getting operated into the memory and CPU can execute it. This is the last step. So I mentioned in this way. And if you want to get started or if you haven't worked with it, just add a log statement or add a panic statement just to understand the insights and compiler also provides some logging and debugging with the legend capabilities. This is how in Go you can have logs. You can see how you can see the flags. You can generate the print assembly. You can also do the internal parse tree. You can create actually internal parse tree to such commands. And these are inbuilt things in Go. And these are the additional tools which will help you while coding in Go. I'll not take a time on this part because if you are familiar, you can take a look at my slides later. But Compile Bench is one of the main component, a main tool you can say. And CMD Compile contains the main packages related to the Go compiler. And I've mentioned everything. I'll not get into it detail because it's just 15 minutes of time we have. And all the resources I've mentioned here related to the compile, bench, perf, all the additional tools which I've mentioned. And also the first line, first resource it is related to a Go compiler introduction. It has every single thing. And I have taken my slide, created my slide through that. And thanks a lot for coming and attending my slides. If you are interested in viewing my slides at this moment, you can just go to slides.com, Zainal, Paws, Asia, Haifan, Hanoi. You will get the whole slides, resources, everything at a single place right now at this moment. And thank you so much if you have any questions to let me know. That's all from my end right now. Thank you very much, Josna. And the hall is open for the queries. Thank you for the presentations. First of all, I'm just a beginner of Go, so really, really sorry for the beginner questions. So I want to ask that if Go compiler also have like just-in-time compiler like we have in Java. So does Go also have that just-in-time compiler? So just-in-time compiler. So that Go compiler also have that in the compiler or not? Yeah, I think it is answer. So what do you think? We are going to design in such a way that it is fast and efficient. And also Go language is also designed in such a way that it's very simple and compiler happens to faster. That is why if you see a Java code is there and similar lines of Go is there, Java code will take a lot of time. And Go compiler will take a lot of time as compared between Go's to Java language. And especially if you see, for example, they don't have the garbage collection, right? But Go has, all these things are being taken here in Go itself while it was being designed. And it was designed in such a way that, for example, if I am also running the same code twice, you can make something and changing the, and running it and making the build and compile it in and after that, I'll make a change. So in Go implementation, incremental compiler should happen. So what are the changes which you have done in certain files that will compile again? Rest of the code which was being written, it will not compile, it will not take a lot of time. Okay. Thank you. Thank you very much. Yes. Also, would you agree that the compiler Go is probably only within like one or two percent? And would you agree that compiled Go is within like one or two percent of like a C speed? Do you agree that compiled Go is within one or two percent of like speed of native C? Yes. Thank you. Thank you. Any more queries? Yeah. Thank you, Joseph. Thank you very much. Yeah. So we have a next presenter on the topic Golang Korea strategy to tap more go first. And the speaker is Galen who is called as Olivia. She's a dev relation manager of Golang Korea. Olivia Choi serves as a dev relation manager at AI and education company in South Korea and previously held in the position of software education planner at 42 COL campus and institution of higher education in computer science through peer-to-peer pedagogy and product-based learning. Olivia is building and leading a developer relation function at the dynamic startup or a false community such as Golang Korea to identify and siege opportunities for enhancing the developer experience. She deeply enjoys leading and navigating initiatives that contribute to the growth and success of the project she's involved in. So I invite Olivia to continue with the presentation. Thank you. Thank you so much. Looks like a big crowd than I expected. So I have butterflies in my stomach. Okay. Hello, Vietnamese go first, Korean go first and go first everywhere. I'm a pleasure to have you here today. I'm Olivia Choi from Golang Korea. In the next few minutes, I'm going to share with you some strategies we use to reach out and more tap to our fellow go first. My talk will follow this order, but due to the short talk time, so please hold your questions until the end. First, this is my bio. You can access my LinkedIn profile via this QR code. Please scan here. Can I ask you some questions before I speak? Who here is using or interested in Golang? Oh, yeah. Thank you so much. And anyone here running or participating in a false community? Oh, three of us. Yeah. Thank you. It's a fantastic to see you guys and welcome. Due to the time constraints, I was keeping the detailed instruction about us. I'll pass this one and pass this one and this one too. And when you're running a developer community, you encounter a variety of issues reflecting both the organization itself and the voices of its users. Therefore, I'll give you a brief overview of how we use and how we address the key concerns of gopers in Korea. Let's dive in. As you guys know, Go is rapidly gaining popularity both internationally and domestically. Thank you is simplicity and powerful performance. Even without aggressive advertising, Go is being well-utilized by individuals and companies who recognize its true value. In Korea, also many companies, including Hyundai, have adopted Go, leading to a growing demand for skilled and senior Go developers. But while there are so many, many people looking to expand their skills with Go, there are very, very few opportunities for them to grow and learn. So we've taken the initiative to provide numerous opportunities for learning and growth, focusing on the following three core values. The first value is connection. We had in-person events, like about once a month, like hackathons, seminars, meetups, and networking events where Korean gopers gathered together. As a result, the impact has been widespread. Especially last year, over 10 gopers collaborated to translate and publish this book under our group name, not a single individual or a small group of experts. Next up is conference for connection. If you are a goper, you are likely familiar with Go Per Con, right? An annual conference held in various countries. So we held also Go Per Con Korea for the first time on a large scale. In a platform for sharing knowledge and fostering mutual growth, and hosting it for the first time was a significant achievement for us. At this conference, we invited speakers with intermediate or higher skills and experience in Korea. This approach resulted in high satisfaction among passionate Korean gopers. The primary impact can be summarized by these numbers. Now, let's proceed to the second value, which is diversity. We harness diversity and collaborate with other communities and experts to fostering curiosity and learning among gopers. These values are crucial in achieving our goals of learning and growth. In Korea, all tech, infra and information are centralized in Seoul, you know, making it challenging for gopers outside of Seoul to access employment and learning opportunities easily. To address this, we run a program called Go To Everywhere, traveling to different regions to learn about the latest goal skills and trends. In fact, the feedback also has been positive. We are spreading the trend for all the Korean gopers actually. And we also have a scholarship program, especially for teens and children. And we are also running programs to bridge the digital-general gap. One notable example is Women Who Go. This program actually took place in Seoul at this January of this year, and satisfaction was better than I expected. In fact, at every Go event, over 90% of attendees were typically male gopers. So it was the first to have over 70% female speakers and participants gathered. The numbers looked promising, I think. Now, let's move on to the final value, its volume. In reality, due to the relatively small user base and adoption rate of Go in Korea, expanding the volume globally is essential, I think. Therefore, since last year, we've been planning collaborative programs with Go experts and community groups in countries like Germany, Australia, and Japan and more. By tapping into their global level expertise, Korean gopers can grow faster and reach greater heights, I think. In a nutshell, the three values I've introduced to you so far have been made possible because they are ultimately about being together with users, companies, and partners. In the end, the key to enhancing and driving growth in a GoPro community experience lies in the keyword together and relationship. Don't you think? In terms of building a relationship and together keyword, very, very important to every community and organizers and its users. Actually, besides these, there are so many, many, many more issues related to the sustainability operation of GoPro community. Such as project management for goal achievements, schedule management, sponsor acquisition and management and more. For instance, we've officially registered as a corporate entity in Korea to ensure systematic operation and transparent accounting. It hasn't been an easy journey to us. And I'd love to share our journeys in securing corporate sponsorship. But it seems we are out of time. It's time to wrap up, I think. So if given the opportunity sometime, I look forward to sharing some experience and insight with you guys through another talk. With that, I'll conclude my talk here. I hope this talk has been interesting to all of you. So I'll wrap it up here. Okay. Thank you. And last, if anyone here resonates with the values I've shared this talk and would like to share our knowledge and experience at GoProCon Korea 2024, this October in Korea. I encourage you to submit a pro CFS with me. With that, I'll conclude my talk here really, really. Thank you so much. Yeah, today we have another talk. In fact, the last talk of the day, modern full stack web development with T3 stack. It is from Pradamesh and he's an LFX mentee, cloud native computing foundation. He's also a full stack developer and love to build web and mobile applications with JavaScript, NetGeorges, Flutter and MERN Tech Slack. He's also involved in blockchain and smart contract development with experience in building on several chains like Ethereum, RV, Arbitrium, Neo, Concordium, etc. He also worked in open space with organization like CNCF through the LFX mentorship program. The Palisados Foundation during Google Summer of Code 2003 and Neo protocol through the MLH fellowship. Currently part of RV India Launchpad, he's working on the project Better IDE, which aims to make it easier for the new users to work on the test on board and RV and AOS. Welcome Pradamesh. Yes. Thank you for the lovely introduction. So like has already introduced me. So like today I will be talking on modern full stack development using the T3 stack. So to give you an overview of the T3 stack, T3 stack is a combination of six tools and technologies. Mainly next jazz, TRPC, TypeScript, Prisma, Tailwind and authentication provider like lurk. So like, even though it's a combination of six technologies, the main focus of my talk will be next jazz and TRPC like it's not possible to cover all those topics in 15 minutes. So I'm sorry if I have to go a little bit fast. So let's just start with next jazz. Like has anyone here worked with next jazz before? Okay. Quite a lot of people. So, yeah. So next jazz basically a full stack react framework which combines NodeJS as well as NodeJS and react to give a full stack solution for web apps. So here, here is an overview of next jazz. Like it provides some features like automatic routing, client and server side rendering, efficient data fetching and built in support for NodeJS as well as image and font optimization. So I will go into details of other things like with the next jazz you get support for automatic routing. So if you have worked with react or view, you must have noticed that to set up routing. You need some external libraries like react router DOM or something. And the configuration is a lot of overhead and like unnecessary boilerplate code which really like lends the development time. So what next jazz does is it infers your routing and your routes based on a direct structure. So on the top directly, this page.js will serve as an index to your site. And if you create a folder named dashboard and then create a page in this, then it will automatically infer the routes. So you don't need to configure routes like slash dashboard will be this component slash home will be this component. Next jazz does this automatically for you. And then another feature of next jazz is like a server side rendering. So if you click on a new page source of a react app, this is what you will get. It's basically an empty page. So what the problem with this is like your search engine cannot know what is the content of your page. So let's say you have a e-commerce platform or you have a blog, then Google or any other search engine cannot really know the contents. And thus your site becomes very poor with SEO. So next jazz helps it renders the site on the server and then sends the HTML to your client. So browsers know what exactly your web page content, the meta tags and everything, which really boost the SEO performance of any site. With you can do that with react as well. But that's a lot of configuration and a lot of audit. And the next feature of next jazz is it provides efficient inbuilt hooks like user SWR with which you can like cash data, invalid data. It will reface data for you. So that makes managing data very easy and efficient. So to summarize, I would say next jazz is basically react on steroids. So like if you are some full stack developer, I would like to ask what is one of the most annoying things about building full stack apps? Anyone? Configuration. Okay. Okay. Integration with the backend. So yeah, I think yes, you might have an amazing backend. You might have an amazing front end, but the API integration is always a weakling between your project. Like integrating API is a lot of pain. So here's how like usual is how usually you build full stack apps. The backend guy writes the API and then they can generate maybe postman docs. Then in the front end, what you do is use the fetch method or exios to get data. But the biggest problem with this is you don't know what data will be written. It's just an object. You don't know whether it will be an array and object and nested object or anything. So you just keep checking the docs. You write code, you go to postman docs and then check if it's sending products. If it's sending items, elements or XYZ or it's just sending directly an array. So like when you work on smaller teams in a startup, it is really a group of three to four people. They don't maintain a very robust documentation. You just check with the backend developer. So the thing is that you need to keep on checking the documentation for every API. And if you have 50 or 100 API, then it's really becomes a pain point. So and then when you log off on Friday and come back three days later, you forgot everything. And then you have to debug your code with hundreds of console log statement. It has always happened with me. So here is where TRPC comes into play. TRPC basically stands for TypeScript remote procedure calls. So it is actually used to completely eliminate the API layer so that the front end and the backend are fully type safe. So for context, it is so type safe that it actually provides auto completion in the front end. Your front end actually knows what data will be returned by the backend. Don't need to integrate APIs. Don't need to worry about what data will be returned. So how does it does it? So previously I told like next jazz combines the react side of the code with NodeJS. So here is what the directory structure of an XJS project look like. These are the client side pages. And there's a special folder named API. All the files inside this API folder will be treated as a backend code. This runs on a serverless function or a NodeJS server. So in this you have the backend and the front end in the same code repository. So TRPC leverages the fact that you have your front end and backend in the same project. And then basically you can call those APIs as if they were pure JavaScript function. Just like you would call a normal JavaScript function. Let's say mass.add, mass.suppract. So effectively you have completely eliminated the API layer. I will show the demo. Is this visible? So as you can see here for this is the backend part of the code. And this is the front end part of the code. And here this is where the backend is getting called. Here I'm calling client.grid.query. This is basically here we are passing a message. And then this is the backend code. So here we are taking an input message which is of type string. And then we are just returning hello and that input. Let's say I pass force and it will just return hello force. And if I say I will pass world, it will return hello world. So currently it's taking the name of the object is message here, the name of the key. And let's say if the backend developer tomorrow decides to change the key. Here we have changed the key from message to name. So as you can see, as soon as like the backend developer changed the key from message to name, it is showing error in the front end. So the front end knows what data is actually required by the backend as well as what is returned by the backend. So it's completely type safe across front end and backend. And the thing is it won't even let me compile the front end unless and until it is type safe with the backend. So what usually happens is sometimes backend developer like they just change the backend sometimes then the front end developer forgets or maybe there is a version mismatch between front end backend and then it just basically like tears down the entire front end. There is a client set error or something and the production breaks. With this, you can move from zero to one without breaking anything in production because if there is a mismatch between front end or backend, any one of them, then it won't even let you compile. So no more production errors due to API. As you can see, it will compile only when I fix the code in sync with the backend. So this is basically the purpose of TRPC. So yeah, this is like how you feel when your front end and backend sync integrates completely perfectly fine. So yeah, TRPC is not just about eliminating API less. And if you have worked with react and then you must have noticed that you have to use like tens of you state like set is loading into unit to keep track of is your data loading. Is there error? Is there an array of errors and what to show then TRPC does everything for you. It has automatic support for error and loading state. It also sends the front end and backend are in sync. And let's just say you update some data in the backend. TRPC knows which data has been updated, which data has been changed or deleted. So once you perform and write or write operation, it automatically caches like it automatically invalidate the cache and loads fresh data for you. You don't even need to handle the caching manually. It does that automatically for you. And if you need support for very complex type, then it's also support complex schemas using Zord. So you don't need to manually write schemas and sync them with your backend. So yeah, that was basically like next.js and TRPC on how they work. How much time do I have? How much time do I have? Okay, just give me two minutes. So like one more to take this step further, you can use an ORM like Prisma. So in the previous slide, we saw TRPC sits between your front end and backend. We can do the same thing between your backend and the database using an ORM. So ORM is basically it's let's you write database model. So your database has a single code for database. It doesn't matter if you're using SQL using no SQL, you're using Postgres MySQL. You can just create a single model like this and Prisma will automatically transpile your database code to whatever language. So just like TRPC, Prisma provides auto completion in database queries. It makes the backend and the client database safe. It's provides a very high level easy to understand SDK. And also if you're working with production, it provides you database migration and on a cherry on top Prisma actually gives you the studio. So you can visualize your database using a GUI tool. You can update the data as well as like play with your data without need to manually enter all the queries on the console. And the last one is authentication management. I haven't added slides for it, but clerk is basically a tool which with you can like plug and play authentication services to app. It just you need to enter few APIs and it will take care of your authentication. It provides ready to use components so that you don't have to waste time setting up authentication on your app. So yeah, that was it. I hope this talk help you and may helps you launching your product from zero to one very quickly without breaking anything in the production. Thank you. Any questions from the audience? We have questions to ask. Yes, hi there. Can you can you actually use Next.js without node on the server? Can you generate static contents? Can you generate static files or contents with Next.js? Yes. Thank you. Are there any companies using this t3 stack for the full stack development? Yes. Okay. What is the other company to technology other than this t3 stack? Okay. Yes. Thank you very much. Thank you. Any more questions to ask? So thank you very much. And we end up this session. All of you thank you very much. Bye bye everyone. Thank you.