OA21: Breakout (2) Developing the Sakai Dashboards - Web components and Widgets
Jun 28, 2021 18:50 · 5087 words · 24 minute read
sorry about that welcome everyone uh to the developing sakai dashboards web components and widgets session the presenter today is adrian fish my colleague from longsight so just a few housekeeping details please be sure to leave yourselves muted and cameras off that should be locked but you don’t want to turn those on during the presentation if you’d like to ask a question wait until either the question and answer portion of the presentation or you can use the shared notes in the left hand um menu bar so above the user list you can click there to ask your questions you want to use the chat primarily for chat and post any questions in the shared notes area so that we can find them a little bit easier and if you have any technical issues please send me a direct message you could do a individual chat by clicking on the user’s name so i’m wilma hodges um click on my name and send me a direct message if you’re having any technical issues and i’ll try to help you out any way i can so with that i am going to turn it over to adrian okay thank you wilma um hi everybody i’m adrian fish and i uh i work for longsight and i’ve been doing um quite a bit of work on things like the new dashboards and the grader and quite quite a lot of front-end stuff right so this presentation is hopefully going to give you a little bit of insight into how to maybe do some of this stuff yourselves right that’s that’s that’s the goal right so i’m just going to get into it i’m going to go through some slides and then hopefully towards the end the last few minutes i’ll i’ll look at a bit of code right and we can check out some of the some of the coding some of the dashboard widgets that we’ve already got in place off we go okay so we’re using web components why why are we doing that what’s what’s the kind of reasoning behind that right well first of all web components are future proof and you can use them anywhere you can use them in frameworks like react or view or whatever you can use them just in a normal web page um they’re a web you know they’re a web standard they’re a w3c standard well actually it’s a group of standards together but they are a w3c standard they’re going to be with us into the future of the internet right of the worldwide web so it’s i think it’s a good choice um web components are particularly good um for us in sakai right because we’ve got all these diverse um frameworks that we use for rendering content so you know we’ve got you know kind of jsf you know velocity wikit rsf you know loads of stuff like that right so the good thing about web components is you can write a web component and it’s just a tag and the tag will work it’ll work in in a view app or a react app or well anywhere basically so um you know it works everywhere and we can put it in velocity we can stick it in our jsf markup it doesn’t really matter it’ll it’ll work it’ll work uh wherever you put it so again it’s great because that means that we can start to actually think in terms of um extracting common functionality from our tools into web components without having to rewrite the entire tool right you know which i i think’s a pretty useful thing um yeah you know the way you develop a web component you you basically you write some markup and then you have a few fetch calls in there where you pull some data you know you render the data and we’ve already got all of that stuff in place uh with our direct endpoints right you can write you could write web components just to talk to our current direct you know direct endpoints uh and it’ll work just fine yeah um i’ve been working on a new kind of a new um spring mvc type location for um for implementing rest endpoints and it’s under the um some of the um path api the actual project’s called web api but i’ll show you this i’ll show you that kind of stuff later yeah just fetch your data and render it you know it’s pretty easy doing these things once you start once you write a web component you can use it anywhere yep just attack so let’s move on so this is the example that i always i always kind of like um invoke in these in these talks uh because it’s a it’s perfect you know it’s the permissions web component so anybody who’s done any any um you know sakai tool development in the past is probably aware of this kind of um helper pound that we have right so we have a we have a pound where we we basically offload um the current render to a uh to a helper servlet right and that’s server that will do some stuff uh and then he’ll return back to the sender yeah um it’s it’s it’s great it’s it’s served as well um but what you often end up with is having you have to maintain quite a lot of state in between those calls and make sure that you reset that state or you know reinsert that state and things like that so permissions was one of those helpers so basically what what i did was i took the markup from my from the current helper right which was like it was like like a velocity template right so i took i took that mark up um i made it into a web component and now that web components are used across quite a few tools um i think announcements uses it i think assignments uses it the commons tool used quite a few tools are basically now using this web component to do permissions and this is this this is good because what you don’t what you can get away you can throw away a lot of states by doing that right you don’t you you’re not redirecting to a helper then coming back and having to pick up states again literally the tag just renders it renders into a div on the screen you pick some options in it and that uses fetch to write those options back to an end point right and then the permissions are then set right so it’s been it’s a perfect example of taking a common piece of functionality um put into a web component and throwing away some boilerplate it’s nice it’s it’s that that is that is one of the things i love about um using web components in sakai it lets us you know refactor get rid of um you know get rid of technical debts this is great uh yeah some blood there yeah that’s right yeah permissions tiger okay he can read that later okay anatomy of the sakai web component right so we’re using a um i don’t really like using the word framework because framework implies something heavy and something that usually becomes technical debt later right but so lit element is like it’s like a micro framework right and it’s a it’s a framework that is designed you know destined to eventually disappear right it’s it’s maintained by a guy from google who wrote it and they basically they they eventually want this to go this is just a way of um gradually improving the standards in the w3c and browser support for web components right making it easier to use web components yeah so it’s a great it’s a great it’s a great little little tool right and it gives you um it gives you reactivity so when you set up properties in your web component you change those properties your markup will change automatically that kind of stuff right um it’s nice anyway but again uh we’ll look at some code later and then you’ll you’ll understand better yeah a basic compartment is literally an es6 class um so if nobody knows what es6 is es6 is the javascript standard from 2015 right where they actually added class semantics onto javascript it was the first time you could step away from from using prototypes all the time yeah most of it’s just syntactic sugar right but it it bridges the world between javascript developers and java developers or anywhere you know whatever c sharp developers whatever right the syntax is quite familiar to somebody who comes from a uh object-oriented background in like java or c-sharp yeah so um it’s it’s nice so it’s it’s a lot it’s a lot easier writing javascript you don’t have to be such a kind of a kind of guru right you know like standing prototypes really well a lot of stuff you can get away with a lot more um you know always want more leeway in the way you write these things yeah it’s just an es6 class um you define your tag when you have a render method in it and then you can use that tag that’s all you need to do that’s just the basics you can use that tag then anyway yeah after that you start to kind of flesh it out you put your reactive stuff in you know the watched properties um you know you had attributes you add internationalization well the basic thing is just literally it’s in es6 class with a render method and the definition for the tag it’s great right okay um so anatomy of a sakai tool wc style that’s not that’s not water closet it’s web components it’s just important that you i’m not talking about toilets okay um what can you do you know you got so much room on the slide you know right okay so um so this is this is like this is i’ve literally just written this this is the um this is kind of what’s in a sakai tool when you when you when you use web components yeah well what this is what’s been the ones that i’ve been writing yeah so one to many web components um communicating by attributes and events and some translations you’ll have some rest controllers which is using a technology called spring mvc uh you’ll have a service you’ll have some tests you know no excuse not to write tests anymore we’ve got nice things like mokito and stuff like that um you’ll have some jpa entity beans for your database stuff so you don’t need to write hibernate xml anymore it’s a lot nicer you just you just write a javabean with annotations to kind of define what the columns are going to do yeah and then you’ll have one too many jpa repositories um yeah i’ll talk about the spring crud repository a little bit later it’s let’s get into code a bit okay yeah yeah later on cool um yeah that’s that’s that’s the kind of that’s usually what you end up with right so the reason you you’d have let’s say you’re around at all right you might think well why have we got a lot of web components i think it’s nice to have a good few web components because you encapsulate markup in a web component so instead of having a lot of markup in one big thing like um like i know we use macros and stuff in velocity right but so you know so say you’ve got a lot of markup in in one page right it’s nice to actually break it up into tags and that’s what web components in the end that’s what they are they’re tagged right and each of those tags is responsible for its own area of the markup you don’t have to reuse those across sakai to justify actually breaking your monolithic chunk of markup up into some separate web components that just communicate with each other i think i think i think it’s a nice it’s a nice approach plus you can you can kind of test each of those individually as well right you know what i mean you can have a story for each of those things we’ll get to stories later but but you know you don’t have to reuse web components you can just say this tool has 20 website rubrics is a classic example rubrics has a load of web components um you may think well there’s why there’s so many web components in that i’ve thought it many times but i mean i think there could be a few less web components in rubrics but you know the strategy of having a set of web components that just work together but they’ve got their own chunk of the market that they’re rendering i don’t think it’s a bad strategy at all i think it makes it easier to uh you know to load up the code in an editor and and make sense of what’s going on right when the tag you know there’s one tag so anyway moving on uh right okay um yeah right so i’m going through the steps here of um you know how you go about you know what what you need to actually do to uh you know to go down this path right so the first thing i i work from the front to the back right that’s that’s what i usually do right so i mean with things like storybook i think it’s it’s a great approach to it so i don’t initially think of the back end stuff right so typically i’ve been working with designers so obviously they are working out the front right they’re doing the design so it makes it makes a lot of sense when you’re working with a designer to start from the front but too much i always have i’ll think about the front-end movement between screens and uh and then i’ll i’ll kind of like propagate that back into rest controllers then i’ll propagate that further back into a service you know they’re around my tests you know when i’ve written a service or test before here that’s what you should do that’s what you should do um so yeah so you create your basic web component and again it’s literally such a small amount of code just to create the basic tag you just create and yes in es6 class and you register the tag name right you define the tag name so so the browser knows about it when you render something in your render method you can say hello world so whatever bear text it’s fine that’s that’s how you want to start right let’s create that basic thing so you know it’s going to render yeah the next thing i would do is i would um i would get to know storybook um if you go into our um our git repo the sakai the sakai git repo there’s a project called web components and under there there’s a project called tool and under there if you keep drilling in you’ll find a you’ll find a directory called front end and that is where all the kind of um npm type stuff is like package json and all that and our stories are also in there right so you know i recommend going actually going in you know if if you’re interested in this stuff whatever kind of platform you’re working on but particularly if you’re working on sakai i recommend going in into that those directories and having a look around and seeing how the land lies with that stuff so you create a basic story now you’ve got your component um you’ve called it whatever it just renders hello world so the next thing you want to do is actually create a story to render it on the screen right because you want to start you want to start round tripping on them you know adding content to it and things yeah so you know check it works in the first place at all right the browser knows about the tag um you know storybook can then render it and you know you’ve got a working tag yet yeah i’ve been creating these sub directories on the stories now you know if if i think there’s going to be a fair bit of stuff for that component you know translations or whatever then i think it’s it’s a good idea to actually create a sub directory under there and try and structure because it the stuff that’s on the web components is growing massively right you know it’s like you know a lot of this stuff is still emergent i’m trying to do these talks and trying to kind help people along on this path right but a lot of this stuff is still emerging still with me and i’ve still got things that i feel i want to i want to bottom out and work out what is the best approach for them right but um so it’s a bit of a journey yeah but so i’m just trying let’s try my best here but i think i think that you know creating a sub directory of the stories where you’re going to put your story data so i mean you may you’ll put typically you’ll put styles on under your story directory you’ll put data mocked up data under your story directory um and you’ll put translations under your story directory as well so it’s quite a lot of stuff that’s specific to your component needs to be created and so it makes sense to create a directory um yeah there’s the path right so you run storybook so your sakai source route whatever that is web components tool source made from end and then there’s a script i’ve set up a script called storybook uh in there so all you have to do is go npm run storybook and hopefully it’ll take a while because it kind of like it pulls quite a lot of stuff from um from npm but uh when you run that you’ll get a tab opening up in your browser um with all the kind of like stories down the left hand side with and story for your new component should be there we’re going to look at some code later um right okay let’s go later well we’ve got another longer level ah right okay give me that layer yeah back-end stuff right so you can round trip a lot on on design if you’re working with a design a storybook is great because you can have two screens um you can work on your component in one you might be using something like um zeppelin or figma from your designer where your designers putting mock-ups in there um and typically what you’ll do is you’ll write your round-trip in storybook for quite a good while right you’ll you’ll mock up some data in there and you’ll be just you’ll be just basically you know copying style sheets in from from figma or zeppelin and you’ll be um you know just building the design up right and then working out what your endpoints are gonna be from that design as well right so while you’re working on these things in storybook what you’re effectively doing is you’re specking up your end points as well which is a great thing because the next stage after this is going to be working on my rest controllers and you’ve already got your endpoints because you’ve had to mock them up in storybook yeah and you know i’m going to skip that’s that’s i mean that’s that’s stuff about shadow dom and white diamond styles and stuff for me i just recommend you kind of google that you know it’s it’s pretty heavy stuff the you know the the um you know the the long and short of it is shadow dom’s great because everything’s sculpt you can just use whatever ids you want in your markup doesn’t matter right they’re not going to leak outside they’re not going to clash great stuff but shadow dom doesn’t work great with seek editor or with jquery dialogues or anything that tries to inject markup into the body it always breaks so that’s the um yeah there you go right sorry the elephant in the room right front end build chain is the elephant in the room so we we are so if anybody knows it has done some front-end stuff right there’s this thing called bare paths right which is a node.
js thing um so node has got this lookup system right because it’s got access to your file system and you can just say import widget right just a string called widgets right and node will know to look up and down and it’s um in its modules it’s got stored there and it will find widgets and it’ll know which thing to bring in right the browser does not know how to do that and this is always the tension at the moment in front end development so you’ve got a tool called empathize um which basically finds the bare paths and rewrites them as browser your browser urls right sometimes it doesn’t work perfectly this is the trouble right so um sometimes the road can be rocky the guy that wrote node.
js is basically is writing a replacement front for the node package manager called dino so he’s obviously you know he obviously knows issues down the line between browsers and node right so he’s actually written a replacement so um yeah it’s not pleasant uh right okay i’m gonna quickly and quickly well we can either we can either we can either quickly look at a bit of code right or um i can take questions it’s probably one or the other with the time so um code plus ones please right sweet we’ve been called them need to try and um see if i can get out of that we shall share my screen reshare right i don’t know that’s not crazy i’ll see if i can get the font up a bit all right still looks small how about trying to get bigger okay right so so so so right so this is uh one of the dashboard widgets okay um the announcements widget um i’ll go from top to bottom now so up here which is where we’re we’re just basically importing so it’s all es6 kind of like import module import syntax right so we’re bringing in a couple of um the temple literals from the lit element project i’m bringing in our own sakai icon right which is a wrapper for font awesome i’m bringing in a special element that we’ve got called a pageable element now if anybody’s looked at the dashboard recently you’ll see that there’s paging in there right and that comes from this pageable element um this is an es6 class so you export it in case you want to reuse this particular symbol right export class sakai announcements extends sakai page will element right it all looks very you know very c-sharp very java it’s uh you know it’s nice you’ve got a constructor you call it a super class you call the super on it um this is how we’re doing translations yeah this is using something called uh sakai hyphen i18n.
js right and it’s actually it’s actually done in the base class for us yeah all this is low translations what you’re doing is you are basically loading properties files just like any other sakai tool and then you know they’re managed by the uh message bundle manager in the same way so you know if you have local translations that you’re modifying in the message bundle manager these components will pick that up it’s going it’s going through exactly the same route right um this is called a setter right this is how you this is how you do setters and getters in here in es6 um so this is where we’re pulling the announcements data we’re setting the data and then this will trigger a re-render yeah so typically you do a lot of this you if you have attributes on your tag and you want something to happen right after the attribute is set then what you do is you create a setter for it and you just put that here right so when when somebody you know uses your tag and they put the attribute in there whatever it might be site id or whatever right if you set up a setter here for that for that attribute you can do stuff in response to it being set on your tag which is great so these are these these setters and getters are really really powerful things and i i use them a hell of a lot um there’s other ways of reacting to attributes being changed well i think setters and getters are they are the nicest way um this stuff’s like too complicated to talk about now i load all day so this is this is to do with pageable um sakai pageable element all this load all data so this is this is my attempt to put a little bit of plumbing in around you know paging data um yeah these are so many stuff so right so this this this is an example of a render method um or content here because the render is actually happening in the base class and the base class calls this right it calls this content method yeah so you implement this in your subclasses but the structure inside is is what you’ve seen a render so this html thing here right this is a um this is a tagged a tag template literal right and this comes from lit element um actually comes from literally where this comes from for all intents and purposes this comes from lit element so you just go return html you open it with a backtick uh and you put your markup in see this stuff here right you see these right these here are your watch properties so these are like observed properties or sometimes they call reactive properties right this means that when this site id changes anywhere in the code right or by setting an attribute this portion of the code where this is referenced will re-render just that portion this is what’s so nice about the lit elements and lit html they’re really really fast because they’re literally they maintain a reference of where these um attributes are used and the only re-render that piece very very very precise there’s no virtual dom needed nothing like that right it’s it’s quick and it’s so easy to use so so i’m saying you know all this stuff inside is javascript these things are javascript this is all javascript right but you’re using um html5 templates under the covers right so it’s all it’s all javascript inside there’s no extra template language there’s no the full power of javascript is available in here and i think it’s great i think it’s just great um this is where i’m grabbing some um some translations so i’m loading the translations into this thing yeah i18n yeah this is an object and then these are the translation keys yeah again the different properties files just like any any of our java apps yeah um let’s keep going down here this is probably good just going through this kind of stuff um one minute left okay good um again look i mean you know this is getting a bit more complex as you see it’s just javascript the whole thing is javascript inside here you know styles i’ll briefly say so this is a shadow dom component um and this is how you write styles these styles get shared across all instances of your component so they’re pretty efficient and they only apply to the markup in your component they don’t bleed out anywhere outside of the shadow though but it is a really nice way but it doesn’t sit very well with our sas build that’s that’s that’s the caveat for this you know our sass stuff doesn’t get in here so you have to pass things in as css properties like this you’re going to run out of time i’ll keep going about one second left this is how you define the component write your tag so there’s a thing called window.
custom elements right and now this is how the browser gets to find out about new elements so what i’m saying here here is if sakai announcements has not been defined yet right then define it just pass an me classing layout and then after that the browser will know you’ll be able to use it wherever yeah i think that’s me i think that’ll do i think i’ll do it for now well we are out of time um although we are coming up on a break so um there’s a 15-minute break before the plenary session so if anybody had any burning questions we probably have a little bit of time to answer that yeah okay yeah there’s a lot of information i mean i know a lot so uh i’m on slack i’m on the apereo slack and uh you can grab me on there my email address is on the slides so well thank you adrian that was a very um it’s hard to pack all that into 30 minutes so you did a very good job conveying a lot of technical information very quickly but do follow up with him on slack um and we have the developer office hours now um every week so that’s another place you can catch um adrian if you have technical questions so thanks everybody and enjoy the rest of the conference yep thanks a lot see everybody.