The mobile stack for Angular || Angular Virtual Conference 2021

Well, hello, everyone. Thank you for being here. This is going to be a lot of fun. I hope that you leave here learning some cool new tools

So before we dive into this, I want to just share something that I have basically with me at all times. And that's this device. This little phone over here is basically with me

24 7 365 increasingly it's like the core thing for you know getting stuff to my house getting stuff

to other people get ordering food it is like a key part of my of my day-to-day and you know

this powerful device and powerful all these things that are that you're capable that it's capable of

doing came from humble beginnings. And that's where we got this, you know, lovely little device

called the original iPhone. Now, the original iPhone was a groundbreaking piece of technology

that promised to bring, you know, the power of the web to the masses. If you don't know the story

originally, when the iPhone was announced, they were saying, you're going to create apps for this

using the web, which was great. You'd be able to take all the amazing features

and now let's state this a little bit of HTML5 and build out complex apps

complex apps that, you know, take advantage of all the latest features

These are things like Ajax, HTML forms and client-side form validation. You know, it is a little bit of a

a little bit of a dated reference, but it truly was going to be a groundbreaking time

We were going to have all the power of the web on our mobile devices

But, you know, as time grew on, went on, you know, I think we all know where this ended up

We did not get HTML as the main development language for iPhone

We ended up getting things like Swift or Objective-C and Swift nowadays

We get these complex native tool chains so that way developers would have to learn a whole new language, a whole new stack if they want to write for this one device

Granted, now we have iPhone, iPad, Mac that we can all develop using these languages, but we're still in these one ecosystem versus being able to develop for everywhere

Android is in a similar situation where they have all of their tools and technologies available through Java traditionally and now Kotlin

So these kind of ecosystems kind of, you know, got rid of the idea of let's just have this one language or this one approach to developing for all these platforms

Not necessarily something I'm happy about, but it is what it is

So how can we, you know, change this and do something better

This is where the idea of cross-platform development comes from. So like Simon said, my name is Mike Hardington

I'm going to be talking about Mobile Stack, the Mobile Stack for Angular

If you want to find me on Twitter, handles mhardington, basically everywhere

Feel free to reach out if you want to ask any questions after the presentation

So cross-platform in this mobile stack for Angular kind of solidifies around these few ideas

Write once, run anywhere. I should be able to take one code base and deploy to all these different platforms

and still have access to native device features and the same HTML, CSS, JavaScript development, and debugging experience that I'm used to

If I want to access native features or go down to, say, the low-level APIs like Bluetooth, connections, file system access

I should have abstractions around that so I'm not dealing with it directly, but I can still make sure that wherever I am deployed to, I can either call the right API or fall back to something else

And again, one code base is really the goal, but I should be able to have these multiple targets

So all the platforms should exist at their own, you know, they should be all the platforms should be able to exist on their own merit

But I should be able to take this core code base that I have and drop it into all these platforms and have access to the same code bases

So with that in mind, the technology that we're going to be looking at today are, you know, one, Angular is at the center of all this

So I don't feel like I need to teach everyone Angular. I don't know if I can, you know, teach everyone Angular because, you know, we're here at an Angular event

So let's try to teach some of the other stuff. But we're going to look at first, Zionic

So for those who do not know, what is Ionic? Well, Ionic is a UI library for native and web, meaning that I have a collection of components that work really well for not only my web apps, but also deploying to native devices

And I feel right at home on those platforms. I can deploy the same components to both desktop, native, web, and be able to have the theming and styles for these components adapt the platform so they feel right at home, not only with the CSS that's being used, but the animations and transitions and all the little nuances in each of these platforms

It should feel right at home to those platforms. For Angular developers, Ionic integrates with the Angular CLI and integrates with the Angular router

So you're not having to learn a flavor or a slight deviation from Angular

You are just using your Angular knowledge. Everything that we've learned here today can still apply to your Ionic apps

It's less of Ionic and more of Angular with Ionic as its dependencies

Same way that you can look at it as Angular with Angular Material or Angular with whatever the UI system you're using

