 Good morning, everyone. Next talk is by Antirek. Antirek, the stage is yours. Thanks, Vipul. So, good afternoon, my fellow Pythonistas, and I'm assuming everyone can hear me. So good afternoon, my fellow Pythonistas. Welcome to my presentation on revolutionizing the web with Python. So, the agenda for this talk includes an introduction to Python, an example of Python in the browser, and of course, Python under the hood, and lastly, comparing and contrasting JavaScript in Python. And then we can have a small Q&A session if you guys have questions. So, who am I? I'm a passionate tech enthusiast who loves software and enjoys learning new technologies. I'm a professional full-stack Django developer with over two years of experience in Python. So, let's take a look at an introduction to Brython. So, first of all, what is Brython? So, Brython is this JavaScript library, and yes, it's a JavaScript library, right? It's a JavaScript library which trans-compiles your Python source code, which you write, right? And it is this implementation of Python 3 in the browser. Now, most of you would have questions that how do you actually write this code? Where do you write this code? And how do you trans-compile it? Like, is there a CLI tool or is it built in the browser? Well, I'm going to answer all that questions later in the presentation. So, now it is this JavaScript library which runs Python, allows you to write Python code and trans-compile it and run it in the browser. So, why Brython? Why don't you just use JavaScript? Well, Brython, because, first of all, you have access to Python and its friendly syntax and who doesn't love Python, right? And, of course, to use Python for numerical computations, right? And then, of course, for many JavaScript problems they can be avoided like global variables, function scopes. I mean, who likes var keyword? Like, you've got let keyword, const keyword, var keyword. What's the difference between all of them? And the most annoying thing in JavaScript is the difference between triple equals and double equals. I mean, what does it mean, right? If you're writing an ifs statement, it's just impossible to work with triple equals and double equals. And I know many JavaScript developers out there agree with me. So, let's take a look at some previous attempts at Python in the browser. Right? For those of you who are thinking, well, maybe Brython is the only one? No. There are many more, but I'm just highlighting four of them here. So, the first on our list is Piodide by Mozilla. So, Piodide is, I think, the best known attempt out of these four because it was an experimental project by Mozilla to create a full data science stack in the browser. Yes, I repeat, in the browser, full data science stack for Python. And of course, then there was Sculpt, right? Which is a JavaScript implementation of Python 2 in the browser. And yeah, Python 2. No one likes that. And then there was PyPy.js, which is basically a JavaScript library which runs PyPy source code for those of you who don't know what PyPy is. It's this Python implementation aimed at making Python faster. So, it's basically Python, but much faster. And then there's Transcript, which is a CLI tool which allows you to run and compile Python to JavaScript. Now, this is a graph of an insight into Python in the browser. It shows you all the different things we talked about here. Let me get the pointer. So, all these which we talked here. So, this graph shows you basically all those based on their compile time and how they work. So, the first thing which comes to mind is this is one group. This is another group, whereas Bryson alone. Well, this alone, this uniquely less, uniqueness in Bryson is what makes it, I think, the most successful Python attempt at Python in the browser. Yeah. So, as you can see, these are ahead of time. This compiles on-page load and this compiles after-page load. So, Bryson, we're going to see how this on-page load compilation time affects Bryson and its effectiveness in Python in the browser. But for now, it does not mean, right? This graph shows you different compile times and different Python in the browser attempts at Python in the browser. But this does not mean that Sculpt or PyPyroGS or PyOdide were failures. No. This shows you that PyOdide was... This shows you that these are not that effective in the browser. But in a general case scenario, Bryson is, I'd say, my preference. Bryson would be my preference at an attempt at Python in the browser. But if you, of course, want to use something for data science, then PyOdide would be your go-to. If you want to run PyPyroGS, then PyPyroGS would be your go-to. So, this does not mean all these attempts at Python in the browser do not mean that transcript, Sculpt, all these were failures. No. They just mean that they are useful in some other scenarios. So, let's talk more on Bryson. Let's get back to Bryson. To get started with Bryson, you can use the CDN, right? Or you can install it on a local machine using NPM or PyP. But for the purposes of this talk, I'm going to use the CDN. For those of you who want to use NPM or PyP, you can refer to the Bryson documentation. The Bryson official website is Bryson.info. So, let's take a look at an example of Bryson in the browser. This, I think, is the most awaited thing of the talk. So, here, as you can see, I have this small web application, small web thingy. So, as you can see, I've got these buttons. I've got this Save Jokes, right? So, what this does is that this is the random programming jokes generator. So, I can click on this button and it's going to generate a joke for me. Yeah, so it did. So, as you can see, it takes some time in the first time and it generated that joke for me. I can save that joke. Now, it does not save it and show you in real time, but I can reload my jokes to see it's still there, right? It's the same thing. Why did the JavaScript heap close shop? It ran out of memory. I don't get it, but it's still the same thing. So, now I can generate another joke and you'll see this nice loading effect, right? You see that in, for those of you who know what Ajax is, you see that in asynchronous JavaScript and XML applications, Ajax applications, for those of you who don't know, there's no, you don't need to necessarily know it, right? But it's good. So, again, you know, I cannot save, you know, if I don't want, I can also not save this joke and generate another joke. So, this is basically doing something called as Ajax, right? Which I told you about. So, I like to call it abax, because this is asynchronous Bryson and XML, right? Because all this is Bryson code. And to show you what I actually mean by that, I can go to elements. As you can see, I've got a bunch of code here. Like, these are, this is HTML code. But here in body, if you'll see there's this onload is equal to Bryson. So, the first thing that's going to catch your attention is what is this onload is equal to Bryson, right? So, this is the Bryson function, right? Which we're going to take a look at what does this mean, right? What does this represent? What does this actually allow you to do? We're going to take a look at that later, but for now what you need to really see is this, right? Now, I know what you're thinking. There's a script tag. And first of all, that script tag has a type of text slash Python. Second of all, this code is not JavaScript, because what goes inside a script tag is JavaScript. I know that. But since I'm using Bryson, I need to specify type of text slash Python, and I can then write this JavaScript code. It's that simple. I can create a script tag, write type is equal to text slash Python, and write in all my code. So, you can see it's Python code. It's pure Python. I've got the Python import statement, Python def keyword functions, right? Now, I know some of you would be amazed. Some of you will be like, okay, this is cool. So, as you can see, I've got CDN. So, as I told you in the Bryson introduction slide, that this, how you actually write Bryson code is by writing it in your normal code editor, as you would do. And then you copy the CDN links, right? You can get this from the Bryson website as I told you, Bryson.info. And from there, you can copy and paste these CDNs, right? And what you can do is specify this onload function of Bryson, and we're gonna see its significance in our code. And then you can write your normal HTML and go ahead and make a script tag with type of text slash Python, right? And write in your Python code. So, we're gonna take a look at how do we write this code? What does this code mean? What are the Bryson functions? What is this browser module, right? And then, of course, we've got this file here, localStorage.bry. I know many of you are thinking, what is this file? Is what this file is? What is this file? What is this .bry extension? Well, some of you may have known, may have got the answer, .bry represents Bryson. And on the Bryson.info website, it says that the official Bryson extension is .bry, right? So, for those of you who had that question, it's a .bry file. And I can simply say script, again, type text slash Bryson, and make source localStorage.bry. And I can actually convert this to a .js file. I can just do that. It's that simple. It will still work. I already tried that. It worked, right? But let's come back here. Now, another thing I want to show you is quickly, is this. You might think that, okay, this saved my joke. But what if I refresh my website, or close my window, close my tab? What will happen then? Well, this is your answer. It will still save your jokes. How does that happen? Well, some of you would know the answer. Some of you won't. For those of you who know this, we are using local storage, right? Those of you don't, we are using local storage. So if you're on a Chromium-based browser, go ahead, open your DevTools. Go ahead and go to any website. Open your DevTools. And then go to application tab. Application, it would be somewhere here. And then you'll see something like this page. Click on this dropdown. Get this. And you'll see this beautiful key value pairs, a table kind of thing, right? So this is the local storage. Local storage is simply your in-browser storage, which allows you to save some key information in your browser, right? And this allows you to save some important information, which you'd want to reference in your websites. So I'm using local storage and local storage saves those information in key value pairs, right? So what I'm doing here is saving it in the key of ID and value of the joke, right? And then I'm referencing it over here. We're going to look at how do we do, how we work with local storage, right? But for now, you just need to know we use local storage here. I can delete an item. Also, I just press the delete key for those of you who were wondering what did I do? Reload that. Boom. Gone. It's that simple. Now I can also do something like, why did the... I can keep close shop. I don't understand that. Let's reload that. Boom. It's Python now. So there's basically local storage, right? It's some local storage stuff. I am not going to go too deep into local storage, but most of you may have made the connection between local storage and dictionaries. And yes, they have a connection. We're going to look at that connection and look at its significance in Brython. But for now, let's go back to our slides. Let's go back to the code that we are going to write, right? Right? So let's take a look at the code we're going to write. Woo-hoo. So selecting elements. Now, for those of you who know what the DOM is great, for those of you who don't document object model or DOM, you guys can research it. DOM is simply just this... your HTML document, right? That in a nutshell is the document object model, right? All of the tree, the HTML tree you have, that is the document object model. And there are... There's a lot of things that comes under this concept of DOM. So you can research it. But let's take a look at some DOM operations we can do with Brython. So the first one is, of course, selecting elements. For those of you who work with JavaScript in the client side, you know the selecting elements is the most basic DOM operation. So I've got two code snapshots here, right? This one right here. So this one right here is the Brython code. And this one is how you would do the same thing but in JavaScript, right? Because I'm just comparing and contrasting JavaScript right here. So I've run this Python import statement. You know, it's very Pythonic. You all know this code. Then I say data is equal to document in square brackets plus the ID of the element, right? ID of the element refers to the HTML element you want to select. The ID attribute of that HTML element, right? And then this code here, the JavaScript part, is basically how you would do the same thing in JavaScript using the get element by ID function, right? So this is essentially how you would select an element. Let's move on and talk about some more selectors because it would be a hassle if you can only select an element by the ID because what if you want to select all the elements with a tag or form, right? Then you'd have to give each form an ID and in large scale web applications it would be very tough. So we can use a select function which again from browser import document and we can just say document.select. Save it in a variable. We just select an element. So you can pass in any selector you want like .foo, hashtag container, a, square brackets, title, right? Pass in any selector. CSS selector, jQuery selector, normal HTML selectors which you have, you know, adding and removing classes. Now this is a very useful DOM operation, adding and removing classes. So what we can do here is this is how you would do how you would add and remove classes in JavaScript and for those of you who know JavaScript this is how you would do that. Now can you guess how you could do this the same thing in Bryson? Now for those of you who don't know just take a guess, put it in the chat because I can't read the chat but go ahead, put it, right? And this is how you do it in Bryson. It's exactly the same. There's no difference. You know, there's no difference. When I got to know about this I was not shocked but I was intrigued at how excellent Bryson is because it's exactly the same and in fact I just copied this code snapshot and just mirrored it and put it down here. I didn't have to do much work and it's exactly the same. So, you know, yeah, it's exactly the same so we have an element and then we have a class list and then we can say add, remove. So add and remove functions they are a part of the class list which is basically just a list of all the classes on this element remember this element is this, right? This data, this when we selected this element, right? This element refers to that and then we can just say dot class list, dot add and the class name which we want to add and the class name we want to remove, right? Then we can move on to creating and appending DOM elements this is another very important DOM operation which you would do, right? So, again, we want to run our handy import statement from browser import HTML, right? And then we can just say new development or whatever you want to name the variable is equal to HTML which is the... what we have imported right now we can say dot div and note here notice this div, right? This function div, first of all the first thing to note here is that the tag we want is in capitals the second thing is that the tag we want to create the element we want to create is being referenced as a function and yes, we have to reference it as a function and then we have to pass in the attributes we want in that element as arguments, right? So if you want this new div element which I want if I want to pass in a class of new divs so I can just pass in argument of new div and say class is equal to new div, right? I can do the same with ID pass in ID is equal to unique new div and appending an element is super simple HTML.li I just create an element because I need two elements or two participants in appending an element so I use this less than equal to sign and I put my new div element so this less than equal to sign just means that we are adding content because many people get confused what this actually about what this actually means because I myself have seen many Google groups many telegram groups and many people discussing about what does this less than equal to sign really mean, right? and really it's a hassle people are like why do they use this thing? well they use this and we can't negotiate we just have to use this so we just say less than equal to and our element which we just created boom we appended the element next the HTML module tags this is the HTML module right? so these are the HTML4 the HTML4 module tags right? you can see a tag and you don't need to remember all of them these are the normal tags which you would have in an HTML document most of these you won't even use like Q or S or SAMP haven't even heard of them so that's that you can find these on the Bryson documentation, Bryson.info and the HTML module tags for HTML5 these are the HTML5 tags and if anyone is asking this question that is this talk sponsored? no it's not I'm just making this talk because I want to it's not sponsored so adding and deleting items from local storage now this is what we talked about now here I'm going to first of all point out the significance between local storage and dictionary and how that actually works with Bryson and secondly I'm also going to talk about the importance of local storage local storage is really important because if you're on Facebook or any website and there's dark and light board or different themes you click on that moon button and it becomes dark that that works because of local storage when you go to your Facebook account you don't try this out if you haven't already go to your Facebook account click on your dark mode or light mode then go to your dev tools check it out in local storage boom it would be there that theme there would be like a key of theme and then a value of dark or light do this then you'll understand how local storage is used in what context it is used in what projects it's used so again we want to run our handy import statement from browser.local storage import storage then we can say storage and in square brackets pass the item key foo which is foo here and give it a value of bar for those of you who know how dictionaries work you know that passing in that this item our dictionary is going to check our storage and storage is basically our local storage dictionary so you can see how it connects how easy it is for working with local storage so this is the relation I was pointing out to the helpfulness and the ease of working with local storage so storage square brackets foo is equal to bar so for those of you who know how dictionaries work you know that it's going to check if there is an item if there is a key by the name of foo and if it's not it's going to create and give it this value of bar and then we can just use a del keyword and say storage square brackets foo it's that simple we just learned how to add and delete items from local storage you literally created half of what I did in my random programming jokes generator it's that simple another alternative for people who don't want to use this super easy method somehow no problem again from browser.local underscore storage just run that import statement and then storage.setitem setitem is a function it takes in two arguments foo and bar and it says ok setitem foo here is the key bar is the value and it sets that item creates that item and deleting that item foo from storage is super simple storage.removeItem foo again is the key here and boom that's it you remove the item so let's move on to the next part of this presentation Bryson under the hood this is probably not the most compulsory part the most important part but this is I think vital to understand because how Bryson works many people would have this question for such a technology so it's quite simple there's this transpiler or this trans compiler called py2js.js which is a JavaScript library which converts Python to JavaScript and Bryson uses this transpiler to actually transpile the Python code we write now to outline to sum everything up in a nutshell Bryson works in three steps and I'm not going to end my presentation here I'm going to explain these steps but the first step is the starter function Bryson so we we looked at that Bryson function here so this is compulsory compulsory so as you can see as resource and it's dependent resources have finished loading this thing so this basically means when your page loads when everything is loaded then we need to run the Bryson function right and what does this Bryson function do it looks at everything in this HTML page it looks if everything in this HTML page has a script tag in the script tag it checks if it has a type and then it checks if the type is text slash Python right if the type is we have four minutes remaining oh okay so just check that text slash Python great this is the Python source code right we just looked at this code great now let's move on then we've got then it reads the Python source code inside that script tag and then it runs in eval function which executes the JavaScript now I've written in parentheses avoids memory leaks on some browsers yes it does so when it executes the JavaScript on page load now I was talking about some benefits so I meant avoiding memory leaks on some browsers so this is vital because memory leak is basically when you don't collect all the unused variables which are now garbage right all the unused variables and they just take all that memory they just soak it all in and because of that there are memory leaks browsers can experience memory leaks so let's continue so let's talk about this second step in detail right so first of all there's this main script py2js.js which is the which basically has this py2js function which translates your source code and then there's this function which calls the tokenizer this function tokenize is inside the py2js function and what this tokenize function does is that it tokenizes everything so for those of you who don't know what a token is a token is the most basic representation of a source code so it can be something like an identifier a keyword a plus an equal to sign anything now this tokenizer builds a tree an abstract syntax tree an abstract syntax tree or ASD is just a syntactic representation of the source code a tree representation of the source code sorry so this tree is made of instances of the class node forget about this little dollar sign here it's just it has different nodes right and each instance of node is created for each statement this basically means that each statement we have here of code right each node is built for each statement that's what it means and for each statement or for each node in this case is a context right and then translation to JavaScript now this is basically this part but in a bit more explanatory manner so it's basically the same thing a tokenizer reads the tokens in the source code it passes them to the abstract syntax tree for the code and then based on the code it raises the syntax error or an indentation error and yes you do get those errors and then the tree is modified based on your line number and script name and then additional nodes are added based on that and then the transform tree supports a method 2.js which returns the JavaScript code now I'm not going to go into the comparison of JavaScript in price and like I was talking about the code here I had the code here but let's just talk about some features of Bryson and limitations so Bryson has an excellent DOM API we looked at the DOM API it has support for core Python packages and modules but those of you who don't know here we also imported JSON here and it also has support for JavaScript libraries like jQuery and ViewJS and PhaserJS and 3D and etc you know you can go to Python documentation it compiles the Python code right there in the browser as soon as the body loads which executes JavaScript and it increases its efficiency and of course it is still a developing library no one knows what can happen to it right no one knows what the output will be what it will result in in a few years and the main limitation which I feel the only limitation for Bryson is that Bryson is very very slow right it has some performance issues but that those performance issues are covered by the fact that it executes JavaScript right there in the browser and it increases its efficiency right so that in a nutshell is all about Bryson right there are many limitations but JavaScript is a much better language is a much better technology than Bryson which I can still say because JavaScript has a lot of support a ton of support and it has a lot of libraries which basically just increases over overlooks Bryson and it's not that Bryson is bad it's just that JavaScript has set a really high bar for the client side for client side scripting but Bryson is excellent for small scale applications for small level applications and that's it citations thank you