Web goes Native - iOS and Android Apps with Ionic & Capacitor | MD-DevDays 2025

Transcript

1. Web goes Native iOS and Android Apps with Ionic & Capacitor Daniel Sogl @sogldaniel Software architect
2. Daniel Sogl • Software architect @ Thinktecture AG • Focus: Angular, Capacitor and AI-Coding • Creator of https://codingrules.ai • Socials: https://linktr.ee/daniel_sogl About me iOS and Android Apps with Ionic & Capacitor Web goes Native
3. •Native Apps •Cross-Platform Apps •Hybrid-Apps •Web-Apps App Types Performance sharable code iOS and Android Apps with Ionic & Capacitor Web goes Native
4. iOS and Android Apps with Ionic & Capacitor Web goes Native
5. Pros & Cons Native Apps + build on top of the latest platform APIs + best possible performance - Can only be executed on the targeted platforms - Higher development costs - Longer time to market Hybrid Apps + 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 iOS and Android Apps with Ionic & Capacitor Web goes Native
6. Web goes Native iOS and Android Apps with Ionic & Capacitor Look beyond the horizon
7. (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 with Stencil.js • Supports Angular, React, Vue and Vanilla JS • Enterprise plugins & CI/CD-systems • Micro frontends with Ionic-Portal for native apps What is the Ionic Framework iOS and Android Apps with Ionic & Capacitor Web goes Native
8. iOS and Android Apps with Ionic & Capacitor Web goes Native
9. • Install the Ionic CLI • Choose a template (blank, list, menue) • Choose a framework (React, Angular, Vue) • Add Capacitor or Cordova Web goes Native iOS and Android Apps with Ionic & Capacitor Create your first Ionic App
10. A short look back • 2008 – Apple releases the App Store • 2009 – Apache Cordova (aka PhoneGap) was introduced • … • 2019 – Capacitor 1.0 was released to the public Capacitor iOS and Android Apps with Ionic & Capacitor Web goes Native
11. • 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 iOS and Android Apps with Ionic & Capacitor Web goes Native
12. 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 iOS and Android Apps with Ionic & Capacitor Web goes Native
13. • Capacitor provides all core plugins (camera, GPS, NFC, Storage, etc.) • Cummunity developed plugins for all common native libs (Firebase, Stripe, etc.) • Unified permissions API for iOS, Android and Web Web goes Native iOS and Android Apps with Ionic & Capacitor Add Capacitor plugins
14. Access custom native APIs or even native views • Own Plugins can be added thanks to capacitors TypeScript based API • Target any native API • Native Views can be displayed and integrated • Plugins can be published on npm or added into the project itself Writing your own capacitor plugins iOS and Android Apps with Ionic & Capacitor Web goes Native
15. https://linktr.ee/daniel_sogl