And for the people who have access to a designer or have some existing brand designs, you can

customize the entire look and feel of your app to feel very close to your own branding

by using CSS variables which can give you runtime computation the flexibility to change themes based on your operating system environment

all of these great things without ever having to deal with SAS

which I know that seems like it's a, you know, like, oh, that doesn't seem that great of a feature

But trust me, not having to deal with SAS and Node SAS and complex build tools is increasingly becoming a good thing

So for Ionic itself, you know, we can boil it down to some of the UI pieces that make up your app

So here on one end, we'll see. Let's go. Yeah, we'll do this

Here on one end for all the way towards this side, we have a collection of badges, list items, a tab bar component

Next from the left, we have a collection of buttons from different colors, different styles

to whether or not they should be an inset block button that has a line break or a full width button that goes all the way to the edge

collection of cards and then also list items and cards in particular are one of my favorite

components uh which seems like you know that's a pretty simple component mike why would you think

cards are that great uh because cards represent the building blocks that uh every app can use

cards themselves are just generally a a give with a drop shadow but in here our cards can be

composed by all these subcomponents. So that way we can have a card header, a card content

an image, a card subtitle. So we can start to build up all of these components together

and create what would have been a pretty boring, simple text into this massively complex card with

so much information, so much visual detail by just putting components in it and having it

automatically update to adapt to that. So something I think is really cool

So let's kind of look at some HTML. We're going to look at like a little walkthrough sample at

the moment, and then we can go to my editor, but let's kind of describe how some of these

components can be brought together. So I have a demo app. But before we go to the demo app

we have nothing, right? We have this blank canvas, this empty component or this empty text file

Let's add something in here to build out a page or a navigate or a route that you can navigate to

Well, start off with this, we're probably going to want to have like a header component and maybe

some content area. So let's add this ion header and ion content component. These are two core

building blocks that are based on Flexbox that allow you to have all these, all this dynamic

layout. So header is we can assume it's going to be at the top content is going to I'm assuming

be below the content of the header. Okay, pretty self-explanatory. Well, inside of header

we could also have a toolbar and a title. So all of these are prefixed with ions

that way they are in the same namespace, but toolbar, I'm going to assume

bar is in the name, I'm going to assume it's like an action bar or some kind of full width element with a title

I'm assuming it's just going to show the text, but style it a very different way. So that's pretty nice

Ion header, ion toolbar, makes perfect sense. Up next from toolbar and title

why don't we add some buttons into this, into this header or to this toolbar

So if we have one button and then we have an ion buttons around that

we can assume that ion buttons is just going to be a way for us to have

multiple buttons, but group them in a way that keeps them all right next to each other

We can then use things like component slots to say, all right

Ion buttons, I want you to go to the end slot of Ion toolbar and Ion icon. I want you to be in the

icon only slot for Ion buttons. That way you take up the full space of this button

Pretty nice, pretty easy to, or pretty simple and straightforward to see what each of these

components and what all of these attributes are doing. Further down from the content

And we can assume that we're going to have a list of something

And we think to vanilla HTML, we typically have something like an unordered list

or an ordered list. And inside of those, well, we have list items

In this case, we're calling them ion items. So they're slightly closer to

they're not exactly what you would expect from a UL and an LI, but it's close enough

We can get the same kind of metaphor in here. So we have ion list

Inside of that, we have an ion item. Let's throw some Angular in there and G4 and just iterate over some notes

And then we're going to render out each note inside of the item. Fairly straightforward

Looking at this all together, we have basically built out an entire component

or an entire page using Ionix components and using Angular as our framework

So this is cool and all, and fun text overview. Let's actually look at an example of this

So I'm here in my browser. You can see we have our list items, our header

Here's our button from our code sample. we can say click on this note, take a look at some notes that I have written here in this app

I can save it, check out another note. And this is all just being used, all being done using IAMS Core Components

If we go over to my editor, I use Vim. So let's see if I can't get screen refresh to work

What we have inside of the editor is just, oh no, my computer is going so slow

