Web goes Native iOS und Android Apps mit dem Ionic & Capacitor Framework Daniel Sogl @sogldaniel Consultant & Trainer

• Software architect @ Thinktecture AG • Angular Trainer @ Angular Architects • Angular Developer since 2015 • Focusing Mobile Apps & FinTech • Maintainer of Awesome Cordova Plugins (aka @ionic- native) About me

• First half: Ionic • Hybrid Apps VS Native Apps – Pros & Cons • What is the Ionic Framework and its history • How to build native looking apps using Ionic • Live-Coding • Q&A • Break • Second half: Capacitor • What is Capacitor and Capacitor Plugins Eco System • Live-Coding • Custom Native Plugins • Outlook: bring your apps to the app stores • Q&A Agenda

Hybrid Apps VS Native Apps Pros & Cons

•Native Apps •Cross-Platform Apps •Hybrid-Apps •Web-Apps App types

No content

Pros & Cons Native Apps + build on top of the latest platform APIs + best possible performance + better user experience - Can only be executed on the targeted platforms - Higher development costs - Longer time to market Hybrid Apps + Cross-platform with one code base + Faster development speed + Lower costs and faster time to market - Lower performance - Limited access to native features - Limited UI/UX based on the native design systems Hybrid Apps

Ionic performance comparison

No content

No content

No content

Ionic in production A short demo of what is possible

Ionic Framework Write Once – Beautiful everywhere

(And its history) • Open-Source cross platform mobile UI SDK • Provides components for Material Design & Human Design System (Android & iOS) • Built on top of web components using Stencil.js • Supports Angular, React, Vue and plain JS • Enterprise plugins & CI/CD-systems • Micro frontends with Ionic-Portal What is the Ionic Framework

Build native looking UIs with Ionic One code base to rule them all

No content

• Ionic provides all UI-elements (and icons) to build native like UIs • Fully customizable thanks to CSS-variables & shadow dom • Theme generators for dark & light themes • Ionic-CLI & VS-Code plugins • Up to date design system changes based on the latest MD & Human-Design Guidelines Build native looking UIs with Ionic

Live Coding Building Apps with Ionic

Break Feel free to ask questions 

Capacitor Bring your web apps to native devices

The days before a simple to use API with TypeScript • 2008 – Apple releases the App Store • 2009 – Apache Cordova (aka PhoneGap) was introduced • … • 2019 – Capacitor 1.0 was released to the public A short look back

(And its history) • Open-Source Cross Platform Mobile Runtime SDK • Web-Framework agnostic • Plugin Ecosystem for all relevant core functionalities • APIs for native & web Possibility to write your own capacitor Plugins without deep native platform knowledge • Native project integration thanks to Xcode and Android Studio Project files • Backwards compatible with Cordova What is the Capacitor Framework

You only must run four commands (more or less) • Every existing web app can be used thanks to the framework agnostic API 1. Add the Capacitor-CLI to the existing web app 2. Run the - npx cap init – command 3. Add the required platforms (iOS or Android) 4. Run the – npx cap sync – command 5. … 6. Profit! Bring existing apps to native devices

Writing your own capacitor plugins Native APIs without a native App

Access custom native APIs or even native views • Plugins can be added thanks to capacitors TypeScript based API • Target any native API • Even native Views can be displayed and integrated (for example the Post Ident SDK) • Plugins can be published on npm or added into the project itself Writing your own capacitor plugins

• GitHub: https://github.com/danielsogl • X: https://x.com/sogldaniel • LinkedIn: https://www.linkedin.com/in/daniel-sogl/ • TT: https://www.thinktecture.com/thinktects/daniel-sogl/ Follow me