When building an app, there are many options choices developers need to make. Is it a web app? Does need to be a native app? What should I use for UI? In this workshop will look at how to make use of Ionic for building your app and how to deploy it to not only the web, but native as well.
Building for Web and Native with Ionic & Vue
AI Generated Video Summary
1. Introduction to Ionic and Vue
Nice. All right, 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.
All right, so this just 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 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 gesture 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 can provide it out of the box. So you don't really need to configure this, but if you want to hardcode it would be materials design all the time. You can do that as well. Same thing for iOS, you could hardcode it 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 mockups or your company's own branding, you can do that as well. The API, 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 the mill component sets that build up the entirety of your app. One really nice thing about these components is that there's a what is typically called the 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 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 and take context of where they are in the world. What their parent component is. So we can look at example of that in the next slide. Except 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 define 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 utilities like TextTransform and whatnot, all just provided by the framework itself. and the accompanying CSS styles. See what we got in the chat. Okay, should be good. Just give it an eye on everything in chat. All right, I've mentioned this. Let's kind of look at one example.
Card Component and Vue Integration
This part focuses on the card component in iOS mode, which includes a header image, subtitle, title, buttons, and icons for actions. The card component follows atomic design principles and can be composed together to create richer designs. In iOS and Android modes, the design shifts to adapt to the platform. Ionic is framework agnostic and can be used with Vue. The Vue integration includes support for Vue router and provides standard Vue components. The router integration also offers animations and transitions. Ionic supports right-to-left and left-to-right formats. Ionic is the ideal UI in Ionic, providing all the necessary components.
And this is a card component that we have in iOS mode. So this card, the pay kind of attention to the source code, the visual's 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 a favorite, sharing, or some custom action that needs its own button called out.
So this card component, I'd 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 or 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 an 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. It is a subtle shift in the box shadow gets applied to the cart itself. So these components can be composed together and then they can also adapt to those platforms. So it's really, really just a powerful stuff.
Okay, let me do some questions. All right. So this is 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 gonna 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 shipped as standard Vue components. So if we're using something like Vue dev tools, we're going to be able to inspect those components and check out their state and all 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 worry about having to run any code in your browser. It's just a little more intuitive, 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 and A, some questions already popping up. Let's take a look at that. Let's see, we have one question. My colleague Kim is typing an answer. I'll let her type that. We have 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, 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, and 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. Beautify, Quasar, Bootstrap view. Which one is an ideal UI in Ionic? 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.
Ionic Framework and Vue Integration
Inside the framework, you can use third-party libraries with Ionic. Ionic's ecosystem is large and has a supportive community. Vue is a low barrier to entry framework that is performant. We'll start by setting up the Ionic CLI and creating a new project with Vue as the framework. We can choose from different starting templates like tabs, side menu, or a basic link layout.
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 Wen-C.
Okay, so. Let's get on with everything. This is just a really nice one to know. Ionic's ecosystem is quite big, only to mention this because if you are to use Ionic in a project for work or for, 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 you'll 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 gonna find someone out there that is very knowledgeable about Ionic and we have a great community on our developer forums, forum.ionicframework.com, and as well as GitHub.
So, without further ado, let's kind of dive into the, 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, it's really, really low barrier to entry. The technologies that 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's 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 picked a really good framework. And if it makes sense to you, that's probably the most important part.
So we're gonna 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 am 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 just download, run this command. You 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 or starting template, give it a name, and connect it to a get 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 Vue with a nice little link to our Vue docs. We have this great little note that if we want to skip this prompt in the future, we can just run it with the flag //Type Vue, and that's going to automatically default to Vue. All right, so what's our name? Let's just say MyVue Project. We're just gonna 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. It's a 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 the 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 gonna 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. Link is going to be your bare bones kind of, you have a single route, that's about it.
Creating the App and Project Structure
In this part, we discuss creating the rest of the app, installing packages, and answering questions about using Ionic with NuxtJS, transferring from Vuefy to Ionic, and using TypeScript with Ionic. We then proceed to start the dev server and explore the project structure. The project includes standard Vue files, configuration files, testing setup with Cypress and Jest, and a public directory for modifying the index HTML. The source directory contains the main.ts file and imports the ionic view package. The app is created using the ionic view package and the router is configured using a wrapper on top of view router.
Basically it's up to you to create the rest of your app. And then a list is just for a nice little starting point. It's gonna have some more dynamic and more filled out list components. We can start with a blank, if that's really what we wanted. It's gonna go through. It's going to attempt to install a few packages beforehand. I'm going to not let this run because I've actually, you know what, I will let this run. I already had this project created, but I just want to kind of go through, show you how everything's doing 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.
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 view 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 our 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 view project input. We have our browser lists and ESLint config, a Babel config. We provide Cypress and Jest already set up out of box, so all your testing can be done using those two tools. We give you TS config because we are pretty, 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. 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, 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 view object from the ionic view package. And then in our app, we're just saying, create a new app, use the ionic view package. And then we're also going to use this router object or configuration that we'll define later on. Once the router is ready, mount the app and bootstrap everything. Fairly typical view setup. The router part is actually using our wrapper on top of view router.
Ionic Router and Software Architecture
The router part is using our wrapper on top of view router to incorporate with the router in a nice way. The configuration and setup for defining routes and interacting with them is handled by view router. We have a route that redirects to the home component. The router uses the create router method with web history. Deprecation warnings from NPM are okay. We'll explore blocking swipe to go back and using VueX in Ionic. The app component contains an IonApp component as a base reset and an IonRouterOutlet component. The software architecture is not a focus, follow what you're comfortable with. The Ion Router Outlet component is an extension of the router view component from View Router.
The router part is actually using our wrapper on top of view router. So with view router, they provide their own create router and create web history methods. We're just wrapping that so that way we can do things like swipe to go back when we animate around. And we're going to look at that cause 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 the 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 view 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. And then we're going to pass it that array of routes as our available routes inside of our app. Double check what we 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 just saying is it possible to block swipe to go back. Is it possible to block swipe to go back. So we'll look at that in a moment. What are the project tree dependent... 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 in Ionic? Yes you can. In fact, we have this really awesome blog post that I wrote, Ionic... Well, let's put VueX. If you would like to get started with VueX in Ionic and Vue, let's just drop this in chat. This should be a nice little starting point in how to get up and running with VueX in Ionic. A 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. Great question, though.
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, all we have here is this very, very basic component. We have a template. It's getting, 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 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's the software architecture that will be adapted for this Vue.js Ionic application? Software architecture is, this probably NVC. I mean, that kind of depends on you. We're not going to focus too much on 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 Ion Router Outlet component. Now we can think of this as an extorsion of the router view component from View Router.
Ionic Router and Component Integration
We are using TypeScript and importing Ion-app and Ion Router Outlet components directly from IonicView. We are creating an app component that uses these two components in the template. The ion app component and ion router outlet component are rendering the home component, which is a basic page component. The page has a header with a translucent style and a second header. We also have a container with links and a call to action. The template follows standard Vue concepts and integrates with custom components. The header and toolbar components have their own styles that ensure correct display and sizing. The header component is aware of its own components.
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, meaning that we can start to get some pretty good completion of various different various completion and also TelSense on what we're actually doing. So we are importing Ion-app and Ion Router Outlet components directly from IonicView. And then we're saying importing defined component to get some nice type safety with this app component. So we're going to default, we're gonna export default defined component, 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 dev tools real quick. You can inspect everything, and I'm gonna collapse the styles panel, but you can see we have this ion app component, and let me just bump up the font size for the dev tools real quick. You can see that we have this ion app component, and then this ion router outlet component, that's doing great, and then the ion router outlet is actually rendering out this ion page, 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. Answered, 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, 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, fairly minimal set of minimal component. We're gonna say we have this Ion page, 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, in our script section, we have our define 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. 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. This kind of hopefully is getting across that this is really just using your standard view concepts and 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 IM 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 IM page, so I'm assuming that this IM page is actually this IM 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. You 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, IM 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, IAM 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, 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 device emulation and bump up that size of the dev tools. So this way we have our app, we have the router outlet, the page, the header.
Ionic Header and Button Styling
The header in Ionic adjusts automatically based on the content and the layout. In iOS mode, the header has a larger, more pronounced style with a nice transition effect. We can add components like buttons to the content area. The buttons have different styles on iOS and Android, following the design guidelines of each platform. We can customize the button's display using properties like 'expand' and 'block'.
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 flex layout. So header itself has no intrinsic sizing. But this Ion page knows that it is a flex context. So we're saying, all right, on Ion page, header, take up however much size that you need, the rest can be taken up by this Ion content. So 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 gonna render out 100 different paragraph tags. And I'm gonna enter the device emulation mode, and I'm just going to pick an iPhone, random iPhone, doesn't really matter. I'm just gonna 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. So 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 gonna 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 in this header, but this is just a nice design here that iOS has, and we've copied it. As we go along, we can actually just delete all of those items. Again, they were just for Illustrated 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 gonna put a little call to action, so I can 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, well let's change to Moto G, so just your standard Android device. And then we're just gonna reload. Instantly, we start to see that this has a different look and feel. We have automatically this nice little ripple animation, and I'm not even sure how that is going to come across inside of DevTools. I think to 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, it 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. That'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 say, 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 say. So let's 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 that padding and that, I don't know why that's not fully touching there but I think it's just the DevTools being DevTools. 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 we got.
Rendering Components and Creating Mock Data
Here we're rendering out the view component itself. This is a full-fledged view component. All you need to know is that the button provides all the types and details that view needs to know about it, and then we render it out. There's no auto-import feature for components, but you can do a global registration of all your IANA components. It's better to be explicit about the components you're using. Now, let's create some mock data and render it out inside our template.
Okay, that's a good question. Answered 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 Ionic's components get shipped and how they're actually authored. So here we're rendering out the view component itself. 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 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, it's 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 GoodVar did auto-import components found in Vue 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.
OK. So let's actually get to doing something with the components other than just inspecting the DOM and looking at everything here. So we're going to first create some mock data. We're just going to use, we'll say, a ref. And then we're going to also write 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 let's say we'll const data or give it 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 v for item of or 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. Then inside of our item we're just going to render out the item dot, what was the name. OK, let's figure out V by P.
Rendering Components and Controlling Slots
P is going to equal item dot ID. Let's see what the chat says. Return items. Thank you so much. I knew I forgot something. You have to return the object, not just the thing directly. So we've got our items and we're rendering this out. Thank you all for being so helpful. I appreciate you. Let's focus on what we can do with this one item first before we do anything else. It'd be really nice to show this ID here. Let's just render that out and see where we go from here. OK, 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. Let's take a look at a component. We're going to make use of some nice positioning logic built into ion item, into quite a few ionic components. We're going to say slot equals start. We have now inside of our item this shadow root. We have this positioning element here called slot where we're saying that the name is start. This is a really simple way of controlling where things get rendered inside of our component. There are different slots all over Ionix components. We have one up here even in the toolbar. Let's go ahead and just work with that.
P 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 are 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 forgot something. You have to return the object, not just the thing directly. And here we go. So we've got our items and we're rendering this out. You are totally correct. How did I mess 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. Ey, chat, thank you so much for being helpful here. I appreciate you.
OK, 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.id. Let's just render that out and see where we go from here. OK, 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. 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 this shadow root. We were 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 in left to right or the right side in right to left. And the other one that we have is inside here and where we're going to render it on the end, on the right in left to right or left in right to left. Making sure I've got 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 slots all over Ionix components. We have one up here even in the toolbar. Let's go ahead and just work with that.
Importing and Rendering Buttons and Icons
In this part, we import ion buttons, ion button, and ion icon from Ionicons. We also import the ad icon and render it in the template. By utilizing slot positions, we can adjust the rendering of the buttons. We can render the buttons at the end and achieve the desired layout.
So I'm going to import a few things. This is going to be our 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, the Ion icon. 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. We're going to import from Ionicons. Come on, where are you? We're going to import from Ionicons slash icons. So these are a 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 a 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. This collection of albums. The one that we're looking for, though, is just this ad icon. We're just going to say import ad, 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 a dynamic value, and it's going to be ad. 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. We could click it, but it's not going to do anything. But it's really just, it's 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 Shadowroot. And then we have this ToolbarContainer. 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. Actually, at the end. And let's see if we can adjust things and keep DevTools 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.
Enhancing Buttons and Adding Router Links
We can utilize slots in Ion button to improve the touch animation. The Ionicons website recommends using the 'name' attribute, but in Vue we can directly import SVGs. By using 'name' we let the icon fetch the SVG, while using 'icon' as a property of binding allows us to provide the SVG directly. This ensures the icon doesn't need to do anything extra. Let's make the item link to a new page using the 'router-link' property. We'll pass the item ID to the 'details' route. If anyone has questions, please let me know. Now, let's continue with our items and icons. We'll make the item link to a new page and handle it internally without creating an anchor link. If anyone has any questions, please feel free to ask.
And if that's the case, we should be able to do something with that. So let's inspect what we got going on here. So we have our button. We have the shadow. We have the span for button inner. 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 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 working out exactly the way we wanted. I'll close my dev tools. And I'll just adjust things over appropriately. So automatically, we have our items lined up really well. We're able to control where the elements render inside of the- what was the name of that one? 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 combine two directly. So the website is pointing in 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 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. At 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 nice. Let's do something a little bit different. 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 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, but I'm trying to figure out how to take a look at that. Bear with me one moment. Okay, I can't see any more 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 you can just append it to the route. You can see once we come over to here. I'm going to 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.
Ionic Router and Navigation
In this part, we explore how to handle routes and navigate to different pages using Ionic router in Vue. We add a new detail.view component and update the router configuration to support lazy loading. We also fix the detail page by adding an IonButton and IonBackButton component, which allows us to navigate back to previous routes. The default href property in IonBackButton provides a way to define the route to navigate back to when there is no navigation history. Overall, we ensure that the navigation and routing functionality is working correctly.
So if you are messing around and you're not quite sure what to 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. 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 shouldn't make, I should make the browser a little bit bigger. Let's go ahead we're going to add a new detail.view. We're going to have a template and then a script with a length 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. 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. We should be able to get rid of everything past IonToolbar as well as those items and everything inside of our setup function. The only thing that we need to make sure that we're doing... Nothing is broken. Looking good. 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. 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 Vue CLI. So 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. 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 IonButton. We're gonna add that back and then we're also going to add this IonBackButton component and set something on it called Default HRF. Now default href is just a way of saying, hey Ionic router, if there is no navigation navigate back to this route. So we could say go back to home, we could set it to just be that initial route, so that way we 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 will add our imports ion buttons ion back button, and we will include them inside of here. Cool, cool looking good so far. slot 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 is a very...it will probably help to change the name. It's a very very interesting...there we go...it was the name that's confusing everything. So we're navigating around, passing URL details, we can go in, we can start to pull in that detail 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 call it. Yeah, use route. Um, and we could just actually...
Animating Routes and Swipe to Go Back
Let's copy this and destructure some stuff. We destructure the route or grab the router and route instance. We animate the blank title to the back button and the detail header becomes the new header title. We can watch everything automatically translate back into position. This is our swipe to go back example. We have two routes in the DOM, allowing us to swipe and go back without re-rendering the component. This provides a fast and snappy experience.
Let's copy this and destructure some stuff. Why make things difficult? So we're going to destructure the route or we're going to grab the router, grab the route instance, going to destructure the ID off of those params and then we're going to return it so that way we can just say, uh, myDynamicID equals ID. Perfect. So this is all working out the way we want it. Oh, just rendering. We have these animations so this is something that I really really like so I can 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 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. We can start to watch how everything 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 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, you have different set of problems but get a better transition, which is just so much fun. And notice, as we go back, that transition is 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 routers 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. By being able to have multiple routes like this inside of the app, we get to be able to do things like swipe and go back, be able to restore that app history from the previous route almost instantaneously without ever having to deal with re-rendering the component, getting that all set up, setting up all the bindings and all of the hooks. No, the component, all we needed to do is just 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 set up.
Building and Deploying the Native App
We are running out of time, but before we finish, I want to show you a quick build using NPM run build. With multiple views in the DOM, performance can be impacted if the DOM is overloaded. However, Ionic handles the removal of inactive route components to optimize performance. We also explore the native part of the app using Capacitor, a project maintained by Ionic. We install the Android project and open Android Studio to deploy the native app. Despite some compatibility issues, Android Studio is a familiar environment for developers. We can navigate through the app and even access a dedicated page using chrome://inspect.
Checking on our time. We are already almost at our time and there is so much still to go over. I think I'm not going to get a chance to show every single thing I had planned because time is very, very limited. I do want to leave you with a good little piece of what else you can do. 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. This is using NPM run build. Again, you can mix and match between the Ionic CLI and the Vue CLIs commands.
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 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 that those components, when they are no longer the active route, they are essentially removed from any re-renders or data updates inside of View's context. They essentially just become scale components that, as they are about to be animated back in, we can then reattach into everything, and then make sure that it is updated. Yes, it could impact performance, if you have 50 routes. But chances of doing that, if you have that chance of having 50 routes and your performance is hurting, you probably have other issues to worry about. Why do you have 50 routes in your history?
Okay, so we did a quick build and I want to actually just show off the actual native part of this. 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 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 I like iOS. Actually, this might fail for me. Let me just double check something. Okay, I do not have cocoa pods set up on this machine. Instead of installing iOS, we are going to install Android. It's going to be a little slower because it's Android. It will take some time, but we have installed the Android project. Ionic, Cap, and Android. It will automatically do that if you haven't already done it. But you also get this super, super fast output. We create for you a native Android project. We provide some utilities and plugins in there and automatically get everything synced up so you can build your own native Android project. I'm going to run Cap Open Android. If I could type today. And I'm going to attempt to try to open up Android Studio. I'm going to see how this goes. Android Studio may have a long running history of not getting along that well. So if you've ever used WebStorm, if anyone's ever used that before or PHPStorm or any of the IntelliJ stuff, this should feel familiar. This is basically all of PHPStorm, this is basically that same shell specifically tuned for Android. You don't need to worry too much about it. We have some really great docs on How to Setup your Android Environment, if that's what you would like to do, but we have a simulator up here that we want to deploy to. 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. It's a very good editor, PHP Storm. PHP Storm is really great. Also, WebStorm is pretty good, especially if you are doing some, and they have a really good integration layer for view as well. 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. Here, we get to show off a nice little tree. We have this app. Now, this is fun. You can type chrome://inspect to bring up a dedicated page.
Troubleshooting and Conclusion
We encountered some technical difficulties during the demo, but you can find all the code and resources in the GitHub repository 'mhardington/my-view-project'. Feel free to explore and provide feedback. We have a few more questions to address regarding Ionic's compatibility with surface-side rendering and re-rendering of components during client-side hydration. Thank you all for attending and showing interest in Ionic. Visit ionicframework.com for documentation and resources. Feel free to reach out to me on Discord (emhardington) for any further questions. Have a great evening!
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? 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? Yes. I will post a GitHub link in a moment. It should have everything for you. Let's try this again. 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, get add, commit. I'm just say fin of create. Give it a push, origin, main. And let me just copy this link. Bring up the chat again and make sure this gets shared afterwards. But we have everything that we just built today inside of that repo, mhardington slash 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 wanna work out and the demos just wanted to fail.
There are two more questions that I do wanna get to. Luca, does Ionic work with surface-side rendering? And can the components only be fully re-rendered during client-side hydration? Yes. So, surface-side rendering. We do support surface-side rendering with... I believe we have our own package for it. All the stuff, everything can be surface-side rendered. I don't know if we've had a whole lot of experience with NUCS in particular or other surface-side rendering options in Vue. 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 NUCS and figure out 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. Let's see, my view. Yeah, I think I'm right. 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 emhardington at 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.