Let's try this again. Let's go to source app

Yeah, let's just look at the home page. So here in our component we have the core building blocks that we already gone through with some additional properties or attributes applied to the component

So here on our Ion header, we have this translucent property binding, and we're setting it to true, meaning that as we go to iOS or to platforms that support this, as the user scrolls, the content should kind of have this underglow effect on the header

So as you scroll up, you should be able to see some content beneath the header

This Ion content here on line 12 has full screen, meaning that it should take up the full width of the viewport so that way we can have the scroll effect working

Everything else in here is still part of the core Angular and Ionic experience

We're just enhancing these components using Ionics properties and all of their capabilities

So if we go to now, let's see if my computer wants to behave

okay so we're going to we're going to go and i know i'm not not that i dislike it but

it's just not what i am 100 familiar with we're going to use vs code um most people are familiar

with VS Code. I'm just the odd one who is not as familiar

with VS Code as everybody else. So if there is something that is going to go

completely wrong, here is where it's going to happen. So we're going to open up, let's see

we looked at the homepage HTML. Let's take a look at the actual component logic here

inside of the TypeScript file. So nothing in here is, like I said

overly different from a default Angular app, we are just adding some additional features

like some type information, some additional injectables that we can use, as well as components that we can just

import right into the main page. Here we have this access to

some features that we're going to look at in a bit. But the component itself is making use of things like NG on it

we're using at component decorators. So this is still an Angular app

just again, enhanced with ionic components. So let's go back to the sides

and take that very basic app structure that we have, and enhance it with some native features

So when I say enhance it with native features, I'm going to talk about capacitor because

capacitor is really what's going to drive the native functionality here. So what is capacitor? We like to call it CAP for short because capacitor is very, very, so it's kind of a long word

CAP is a two-part JavaScript library and native runtime. So you can take a, you can have some APIs that you can have access to

you can import them into your project. And then when you want to deploy that to a native device

you can have access to them in the same way that you would expect

across iOS, Android, and the web. Now, the way we do this is that we actually have a high-level abstraction

or an abstract kind of class that you're calling, and then we can swap out the implementations based on what platform you're on

So iOS is going to get the, if we were to say call the geolocation API, we're going to call the native geolocation services on an iPhone and the native geolocation activity on Android

And then for the web, we're just going to use Navigator geolocation. So the tooling and the infrastructure on the native side is actually making use of all the native features that native SDKs have had for years now

So things like CocoaPods and Android libraries, if you're unfamiliar with those, they're essentially our equivalent of node modules

They're basically native packages that you can install and have a specific version to

So that way, when you clone a project and then your co-worker clones a project, you can have the same dependencies and ensure that they stay in sync

So great stuff there. If you're a web dev or if you have some native devs on your team, they should feel right at home

So architecturally, this doesn't really add anything, but I think it's nice to know how the whole thing works

At its core, you have your web app here represented in blue that gets loaded into a web view

This is essentially just a browser without any forward or back buttons or URL bar

As you use your app, you are making calls to say the capacitors core APIs that get proxied out from the WebView to this native bridge

Now, the state of bridge is saying, OK, you are asking me for camera access

Here are the options. Here's the camera. I'll take your options. Let's pass them down to, say, the hardware APIs, get the results, serialize them back in that bridge and then pass it back into the app

So that way you have this really nice flow that makes sense

Really all that matters for us Angular developers is that when we use Capacitor, we can target not only a progressive web app, but an Android app and an iOS app, literally with the same code base

Capacitor itself, like I said, is a separate project from Ionic. so it doesn't have any opinions on components or even framework

You could be using Angular, like we all are here, or you could be using Vue, React, or Node framework at all

Capacitor adapts to those needs. You don't also have to be using Ionic, though you totally should

You could also use things like Angular Material or any of the variant bootstrap libraries that exist out there

As I said earlier, the API can swap out implementation. So if you are familiar with, say, the camera API or the media devices API on the web, you're going to see that the APIs are not exactly the same as the web variant

And that is so we can swap out implementations. So let's kind of look at how this works

