Building for Web and Native with Ionic & Vue

Alright, so I'm going to get started, we're five past the hour, seems that the attendance has leveled out. Interesting choice for a web browser, Microsoft Edge is an interesting browser. It's pretty good. I'm happy with it. Alright, so just a reminder one more time for people who came in a little bit later. Don't worry, this is being recorded. If there are any questions afterwards or if you feel like you're missing something and you just want to focus on listening versus actually coding, you can follow along later on with the recording. Again, we'll be able to keep in touch and help you out if you get into any situations. So without further ado, let's kind of just dive right in. So we are going to be talking about ionic and vue today. We're going to be talking about building mobile apps with ionic and vue and everything that you can do with ionic and vue. But first, let's define what ionic is. So ionic is a platform for building mobile apps using a collection of components that we provide to give you a cross-platform visual design that works with iOS and Android. So you are able to take these components, all of the styles, all of the animations, gestures, everything from this, essentially this little design system, be able to create an entire mobile app, but just reusing technologies like html, css and javascript. At the end of the day, that's what these components are built on top of, and they are able to work on these platforms through a couple of different accompanying technologies that we'll look at as well. So these components have their own way of handling interactions, whether it is a user swiping or a user just scrolling through. You can have these really, really detailed interactions based on gestures and animations that are already built in and defined by those components or customized ones that you write yourself. With those animations, and actually more so like the design of the component, they really adapt to the platform that they're on. So if you have an Android device or an iOS device, the components will automatically know I am on a device type of this. Therefore, I should have these accompanying styles as well as animations in place for that mode. So we define these as iOS and material design mode. This is automatic and kind of provided out of the box, so you don't really need to configure this. But if you want to hard code to be material design all the time, you could do that as well. Same thing for iOS. You could hard code to be iOS all the time, though I feel like your Android users might feel a little betrayed by your app. And if you wanted to customize this to, say, fit your own designed mock-ups or your company's own branding, you can do that as well. The customization is driven a lot by something that we'll look at called css variables or css custom properties, as well as being able to override animations as well. That's a little bit more advanced. We have some great tutorials on our site regarding how to do this. So we're not going to touch on the animation aspect, but we will touch on some of the theming capabilities. So components, I think if you've ever used any kind of design system or component kit before, this should feel pretty familiar. We have things like cards, buttons, tab groups, headers, and titles. Your standard run-of-the-mill component sets that build-to-use, which is a lot of the Your standard run-of-the-mill component sets that build up the entirety of your app. One really nice thing about these components is that they follow what was typically called atomic design, where the components themselves are broken down into these really small pieces that are pretty standalone. For instance, our card component. There is this outer card component, but then there's also these nested inner card sub-components that can be used and composed together to create this really rich visual design. But you're just composing all of these things together. So you're not having to wire this all up yourself, write the custom styles. You don't have to do that. The components can just be built together. Given the intake context of where they are, what their parent component is, so we can look at an example of that in the next slide. Like I said, gesture and animations are going to be provided by the framework by default. And then there's this really nice css utilities that are provided. I think the best way I've figured out how to describe it is kind of like a tailwind light. You're going to be able to find the layout or the flex layout without having to know really a whole lot about Flexbox. You're going to be able to handle some of the responsive design capabilities that your apps might need. You're going to be able to handle some of the utilities like Text Transform and whatnot, all of this provided by the framework and the accompanying css styles. Let's see what we got in the chat. Okay, should be good. Just give it an eye on everything in chat. All right. So I've mentioned this. Let's kind of look at one example. And this is a card component that we have in iOS mode. So this card, pay kind of attention to the source code. The visual is really more where we're trying to focus our attention on. For instance, we have this card. There's this really nice header image. There's a card subtitle and a card title, this inset description, as well as some buttons and icons that can be used to trigger some actions like favorite, sharing, or some custom action that needs its own button called out. So this card component, I focus on it because it really does bring up the atomic design kind of concepts here. The card content and the card subtitle and the card title, these are all things that are broken down from that original parent card component. And then it can be composed together to build something that's just richer than, say, you know, a div with a class of card. I'm not having to really know how the card subtitles and card titles work together and how that whole entire design works. I just know I have my card. I have a card content followed by header and subtitle and title. And I can just use those automatically and get something that feels right and composed together. This is in the iOS mode and in Android or material design mode. The design shifts really, the design has shifted pretty dramatically. You can notice that on iOS, it's a little bit of a bigger font. It's a little bit bolder. And on Android, it's a little bit of a smaller font, but it's also less rounding of the corners. There's a subtle shift in the box shadow that gets applied to the card itself. So these components can be composed together and then they can also adapt to those platforms. So it's really, really just powerful stuff. Okay, let me do some questions. All right. So this is, you know, pretty, pretty good stuff. ionic itself is framework agnostic. It shifts as a collection of components that can be used in whatever framework you would like to use or no framework at all. If that's what your project requires, we're going to be looking at vue today. With the vue integration, we integrate with the vue router. So you're going to be using familiar concepts borrowed from vue router. The CLI is actually going to be creating our own vue project using the vue CLI. Eventually, we are planning to migrate over to vite. But for now, we are using vue CLI. And then the components themselves are going to be the components themselves are going to be shipped as standard vue components. So if we're using something like the vue dev tools, we're going to be able to inspect those components and check out their state and all of the different properties that could be toggled on the component. Also, the really nice part is that the router integration gives you animations and transitions free for out of the box. So you don't have to wire any of that up. And those animations, again, they're going to adapt to the platform that you're on. So we got some Q&A, some questions already popping up. Let's take a look at that. Okay. See, we have one question. My colleague Kim is typing an answer. I'll let her type that. We have an anonymous question from on, is ionic supporting right to left? That's a very good question. I'm going to answer this one live. Yes, ionic does support right to left and left to right. All the components, like as soon as you add direction right to left on the html tag, all of the components will be able to update and support right to left format. That includes things like the animations for route changes. We also make sure that everything that we are doing with, say, the positioning of certain components makes sense in a left to right and a right to left context. So we'll look at some of that in a little bit. But generally, yes, we do support right to left. So that is pretty good. I would say that ionic is the ideal UI in ionic. We provide all the components and everything that you could need inside the framework. That is to say that if you do want to use another third party library, you can use that as well. We don't say that we don't have any restrictions on what you can use with ionic. At the end of the day, we're just another view library that you're using. And this is another great one from Glenn C. When it says native, is it using native components of the platform instead of web components? By native, I mean it is using view components under the hood. I can show you what that means. We are still just generating html, css, and javascript. So we're not necessarily rendering out native widgets. But that gives us a lot more flexibility in what we're able to do. Let's get on with everything. This is just a really nice one to note. ionic's ecosystem is quite big. Only to mention this because if you are to use ionic in a project for work or if your company is going to bet on ionic, you shouldn't feel worried. You'll be able to find a community all around the world and be able to find developers who if you want to hire, contract out. If you're running into random roadblocks for whatever reason, don't worry. There's a community all out there that is willing to help and either answer questions for you or be able to actually do the work for you if you are interested in hiring them. You're going to find someone out there that is very knowledgeable about ionic. We have a great community on our developer forums, forum.ionicframework.com, and as well as GitHub. Without further ado, let's dive into the actual code for everything. We are going to be looking at it with vue. I think we all are aware of the big benefit that vue provides. Really, really low barrier to entry. The technologies you have to know are pretty standard stuff for web developers. The syntax and the markup are pretty familiar and pretty easy to pick up. And it's also pretty performant. vue is really interesting because it stays fast. It starts off fast and stays fast no matter how much I've been able to throw at it. But there is a really good focus on performance from the vue core team. So if you're using vue, you can pick a really good framework. And if it makes sense to you, that's probably the most important part. So we're going to dive and switch over to my terminal. We're going to look at getting started and how someone would go ahead and build out a project. So let's switch over to my terminal. And what we're going to do is assume that I have never created a project before, and I'm just getting started. So in this case, the first thing that we're going to need is the ionic CLI, which is a global install. So if we want to do this, we could just make sure that we have node installed and npm installed. I'm going to say npm install-g at ionic CLI. I already have the CLI installed. But you would just download, run this command, get the CLI set up, and you start having access to the entire scaffolding system that our CLI provides. I already have this done, so I can run ionic start. And we're prompted to do a few things. Now, we have a visual app creating wizard. Basically, you go through, you can pick your framework, your starting template, give it a name, and connect it to a Git provider. I'm not going to do that. I'm going to do everything locally so far. And we get prompted to say, pick your framework. As I mentioned, ionic itself is framework agnostic, so we can use any of these frameworks over here. But we are focusing on view with a nice little link to our view docs. And we have this great little note that if we want to skip this prompt in the future, we could just run it with the flag dash dash type view, and that's going to automatically default to view. All right, so what's our name? Let's just say my view project. We're just going to give it a random name. You can name it whatever you want. Again, you could provide this name at the very beginning and go through all and just kind of skip this step. And then this is the really, really fun part is the starting project that we provide. So we give you a collection of different starting templates. That all provide a standard kind of design or app layout that you would expect to get. So this tabs one, if you've ever used Twitter or YouTube app, that little app that has the bottom bar filled with little tabs that you can go through, you can just tap each one of it to change to a different part of your app. Side menu is probably one of my favorite ones because it's just so gesture driven. You can swipe through, open a menu, and it's going to give you that nice kind of split layout where you have the main content area plus a little area aside that is filled with different links or different items that you can navigate to. Blank is going to be your bare bones, kind of you have a single route. That's about it. You are basically up to you to create the rest of your app. And then a list is just for a nice little starting point. It's going to have some more dynamic and more filled out list components. We could start with a blank if that's really what we wanted. It's going to go through. It's going to attempt to install a few packages beforehand. I'm going to not let this run because I'm back. Actually, you know what? I will let this run. I already have this project created, but I just want to kind of go through, show you how everything's going to download and install. And while that is doing that, I see we have some more questions. So I'm going to take a look at what we got. All right. So we have a question. Does ionic work if you add another layer on top of you, something like NuxJS? That is a very good question. I actually don't have as much experience with Nux, so I wouldn't be able to give you an answer that I feel super confident with. I'd have to try it out and get back to you. And we have this question. Do you have a feeling how costly it would be to transfer from using Vueify to using ionic, something like Hours? I don't know how costly it would be, but I would also argue that you probably could use both of them at the same time and get all of those if you wanted to start using. If you already have something built with Vueify, you could just add ionic in as a dependency and work with your project through that approach. And then as you start adding new features or as you have time available, start migrating certain components over from one another. But that being said, you could use both of them side by side without any issues. And last question. Can we use typescript instead of javascript with ionic? Yes. In fact, all of our project starters default to typescript for a few reasons. We think typescript is pretty awesome at ionic and that every developer should be using it. Plus, it gives you a lot more safety nets than if you were to just use regular javascript. It is possible still to just use javascript and change, remove the lighting setting on the script tag, but we default to typescript for everything. Okay, that cleared out the Q&A and it looks like my project has been created. So I'm actually going to go into this. What do I call it? My vue project. Yeah, and I'm going to first, I'm just going to run. I'm going to start our dev server. We have two different ways of doing this. We could just do npm run start. I think that's or serve, blanking on the actual command name. We could just use npm scripts or yarn or whatever if we wanted to actually start a dev server. Probably the way that we're all familiar with doing it. We actually provide our own little wrapper around ionic serve. And you notice that it's calling the vue CLI service directly. Get Twitter out of here. I don't need Twitter right now. And I'm actually going to just toggle my light and dark mode. And here we go. So this is our blank starting point. We'll go over what that little dark mode thing was in a second. But we just have the standard app, blank title, and some text with a link to the UI component docs. Let's go over here. And I'm actually going to open up my editor. And just do a quick little deep dive into what this project looks like. So hopefully by just kind of glancing at the file structure, you should know that this is using your standard kind of vue project template. We have our browser list, some ESLint config, a Babel config. We provide cypress and Jess already set up out of the box. So all your testing can be done using those two tools. We give you TS config because we are pretty set on making sure people use typescript. And we give you a collection of tests to just get up and running with this. So we have our public directory where we can modify the index html if we need it, include some icons if we needed it, as well as some images that are already predefined by us. Those can be deleted as much as you want. You can delete everything in there. We do have this source directory, which is our standard kind of entry point with this main.ts file. Now this might seem like a lot, but it's actually pretty small stuff at the moment. So let's just kind of ignore all these css imports for now. Pretend that they don't exist. All we're doing is importing this ionic vue object from the ionic vue package. And then in our app, we're just saying create a new app, use the ionic vue package, and then we're also going to use this router configuration that we'll define later on. Once the router is ready, mount the app and bootstrap everything. Fairly typical vue setup. The router part is actually using our wrapper on top of vue router. So with vue router, they provide their own create router and create web history methods. We're just wrapping that so we can do things like swipe to go back when we animate around. And we're going to look at that because that's a really fun feature. But we're just providing some wrappers on top of those things to make sure that we can incorporate with vue router in a nice way. But your configuration and your setup for how you actually define the routes and how you interact with them, that's all vue router. So over here, we are saying we have a route. And when we land on the initial, you know, essentially your index, redirect to home. And for home, we're just going to redirect or we're just going to load the home component. Now, our router is just going to use this create router method. We're going to use the web history instead of something like hash space routing. Then we're going to pass it that array of routes as our available routes inside of our app. Double check what we've got in questions real quick. There are a lot of deprecation warnings from npm. Is that okay? Yes, that is okay. That's more of an issue for package maintainers than it is for us. Everything should still work. Is it possible to block swipe to go back feature for navigation to a specific page? We're going to look at that. Actually, I will. Can I undo answering this question? We'll come back to this question, Descent. Is it possible to block swipe to go back? So we'll look at that in a moment. What are the project tree depend... I'm not quite sure about this one. We'll take a look at that later. Oh, that last one, that's really good. Can we use vuex and ionic? Yes, you can. In fact, we have this really awesome blog post that I wrote. If you would like to get started with vuex in ionic and vue, let's just drop this in chat. This should be your nice little starting point on how to get up and running with vuex in ionic. Quick way to answer it, yes, you can. Again, ionic is really just the UI layer to your app. It's not going to have any strong opinions on how your app should... Like how to do certain things with your app. Okay, so we have our router created. We have our app being bootstrapped. And then we are using the app component as our kind of root component that we are going to bootstrap. What's inside of that? So, what's inside of that? All we have here is this very, very, very basic component. We have a template, it's rendering out an IonApp component, then this IonRouterOutlet component. Now, IonApp is basically going to be our kind of base reset. We're going to set some standard styles of our app. IonApp is basically going to be our kind of base reset. We're going to set some standard styles off of this IonApp component. And then this way, everything that happens within it is kind of self-contained to this one little instance. So that way, we're not going to have any style clashing if you need to include another dependency. IonApp is going to be our little source of truth for where all of our standard styles get inherited from. What is the software architecture that will be adapted for this vue.js ionic application? Software architecture is, there's probably MVC. I mean, that kind of depends on you. We're not going to focus too much on the software architecture. We don't really have any strong opinions on it other than you probably should have some. So whatever architecture that you are familiar with or are comfortable working with, follow that. We're not going to focus too much on the architecture. We're going to focus a little bit more on the actual code here. Okay, so this IonRouterOutlet component. Now, we can think of this as Ionics version of the Router vue component from vue Router. We are basically going to give you this place where all the routes get rendered to. And then as we start to change routes, we can animate them in and out. Our component script over here, we are using, like I said, Lang is set to typescript. So we are using typescript in here, there, meaning that we can start to get some pretty good completion of various different, various completion and also tell sense on what we're actually doing. So we are importing IonApp and IonRouterOutlet components directly from IonicVue. And then we're saying importing DefineComponent to get some nice type safety with this app component. So we're going to export DefineComponent, give it a name of app, and then say it's going to use these two components that we can, and then we'll be able to use them inside of our template itself. So far, so good, what we have here. And we can open up our devtools real quick. We can inspect everything. And I'm going to collapse the styles panel. But you can see we have this IonApp component. And let me just bump up the font size for the devtools real quick. You can see that we have this IonApp component. And then this IonRouterOutlet component, that's going great. And then the IonRouterOutlet is actually rendering out this IonPage, which is our home component. If we were to inspect it a little bit more, we have a few different sub-elements in here that are making up the base structure for this component. So let's take a look at what we have with that. We do have some more questions. I already answered that one. All right, so let's take a look at the views, or the route for this. So this is using, this is our home page component. If we were to look at the actual source component, we're inside source, and then views, and then home.view. And all this is actually doing is rendering out this really, really basic page component. This is a fairly minimal set of minimal component. And we're going to say we have this IonPage, we have this header. It's using this nice translucent style. We're using this full screen. And then we have the second header. Interesting. And then we have this container down here that is just going to show some links to docs and like a call to action. Let's delete that because we don't really need that for now. We also have our script, in our script section, in our script section, we have our defined component call. We are passing in all the components that are being declared and used in this component. And then the accompanying styles that were used for that container. So I'm actually going to delete those as well because I'm not using that anymore. I'll keep the style tag around for now. So this kind of hopefully is getting across that this is really just using your standard view concepts in integrating with custom components. We're not doing anything too drastic or too... I guess I would say too custom, right? We're just following the same principles that we've been taught from our view, from view itself. So we have our template, we have this ion page. Let's kind of bring back the browser and kind of follow along with things. So we have the router and then we have this ion page. So I'm assuming that this ion page is actually this ion page, right? Yes, that is. So we have this header. We have this blank header showing the title. We can open this up. We have a toolbar and let's double check our code. We have header, yep, toolbar, title. And here we are. We have toolbar and title. Now you might notice this shadow content thing. Don't need to worry about that too much for now, but we can take a look at it when we look at theming. So we have our header. We have this toolbar, ion title. All these styles are kind of just bringing... All these components are bringing their own styles to our app. So they know exactly how to display, how they should be sized correctly. And if you notice, ion title knows nothing about toolbar, but toolbar can know about title and it can adjust the padding and sizing for our component. We have the header component, which is also pretty aware of its own components. So let's just show a quick example. The header right now is set to this fixed height. Let's take this toolbar and just duplicate it. And we'll just say second. We'll save real quick. And come on. All right, we're going to ditch using Safari. Something I was afraid would happen, did happen. And we're going to bring Edge back. So, unfortunately, Safari has this random bug with hot reloading. So we're just going to stick with Edge for now. I'm going to turn off the voice emulation and bump up that size of the devtools. So say we had our app. We have the router outlet, the page, the header. Now, the header itself is really... It has no size. All it knows is that it should hold some stuff in there, and then it should all be flexed layout. So header itself has no intrinsic sizing, but this ion page knows that it is a flexed context. So we're saying, all right, on ion page, header, pick up however much size that you need. The rest can be taken up by this ion content. Already, we're starting to see that this stuff just automatically adjusts to whatever you throw at it, and that all of the elements are kind of aware of what's going on inside an entire app. Our content over here has this full screen, followed by the second header, which we're not seeing this in our device at the moment or inside of our page. Let's do something real quick that I know will work. We're just going to say item, dollar, dollar. This is really... You don't need to follow along with this. This is just for demonstration purposes. We're just going to render out a hundred different paragraph tags, and I'm going to enter the device emulation mode, and I'm just going to pick an iPhone. Random iPhone doesn't really matter. I'm just going to pick iOS. Now, notice automatically that we now have a different style for this header. We actually have the second header that is being shown here, actually rendering first before we even show this header. As we start to scroll, we can get this really nice transition between the larger, more pronounced header style that iOS is kind of known for. We can start to blur the background and then bring up this other header that's going to show you the main title, and this could also have some buttons, some items in here. There could be a little bit more going on this header, but this is just a nice design cue that iOS has, and we've copied it. So, as we go along, we can actually just delete all of those items. Again, they were just for illustrative purposes, but we have that header showing, and now we're mimicking our iOS design. And it might not come through right away, but let's kind of throw some components in here and kind of look at what that is. So, inside of my ION content, I'm going to render out this ION button, and then I'm just going to put a little call to action, just click me. Inside of the template or the script tag, I'm going to come to my ionic view import statement, and I'm going to add ION button to the list of imports, and then declare it down in the components object over here. So, we added the html, we added our import, and then we added it as a component to our component declaration. We'll save. We have our button. It looks like a fairly standard button. This is probably as iOS as it's going to get. Let's change to, let's change to emoji. So, just your standard Android device. And then we're just going to reload. Instantly, we start to see that this has a different look and feel. We have automatically like this nice little ripple animation, and I'm not even sure how that is going to come across inside of devtools. Can I zoom in on this more? Yeah, but let's take a look at that. I mean, honestly, I could just sit here for a little bit and click that and watch the animation. So, it changes the, has this nice little ripple effect. It changes the elevation of the button. It really follows that material design aspect of here is a button. And then on iOS, we have your standard iOS button. Now, it's not all we can do. We can go ahead and we can actually change how this button is displayed by just saying, let's see, we'll call expand and then we'll just say block. So, expand is our little property to say should this button take up your full width or should it just be like a block level element that sits within a nice little buffer. So, we'll say expand block and we'll save. So, you see, we have this little padding on the side. This is just going to give it a little bit of breathing room. If we were to switch this to say full, we remove all of those, that padding. And in fact, I don't know why that's not fully touching there, but I think it's just the dev tools being dev tools. Again, we can swap back and forth between iOS and Android. It's not going to make too much of a difference at this point, other than that it's going to have that ripple animation. Let me check out the questions what we got. Okay, that's a good question. Entered a little late. I'm curious about seeing the component name on the DOM instead of the markup of the component. Okay, really good question. So, this is kind of going back to how Ionix components get shipped and how they're actually authored. So, here we're rendering out the view component itself. So, this is a full-fledged view component. This is a full-fledged view component. This is a full-fledged view component. But inside of the app, let's open it up, and I guess let's just inspect the button. This is also not the view component. This is actually the standard web component that we provide. So, all of this is basically doing is saying, hey, view, here's a collection of components, their properties, the different ways that you could understand these components. Do what you need to do to make these components work with your system. And then all we render out behind the scenes is just this button, which is the actual component that we're trying to render. So, it's a little bit of a different situation than you're probably used to dealing with. All you really need to know is that this button, it's providing all the types and all the details that view needs to know about it. And then we're just rendering that out. It's part of the web component stuff behind the scenes, but you don't really need to worry about it too much. Another great question, tedious to import things one by one. If you're already using it, we're going to use a lot of components, so why not include a feature like good if I did to auto-import components found in view templates? Is there an option to active auto-import feature? At the moment, no, there isn't anything to do auto-importing for components. I feel I don't have any opinions on that. I do note that we have some guides on how to do a global registration of all your IANA components, but I like knowing that I need to be very explicit about what components I'm using versus having to hope that some tool understands what I'm trying to do. This way, I'm in control and there's a little bit more, if something's wrong, it's on me, not another tool that somebody else depends on or maintains. Okay, so let's actually get to doing something with the components other than just inspecting the DOM and looking at everything here. We're going to first create some mock data. We're just going to use a ref and then we're going to also use the setup field inside of our component to provide all of the logic versus something like data, methods, and computed values. I prefer using setup versus anything else. It's my preferred way of doing things. I believe it's something like that, yeah. So we'll say const data or if you have a better name than just data, const items equals, we're going to create a ref and then we're just going to set the initial value to something like array or new array or actually, you know what, we'll just set a blank item here. We'll say name foo ID one. So we have our items and then we can return items from here and now we can start to render these out inside of our template. So we're going to import a few things before we do that. Import ion item and let's just stick with ion item for now. Ion item and then we're going to render that here with ion item and then we'll say v4 item of items. What is this complaining about? Why can't you find that? We'll get to that. I might end up ditching my editor and go for something like VS code which probably has better support for this and then inside of our item we're just going to render out the item dot, what's the name? Okay, let's figure out v by key. Key is going to equal item dot ID. This is something that you do get to deal with quite a bit and that view is pretty explicit about what you're using especially out of the box with your ESLint setup. So that could be something that you run into. Let's see what the chat says. Return items. Thank you so much. I knew I was going to forget something. You have to return the object, not just the thing directly. And here we go. So we got our items and we are rendering this out. You are totally correct. How did I miss that up? I thought I typed in array originally. Thank you all for being so helpful. I appreciate all of that. There we go. There we go. It's working awesome. Hey chat, thank you so much for being helpful here. I appreciate you. Okay, so we have our item. We could just start rendering out a bunch of different items. Let's focus on what we can do with this one item first before we do anything else. So it'd be really nice to show this ID here. So let's start to say item dot ID. Let's just render that out and see where we go from here. Okay. Okay. That kind of works. But it's right up next to the item itself. I kind of want to split this out into something else. I want to split this into another area of this component. So let's take a look at a component. We'll take a look at a component. We'll actually we'll just wrap this in a paragraph tag. And we're going to make use of some nice positioning logic built into ion item into quite a few ionic components. So we're going to say slot equals start. Now if you get any error messages saying that slot is deprecated, we're not actually using view slots. We're actually making use of the web component slots, which are very different. Your editor is just going to have to deal with that for a second. We'll save and then inspect what we got going on here because this is something different. We have now inside of our item the shadow root where we're saying shadow root. Here is our item itself. And then we have this positioning element here called slot where we're saying that the name is start. So this name is just pointing to this slot is pointing to the paragraph tag that we've already rendered. But what we have right now is this really simple way of controlling where things get rendered inside of our component. So we have start right now meaning the left side and left to right or the right side and right to left. And the other one that we have is inside here and where we're going to render it on the end. So on the right in left to right or left in right to left. Making sure I got my my my my sides done well. So this is looking good. I actually do want this on the end. I just think it looks better. But there's different there's different slots all over Ionix components. Like we have one up here even in the toolbar that let's let's go ahead and just work with that. So I'm going to import a few things. This is going to be our big first big import of a bunch of stuff. We're going to import ion buttons. So multiple ion buttons and then the singular ion button then ion icon. So we're just going to import these three things and we're going to declare them. And we're also going to import an icon itself. So we're going to import from ionicons. Come on where are you? Come on where are you? We're going to import from ionicons slash icons. So these are collection of icon components that we have authored. You can check them out at say ionicons.com. I believe it redirects to the new site. But muscle memory is so strong I just automatically know where I'm going. These are collection of just random icons that can be used inside of an app. For instance we have this one over here for an outline. We have various different versions of it. So we have a filled one. We have a sharp more drastic one. It's collection of albums. The one that we're looking for though is just this is just this add icon. We're just going to say import add and then we're also going to return it inside of our setup. That way we can render it inside of our template. So we have see all of our buttons are declared. All the components are in there. And we're going to come up to the main header and we're just going to say ion buttons and then inside of that ion button and then one more ion icon and then we're going to set the icon to be dynamic value and it's going to be add. So let's just render this real quick. So we have the icon being rendered. We have the icon being rendered. We have our button over here. Click it but it's not going to do anything. But it's really just jamming up this entire thing. It doesn't look great. What can we do? Well again we can make use of all of the slot positions. So let's take a look. We have our toolbar and then let's open up the shadow root and then we have this toolbar container and then we have oh we have slot start. We have a secondary. We have primary and we have all of these different locations for where we could put stuff. So in here we're actually going to render all of these buttons actually at the end and you know see if we can adjust things and keep dev tools happy. Here we go zoom in. So let's just save real quick. Instantly that just goes right over to the other side. Lines perfectly where we want it. But I want to do something different because I don't like how this it's kind of acting as if this icon is the button. And if that's the case we should be able to do something with that. So let's let's inspect what we got going on here. So we have our button. We have the shadow. We have the span for button enter. Oh well it looks like our ion button also has a bunch of slots that we can make use of. So we have this icon only one and I'm assuming because we only have an icon and no text here. That's the place that we want to put this icon only. And while it doesn't look perfect we now have like this better animation for the touch action. So instead of it being that square ripple we actually have a full circle. So this button just feels automatically a lot better. So this is all all working out exactly the way we wanted. I'll close my devtools and I'll just adjust things over appropriately. So automatically we have our we have our items lined up really well. We're able to control where the elements render inside of the. Really good question Ivan. How come on the Ionicons website it says use name versus the way that I did it where we had this icon property that we can bind to directly. So the website is making is pointing to the fact that the icons can't or that web components generally don't import SVGs directly. Where here in view we have a whole build system set up so that way we could import SVGs directly. So we'd support both if you were to say want to inline it and then have the icon be responsible for fetching the the add svg. Basically I guess what's a better way to illustrate it. By saying name equals add we're saying icon fetch this for me. By using icon as a property of binding we're saying icon don't fetch this for me. Here's the actual svg that we want you to render. We're basically making sure that the icon doesn't need to do anything extra for us. If that makes sense Ivan. Perfect. One moment. I'm actually going to just go grab a quick drink of water so I'll be right back. All right. Let's get going and continue on. All right. So we have our items. We have our icons. This is pretty pretty nice. Let's let's do something a little bit different. Let's let's go ahead and make this item link to a new page and I don't know we'll just go ahead and link to a new page and pass the item ID or pass the whole item directly. So let's go ahead and we'll just say router link. Router link and we're going to go to details and we're going to pass in item ID as our accompanying markup. So this router link property here is our next way of saying hey ionic router or ionic and view router navigate to this but don't go ahead and create the the anchor link for me. We'll do that internally. So this is basically our way of handling that internally without having to wrap this and yet another thing. Someone raised their hand. I'm trying to figure out how to take a look at that. Bear with me one moment. I can't can't see anymore so I'm hoping that that person's question got answered but if it didn't please please just ping in the chat. So this router link is going to go to this detail route that we're going to define later on and we're just going to pass in the item ID so that way we can just append it to the route. You can see once we come over to here and hit save. I don't know why does that not want to work? And this is always a good time to make sure that everyone's aware that there's no way for me to know everything but what I do know is that when I am in trouble I can always go to our documentation. So if you are messing around and you're not quite sure what to do for whatever reason you do for whatever reason you completely forgot how to do navigation especially in view we can come over we have this great view section over here where we have this navigating and routing section. So let's take a look what we have we have how to handle routes how to set them up and we have all of the routing information on how to navigate to a different page. So what was I missing? What was I missing? Why wasn't that working? We'll try it again. We'll try it again. It did change. It did change. I just don't have a route set up to find for that. Thank you for pointing that out. Okay so that was me just being unsure about that. Okay so we know that that works. I should make the browser a little bit bigger. Let's go ahead we're going to add a new say detail.view. We're going to have a template and then a script with a link equals TS. We'll just copy a few things here. Just going to make this a little bit easier actually. We can close this for now. And we're just going to update a bunch of stuff. We don't need the buttons anymore. We have the detail that we can update and get rid of this ion item and should be able to get rid of everything past ion toolbar. As well as those items and everything inside everything inside of our setup function. The only thing that we need to make sure that we're doing is nothing's broken. Looking good and then we'll go to our router and we'll just copy that. I'll say we have a detail plus ID. Detail is the name and then the component instead of importing it directly we're going to use our lazy loading here. We can just say import go back up we'll go to views and detail.view and then let that get unwrapped by the view CLI. We can still support lazy loading which is something I really really like because that is super clean. We'll save and then here we are in details. I'm kind of stuck at the moment because we don't have anything like navigation. We've got the browser back button but that doesn't do everything that I want. How can we let's fix that. Let's fix that detail page. It's a little broke right now so instead we're going to add this ion buttons. We're going to add that back and then we're also going to add this ion back button component and set something on it called default href. Default href is just a way of saying hey ionic router if there is no navigation navigate back to this route. We could say go back to home. We could set it to just be that initial route so that way we'd start everything over again. This can be really useful if you're like deep linking inside of your app and you want to be able to provide some kind of breadcrumbs back up further along the app. Really really nice stuff here. We'll add our imports so ion buttons, ion back button and we will include them inside of here. Cool cool looking good so far. Thought equals start and hey we can navigate to and from. Trying to figure out why that doesn't want to actually render but it's updating the url which is interesting. It probably helped to change the name. It's very very interesting. There we go it was the name that was confusing everything. So we're navigating around and passing the url details. We can go in we can start to pull in that details from the actual router instance. So we could say import from view router and then we could say use route and double check to make sure that that is what it is we called. Yeah use route. And we could just actually let's copy this destructure some stuff. Why make things difficult? So we're going to destructure the route or we're going to grab the router or the grab the route instance. We're going to destructure the id off of those params and then we're going to return it. So that way we can just say my dynamic id equals id. Perfect. So this is all working out the way we want it. All just rendering. We have these animations. So this is something that I really really like. So I can just stand here watching the animations do their thing. But if we open up our dev tools again and let's select let's do the iphone and then we'll reload. So remember how the animations before kind of started from the bottom and now they're at the top. If we go in we can navigate here and we have a lot going on. So first off we have this blank title animating to the this to the back button. Is that what's happening? Yeah that's what's happening. We have this detail header becoming the new header title. The content you can start to watch how everything uh automatically just like translate back into its position and how that blank title becomes the back button and how everything transitions back. So this is really nice. This is our swipe to go back example which that's always fun to play around with. And if we're seeing some kind of glitch I think edge or better yet chrome doesn't actually know how to do uh backdrop filters that well. So I'm going to tempt fate and try to show it in safari again. Go to our iphone reload and we start to drag back. We have a different set of problems but get a better transition which is just so much fun and notice as you can see we have a lot of different options here. So let's go ahead and go ahead and go ahead and go ahead and go ahead and get a better transition which is just so much fun and notice as we go back that transition's pretty instantaneous right. So this is something that I do want to point out and make sure I make a note of talking about this. We actually have the two routes in the dom at the moment. So we have home and then we also have detail versus view router's default behavior of only ever rendering one route and then it stores the previous route as the new route not necessarily in those order of operations but you only ever have a single component or a single router component in the dom. So by being able to have multiple routes like this inside of the inside of the app we get to be able to do things like swipe to go back be able to restore that app history from the previous route almost instantaneously without ever having to deal with you know re-rendering the component getting that all set up setting up all the bindings and all of the all of the hooks no the component all we needed to do is just to sit there be disconnected from things for a little bit and when it's time to go back we just automatically bring it in. So this is really nice provides a really fast and snappy experience but it's the only thing that kind of is different from a default view router setup. Checking in on our time oh wow we are already almost at our time and there's so much still to go over. So I think I'm not going to be able to get a chance to show every single thing that I had planned because time is very very limited but I do want to leave you with some good with a good little tease of what else you can do. So I'm going to actually just stop my server. I'm going to actually close my editor too and I'm just going to do a quick little build. So this is using npm run build again you can mix and match between the ionic cli and the view cli commands. Oh great question Victor. We'll just kind of answer this real quick. With the approach of having multiple views in the dom at any given time will it not decrease the performance? Yes and no. You can you can put yourself in a situation where you are overloading the dom and it's becoming very very slow and you are just adding too much noise. We try to do the best that we can to make sure what those components when they are and when they are no longer the active route they are essentially removed from any from any re-renders or data updates inside of views context. So they essentially just become scale components that as they are about to be animated back in we can then reattach them to everything and then make sure that it's updated. So yes but we do it could impact performance if yes but we do it could impact performance if you have like I don't know 50 routes but chances of doing that if you're if you have that if you run into that chance of having 50 routes and your performance is hurting you probably have other issues to worry about like why do you have 50 routes in your history? Okay so we did a quick build and I want to actually just show off like the actual native part of this. I'm not going to have a chance to show some of the native APIs but we have this build we already have this capacitor config file and capacitor is one of these projects that we at ionic have we at ionic have been building and maintaining along with our framework offerings. So if we would say npm install at capacitor I'm going to pick iOS because because I like iOS actually this might fail for me. Okay let me just double check something. Okay yep I do not have CocoaPod set up on this machine so we're going to instead of installing iOS we're going to install Android. It's going to be a little bit slower because it's Android it takes some time but we've installed the Android project. We could do something ionic cap add Android it'll automatically do that if you haven't already done it but also get this really super super fast output. We create for you a native Android project provide some utilities and plugins in there and automatically get everything synced up so that way you can build your own native Android project. I'm going to run cap open Android. I could type today and I'm going to attempt and try to open up Android Studio. I'm going to see how this goes. Android Studio and me have a long running history of not getting along that well. So if you've ever used web storm if anyone's ever used that before or php storm or any of the IntelliJ stuff this should feel kind of familiar. This is basically all of yeah php storm. This is basically that same kind of shell specifically tuned for Android. You don't need to worry too much about it. We have some really great docs on capacitorjs.com on how to set up Android your Android environment if that's what you would like to do. But we have a simulator up here that we want to deploy too. We're just going to click the play button and it's going to build our native app and it's going to start up the Android emulator. Yeah it's a very good editor php storm. Php storm is really great. Also I would web storms pretty good especially if you are doing some and they have a really good integration layer for view as well. So we have our app over here. We can navigate to the second route if my computer wants to behave but it doesn't seem like it wants to behave. So here we get to show off a nice little nice little tree. We have this app we go to. Now this is fun. You can type chrome colon forward slash forward slash inspect to bring up the dev tools as a dedicated page. We have this web view here inside of this running app process. Let's go ahead and inspect what we got going on. We have our app. Why does not want to load? Oh this is going to be this is going to be rough. I can already hear my fans kicking off because of this. Let's try to do a quick little build again. It might have this. Can you have a github link? Yep I will post a github link in a moment. It should have everything for you. Okay let's try this again. All right well I guess my computer just says nope you do not need to open up a link. Well unfortunately that's not going to work at the moment. I don't know what is going on with this but I feel like it's my laptop basically just can't handle doing android studio plus an emulator plus a zoom call. So we're going to unfortunately have to be able to call it there. What I can do though is I will just say you can add commit. We'll just say fin help create push origin main and let me just copy this link. Bring up chat again and make sure this gets shared afterwards but we have all the everything that we just built today inside of that repo mhardington my-view project. Check it out play around with it for a little bit. Let me know what you think. I had a lot more planned but unfortunately the time just did not want to work out and the demos just wanted to fail. There are two quite more questions that I do want to get to. Luca does ionic work with server-side rendering and can the components only be fully re-rendered during client-side hydration? Yes. So server-side rendering. We do support server-side rendering with I believe we have our own package for it. All the stuff everything can be server-side rendering rendered. I don't know if we've had a whole lot of experience with Nux in particular or particular or other server-side rendering options in view. In theory they should be able to and we've gotten it to work with other frameworks or other tools. So it be a matter of we just need to try it out with Nux and figure out where where any issues could be. So if you are brave enough and you would like to try it give it a shot and let us know. I would love to know how that works. We've mostly done some experiments with Express and that's been working really really well. Okay we are already a little bit past the time but thank you all so much for being here. Thank you all so much for being here. I hope you've been able to at least feel a little bit interested to try ionic. If you go to ionicframework.com you'll be able to check out all the docs and have all the resources on how to get started. See what you can do. Feel free to ping me on the I will be in discord so if you do have questions later on I'm M Hardington in discord. You can always let me know if you have any questions. I hope you all have had a good evening at least it's evening here for me. So with that thank you so much.