 Hello everyone, thanks for coming. I'm not sure how many people here in this room. So I can't really see anyone. So I suppose everything is starting right now. So I'm going to do the demo right now. So if you have any questions, just put in the question in the pool. So I will answer the question later. So next 20 minutes, I'm going to show you how to build a bootstrap in Triple 8. So my name is E. So this session doesn't sound very interesting, who want to actually build a bootstrap right now in Triple 8, but let's go in. So about myself, I live in Canberra and have been working for a couple of government agencies and I work on multiple triple projects from 7 to 8. Apparently, I'm working for ABS as developer. Today, I'm going to wear frontend developers hat for this presentation. However, I'm not really on the top of the frontend. So don't sue me. Very hard question in the end. So yeah. So about presentation, so this is just a bit of a background about this presentation. I think I put it was here just saying because we're in a triple gap, so we're in a government space meeting. So I wouldn't imagine you could have a similar situation in one of your project. Everything is running perfectly, but just need a responsive scene as a project. Delivery success port. But also as a developer, you're always thinking, how can I pick up a corporate solution for fear of this missing part? I'll put the images here. Just try to get some laughing. But anyway, so let's go in. What bootstrap? So I think a bootstrap is still popular as well and easy to pick up and we're documented. So I think I'm trying to say it's bootstrap is not a very bad solution for now. I mean, right now, bootstrap 4, yeah. So there's two outstanding bootstraps in Drupal Arc. So one is Reddix, other one is Bootstrap Storybook. So Reddix been there for a while. It got a huge of usages, but Bootstrap Storybook is just started recently. I'm not sure what time it is started by. It looks very young to me. So this presentation I'm going to show you is only talked about Bootstrap Storybook. So Bootstrap Storybook is actually upgraded Reddix version, but it's put another couple of things in there. So let's just jump into this Bootstrap Storybook thing. So it uses Laravel Mix. It's actually an easy wrapper for Wattpack. So I hope everyone's sitting here. It's actually pretty good with Fountain so that they exactly know what I'm talking about. So I'm just giving a general introduction for Laravel Mix. It's you got a BrossSync. It could automate component CSS.js for you. The good thing also is can shipping components form one location to another location. Now, here's the goodies in there. So you could use post-the-css and a critical CSS versioning come from the box. You can just use that as the package from the package. So the length of couple of styles is going to just do a script dump for you guys. I'm sorry for that because I probably don't want to do live demo. So that's just going to be a cup of dummy screenshots and to get it into this Bootstrap Storybook thing. So first, so if you're looking to do a seeming website in a dripper.org, you get all information as you can get from there. So easy to installation. So once you finish your installation, the first part you jump into here is I'm trying to show you it's package.json. So as you can see, so there's a couple of wrappers here. So top five command is actually come from a Laroa Mix. It's come from Box. The bottom five command is actually it just developers came and wrapper in there. So basically, as your developer, you could actually wrap anything, any NPN command in this section. So the second section is talk about, is actually about package install into the theme. So it's actually my work version. So the default one is all come to the dev dependencies. So my work version is actually I separate this into two section. So with two section separates, you can easily shipping only everything you want while you try to deliver or shipping all your code to apps environment, such as production. So I guess for me, it's just a better practice. So these things just show you why you install the theme. You get package.json. You also get a webpack mix.js. So what's happening here? You can wrap your command or any event command here. So this example to tell you is basically compile your components section to a sex session eventually by using NPN wrong watch or NPN compile stuff like that. So yeah, basically just an example. So the main part of this thing is components. So basically components have been there for a while. So for all the font and developers, there are no exact components does. So I guess in this screen shot, I'm just going to show you in your left side in this section just tells you you can actually put your components in a one folder. So bootstrap storybook will do this thing we're going to do everything automatically for you if you wrap everything into one folder. So components. So this part is just going to show you because everything is already written in a theme. So basically, you hook library info build. Actually, what this function does is everything you put into assets folder, assets components folder, you will automatically load to your website. So you don't need to worry too much to write actually your customers CSS or JS location in library YAML file. So it is actually automatically loaded to your website. So that's cool since I'm trying to introduce. So the final part is actually with some bootstrap storybook. It's actually got actual things called a storybook. So that's exciting part. You basically get a attributing start guide. So what happened? You can play everything, every components in this canvas, and they eventually will wrap into the website. So how cool is that? So that's pretty much like I was very enjoying doing these things. And I feel like very excited. So let's go into everything behind these things. So there's no more. Yeah. Oh, yeah. So this slide just tells you how you wrap things behind a scene. So basically, for example, you want to write your customer button. So you basically wrap your everything in your SAS file. So that's actually SAS. You can say it's actually 10 of the bootstrap SAS. But then you wrap with button.js. You wrap with button.tick file. And eventually, you write your story.js. And then it will automatically show to the bootstrap storybook UI. So this is just an example tells you you can write your simple story.js. What happened? It just needs to, yeah. So basically, you import your button.tick file. And you actually import a dribble attribute. So it's actually in a code base already. So you can just copy and paste and write something you kind of like it. And that will automatically show to storybook UI. Now, the good thing is actually with this design, with this thing, you actually can write your netting for a JS. You don't need to worry about the dripple behaviors. So in this case, you can write a jQuery native JS. That's actually just native bytes like a workmanu button. So you wrap it in this way. And this thing automatically wrap this thing in a dripple behavior JS. So as a front-end developer, you don't need to worry too much about dripple. So I think the previous couple slides, I just try to show you what's exactly things behind it now, and come back to this developer use case. So the best practice from this thing is actually write a component, even a dripple layout in the south border, which includes such actionJS, nativeJS, what's kind of any JS you could write into there. So if you like, you can wrap it with stories.js, and then you will automatically show and the story cameras as a star guard. Then you use Leroy Mix and Storybook.JS will compile in an assets folder, and dripple will automatically load it to the side. That's actually kind of workflow in this thing. They try to encourage you to do this way. So let's just do a recap for this, what I have done for the last couple of minutes. So Bootstrap Storybook is a fully component-based approach. Everything in Bootstrap Storybook is in a component folder, and all the template files are included in a component. This is not the case in Redix. Because a full component is driven, the style of JS necessary for each component is handed into its own component folder. So let's just say if you wanna add a button, component to your page, you load all the necessary CSS and JS by just include the component. And the whole thing is where organize the file structure. It makes much more sense during the development process. It's also much easy to extend the thing by installing node packages as the front development skills because it's totally isolated from dripple. So you basically can install everything you like. Finally, it integrates with Storybook. So some feedbacks for me, because I have been used to this thing for a while, actually just for a couple of months. The positive feedback for me is I'm actually from backend developer. So from backend developer perspective, this thing is much more easy to spin up a responsive thing. I also like the same file structure. It makes more sense to have a constraint not leave the code in everywhere. Other thing is because all the static CSS and JS are all automatically built, you could easily integrate with any of automation pipeline. So for instance, if you already have a pipeline, you can just do this in your script. Also, because of reversing engineering from May, like if I'm start doing this and I was thinking backwards, I think this setting up, and there's a file structure and all kind of workflow is actually shoots any dripple thing building process. You could have started from scratch and from other front framework or even not framework. Yeah, so the design still works. Some of, yeah, some of the net backslash from May is I feel like when I start doing frontend development, I feel like somehow, yeah, so node packages still take lots of space. And if you're running a small instance, a small container to do a frontend development, so you kind of have to juggling a little bit. And the bootstrap storybook theme is still an active development. So basically what's happening, yeah, if you use that quite a something, if the parent thing has been updated, you kind of have to keep your eyes on that. So the latest bootstrap storybook might have issue beyond node 12. So make sure you use node version 12. And there's also like me, I have it. So I still spent some time to put everything together. So I think that's it. Thank you guys for coming. And I think for the short time frame, I only can do this. So if you have any questions, just ask me. And that's all from me. And that's my handle in drivador.org. So if you have any questions, ping me from there. So that's it. Thank you. Any questions or, oh, thank you. Thanks. Yeah, so everyone have a question you want to sue to me? Oh, thanks. Thanks, Alexie. Yeah, I'm trying to actually make the presentation short then 20 minutes. Yeah, I'm trying to avoid to do a live presentation, but I've been playing this thing for a while. So if you guys have any question that you can ping me afterwards, or yeah, just a recent question is in the drivador.org. Apparently I'm actually, they're putting me as a maintainer right now. So yeah, but I kind of get inspired by this thing. So yeah. Oh, thank you. Thanks. All right, all right. No more technical questions. How you upgrade new version of Bootstrap? All right. What you mean new version of Bootstrap 5? It's on the track. But I'm guessing the developer, this guy, mainly developed this Bootstrap storybook thing is a main person. He told me is he's going to, on the track or syncing upgrade to Bootstrap 5. But so far, Bootstrap 4 is still good to go. But I think eventually, but I think you can try by yourself because basically I already told you is if you get your right to in a structure, you basically can do everything you like. I think you just need to spend some time to put everything together. But yeah. Oh, yeah. So it's actually Bootstrap 4 version right now. You can just try it out. Yeah. So it's Bootstrap 4. I have to use this for my work. Yeah, everything turned out is pretty good. All right. Can everyone see my slides? Was it when I did my presentation, the slides? Was it all right? Okay. I think the session going to finish soon. All right, thank you. Yeah, thanks. Someone just told me that I can't really see the slides. All right. Thank you for coming. You guys have a good time.