Like I said, we can target iOS, Android, and web. We also have a community edition for electron If that is something that people are interested in I have links to it afterwards But let actually see Capacitor in action and how to call native features

So back in VS Code, we are going to bring in this Capacitor file system package

Now, Capacitor has all their core APIs split out into separate packages

So if you need the camera, if you need file system, Bluetooth, you just install the package for it and then it's automatically available

And here we have access to the file system API. And then we have this directory enum so we can have a consistent way of looking up directories

What we're going to do is inside of this NG on init, we're going to request the permission for file system access

And then we're going to do this thing called init file system. Now, init file system is just this very simple way of saying, hey, make a directory and then read that directory

So this really doesn't do anything. It's the make directory and redirectory that are going to be the main drivers here

Now, make directory only calls filesystem.makedir. We give it a path and then a directory where we want to store this

So in this case, we're saying in the directory.documents, make a folder called notes

So this is going to be our directory. This is how it's all going to get stored

we can use directory as the directory enum here to pick where we want to create our files

So you could use directory.documents, downloads, different places for different platforms. When this directory has been made, we're going to read that directory and get all of the files that are available

So in this case, I'm just going to get all these files and then do a quick little sort to render them out, which is how we're doing all this here

We're just reading files from the directory, from the documents directory. So for you to go into here, if we're going here, this is the actual file that exists

We can save. We can come here to this note one. We can actually delete it and delete the file altogether and have this just work

When we're inside of, say, our edit page, which is doing all the file saving and all of the deletion, we can come down to this save and delete methods

And we're just saying, hey, file system, write file, give it the path, give it some content or some data to save, give it the directory and the encoding

And then the rest of this, you know, is just handling some Ionic stuff

So the big point that I want to get across is that this file system API is fairly approachable

You have make directory, write file, delete file, pretty clear and concise method names that do exactly what they are supposed to do

It's much better than some of the file system APIs that have existed on the browser for a while now

Delete file is pretty similar. We just call delete file, pass it the path

and the directory, and we're done. They're all async. So we are going to do promises or async await

depending on what your preference is, but this all works. Now, this is being run in the browser

but what's the point of running something in the browser when you're supposed to be doing stuff cross-platform

We can also run this in, say, an iOS device. Where we have this note in here, we could open up, say, hello, world

No, we're going to say, ooh, spelling error. hello C sharp if nope I can't even get my shift key to work demo gods why must you fail me we'll

just say C sharp and call it then we can hit save have that note just work we could add a new note

a new note, have that work well. And this is all running and saving this

into the iOS directory folders where that directory enum is saving everything

If we were to say open up an Android emulator, the same thing works here

We have access to the notes. We could save something new. We could delete a directory

it all works the same exact way. So I'm actually going to delete and close this emulator

because I'm 100% sure that this is what's causing some of my computer issues

And I'm also going to go back to the slides. So kind of towards the end and wrapping up here

If you want to try Capacitor out right now, obviously commit whatever you're working on and create a new branch

Be a mindful developer and use version control here and install these dependencies, Capacitor Core and Capacitor CLI, and then run MPX Cap Init

And this is going to give you a little guided walkthrough of how to set up your project, and then you'll have access to Capacitor

Add your plugins as you need them, and you're good. If you want to actually learn more about Capacitor or Ionic altogether, go to capacitorjs.com

We have a full guidance section on how all the plugins will work and how to get access to all these APIs

And then ionicframework.com is going to give you a guided access to all of the components and interactions that you can use when building out the visuals of your app

Some parting thoughts, Ionic, I will say that it's an amazing UI library for web and native

I've been working on it and with the company for like seven years now

And to this day, Ionic is probably one of my favorite UI libraries. Capacitor

Capacitor is really awesome right now. It is the solution that I wish I had when I first started

And Angular. Who doesn't love Angular? But when you add them all together, you get amazing stuff

So I'm happy to take any questions if I have some time

And if anyone has any questions, if you can't reach out on Twitter, happy to take them there

Thank you