 Okay, we're live Hello, everybody. Welcome to this month's Wikimedia tech talk ouch. I have an awi using O O UI without pain Our presenter today is more L shot lender senior software engineer on the contributors team I'm your host Sarah. I'm a technical writer and developer advocacy We will have a YouTube stream which is noted here and Afterwards the talk is going to be about 45 minutes long And then afterwards we'll have a Q&A period you can ask questions on the YouTube stream You can also ask questions through IRC through the Wikimedia office channel I will put this slide up again at the very end so that folks will be able to see that And as always this tech talks are open for anyone in the technical contributor community at Wikimedia so if you have questions if you would like to Submit a talk yourself or a topic for top talk. Please check out this link. That's here at the bottom and Without further ado. I'm going to hand it over to you more y'all Morel, you're up. All right. I'm sorry. We're dealing with a Small issue All right. All right. I'm gonna start with a Different microphone. All right. So hello everybody. I hope you can see this and welcome to Ouch, I haven't are we using OUI without pain? I'm hoping that at the end of this lecture not only will you be using OUI without pain But you're gonna love it and everybody is going to love using OUI. So that's my plan I will be doing something that many presenters fear doing and so do I a little bit and I will use a live demo So I'm hoping that everybody will you know be patient with that and nothing will crash But as we all know when you use live demo things happen So we're gonna do in this lecture We're gonna cover a little bit very quickly. What is OUI and a little over the history? And then we're gonna go over basic usage some pitfalls advanced usage and resources and the focus of this lecture is going to be hands-on Demos so hopefully that'll help out So without further ado What is OUI? Let's talk a little bit about the history So before visual editor Everything was PHP Thank you. Everything was PHP and We had JavaScript as augment right like we use jQuery UI we use rather JavaScript it's all you know was augmenting Things that were the no JS experience and for the most part we can media used to work on one big UI Product at a time like we didn't do a lot of Products at once with it pretty much every year one big product at a time Which allowed us a little bit? Thank you a little bit to adjust our strategies every time right like we used one big Product and then we learned from it. We knew the next big product All right Okay, and we changed a little bit the way that we you know each time works But then the first rich client application came in visual editor that really was a full-blown JavaScript application no longer something that just augment stuff and that required us to go in and and look at solutions because the current solution jQuery UI the raw JavaScript were not sufficient So we looked into existing library libraries at the time. Remember this is around 2011 2012 and We found that the libraries that existed back then Either didn't have insufficient didn't didn't have sufficient browser compatibility. You guys might remember IE 6 We used to support it very long time While everybody else didn't but it wasn't just IE 6 like we have browsers that we support that other companies consider You know out of out of industry for a while and we needed to support those and One other big problem was that a lot of those libraries had barely any support for internationalization and for us to add It in would be a huge chunk of work So it was very clear that we needed a very pretty much a custom solution for visual editor And that's where you know the thinking about that UI library Started but it began being inside visual editor, but then there's started to be a little bit more demand for more in JavaScript based products and We started working on more than one big thing at a time and it would be can begin To be very clear that if we get this new visual editor UI this new thing that we put a lot of time and effort to to make it Generic and it's very powerful if we get it out and let other other products use it we will gain a lot of UX and You know text-tag things so it supports internationalization supports older browsers it goes by object oriented principles We want to make sure it unifies the UX principles across new interactive products It's one place to make design decisions So when designers decide that something you know no longer is valid and we need to changes There's one place to do that and all of the products using it gain from it And of course we get code consistency And any updates to the system all of our products will you know gain from it so? It was decided that this is the direction we want to go in and around 2013 is also when the front-end standards group Started to form and started to talk about this with the technical committee And there was very much an internal consensus that You know we need to get a better UX for our users, and this is you know a good way to achieve that so from 2013 onwards we started using OUI for new products and We were starting to talk about which is just an ongoing projects to also Get the older products like you know special pages and stuff like that to be updated into OUI This project is ongoing although. It's almost done. It's getting getting close to being to being pretty complete. So that's cool So the next step that was the little ever history. Let's talk about the base principles of OUI I will run a little bit on this one, but the notes are available, and I will answer questions later But this is kind of like where OUI is coming from this is the base principles that OUI is based on For better and worse so the first thing we want to make sure is abstraction a lot of times Especially back then the data that you would use for JavaScript would be on the DOM element So you'd have data attributes you'd play around with them you'd have like another you know DOM element that stores your attributes and that caused a lot of You know a lot of problems especially when we know that in our stack we have gadgets and we can have multiple gadgets on a single you know DOM element or a single you know product and putting everything in the in the You know trusting the DOM element to store our data is not very Sustainable on top of that because we want to make sure that we support things that are not very trivial So for example older browsers making some polyfills You know making sure that things all the attributes are being read properly between browser all that kind of stuff We wanted to make sure that we have These components is widgets that do that work for you. So you can say I want an input and Whether ie reads that input attributes differently than Mike than Firefox We would deal with that you just get an input and you put it in there and you're done So the abstraction layer was very very important and then in the abstraction layer We have widgets and then the widget has a dollar element that is the representation of the DOM The jQuery representation of the DOM that you actually put in the in the DOM So you have kind of like these abstraction layer that's very important So things like for example set title you might think that it's really you know If you have a button and you say set actually a button is set label If you have a link and you have set title so title is just a title attribute, right? Well, not necessarily because if you have an access key you want to make sure that you're retaining it and if you have You know accessibility concerns are a couple of things that we sometimes do to add to it And you as the implement as a user of OUI You don't need to go and do a lot of research to make sure that a screen reader reads it properly Or that you know what kind of title do I need to use for different kind of elements? You just use set title and the system does it for you in cross Bowser and Multiple ways and the same thing with set label And things like that you can give it string or internationalization or a jQuery object And we kind of deal with you know what it means to add the actual DOM The second thing is componentization, which is a hard word to say and I can't believe I just managed to say it Which basically comes with the abstraction right the idea is that we want to make sure that things are components We call them widgets everything is kind of like self-contained as much as possible and That way you can take it's kind of like a Lego, right? You have like this widget this widget this widget you want to create something else You just include them in and this is a big principle of OUI for better and worse because for better It means that it's very easy for you to build a very very quick interface From scratch very quickly you just take I need like you know three inputs a button boom. I'm done the less good which is something that we're dealing with and we're trying to solve right now is that that means that the Structure of the DOM can be a little complicated because everything is nested So we are aware of that and we're trying to you know mitigate the CSS factors of that and stuff like that But it is very powerful When we are looking at things like we want to make sure that our gadget users Can create these kind of things without a lot of trouble like they they can just come in and say I just need a button Well, here you go. Boom. You don't need to do anything else, right? And it manages this the state for you the events. It's synchronizing all of its internal widgets It does all the calculation for you if you want to add if you have a button And you want to add an icon all this Consideration of whether or not we're moving the label and how much and you know Sometimes padding and margins are different in you know firefox and chrome which can happen all these things are done for you We have a lot of that kind of like you know calculation code So that was kind of the point of making it very very straightforward The other principle is event driven, I think I'm a number four right now Event driven the entire library is based on events And this is just an approach that we took that You know, there's there's multiple ways to do especially nowadays. I think the bigger thing now is Going with state All right with Redux and all of that Whatever exists OUI goes with events That means that we can also do things like simplify the events for you So this kind of relates to also the abstraction Think about an input widget and if you want to make sure that when someone types something in You want to respond to a change event? Well change event is not just a change event that is in the DOM a change event can be a copy paste It can be you know, I just added a letter in it can be I marked Something and dragged it over which can happen. So it could be a whole bunch of things. We do that calculation for you We translate those events from the DOM into Cleaner events from the widget where you can take the self-sustained widget and say, okay, just listen to change I kind of don't care what you do in the background. I just know that when it changed I'll listen to it and that's how it works. And then when you create your own Interface and we will look at this in a minute But when you create your own interface or your own widget, you can trust kind of to say I want a button listen to click whether that click is in the DOM a click a mouse down or a touch because some cases cover other browsers or whatever is Irrelevant for the fact that you'll get a button that will respond any time a user made a click Intent right so that that is kind of like you know the event idea also Something that sometimes is missed and is very important It's not just the idea that widgets emit events a lot of widgets are also Managing their own starting and stopping event listeners, which is very very important when you have a lot of other Kind of considerations going on in your in your page So just a very quick example when you have a pop-up a lot of times We you know OUI would internally you know turn the events listener on when the pop-up is toggled on And then you can listen to whatever is inside it But when you turn it off it will turn off all the events so that we don't get you know This noise event when the pop-up is unneeded when the internal stuff, right? So we do all of that stuff for you know the user you don't really need when you implement all you I don't need to think about that at all. You just use it out of the box and Of course something that's very important for us And only recently seemed to have started to be a little important to other people is supporting no JS experience We have a php stack so it was important to us to work with that stack and OUI does that we have OUI widgets And we have something called infuse The OUI widgets also work with our html form So you can add a widget to the html form and most of our special pages actually auto-infuse so you don't really need to do anything and This is just a really simple way for us to say you know Here's the interface for no JS experience. Here are it looks the same It has the consistent behavior And then I want to make sure that also those widgets behave the same way that they need to behave in JavaScript and I just infuse them in and OUI takes over and OUI will know how to take the same name the same configuration options and create that JavaScript widget that can that will be then in the DOM and will be dynamic and And Lastly, of course internationalization and accessibility in fact recently. I think we are completely compatible with the accessibility standard party that was awesome and It and is one of those things that you know the foundation and the movement really really cares about way beyond a lot of other places So obviously we wanted to make sure that the entire library Gives gives that to users basically for free like you don't need to even think about it You create a widget or a gadget or a product for the most part You don't need to think about left to right right to left whatever you create it and the system will automatically know for you how to adjust itself and for example, I have a little you know the screenshot is a pop-up button widget and We didn't need to specify anything. It's a button. It's a you know default button pop-up widget So in left to right it goes towards the left and in right to left automatically for you You didn't need to do anything it will go towards the right and even our Configuration option so if you do want to kind of configure it and you want to control where it goes The wording of the configuration option already kind of are set up for you to understand that it will automatically support Right to left and stuff like that and the same goes with a lot of other language concepts So this was a very very very big deal for us to make sure that this library is doing and That a lot of other widget libraries didn't do and and that was very important and again with the thinking is that We have a lot of developers that want to do quick things that are might not be you know Super aware or experts in all of those things whether it is events or internationalization or whatever And we wanted to make sure that they can take those buttons take those widgets takes whatever create a really powerful interface with that But also fits, you know the standards of the foundation in terms of what we want to give people in terms of internationalization. So All right, so we no further ado that was a little bit of an explanation So we went over what is OUI we went over the history and we went over you know, what is the principles that it's based off of and Now we can kind of delve into basic usage, which is introducing a little bit of the widget. So I created a little demo and as Befitting live demos. I hope it won't crash But I created a Little two widgets. We're gonna look into one and then another I will leave it up online so that after the lecture if you want to take a look at it and play around with it You can absolutely feel free But that let's take a look and this is kind of an introduction so the first one Here is my basic widget. We're gonna go over it in a minute But just for this demo, I took over a special blank page So I'm just gonna turn that on and turn on sorry the console All right, but before we go and look at that all I did Okay after loading OUI modules and after verifying that I only do that for a special black page You know very quickly just so that I can demo after I do that. All I did was You know in the content of that page. I attached to widgets So I just started Initialized a button widget with a label OUI button widget and then I initialized a text input widget with a placeholder OUI text input widget and I Appended both of those to the content area of that page So remember we talked about the widget the componentization. So the widget itself is widget button but what I attached to the DOM is the dot element of that and I write this here so that people won't completely kill me for polluting our global variables Which you should not do but for this demo purpose And is only I am exposing it in the global variables just so that we can talk to it a little bit in the console So I know I shouldn't be doing that Don't don't Don't yell at me too much. It is a gadget that I use for this Anyways, okay, so as you can see I have the button widget with the label button widget It is clickable and I have an input a lot an input great So I have two widgets and I can see here that if I go to OUI demo I have button and I have text input Cool. Well, what I can do with this is for example, let's take our button Right and let's do it change its label. So let's set the label to click me and as you can see I Kind of practice this before so it somewhat completes my code. Click me. Yay. It changed to click me Do I need to make it larger? Let me oops Here, let me make this a little larger. All right Click me. Yay All right, what else can I do? Well? We can also listen to events. So if I do all your right demo button I'm gonna listen to on click And I'm gonna tell it when I click I want to see some alert telling me I was clicked Whoops and now of course. I need to make sure that I close all my brackets in a live demo All right. I'm here and then please work Yay It's working. All right. So it listens to events. Okay. Well What can we do well first of all because I'm gonna keep on playing with it The first thing I'm gonna do just so that they don't forget is turn off that event because we're gonna listen to it again In a minute, and I don't want to create a stack of events, but now let's see what can we do with the? Label well, I have the text label text input. Sorry with the input not the label First of all I can get its value which oops get its value Which is nothing right now. Well, okay, how about I set its value? Okay set value to Foo because that's what we usually set it to there we go. It's full And I can do really cool stuff like you know what I want everything So I'm gonna do a set validation and validation is a function that take whatever you give the input and Returns whether it's valid or not. So I'm gonna do something super simple like it's only valid if I type good And let's see. Well, I click here first of all foo you can see it's red. It's invalid If I start saying good Boom, it's valid There. Yeah. Okay. So things are working What else I have like a little cheat sheet. Oh, I can change the flag So a button has a flags and the flags doesn't kind of dictate what its meaning is which also means what it looks like so if I take the button and I say set flags oops Yes, set flags And I can give it an object and I can say right primary true and Progressive true Boom it is now primary progressive Another thing I can do is I want that input that I just did and W. Oh, you want a demo Text input How about we set an icon on it search? Maybe it's a search Thing and this if you take a look at that input you can see that not only is the icon on but the where you type moved And this is what I was kind of talking about before about abstracting things for you So you didn't need to add the icon and then figure out where it goes and then maybe in zooming level It changes we did that for you. You just add the icon. It's in there You can change the icon in the middle. I can do whatever you want. We set that up for you And now let me do something I'm going to tempt my luck Let's create something nice here. Okay, so I'm creating a counter and I'm going to create another widget and I'm going to use an Oh, you I tag multi-select widget tag multi-select widget is This widget that allows you to add things with little little pills, right? And I'm going to have it allow arbitrary so I can add whatever I want in there Otherwise that widget takes values from existing values So I'm going to allow it to add like whatever we want. All right, so I did that. Okay. I have a widget in memory now Well, the next phase would be to include it in the DOM so content text I think append and Then it's not the widget. Remember, I append the element. The element is a representation of the widget So I append the widget boom. I have something here and it looks like it's just an input But that's because that's the you know initial state of that widget if I start going with One two, you know the widget works so it's here and that's great. Okay. Well next let's do something nice How about we go to the button And we say that on click we want to Have the widget that I just created add a tag With a number on it counter I hope I closed all my thing. Okay All right, so on click Right, you can see it here on click. I'm going to call the widget I created to add a tag With that counter now the point of this demo is to show that widgets can also listen to other widgets right like we need to them to communicate with one another sometimes I can get that reference in and There we go. I can create a bunch of lovely tags I don't know how useful that is but it does work So this is kind of you know a demo of how base widgets, you know work work and you can find those bit Those widgets if you go to doc.wikimedia.org and then you have a section about o ui and you have demos in the java script You can also change it to the php demos But in this demos you can kind of see all the base um Widgets that we offer with kind of like, you know some of the Sorry some of the configuration options So you can have like, you know the button. I was talking about flags. You have the button primary and progressive What happens if it's destructive primary and destructive? We can kind of see like what what they mean you can play around with them Towards the bottom there are a little bit more complex widgets, but there's still widgets that come out of the box from o ui so you can see The widget that I was using the tag. How about I look for a tag multi select widget Is here and you can play around with it And there's like a menu version of it and stuff like that So you can play around see what you need Play around with different configuration options and then figure out what you want to use But these are all out of the box widgets from o ui I'm sorry all right, so um you can um I will go back to this page later because we have other things that we offer with this You could I want to show code, but um we're going to fix it up But what you could do in this by the way, which is very very very very powerful I created the gadget to be able to kind of play around with it But you can actually play around with it in the demo So I basically there's a tiny little uh Arrow here that says toggle console you can open that under any of those Widgets and then the reference to the widget you're looking at is widget, right? So if I say here widget set label foo Whoops It changes so you can also play around with that in the demos, which is super powerful So you don't have to create this uh, you know Gadget for yourself in order to be able to play around All right, so that was basic widgets Now let's see about custom widgets So we kind of showed I showed, you know, how we have two widgets and Then three widgets and they talk to one another And um, how can we you know, how can we make sure that they uh, uh are Uh linked and all that kind of stuff Well, sometimes you will need a widget that doesn't exist yet and you can create your own And that could also mean something that you embed later in a pop-up or you can You know use maybe multiple times in your interface depending on where the user clicks it Or even just to make sure that you are componentizing and abstracting your own Work so I created another example and again all of this will remain online that you can examine but I created another example in this link And this one is a little bit I don't know. I wouldn't say it's complex, but it's a little bit more elaborate. So in here. I'm just I'm creating um a Custom widget and I'm going to show you before I'm going to the code. I'm just going to show you that it's here I'm going to make it a little bigger Can I make it a little bigger? Hello? Yes. All right, so I'll make it a little Smaller All right, so there's a little button here custom widget demo So when you open opens up a pop-up that has what does oh you I stand for and then an input and uh button So This what does oh you I stand for the inside is my custom widget so we can look at the code a little bit and go over it so i'm starting out with An object here. This is my class that will be my new widget and it extends The base widget so it just extends widget. Okay, oh you I widget and Um, we call the parent. That's what we always do We set up the config and then really I'm starting to build it So I have the pieces here as title widget, which is what you saw. It's kind of like what is blah blah blah my question I have a notice widget So the notice widget comes to be when if I open this and I give for example No answer and it says give me something give me anything that is kind of a notice, right? But it's it's hidden sometimes it's hidden when it has nothing But I still need to give it a room in the DOM So I create it a notice widget and then I have the input and I have the button So I basically just created those widgets I added classes to them so that we could style them later, but they are straightforward widgets The button has a label the input has a placeholder And then the other widgets I didn't initialize them with the value because it depends the value comes from You know the config and how do we do that? Well, we attach it first to the DOM So this time we don't attach it to the DOM of the page. We attach it to the DOM of the element. So every time you extend OUI widget you have a this dot element And you can append to it and that will be you know the constraint of your widget and then you append to it Title notice in order right title element notice element and then input and button Please ignore the CSS here. It's just because this is a Gadget and I did not want to start messing around with you know including CSS files So this is just to make sure that doesn't completely look bad And then we want to connect to events. Well, I want to do something when I click the button So I connect the button to its click event and I tell it to call this method But also the input you you might click enter on it. Well the input Abstracted for me the action enter. So I just listen to that and call the same Method and then I just initialize it. So I basically set up this Widget with the option of giving me a question and a series of answers So I'm setting it up in the beginning And then of course I'm setting up all my methods. So this is what will answer the event on button click So very very briefly again, you can take a deeper look at this later if you want to but very briefly if I have nothing I will tell the user or give me something. Give me anything When you do it, please remember internationalization. This is just for a demo If I'm checking if the answer is valid if it's valid. I'm setting it as valid I'm the notice will say correct. The button will be disabled and I'm going to emit A success event with the answer I was given If it's not valid Then I'm going to say wrong try again And I'm going to meet failure and either way I'm going to erase the value of the input All right, so this is what happens when I either click the button or press enter And then this is my way of checking if the answer is valid. It's just We're assuming that the user gave us an array of answers And then we're checking whether it's in the array Setting the notice. This is another way to kind of like show how you abstract things set notice will not just be Setting the label. We want to set the label. We want to toggle it to be visible And maybe I want a class to say, you know what my my widget has this state now that it has a notice Because maybe I want the css to also Have conditional stuff on it so You can do that and then set new question I'm getting question getting answers and I'm just setting things in I'm saying, okay. Here's my answer options I'm going to change my title widget to have the label of the answer and then I'm going to reset stuff here and emit reset So this is the way that it kind of works. So let's let's go up and check So it's asking me to give me anything. So if I say I don't know. Well, that's not a valid answer So I'm wrong try again. And if you notice my background became red We're going to touch on why that happened in a second. I'll show you And then if I say object oriented javascript. Well, that's correct. I get Correct. So the widget changed itself and then I get An alert and my background changed but in the code that I showed you there was no alerts There was no background change the results only an event Which is my next step to show So after I did all of that and I defined my widget now I needed to Append it somewhere. So I'm Starting it up and I'm starting it out with some question. What does o ui stand for and some answers So object oriented javascript or in object oriented j s right both of those will be valid and then I just took a Simple pop up button widget give it a label and a title And then in its pop up I said in the content area of the pop up I put my widget right remember my widget element because that is the DOM And I gave it a padding And then the pop up which is what I want to kind of like include was included in the actual DOM Not the best location, but you know it's a demo. So But here's here's the second thing that I was doing So this is kind of like you know this allowed me to look at it in the DOM and play around with it and have it included in the pop Up But the reason why things worked with you know the background here is actually this this is the events Right, so I have my personal widget my personalized widget my custom widget That I'm saying on success now the whoever's doing this space They don't necessarily care what it means like how the widget works to define what success means They just say I have this Question widgets that I want to know if it's successful or not Right, so on success you change the body codeler and you put an alert on fail You do something else and on reset you reset the color This allows you to Do things in abstract way and answer kind of widgets in you know separate your code in a logical way Like you have how do things are defined as success? How do I validate stuff that's inside that widget itself sustained other people may be able to use it But even if not I can use it in my code with a very clear separation Where either I you know anything else you know in this case just my general Initialization listens to that but it could be another widget that listens to that it could be You know a gadget that listens anything like that so This kind of shows the separation of stuff and I've exposed Let's see I've exposed that widget again, oops Did I call it? I'm sorry. I'm w It was a it was very bad at exposing things into the global But I expose it so that we can call it in the Console so if I have it here, it's correct and I say all right. Well I'm w tada da Set new question Yeah, I already tested it out. Uh, how are you today? And I'm going to accept awesome and great and Okay, so I'm calling this from outside the widget From the console in this case awesome and great. Boom. It reset itself Right because that's what I told it to do. I abstracted things out. It just reset it for me Let's see what happens if I say meh Nope, you're wrong. You do not feel meh Give me another answer. All right. Well, great Yay That was correct. Great. Good answer Alrighty So we kind of went over this a little quickly. I'm hope that it was sufficiently Kind of explained I will have time for questions So we can go back into that But that is basically custom widgets So this is you making a lego making kind of like, you know, your own widget by using other widgets and connecting them together And we have a lot of those examples also in some of the code and we have a tutorial for that in the OUI tutorials now So you can also follow that All right, so in this case, um, exactly I have a question widget it emits success or fail Um, and then Uh, the pop-up widget or anything else can just listen to that Not really mind what the widget is doing whether fixing things for itself and just answer that All right, are you guys ready? I am getting into advanced usage. This wasn't advanced. No, I'm just kidding This was pretty advanced usage. But what I'm going to get into is a little bit more logical Um, uh advanced usage because of things that we kind of see what people try to use. Uh, OUI with really complex products So I'm going to give an example of a complex product, which is the recent changes filters So the recent changes filters, one of the things that happened is this is all OUI And there are custom widgets in there, of course But there are also you might recognize some of the base widgets. So the tag multi select widget Is a base widget. It was just adjusted a little bit. There are button widgets there There are pop-up widgets. So everything is kind of, you know, based on existing widgets You know that we we kind of toggle But the main thing about it is that everything has to listen to everything else So, um, I don't know how many of you actually like use this on a regular basis But the saved filters is kind of like this menu where you can store a set of filters for you So the save filters kind of like listens to this button to save the current filter But also it can the button listens to it because it needs to know should I appear or not because if I am displaying right now An existing self filter Saved filter I shouldn't appear so it needs to know the state of that and then the pills the tags Need to know the state of what happens to the You know the the pop-up right and the pop-up needs to know what happened to the tags And we have a switcher of namespaces and tags Well, the input needs to know what's going on because it adds a prefix for you But also the pop-up needs everything just needs to know what everything else is doing And one of the things that I see sometimes in some of the products is that People then try to implement everything inside the widgets so Which is not a bad idea and I did that in the demos when you're talking about a relatively small project Kind of like a relatively self-contained small widget that you might want to reuse or something that has like its own Intendance relatively small just like you saw the question widget But with something as big as this that needs to really know like everything needs to know the state You want you might want to consider using a model Which is what we did for recent changes filters So we have a controller and a model and then we You know, we make sure that the widgets Call the action on the controller. We have everything normalized the controller will change the model And all the widgets just listen to one single model and the model emits a change event And then the widgets just say oh it changed I'll adjust myself And you end up having one single source of truth instead of all widgets kind of Oh, no, I forgot that this widget needs like the other four widgets to listen to and you need to like Start delivering all widgets to one another now. You just give the controller and model to everything And you have a very organized thing. So we just don't need to know about the other widgets They are very self-contained. It simplifies your code. It makes your life a lot easier when you need to go back and fix bugs Trust me Because that happens All right, so this is kind of you know, just a shift in thinking and this is this is something that We're kind of planning to check into maybe using that in o ui base In some of our advanced widgets as well to give you more powerful stuff All right, we're getting close to Close to the end here So here are some resources that you can use and you should be you know Again, this will be Shared and you can Bookmark all of this. So first of all, we are going towards the road for version one Right now we are 0.32 32 33 1.32 Sorry, I lost I I'm having a Signals here 1.32 0.32. Thank you. Okay. Anyways, we are I'm uh, I can't read the signs signs signs apparently Anyways, we are going towards the road for for version one And there's a ticket for that if you have anything to contribute if you think that there's something needs to happen Before we go to version one. We really really need your input um And we could really use You know a help on that and more eyes Well, there's the fabricator board. So if you have anything you run into from either of course If there's bugs if there's something that you you know, you're using a widget and you think that it shouldn't be doing that Um, please submit a ticket But also if you want to see more things in o ui if you're missing something if you're saying, you know I am missing a widget or this widget is good, but it's missing this functionality. This is really useful for us Um, because then we can come in and say, okay, there's a very clear functionality that we need to go Rather than try to make sure that everything is generic enough without having a very clear, um, you know use case So, um, if you have those please please tag uh tasked with o ui tag Uh, and then we have the documentation. So we have the demos that I kind of showed um Briefly, but you can go in there and there's I think all of the uh base widgets are there With various combinations of configuration And then we have the code documentation. We actually put a lot of effort into the code documentation. It's a really really good General documentation that has a lot of examples in it So we have the php one and the javascript one and fairly recently this year Tutorials were added in and we're thinking of expanding those as well. So right now we have two tutorials. Um About using uh making a to-do list The you know the first tutorial is basically using uh base OUI widgets and the second one is extending them uh and going through it step by step And you're very much encouraged to use those and again if you have any ideas or any comments About more tutorials or something to do with the current tutorials Please let us know you can tag fabricator tickets with o ui or you can go to wikimedia editing In irc where we lurk and wait for OUI ideas and bugs and with that thank you And um, let's see if there are any questions Hi, everybody. This is um, sarah as well. Uh, just to let you know that I am also lurking Uh and waiting on irc and on The youtube stream, we do have a few questions from the irc Channel moriel, would you like me to ask those or do you have ones in the room? No, go ahead. Okay so Uh, and if I miss a um question, please feel free to go ahead and ping me on this irc channel. I'll I'll look for it so we have a question for For you moriel. What are some of the best cleanest examples of o ui usage in? I think that's in product that we should consider exemplary. Ah That's an interesting question. So, um I can probably find I mean off the top of my head. It's a little uh hard I need to just take a look again because one of the things that happened to all software engineers is that even when you think Something is clean Within three to four months you realize that you made a lot of mistakes You wish you didn't and then it's no longer clean So I can give you a couple of products that I think we did well for its time But if you want me to find really a good example right now if something very clean, I'll make to take a look at it So I will say that I will say off the top of my head I will say rc filters is pretty is pretty good example We took a lot of effort into separating all the logic That does mean that in some cases we um on purpose shut down some of the widget events because we wanted the the um Model to do that But overall I would say it's a it's a good example for the OUI can do it's a You know very clean I wouldn't say it's very simple though Like it is a very kind of like a a rather complex product So I don't know if I would say as beginners it would be very easy to read it But maybe go over it a little bit. There's definitely, you know, especially with the MVC kind of plan Other products, um, I'm going to need to take a look. I'll I'll get back to people Oh, notifications. I'm sorry, which? Okay Okay, I'll repeat the question because you do not have a mic although I have a mic here So fokker points out that content translation to from a user perspective is very good on how to use OUI From a UX perspective is very good And then we also have notifications Both the pop-up I would say and the page are maybe good examples We also have a lot of separation of concerns there and and kind of like individual Widgets And I will just need to take a look and see about other maybe maybe simpler Products, but these are the ones that come to mind. Incidentally, they're the ones that are so worked on So that might be why they're coming to mind, but yes That answers the question a little bit One of the things that we can do to you after The talk is over is we do document the talks on Page on media wiki and we can put links to Some of these things there. Yeah to support this talk after sure So we have another question. I or see we actually have a few or a couple Um, the the next question is does ooui My screen just moved does ooui have dependencies on the media wiki ecosystem or is it easy easy to use elsewhere You can use it elsewhere. I have I have a project that uses as well and we have Actually in community tech. We have a project that uses it elsewhere Um, I would say that it depends what you need to do right like ooui was very specific Answer to our use cases To the level of internationalization that we need to the level of the fact that we have Gadget people that write gadgets and stuff like that It might not be the answer to everything that you need in your private project And it is not competing against You know these kind of libraries on the flip side. It does give you a lot of You know power in terms of an existing widget You don't need to think about boom inside the DOM and if you do want to use it ooui is a composer package Um and an npm package and you can include it in your project And it's fairly easy and you just um, you know you add it in and there are documentation about that In fact in the tutorial the tutorial assumes that you are outside of media wiki So the tutorial kind of like guides you through You know your own demo page that's just blank html so you can kind of go over that and see what what is required And also just as a note folks have been adding links to the irc chat So if people are looking for those they can check in the irc chat and I will also put those on the The page for this talk afterward awesome For our next question, uh, it's related. It's um, how many products currently use ooui And how many don't book could Oh, I actually am not sure about that. I know that there is so all new products Um, should be using ooui now. I mean a lot of the uh, The recent efforts to make sure that it's uh, especially with the accessibility now and everything like that And we have done a very very big project to convert a lot of the existing things And I think we're almost done with that. How many of them folk are do you have any idea? microphone, please Yeah, um first of um, what are what products are we talking about? Are we talking about wikimedia foundation? products or products in the wild We have it in use in basically all major products besides mobile front end and mobile front end has done some work in on the preferences pages and comes now with advanced mobile contributions um, and uh I think um We don't have a we don't have a discrete number But this is something that we gonna put on our uh documentation as well because um, it gives a better um insight on how successful it is used in the wild actually Yeah, so I can't pinpoint it to 12 13 14 or 23, but um, it is a lot Okay, as well. All right. We couldn't add that as a follow-up as well Okay, it looks like I don't have any other questions on irc. Uh, I don't see any on the On the youtube stream either, but we might want to give one extra minute for that And if there are questions in the room, uh, people feel free to ask I'm just really excited that my demo widgets didn't have bugs in them. I don't know. I mean This is like I think, uh, you know miraculous A live demo Any questions in the room? I do have a question on the youtube stream I think it's a question. It just says any thoughts on web web components on ooui web components So I don't know if that's really a question or just a kind of some comments Can you repeat the question? Any thoughts on ooui web components? Voker the planner of ooui. Well, um, so this has been this has been a topic that has been floating around for um, several years currently we are Not having concrete plans in this direction just because we had a lot to do with bringing the current library to all the products and Again, it's a resources thing first and foremost web components on the other hand were Got a little bit hyped and then I saw some technical obstacles in the standards development But we are following the um, we are following what's out there and following the development And we will pick this up as soon as we see the viable as a useful addition How to encapsulate the ooui and just provide a more simple api There has been some work by people like Bartosch to bring um things like m w ooui button to the core but Again, this is a longer discussion that we are inviting you whoever brought the question up to join and Discuss with us Yeah, and you can see a lot of those questions on the board on the ooui board We have a couple of tickets that are a little bit longer term ooui does have resourcing Very very low resourcing right now. So a lot of us that support ooui core do it kind of outside of the regular job that we're doing And voker is a hundred percent on it But you know there's there's resource constraints So we do have to kind of prioritize kind of things and this is where You know you the listeners and participants can help us because if we know that there's a need That will really really help us out prioritize And know that you know because there's a lot of things that we want to do with the library There's a lot of things that we need to do with the library that bring it back You know a little bit forward from 2011 to here Although there's a lot of things that are modern, but still there are things that you know we want to change And knowing which one is the next thing Would would kind of also depend on use cases and ideas and people who want to participate. So please Um use the board use the IRC chat Do you want to talk about the front end? Group if anyone wanted to Yeah, I was uh I wanted to add Thank you for you and bringing up the roto ui 1.0. This is our biggest priority right now and additionally there is also a group within the vikimedia foundation from the developer standards group where we discuss Things like standardizing our Efforts standardizing and sharing our efforts across the foundation Where oh ui plays a big part So if you're interested, um, please hit me up falker at vikimedia.org and i'm gonna invite you for this group All right Was that the last question or uh, yeah, the last question came from the youtube stream So, uh, if there's a clarifying question, um, I just want to leave it open for a little bit so that uh The person who asked is able to ask And then um I don't so that that might be a good good uh good time because I forgot to mention this and we will probably Put it up in the uh in the documentation of the talk But you can reach me as muipu on IRC for any questions that you have and um wikimedia edit wikimedia dash editing, um On IRC is where we lurk and talk o ui So even if you have follow-up questions and you want to know more and stuff like that This is a good place to kind of be You know asking those questions and getting me and other people to answer Also, just a quick note, um, because I did type the person's name wrong in the youtube chat I'm juggling between a ton of different windows. So I might make some typos when I'm chatting with people um So just so you know, I I'm sorry if I mess up your name Yeah, it looks like uh, we're good. So thank you very much