 Good evening, everyone. Good afternoon. My name is Jastu Asloof, and I successfully completed my Google Summer Code project with Python Software Foundation. I worked on more and more in the Key Engine project. So I'm a third year undergraduate student. I'm an open source enthusiast. I've contributed to various organizations, such as Mozilla, PSF, KD. I like building web applications. I've worked on a lot of web applications, such as Jake Berry, DT Mart, Stalki. I've worked at a few startup companies, such as Zomato and Rotify. So let's get started. So has anyone heard of Moin Moin Wiki? How many of you have heard about Moin Moin Wiki? So do you know about Wiki? What a Wiki is? So Wiki is a place where you can collaborate, edit, and share information. Anyone can edit, add text information, and share it with the world. So the Wikipedia is powered by a Wiki engine, which is called Media Wiki, which is written in PHP. And similarly, we have a Moin Moin Wiki engine, which is written in Python. And it's being used by a lot of technical communities, such as Pythons Software Foundation users, Canonical users, and Debian users. And the advantage is that most people are not familiar with PHP, so if they want to make some changes, it's difficult for them, because PHP is a little different. And some people are familiar with Python, so they choose Moin for that. So my project was to build a user interface and design UX for the next Moin Moin version, which is called Moin 2, it's still in beta. So I started with the prototyping. I use Sketch application for building the prototype, because I'm a programmer, I'm not a designer, so Photoshop is complicated. Sketch is very easy to use, and you have UIKit, so if you're going to build, let's say if you're going to use Bootstab, you can download the Bootstab UIKit if you're working on iOS, so you can use UIKit in Sketch and you can very easily prototype it. So Moin Moin is powered by Flask. Flask is used for writing the server. In Python, it's a server in Python. And the way it works is, so let's talk about how the website works, like in 20 years ago, how it used to work and how different it is today. So earlier, a user would send a request whenever a person opens a website, he sends a request to the server, and the server listens to the request, the kind of request that it has received, and gives the appropriate response. So it is a one-way communication, a client to the server and server to the browser. So every time a person clicks anywhere, a person wants to navigate in the web application, the web page needs to reload every time. And so a lot has changed after the asynchronous server calls, that is the Ajax calls. Now we can have one HTML page, and then we can render different parts of the web page at different times, according to what the user wants. But quite recently, something different has happened, like people are now combining both the server side rendering and the client side rendering. So to get the best performance out of it. Quite recently, I think the Twitter experimented, Twitter engineering team experimented with this. They combined different techniques, such as server side rendering and the client side rendering, and they figured out that 50% of the content, the web page content rendered in client side and 50% from the server side mixes up, gives the best performance. So yeah. So in the server side rendering, the web page is created in the server side only. Every calculation, it just gives you the content rendered into the client's screen. So it is faster. In cases when you're using a very high speed, if you have a high speed internet connection, and if the server speed is high, and you don't have a lot of requests, so the server is able to perform a lot of calculation. So it gives you the response almost immediately. So the website works really fast in those cases. But in some cases, when the website is really large and you don't have a very good internet connection, in those cases, it will take a long time to load all the page into the client side, because the data will be a lot, and download speed will be low, so it will take a long amount of time. So what we do instead is we load the base page, a very light page first to the user, which is very lightweight, it just has a navigation bar and a few footer, and just a very light content to the user. And then as the user interacts with the website, what we do in the client side running is instead of sending you the HTML page, we send you a JavaScript. So the browser knows the JavaScript, so it actually can send requests, or whatever the logic is inside of the JavaScript, as the user interacts, it loads the appropriate data into the screen. So this is a piece of code which is very easy to implement, as you click on something, only then we are going to fetch some data using this API, and we will append the data as the user is interacting with the website. So now let's compare the performance between the server side and the client side. So the initial loading time will be obviously faster in the client side rendering. Server side will take a lot of time because the data is locked, and for slow internet connection to glow. Another thing is that the control, so some things are not even possible in server side sometimes. Because I want to build a bookmark, kind of a plug-in in the Moin-Moin-Vic engine, so that you can add certain vikis as a bookmark. And I took inspiration from the Google Chrome browser, which has bookmarks at the top of the, like, at the top. So the way it works is as you resize your web page, the links decreases, and as you change the dimensions, it adds up more of the content in the bookmarks. So there you actually need to know the screen size of the browser. There you need the information, specific information in the browser itself. So you can't just calculate everything in the server side and say, you don't even know the screen size of the user, so you can't actually do this. So the only way to do this is using the client side rendering, where you know the dimensions and the amount of data that you can actually add up in that space and then accordingly load all that data. Yeah, another thing is caching. So if the data is load, the browser do not actually cache, but the Chrome browser, for instance, if it's using the same API again and again with the same data, the browser is able to cache the responses that it receives from the request. And so if you're using the website again and again, the website will actually perform a lot better. And as I talked about bandwidth already, the bandwidth is because since the data is cached already, so the bandwidth required is much, much lower in case of this, in case of the client side rendering. And it also forces us, because in Flask it is much better. In Flask, there are two approaches. Actually, if you're doing the server side, you will just listen to the request and give out the HTML response to the user. So it doesn't enforce you to build the APIs. Whereas if you use the client side rendering, you require the APIs there. And building APIs is a neat way of doing things, because in the future, if you want to make a mobile application, or if you want to make something for another different hardware, so you can have the common API and the common backend, and it could work on different devices there. So it forces you to actually use the API and better. So yeah, that's the conclusion. So actually, we do a lot of experiments to see how it's performing in different internet connections, and different browser, and different operating systems, and different caching systems, whatever there is. And only after a lot of calculation, we see how the response is there, and how fast the website is being rendered. Because the 100% client side is not actually a good way of doing it, because then the search engine will not be able to see your website. So you also want SEO to be there. So the content in the client side rendering, the data is being rendered in the real time. The Google bots or the search bots will not be able to understand any of the text in your website. So you have to mix both of the contents in order to get the best of the both worlds. So with mixing the client side and the server side, you get the SEO, you get the best performance. You can also implement it to work like a mobile application as well. Single page, the web application will not reload every time you're navigating in an application. So right now, we have a lot of frameworks to use. We have also a lot of frameworks which actually enforces us to use such kind of the styles, such as React is the new one, which also enforces us to use the components boxes, which I think is a fantastic way of doing things from the UI perspective as well. So thank you. My Twitter handle is at yaskuntutri. And my email is yaskuntutri at gmail.com. And you can find me on ISC at yaskuntutri.gmail.com. Any questions? Thank you.