Good. Everybody, welcome to Conf 42 conference. I am Ahmed Bankole and I'm going to be talking about building awesome UI applications with viewjs. Before I continue this talk, I'd like to explain what this talk is about, what you aim to get after this, and what you're going to learn from it. So I'm using that you might be new or new to view JS, or you might just be trying it out for the first time, or you have been using it for a very long time and you still haven't gotten the angle v so I'm going to put all that into just one talk. So it's going to be more of a talk session rather than a technical workshop or a practical session. I mean, so I would like to introduce myself, I would like to keep it short. I am Ahmed Bankole, I'm a software engineer from Lagos, Nigeria, and I work at ambiantic AI where we provide remote care services for the elderly. So we are just kind of artificial intelligence company where we provide services that could help elderly remotely. That's just about me. And also don't forget to follow me on Twitter at geeky aimed now let's get to the talk. View JS, pronounced View Live View is a popular JavaScript framework for building modern and interactive web interface. It was developed by Evenew. Basically Vue is just a framework for building modern and interactive web interfaces just like any other framework. But if you take a look at Vue, you'll find that view provides us the ability not just to write less JavaScript code, but also the ability to write less Javascript code and do more, including design. It also focus on designing aspect but has a front end developers and the new trends coming up on design, then you might need to shift from that doing JavaScript Dom to doing more of UI, which is going to UI and UX which is going to be one of the parts of your job as a frontend developer. And as you can see, VJs provides reactive data binding and composable view components with an API that's easy to understand. So not only you are writing less codes and doing more, it means that it actually provides our reactive data binding. So when we talk of data binding, we're actually talking about your ability to be able to get data from a particular element and attach it to the DOM very easy. So what VJS does is allows you to be able to build this data from one part of your application to the DOM, which is the regular HTML with ease, without having to write a bunch of JavaScript code that are going to be doing that for you. One of the things also provides a composable view component, which means you can be able to interact with these components and use them all over your application with ease without having to stress yourself trying to configure it from one place, one part of UI applications to the other. And finally, it's easy and understandable, but I'll get to you. A lot of you might be asking why view JS over react or angular. I'm not trying to compare Vue with frameworks like angular or react, I'm just trying to tell you why they should choose view JS because of one it is easy to use as a framework. The first and foremost thing to look out for is the ability for developers to use the framework to build project. So if I can be able to use a framework to build project, I'd rather learn another framework to help me achieve the same purpose. So view JS provides that ability to be able to use it in such a way that is very productive for both you and the company you work for or what you do. Also, it has great runtime speed. I'm going to be talking about that later, but I'll just give maybe a short overview of it and then it is lean and small when we're talking of lean and small, we actually reference view JS in a file, in a single file, which is the view JS file. So if you're downloading the zip file on GitHub, we're actually seeing that the file is less than 16 kb. Basically, 16 kb is for a single view Js file which is the entire framework cooped up in one particular file, which is 16 kb kilobytes, which means that it's very small. It's a very small package that allows you to do more. So you don't have to worry about large file size, like including a framework with ten megabytes on your project which is going to consume space. You just have to worry about just imputing it into your project, either through can or using the file locally in your pc or computer. It also has a lot of cool features. I'm going to explain. When we mean cool features, we actually mean components, styling, data, building props states, state management containers, other kind of cool features that normal framework are supposed to have. So these are the kind of things that define a framework and part of the reason why you should choose View jet if you are coming up into frontend developer in 2020 or probably in the next few years. Also, it provides a minimal project structure when we talk about minimal project structure. We're actually talking of the way your UI applications structured using the view CLI. So let's say you're not working on a small project using the JS file. Rather you're working on an enterprise project, a large project, a complex project that needs to make use of the view CLI. Just like you have the react CLI, you have the angular CLI. View also has its own CLI, and one of the most common things that you might notice in the View CLI is because of it has a minimal project structure. And this minimal project structure means that you don't have lots of directory and folders. It's actually straightforward if you just a regular project structure should have the source folder, and inside this source folder you are going to see the component. When you see the component, you see the assets and that's pretty much about it. Those are the things that contains the part of your applications that needs to be run and the files are saved at those view, which means it provides its own extension so that I can be able to differentiate between HTML and view. So you don't have to worry about writing mono entire syntax just like you write Jxx. So instead of writing the JxX in react, you could write in view. And basically this view, you are just writing plain old HTML. And then you could write some scripts which are related to view. It's not much and then it's easy to configure. I don't think it's actually hard to configure just by installing it using NPM or yarn. Or you could use local CDNC, including your project. I don't think it's that much of a deal to set up on view JS because it doesn't weigh much, it doesn't cost much, it doesn't consume space, and it's easy to use and understandable. Now, like I said, view great View JS Runtime performance if you take a look at this chart, you're seeing react 20% angular 35% view 45% well, these are part of my observation, so I don't think it's actually what you might observe, but they are part of observation and personal routine checking. After doing rigorous testing performance check and researching, I found out that View has higher runtime speed than Israel react and angular. When we're talking about runtime speed, we are talking about loading time. When you start the application, how fast can you be able to run and be able to deliver the content in it? So this is mainly talking about the loading time of your application when you restart UI applications, how long does it take for it to be restarted? Or how long does it take for your application to be up and running and you can see the chart angular does better than react. That's because react tend to have more dependencies than the other frameworks, which is angular and vue. And since Vuegase has a minimal project structure, it means the runtime speed is going to be increased by a lot, which means you're actually getting more runtime speed, which is good for UI applications. So in short, View JS has a good runtime speed and a great optimization technique. Now let's talk about the UI aspect of View JS. A lot of you might know View JS, but don't know that you can actually do a lot with Vue. Viewjs provides a lot of UI libraries that you could be able to integrate that won't change your project directory at all. So let's say you're not the type that loves using a materialized CSS, or you don't like using bootstrap, but you just want a design of its own without including those two libraries or any other you could use using a correct variety of these UI libraries I just stated out, and these are personally and paid from various websites and they are top rated and used by a lot of people. Number one, we have beautify. Beautify is one of the most popular vue JS UI library because it provides unpicked materialized components and buttons with years and other UI parts of your application. Basically using beautify you get to create UI components that are materialized base, just like Google for example. So these components actually allow you to be able to configure them in such a way that you take control of the UI design itself. And also it also gives good ux experience. Just like flex. You don't have to worry about writing CSS to position your flex or your grid. All these are automatically been set for you using the UI library. Then we have the view sachs. Basically, view Sachs allows you to be able to make uis that are already crafted. What I mean by uis are already crafted are uis that are designed by top designers or UI experts. So all you just have to do is just write a couple of codes which is going to create specifically designed UI for you that you can be able to use. Then we have Quasar. Quasar is just another UI library and can also be used as a project, a framework of its own where you get to design and also build your project on a particular framework, which is quasar so it's built with view, but you can actually use it in your project as a part of your designing. Then we have the elements UI just like any other UI library. It provides easy to use and simple UI components for your application. And now we have the view material. It just gives you a material look of your website, simple materialized look of your website, just like materialized CSS as you all know. And it makes you build source components that are just like a regular materialized CSS into your View JS project. Then we have Vox is another UI framework that you may all know. And it's just any other regular UI that you could just integrate because it makes use of part of bootstrap and some part of materialize to cook up some handmade UI components that you can be able to use and design to your taste. We have the buoy file, we have the I view, you have the mint UI and you have the bootstrap view. And this bootstrap view is just Bootstrap. In viewjet, let's say you are the type that loves using Bootstrap for your work. Bootstrap tree bootstrap four. You get to use them into your Vjet project without needing to include it from CDN. You could just install it locally, or you could use a CD or you could use a CDN. If you have access to Internet connection, you could use the CDN to access Bootstrap view. You get to actually build UI component based on bootstrap, whether tree version three or version four. So this is a typical project directory in your source folder. Like I said, it provides minimal project structure. In your source folder we have the views, we don't have the views actually we have the component and you have the assets. But the mistake most people make is actually putting your pages into the components and that is going to be a lot of problem because of putting your pages in your component is going to make your application messy, which is not a good idea, especially when you are running an enterprise application or a business application, because you can be able to differentiate if it's a component that you'll be using a part of UI applications, or if it's a page that you could use as a standalone component. So these are two major problems in the front end as a frontend developers when using view. So since view doesn't provide this flexibility for you to be able to use views, for you to be able to create pages in your component, you can use the views folder. You could just create a views folder and basically this view folder should hold your pages like your own page, your contact page, your login page. So storing your pages in this view rather than your components is going to make work a lot easier for you rather than taxing. So as a final developer, you want to make your work look less stressful because we are going to be working on it a lot and productivity better. So if you're not productive enough to be able to separate your components from your pages, there's going to be a huge problem when you eventually turn into a complex application or you turn into a business someday. Then in your components you create another folder called shared. The reason why I'm talking about this is based on UI and Ux. Ui and Ux go together, so you can't have a UI without Ux and you can't have a UX without UI. It's just kind of a bread and better where you need them to be able to test beta creating a shared folder the components folder actually hold your components, like the buttons, components, your nav bars, your sidebars, those kind of stuff. But grouping your components folder to shared a shared directory what you want your shared directory to do is all components that are used all over your application. Components like the navigation bar, the footer, the sidebar, adventure, or let's say some icons, some recapture, some buttons, some contact, those kind of stuff. If you are going to use them all through your application, then it's advisable to put them in your shared folder. By putting them in your shared folder, you're actually making work easier because you can differentiate between components that are located for the dashboard. Take for example for the dashboard or located for the client area, and then you can know the ones that are used in your general application. So let's say two, three years later you come to check out your application. Then you could know where you group those components. So rather than just opening a component and seeing a long list, you could go to your shared component and then see what you're working on. I guess I'm done with that. And now let's talk about something more related to Ux rather than UI. Lazy loading a lot of you might have heard about lazy loading, lazy loading. And I found out that lazy loading is one of the things that caused imposter syndrome among frontend developers. Well, let it not be because of I'm going to give it to you. It's going to make your experience with UI and Ux more easy to understand. Lazy loading is an optimization technique that delays the loading time of objects aligned. For a quicker load time, you might be thinking this might not be related to UI in any way, but it is because if you have good UI and your UX is poor, or let's say your website takes a whole lot of time to load, then nobody's going to view your UI, nobody's going to care about your UI because it isn't showing them what they want, it's delaying the consumer or the clients. So you can visit a website and discover that and discover that the website takes a longer time to load. So the longer the time it takes to load, the more frustrated you get about the website and you tend to close the website or visit it another day. And if you are the type that, let's say you just started a business and you fail to get the consumer or the customer attention on your website, then you're going to be losing a lot because your website isn't loading fast enough. So like I say, lazy loading is an optimization technique that delays the loading of object. Basically when you use regular HTML to load your project or your application, the Dom actually loads the object. So before your page actually views, before your page can be able to be viewed in a formal that the users can be able to view, it has to go through some tests, it has to go through the dome. So what you don't do is what the dome do is it waits until all the objects are fully prepared and then it views the web page. So if something caught your dome or something is caught up in the dome, the more object that is caught up in the dome, the less the loading time is going to be. Which means that the more images you add in your website, the more your website bounds will be slower. But using lazy loading, we are going to cop this. So let's take a look at it. So here's a practical example of lazy loading. So we have the eagle loading, the eager loading, and we have the lazy loading. Here you can see like the image in the dinosaur says, downloads three mb, downloads zero mb. And this is using the native lazy loading technique in HTML five, which is loading equal lazy. Doing this actually makes the iframe to be lazy is an attribute actually, which means it's actually object and we want to load it lazily, which means we are preventing the website, we are preventing the object from delaying the loading of the main website. So while the website is loading or has been loaded, the download or the image, the object keeps on loading until it's done without interrupting the flow of the website itself. I hope you are getting this technique. So when you put these attributes, you actually make work easier for you as a front end developers. And also you can see here with lazy loading without lazy loading. So when you do lazy loading it's going to show the content. First it will show the content that are available, then it's going to show sidebar rotating spinning bar a progress bar that shows that part of your website are loading. So using this technique it actually adds part of the website that hasn't been loaded yet so that I can view some parts that are already below it so that way it doesn't interrupt the UX of your website or the UI. So the users get to see what they want to see without having to wait until the other object is being loaded. So now let's talk about lazy loading in route in view js in view JS you could do lots of techniques to lazy loading. You could use loser. There are a lot of libraries for using that lazy loading Javascript, but I'm going to be giving a brief overview of how to lazy load route. And you can see this is a regular exe syntax. And after we imported our view and imported our router, we are creating a function called lazy load. And then we're including the view, like I say, for the page. Basically what we want in the view is to show that it's the page we want to load and the function is going to carry a parameter name view and this parameter is the location or the component that we want to load in our application. So we're telling our application to load this page or lazy load this component. Then after we do that we are actually putting our return and then using the return we are importing the location of the view like we say. So just like we put here, as we put the lazy load ohm. So what to attend the application is that whenever we want to visit the Ohm route, load the component first before loading the entire application. So I'm actually going to lazy load, we're going to bring out the component which is the home page. Want to bring out the home page before loading the entire page. Because of what Vue does is that when you load a page you are loading the entire page which includes the home page, the contact page into one file. And that is going to contain a lot of data which is making our application which is going to make our application a little bit slower. And we might not want that, especially when you have lots of uis or lots of objects in your application or images. So what you want to do is rather than making your application load all at once, you make your application load bit by bit. So when we're lazy loading the ohm, we're only importing the ohm component, which is the ohm route. So when I click on go to the ohm route, we're going to lazy load it, which means we're going to bring out only the home route into one file, rather than bringing out the whole of our application into one file. As you can see, I'm guessing this is very understandable. Well, you could try it out anytime. And if you need more information about this, send me message on my email at thegeekyamet@gmail.com and you could follow me on Twitter. Well, thank you for listening to this session. I hope you have a good day day, and I'll see you later. And next time.