Live Demo: Building Capacitor Apps in Ionic Appflow

all right I think we're alive I'm hey everyone thanks for joining us today my name is Rachel I'm on the marketing team at ionic and we've got another great webinar planned for you it's building capacitor apps in a flow so my name is Rachel I'm on the marketing team I've also got Matt natkho here he is the head of developer relations and we've also got Nick Hyatt our product manager Brad flow so we're action a new webinar platform today so if you experience any technical issues please let us know in the key box on your screen today's presentation is going to be about 60 minutes long and we'll get to questions after and then following the live event check your emails we'll send you a link to the on-demand version so you can watch it again share that link with your friends but I think that's it so I'm gonna pass it over to Matt and Nick for their presentation thanks guys great Thank You Rachel and hey everyone again I met Nemco part of our developer relations team here and with me is Nick Hyatt a product manager thanks for joining us really excited to be here today we've got a lot you know a lot of stuff to talk about really excited to do you know the longest and most you know kind of deep demo of capacitor and a flow working together today so we're gonna kind of zip through some slides and you know get right to the demo and get right to the meat of it so first we'll start off you know kind of just for those that you know maybe need a refresher on ionic and what we do we'll start with an overview of ionic capacitor app flow all of our tools and technologies and then get into a demo have some key takeaways and lessons learned and you know at the end we'll have a bunch of Q&A time to answer all your questions so feel free to leave those questions throughout the demo and things and we'll get to them at the end thank you so to start you know briefly what is what is ionic framework right you may it may or may not have heard of us it's it's our probably what we're most known for it's our free and open source mobile ready UI library that provides over 100 UI components that are built on the web platform and what that really allows us to do and what allows you to do as developers is to build apps that work where any platform any device any framework as long as it runs in a web browser you are set with ionic and what's really powerful out this is we can take your your web code your ionic code and build for iOS Android all the mobile platforms as well as electron for desktop progressive web apps and in general again just the web everywhere and what's the really big benefit about this is it gives us the ability to write one code base that works across all those different platforms so talk about time savings and the ability to just focus on innovating for your business or your app it's it's really quite honestly impressive what we can do with web tech today and what you know coming from the developer kind of persona and background is you really just need basic web skills your HTML CSS JavaScript and you can be an ionic developer and we pair with all the different types of app frameworks out there like react angular and view and there's still there isn't a compromise choosing this approach compared to regular native development you still have access to full the full native API suite like Bluetooth and camera and other things that I'm gonna show off today actually and the other background term to understand is we typically see these these types of apps called hybrid mobile apps or the hybrid architecture and what that basically allows us to do is is and how this is how the magic works with your ionic apps right we're able to take your ionic ionic app web app code and bundle that and deploy that into a native apps shell and how that actually runs our code because it's it's a native app right to your end-users it's all it's a native app it works is basically the same you get us the same great experience and what we do is we we bundle in a browser webview which is basically an embedded browser inside of that native app shell so again to your end users they can't tell the difference and you get to as developers get to reuse your skills and target all these great platforms so it's really quite a win-win and the magic sauce in terms of how we access device capabilities like Bluetooth or the camera are through either Cordova or capacitor and we're focusing on capacitor today we'll talk about that in a second but basically that's our spiritual successor for cordoba a long-term open source native runtime solution that provides that bridge between web and native code so what is capacitor exactly so it's our it's ionics provided as part of our stack our entire platform suite of a cross-platform runtime that gives you access beyond typically what Cordova provides you which is the mobile platforms like iOS Android we've extended it on to desktop with electron support as well as the web so we have a bunch of api's and plugins that allow your app to have these you know tap into the browser and allow your plugins to work on the web which is really powerful for progressive web apps additionally as we'll see today we have near fold backward compatibility for Cordova which is really great so as we'll show with some of the demo where I'm going to migrate a capacitor or no excuse me a Cordova app to capacitor we can maintain our code base it doesn't have to be a big migration headache you can do this in steps which is really nice and you know we're really big in terms of using the platform so using the web-based browser platform so the web focused API stay close to web standards so you you can feel confident knowing that they're not some hacks that we're doing to make the plugins work on the web there they're using built-in html5 and and those types of technologies to accomplish the kind of apps that we can build and additionally there's a little bit of different approaches we'll see of being able to code once and configure everywhere so in this case with this approach with capacitor we're embracing the modern tooling Xcode Android studio electron tooling and what that gives you is easier maintenance over time there's no longer a black box of confusion on the native side of things as to what's going on when you run into issues inevitably or have to do debugging of your apps and last but not least again of course our inspiration is you know really building upon the lessons learned of you know 10 plus years of Cordova react native turbolinks all different types of projects that are great out there heavens - to build this and Nick what I'm sure told us briefly about F oh yeah and so app flow when you pair up flow faster you get some really powerful benefits for helping speed up your app development so we caught our devops platform devops for everyone services include native packages so building your apks and your IP k's in the cloud saves you from having to have maintain build servers or build environments that stuff can get really complex trying to keep the right positions of all your dependencies Xcode Android studio all that stuff we also provide our live deploy service so that you can get real-time updates the one of the really nice benefits that we stick so close to the web is that the majority of your app logic is is really just a web app that's running an active API so we can actually dynamically update all of your web Matt's web assets using our deploy feature which means that you can update your app as frequently as you want you know like multiple times a day if you need which is not something you can traditionally do with the App Store releases because you have two cycles and everything so as long as you're making you know web changes you can deploy your app after many times as you need to to get updates and bug fixes and things out here and losers and then of course we've added features to provide for people using trying to set up CI CD in continuous delivery systems so that you can tie it into you github or bitbucket we can push your get your get repo directly to us and we can set up automations depending on like the branch or what you need to to automate some of these things for you so automate the building of your IP is in apks automate the building and deploying of your live deploy service so that basically it just speeds up that you know that that shipping part of your air applications yeah so really great for teams building lots of apps especially your wanting to happen you know the CI CD continuous delivery kind of mantra yeah absolutely awesome great and we're gonna coming up here I'm going to show how a live deploy functionality works with capacitor 2 so really excited to show that off and again as promised we're gonna get right to it today I've got a lot to show off in a demo so let's do it we're gonna do really this is a two-part we're gonna start with a cordova app that i've modified a little bit and migrated that to capacitor with using a bunch of different plugins such as the camera file and I and ionic storage so really excited for that and then we'll take that same app and then add app flow functionality to it and use the live deploy functionality to actually ship a real update to my iOS device live in front of everyone so fingers crossed that should be really exciting so let's some let's switch over here and pull up the code and my iOS device so this is my iPhone on the right hand side visual studio code on the left with our app here and really what this is you may look familiar to some of you this is the ionic stab starter template that gives you as you see on the lower right right hand corner here tab one photo gallery Tab 3 gives you just kind of a basic you know starter template skeleton app that you can get started with when you're building an ionic app so I've kind of tweaked that and what I've done is I've modified tab 2 here to act as a photo gallery and that's where we're gonna make some changes to today so as you see in the bottom we've got a little button with the camera and I'm gonna this is the Cordova based version so this is working today I'm gonna press that and this is our little you know recording studio here we'll take a quick little picture and say use photo and great so what that does is as I take different different pictures I'm gonna take another one here that's actually using the ionic camera or the excuse me the Cordova camera plugin with ionic native as well for some JavaScript helper functions and what I can do here is also I'm using some of my onyx UI 2 components here such as this drawer here on the bottom to when I tap on the on the on a photo I can delete it so I'm going to tap that and that's actually storing these photos on the file system over to my device and let's look at you know what that actually looks like from the code standpoint what I've done here is I have a photo service class that basically encapsulates all of this logic all of it for loading the camera photos that we've taken the ability to open the camera and take those pictures and save them to the file file system excuse me and then delete them as well and that actually deletes them off the in the file system instead of just cheating and deleting it from the V app here as well so we'll look at what that looks like so what I love about this is you know it's pretty straightforward code and let's just kind of talk through it really quick so I have a load save method that once this this tab page loads it's going to use ionic storage to retrieve the reference data I'm storing an array of photo objects to the device and that just points to access pointers to the photos stored and within the file system and the photo object down here I'm going to scoot down here really straightforward right I've got a path to the file itself which is just a string and the webview path there's basically some special logic we need to without getting too deep into it we'll have some examples later about that but without getting too deep into it partly for angular support as well as working with the way ionic works with web use we need a special path to be able to display the file within the app here so we'll look at what that code looks like in a second you know really the method that kicks everything off is my take picture method and that's what fires when I again hit the camera here cancel that and basically what that's doing is its using the ionic native and Cordova camera plug-in to say get a picture right so that's what actually opens up the camera on the device and then from there we get the raw the way this works is it actually stores the photo into a temp directory on the device so we can use that we can display that on the phone but if I were to kill the app or come back right it's gonna it's not going to save the picture data necessarily iOS or Android they have different cleanup functions that might run and actually delete that data and that's no good for a real app right so that's why I'm using the file plug-in here and so what I'm doing with that is passing that temporary image data into a safe picture method let's look at what that looks like let's crunch that a little bit and you know fairly straightforward though I will say working if you've worked with the Cordova File plug-in it can be really challenging to know how to tie all this logic together especially they're talking about creating images or creating files deleting them moving them around and things like that I've kind of landed on something an approach that works I think fairly well for a basic example where what we're kind of doing here is is extracting from this temp image we're pulling out the file name and pulling out the file path which looks like this here it's a it's a file protocol and this long string of data numbers and things are kind of what that looks like on and what these variables really look like under the hood and then excuse me what we're doing is calling the copy file function from the file plug-in so what we're doing is kind of an interesting way there's again there's other ways to do this that a little bit more complicated but what I'm essentially doing is copying almost feels like cheating but it works in a nice one-liner so I love it we're copying the the photo from temp storage to permanent file storage right so by looking up the data directory which is basically saying within this app here store it in that data we can also store it in the photo gallery on the phone there's a million other options like that but we're just want to store it and keep it contained within our app and not have those photos leaked out onto the device everywhere so we return that info and then come back up to the actual image is pulled back and we can say let's push that data just that reference data to where those files live on the file system into this photos array and by doing that that causes them to display within our template here I should have pulled pulled that one up there but if we look at tab to the HTML very straightforward here I'm just using an ion grid control to say okay I want to I want to show images on a grid do another couple more so I'm only storing this is live pictures you see we're doing you know different rows and two pictures per row so really a very basic but straightforward Hana photo gallery and if we look here that we're using an eye on image control and pointing the source to that web view path which again helps it display I don't wanna get too much in details for that why that is now but I have full details up on all of this code is open source and I'll have a link to it at the end so you can see exactly what this is doing and play with it you're yourself so that's really exciting and then last when we when we tap on the delete button we're removing that photo from the array updating that so that next time the app opens it's fully removed as you know properly and then calling the remove file function from the file plugin right so fairly straightforward kind of stuff now we're gonna do let's actually close that and now we're going to add and take this cordova based app and add capacitors to it so let's take a look at how that'll work and then what I'm going to do so the the kind of overview here is I run some client commands is we're going to what's really great about the backward compatibility functionality of capacitive capacitor in regards to Cordova is we don't have to do all these plugins that I'm using there are what's really great as most of them work with capacitor now it's it's it's not every single plug-in ever because there's thousands of them out there in the wild with different customization and things like that but the majority of the common ones like the camera as we'll see here do work which is really cool so what we're gonna do is we're gonna keep the ionic native and Cordova camera plug-in in place and we're going to migrate from the file plug-in to the capacitor filesystem plug-in and I'll show what that looks like on our Doc's the mole site in a second here but first let's actually add capacitor to a project so we can run that pretty easily we have built-in commands for this into in the ionic cly so we can run a onic integrations an able capacitor an ox what that does in a second so what this is doing is it's going to install capacitor core and capacitor CLI and that's the web side of the the JavaScript bits right that allow us to access and work with different plugins and things like that so that's gonna install life here and as we see the capacitor projects ready to go one thing I did want to point out in that's different a little bit then Cordova is so with Cordova they're treated as build time your projects your native projects like iOS Android are treated as build time assets so you don't typically check them into source control and what that means is sometimes when you have another developer come on and try to restore Cordova or you're working with a CI CD system and npm install' has to run fresh you have to reinstall everything if there's been different versioning diversions and updates been applied right like that have been released sometimes your versions get out of out of whack and that leads to you know a lot of confusing headaches so the comparison yeah the other trouble that comes up frequently is that because you're recreating your Xcode project and your Android studio project every single time from a fresh insult yeah you it's really tricky to actually modify really simple things that you would normally think so if you want to modify a setting and your plist file for for Xcode or modify something really simple it becomes really difficult you need like a hook to do it every time the project is recreated versus capacitor where you can actually just go and modify those things and commit those changes and there they are the next time and they're there for all the future developers who pull it and work with it absolutely and you know that's a good point so you know you may be familiar with Cordova we have this special config dot XML file that specifies all those settings as well as hooks you know the Preferences that are being set for each platform the icons and splash screens as well as what plugins to restore when it gets you know restored on a machine or in sea ICD right and you know that's fine but this is really represents kind of a black box to us because we don't what Cordova does is it takes these settings and actually applies them however it applies them in our native projects and you know what capacitor does differently as you'll see as I've added it here capacitor project well I have to add I have to run another command to see it but currently the Cordova platform and plugins folders are those front native projects that we've kind of built right and we'll see in a moment here how the difference there with capacitor what I'm going to do next is actually run an ionic build get a fresh build before we add a platform for capacitor so we're gonna use iOS today since I have my iPhone connected but as you see here we can add really easy with a couple commands we can add a new template for the native project for Android iOS electron and of course this work just doesn't capacitor works independently of ionic so if you want to use it independently or with an existing web project you can do that too which is really nice so I've done a fresh build which will generate a dub-dub-dub folder so that's all of our web assets right our compiled angular app in this case is what I'm I'm a fan of using but you can use anything any type of web framework or or not at all plain JavaScript and then I'm gonna now run ionic app at io s or we can run npx cap I add iOS just different you know ends up being the same command and so what that's going to do is install all the different iOS dependencies we need take care of everything for us and what's really you know going back to Nick's point about how this works and I'll explain the rest this a second is the iOS and Android and other platform projects are going to be top left installed at the top level so now this iOS folders appeared this is the full native project and we actually do want to check that into source control because we don't regenerate compared to Cordova we don't regenerate it every single time so what's really cool about that is if you have you know there's many reasons but I think one of the most compelling is if you have a native team they can go off and build new new native functionality they can tweak settings independently of your ionic developers or web developers and not conflict with each other because again it's a it's a it's real source code that were you know treating us like a first-class citizen and actually you know holding onto we don't rebuild it every time so that's really cool it's um it's found what I really love pointing out is because we've previously from our package.json as well as config.xml have those camera plug-ins in the file plugin added it does a bunch of things to set up this iOS project for us so you'll see that it's found a bunch of Cordova plugins and it's going to install those into this actual native project too for us which is really cool so we've got I'm using also for some of the ionic storage the sequel light storage plug-in and then there's Cordoba plug-in camera and file so that's actually adding it and then it also helpfully tells us if there aren't if there are any incompatible plugins which one it's going to skip installing so you get full info there as well as the version numbers that are being used or ignored in this case some of them just like the ionic webview capacitor has its own built in and uses the native platform webview like WK webview on iOS for example so we don't need some of these plugins anymore you know a lot of it is just kind of built in and bundled with capacitor so I'm going to clear that out and you know next before we kind of get into how this looks as well as using capacitor let's switch over to using the filesystem plugin let's take a look at what that actually means so capacitor much like Cordova did long ago has a bunch of base core let's call them core plugins and API said you can use including the camera as well file system local notifications push notifications everyone loves those and where this is you know we're only going to look at a subset today again we could move over the camera plug-in but just for time and to demonstrate that the backward compatibility you know kind of fashion of of capacitor we're just going to move over the filesystem so as you see here much like I was doing we've got read file write file remove file all those kind of things that basically match up almost one-to-one with the Cordova file plug-in so let's do that and so the first thing we need to do I'm gonna pull in some code that you can't see that I've set up already just to keep things moving so first thing we're gonna do is again we've installed that capacitor core library that gives us the the JavaScript side on you know allows us to ties it into the native bridge the native side of the project so we're importing capacitor itself as well as some of the file system objects we'll need and then what I'm gonna do is pull in the filesystem plugin so we're going to D structure that and pull in this object and then now actually use it and update our code in the camera in the camera and filesystem code here so we're gonna keep this as is for now and go right to the same picture method and I'm just going to be bold and delete exactly what that you know old code looks like and let's start with a couple things right so you know the overall algorithm for how we interact and save these files is basically the same we have this same camera image in temp storage again same thing coming into the method here we're going to first read use the filesystem read read file method to read the base64 version basically get all the bits into memory here and then we need to write it we need to write the file to the data directory within the app itself right instead of temp storage so I'm just generating using the date/time the date function in JavaScript to generate a random number and save it as a JPEG recall calling the filesystem write file method passing in that base64 data and pointing it to the application directory that's the same you know kind of thing we were doing before and then the last step is that we need to we need to retrieve the file URI so from what we're doing here from this file name that we just saved and just wrote to the filesystem we're gonna retrieve the URI which basically is this file you know the pet the string path to where it actually lives on the device so that's basically all it takes there and then coming up here there's only really one other step here so we've implemented and changed this a picture method we've got save the saved image the only thing that changes here is again we're not using the ionic web View plug-in that's Cordova based what's nice is to get the file source we can use capacitors built-in convert file source method so I'm going to swap that in basically the exact same method name but using the capacitor based one so we know confidently if something changes on the hood that will this will work you know from a long time to come so we set the webview path and convert that file source the last really minor thing is we want to update the delete picture method to use the final system plug-in so again before we have the Cordova file remove file method and this doesn't change too much right so we're gonna extract the file name again and then just use the delete file method of the filesystem plugin so very straightforward not a whole lot has to change with our code and again we're still keep in mind we're still using the ionic native camera plugin as well as the Cordova for the native bits of it right so we're still just using all those camera options and nothing's nothing's tweaked there so we'll see we'll see that in action in just a moment what I'm gonna do next is switch over to adding a flow and we'll have Nick chime in and some on some details there as I as it builds so first what we're gonna actually do is go back over to the what we're calling the ionic up so part of our app flow dashboard and I'm on a new app page here and we're gonna create a new app in app flow to represent this and I've kind of came up with the name cat flow capacitor and app flow as a simple name for this and we'll call it cat flow live and create it and again we're kind of just covering at a high level some of the functionality here but as Nick mentioned we've got the ability to package your native built in the cloud here with packaged the ability to run different CI CD type automations and what we're gonna do is actually push our code to the cloud here and run different web builds and on a web deploy and see different changes um say we're gonna change the app locally we're gonna excuse me push the changes live to the cloud and actually pull those down instead of actually running it from an updated capacitor so what that looks like so with that app loaded we'll go back to visual studio and because we created in the cloud we next need to run ionic link to link it to our ionic account and app flow account so we're gonna link to an existing app and there we go we just created cat flow live so I'm gonna I'm gonna select that that's gonna pull in the app ID and some other metadata for us and we have the option to use a bunch of different get up.get hosts for stores control and point to it we definitely recommend using github or another actual provider like bit but I'll get things like that but just for easy use for the demo I'm gonna use ionic app flow itself and we'll see how that looks there so it's going to initialize an empty git repository there and link it up as we see the project's been linked with our app ID here so that's that's really cool and what we're gonna do next is we because of the way the deploy functionality works is we need a native plugin for it right so that's gonna how that'll work well actually we'll get you know what kind of get into that maybe in a second as I as I run this but what we're gonna do is run ionic deploy ad and again all built-ins the ionic line which is really great it'll set up a bunch of different configuration for us because we've linked the app flow ID just a second ago we can just press better to pull that ID we're gonna set the channel name to master basically linking up to we can do different branch names especially if we're testing but just for easy use we'll do the master branch so that changes we apply go live and then for the update method we're gonna choose Auto which means when the app is loaded by the user it's gonna pause briefly download any new web-based bits and changes or image changes and then display that to the user which is what we're gonna show off in just a moment so that's going to install that anything to add about how deploy works well that's kind of running yeah I mean the other possibility is just for the update method that you might've seen there was the background method oh yeah it's a little different than Auto in that Otto's gonna you know show that splash screen a little longer while it downloads the update I always in production I tend to recommend the background because I think it's better user experience which just means your user is gonna they're actually going to interact with the old version of the app well the new one downloads in the background then the next time yeah nice yeah so typically I think that's what we recommend again it's more a little more seamless the way we're gonna show today so definitely up front and we'll look like a delay when really it's doing a lot of work in just in case you never know what kind of network connection news is gonna be on so found a core network and the download starts taking really long we might end up seeing that splash screen for just you know you don't usually don't look for more than a few seconds otherwise they'll get bored just miss your app yeah that's very good no not the best you actually okay so what I'm going to do next is actually push this base web build here with the file system changes and things like that and capacitor added and what we're gonna do after that is change our first tab number go back to that we're gonna change the first tab here and send out different different updates things like that so let's add that let's do get add and then get commit base changes with file system I'm gonna spell that wrong and then run git push ionic master so that's going to push our master branch up to all right up to Aunt Flo and what's what's really great is is we can because this is connected to a flow it's gonna detect it we can kick off a new build and so typically when you when you run this we're gonna say create a new web build select our commit and kick it off and so here it is now and we can see what happening tell me more about how this works so it's actually running our npm install and all the web kind of asset just like we did before but not locally yeah exactly so basically we have our server is running it's gonna pull the version of the source code that you selected your check out the correct commit and then and then basically the steps are really as simple is it's gonna run npm install to get all your dependencies has everything that's needed in order to build the application and particularly for this web build that the next step is gonna be the npm run build command so if you look in like the script section of your package.json yeah there's usually a build there you can actually I think it defaults with the ionic starters but you can customize it to do whatever you want and you can use some of the advanced features like environment variables etc it's really good sort of you know customized builds if you want to have multiple environments your app build differently and show different things at different environments and I think we did a webinar on that a while back but all those same features that worked for Cordova now that we did in that webinar also work for capacitors yeah oh yeah so I just want to point out here the web build is finished and you see here that it's um is detected that we've got a capacitor project now that's kind of some you know overridden the Cordova one that I you know just added to our project which is really cool we'll go back to here and that you'll see that the status is now green and you know what we can kind of do is assign that what we do is we assign it to a channel so what we're doing here is we'll send different commits and different functionality but you know when you're ready in a real example real like app is when you have new features but maybe a bug fix that you're competent in hitting deploy here will actually make that live for your users so we see now that the build has been deployed and it's attached to that master Channel that we're also running on our ant locally right and then so what I'm going to do next is to actually show a different change and actually ship that without updating our local copy to the app here is we will make some web-based changes to the tip the first tab and then actually not run it sorry not actually run this and copy those web bits into the capacitor project well it will open the app and it will grab it from out flow instead so to kind of show off and prove that this is pulling it from the cloud so first what I kind of like to do is we'll come up with I've got a little gifty gift that will replace the the basic shapes image here with let's do that okay and let's change some of our text so again we can change images we can change CSS the HTML so we'll change some of that and say app flow says hello okay and we'll save that so just make some you know pretty straightforward changes and will now run yep ad and we'll commit it and we'll say deploy changes and do get push ionic master and so again that's gonna that's gonna pick up and run on the web end of things and you know now let's actually run this on the device so we're gonna run ionic or npx cap open iOS and again the what capacitor does is embraces the native tooling so Xcode Android and we well that is a little bit of an initial learning curve to learn these tools as we'll see it's actually pretty straightforward to you know open this up take take a look at the app and run it on your device there's only I'm still learning honestly day-to-day but there's only a handful of little steps that you have to do to run it so we're gonna look at our app the only thing I have to do just like a Cordova app is assign my team I'm going to assign it to our company here and then hit play let's do that Oh I'll show go back to loading QuickTime and in the meantime let's see let's refresh the build here and we'll wait to assign that to master so while that's building that's that's totally fine we'll assign that and then see you know ideally see these gift changes live and everything if I wanted to what's really neat is I can just a brief overview while that's building you can kind of look at automations what's really cool is I can setup all different types of things and avoid all these manual steps of you know setting up web builds or packaging our native apps so if we wanted to like automatically build for the web as we saw we can do that we can name it that we can push to if we wanted to we could push to that Brent the master branch or a test branch so I'll say master we can choose different automation types right like web packaged things like that and then if we really were bold we could assign it to production or master right away which means if you had like test users on a different test branch for your QA team maybe or a QA environment we can set that up as well as well as I you know I believe with the web hooks as well Nick we can we can tie into and send our the native build you know binaries to other CIT DS systems or maybe post a slack update you know when that bill has gone through right yeah books an advanced features where you can hook in and get the status of the bill no observer I think you can get you know I'd the messages to your slack or some yeah awesome yep so I'm gonna go back here and then so here's our deploy changes as we just you know change that text and stuff I'm gonna say assign to the master Channel and hit deploy and the deploy has been built so let's go back to got Xcode running let's see it and hopefully I'm gonna toggle my iOS device here now so it's still showing showing the old update so I'm gonna I'm gonna stop and and you know cancel that app there and let's give it a fresh load oh look at that awesome so as we saw III center of this Chris Pratt related giffy gift and replace that image back over here let's go back to here back up to here and the image source as well as at flow says hello so different tax changes that's just a very silly simple example but as you can see really powerful because I didn't the app was already installed on my device I didn't didn't copy it from anywhere else and it automatically using that auto function like loaded the new bits at the splash screen and then gave you that new experience um yeah so let me see what we're gonna do next year but yeah so you can see that you know really easy powerful concept and I think what I love too is let's say that actually was there was an issue with it we rolled out a new bug but you can always the gif is just not professional I mean it's it's fun but you know you probably shouldn't run that on something professional like a webinar perhaps so maybe we need to roll that back right so we can actually reassign that back to the master Channel you can actually go to and the channels oh yeah yeah oh yeah yeah there's a nice history so you click on master there you actually see this man and you can just click the roll back button they'll actually oh cool where am I missing that roll row back yeah yeah yeah well so just now Boyd so it's Larsen real you know we're working just the two of us here together but imagine we're a remote team or we're just on any kind of dev team we get one dashboard where you can see the history of these changes so you can see what the latest version and snapshot of the app is and roll it back so I'm going to come back here and kill that whoo I got all my other apps open here and then you know so theoretically we're back on you know those changes before the gift let's see oh yeah here we go whoo-hoo awesome so we averted disaster we rolled it back before you know our customer saw it or something and we're all happy and good right cool all right so that's kind of our demo of that let's kind of get into some brief takeaways and we've got some time for some questions so you know the main thing to mention here again is we've got mostly as I said backward compatibility with capacitor we moved from the file cordova plug-in to the file system capacitor plug-in and kept ionic native in Cordova for the camera and ionic storage for storing the reference to that photo data right you know general strategy here we've got we've got a whole multi-page strategy guide on the in the capacitor Doc's on how to move from Cordova to capacitor but basically at a high level we recommend you know ought take us if you're gonna move to capacitor and you should it's awesome you should audit your existing plugins and then beginning begin migrating them through capacitor if the functionality you know matches or makes sense but also take it as a set as step back to see you know do I need this quarter of a plug-in in general like independent of capacitor take it as an opportunity to you know get a fresh look that can help removing plugins that you don't need can help speed up your performance especially boot time and things like that so it's always a good it's kind of a good exercise to bundle in there and you can continue using Cordova if you need to right that's perfectly fine and you can use them together as well and as we saw just just a fraction of them and mainly but you know especially a live deploy feature is now live and app flow and the package and all these automations are in you know support capacitor and we did just demo deploy but I would urge nu the folks out there who are may already be using the package features to if they're using the code or try a migrating capacitor because I actually do think it's gonna provide a better experience simply because of the the fact but it's gonna really simplify G bugging while your builds might be failing out of out flow for the sake that you can go into those native projects you can change the finals commit them push them where it says the sort of Cordova style where you have to reconstruct them every time it just it does sometimes lead to headaches when you're trying to debug while your build might be and I really do think the capacitor is going to be a better experience for people building packages yeah even for me putting together this demo is miles different and much better yeah for sure and we've got a bunch of resources to mention really quick so capacitor lives at capacity ionic framework comm and of course ionic framework comm you can go to all your info and news and updates on the ionic framework in our platform and again check out that in within the docs check out the migrate migrating from Cordoba to capacitor section we've got a lot of interesting best practices and other things there apfel I provided it has its own URL but also I'm kind of giving you directly to the documentation get started try shipping your own live deploy package up your own build switch over to try switching over to Cordova like Nick said it's a great thing to start crying now and all of the demo code really excited this time listen to all your great feedback from other presentations I've got all the demo code up on github so check that URL out there and we'll of course send out this recording and all these links here after the webinar so you can actually click on those and actually interact with them right so great thank you very much again my name is Matt NEFCO and this is nicaya we're gonna switch over to answering your questions now about all things ionic and let's do that just give us a second here okay okay so it's not gonna let me pull that up there all right you see that okay sweet all right so first question is is ionic the right fit if I want to build a PWA using bootstrap based design templates that already has samples of layouts cards and elements yeah great question let's see here yeah so you don't necessarily need the ionic framework itself all of our UI templates and and components and things definitely highly encourage you to check us out though compared to say a bootstrap or other things one thing we just didn't have time to cover is ionics components are built-in and come with the ios and android styles and automatically adapt themselves and detect what platform you're running on on your device so there's all these you know what's built into that that you don't necessarily get with other libraries and frameworks are animations and best practices and other styles that would take just all this time that we've invested for you you get that out of the box for free and the benefit there is you can you don't have to worry about especially for mobile that experience you have to worry about the UX and UI and rebuilding that you can just focus on building your app which as we all know building software there's enough to do with your business or your team's apps right so you can definitely use it with you know bootstrap on its own and add PWA functionalities the progressive web app concepts are not ionic specific their web specific so there's trouble defying guides online on how to enable your web app to be a PWA in general and certainly if you want to leverage capacitor as well in that application there's nothing stopping you from pwace especially if you think you might also want to combine them yep yep yeah and it kind of gives you in a better position because sometimes you say you know I don't need a desktop app or I'm not worried about the web on desktop or web on mobile I just want to build for iOS and Android and that's perfectly fine right every every app has this different use cases but what's great about using ionic I think is when you if if when you and when and if you already a need to move for those if requirements change or your custom you find out your customers on a different platform you're ready to go and instead of having to rewrite things or you know all that kind of stuff which adds its time and cost money right other great questions here see we really like the only thing missing is server-side rendering because of some code that I on depends on so actually I don't have a full update there I know that the framework team is working on server-side rendering especially with I believe angular to start so traditionally angular's excuse me I onyx been tied to the angular framework that's a whole other spiel but basically with the latest version of ionic we work with all the different app frameworks or with vanilla JavaScript and on your own so look for an update on that soon will for sure that'll be blog worthy that'll be announced of worthy to share with you so hang tight I know that functionality is coming soon really excited for that too let's see maybe Nick you can take this one so what are some of the benefits of building a capacitor application using app flow in the cloud versus local builds on my machine which is really great that's an important question yeah so there's a number of things I mean I think really the some of the most benefits you're gonna see is that you're gonna have a reliable build environment consistently to push sure burst your code up to you get the same environment there's consistency you can set it up once you can set up the automations so that every time you're pushing new code checking new code in that can run and it really really helps power teams who are building just because you might have multiple developers checking in multiple code a day and you want to know if your builds are succeeding or failing and also I'm sure everyone in the world has had the problem of like it works on my machine kind of thing and like setting up the complex environments of getting xcode android studio all these different dependencies and things that's to say or even in the node environment for just building web applications these days can be really tricky to get set up on one person's device the next person is the mexican team before or five it just you know grows exponentially with every developer you add to the team right so Alexa T has potential for issues right and so and then you're gonna have to have someone who's like the build guy like hey Jo can you know my app for me and maybe Jo's on vacation or whatever Pablo doesn't go on vacation so you can just trust it's gonna be better now yeah it's always gonna be there you have a consistent environment all your team can push to age or even there's a solo developer it's just nice to be able you have consistent clean of environment and then exactly you can't deploy features like to be able to ship your and to really do truly continuous integration you know in a mobile situation that's not really been possible for the most part when you're trying to release through Apple and takes a couple days usually you get your binaries approved yeah especially when I mean I've been there as an app developer myself you have it not necessarily been a bug fix but just a simple new feature or just tweak to some some of the text some of the branding of the app to go many days through the review process it's just painful right when you can ship it you saw within minutes we can have a new update to your users I it's just so many possibilities unlock them it's not even all the the negative things like bugs and other you know fixes like that it can be you know account new features or a/b testing and all that kind of stuff yeah very nice yeah we got another couple couple questions here my team and I really enjoy enjoy stencil Jas and I've been building all of our apps with stencil instead of angular this capacitor work well with stencil whereas angular preferred and then the other question is are there caveat to using stencil with capacitor so yeah I was just gonna say so capacitor really isn't picky at all about what you're building with and you can use you know react you angular yeah ionic with any of those things now yeah whichever whichever sort of framework you want including stencil if you if you so choose yeah and really if it runs in the web it's gonna run in capacitor and you're just gonna have access to those native api's which is really nice and to be honest for the most part senseless is pretty tested because we built and we build the on a framework using it it's a tool for us to help build our framework and exactly yeah so if you can if you can run on the web you can run an ambassador yeah so of course traditionally we've we've been tied to angular and still loving they're still great supporters of it and everything and you know brief note on stencil that's our web component compiler and things like that you can you could build really great and powerful components without using a framework or build those components and you know bring them into a framework like angular react and you know to just expand on next point capacitor much like Cordoba is just the native run site run time side of the equation so yes it doesn't whatever web code you use a capacitor doesn't care it's separate of that what I want to show here really quick is we have a simple capacitor configuration that was created and you'll recognize our app ID app name and things like that and what really matters is you're pointing it to a web directory so that's where your web code that gets needs to be compiled and built out that's where capacitor is going to look when we've copied that into our project typically dub-dub-dub has been very popular for ionic apps but you can really whatever tools or NPM scripts you're running you can point it to anything as long as that folder exists it will work and you know work with capacitor you know as we saw it over here that's our folder companion with all our compiled JavaScript web assets and everything so again not not a problem to use that with stencil or any other and other framework or anything let's see Oh another great question are there any plans for capacitor to target wearable platforms such as watch OS or where OS has build targets so currently today we don't target those but we're always open to new feedback and looking at new platforms so you know having that kind of feedback come in is important so be sure to drop us a line we've got our emails and Twitter up there as well as the if you need professional assistance or want to learn more about some of our other more integrated and different plans for a flow reach out to us at sales at ionic framework comm but you know in general not today we don't have support for that we're kind of more focused on mobile and the web and desktop things like that but if there's a compelling use case please let us know we're always want to hear about you know how our you know developers and users are extending ionic and in this case capacitor to new platforms yeah and I think let's see yeah I think that's about all the time we have for questions today so I want to thank you all again for joining us and I'm Matt as part of our Hatteberg developer relations team here and again Nick thank you so much for joining us we'll send out an email with the up the webinar recording and all those links on the resources we showed you so thank you again and until next time we will see you you

Channel: Ionic

Views: 9,863

Keywords: ionic framework, capacitor, Cordova, ionic, Appflow, Angular

Id: tkgNuSG5FJQ

Length: 54min 36sec (3276 seconds)

Published: Wed Jul 24 2019