DevFest KA 2024 - Web goes Native: iOS und Android Apps mit dem Ionic & Capacitor Framework

In diesem Talk zeige ich dir, wie du deine Web-Anwendungen mit dem Ionic & Capacitor Framework auf das nächste Level bringst und sie als iOS- und Android-App bereitstellst. Ich führe dich Schritt für Schritt durch den Prozess, Web-Apps in mobile Anwendungen zu verwandeln und mit nativen Plugins zu erweitern, um Gerätefunktionen optimal zu nutzen.

Transcript

1. Web goes Native iOS und Android Apps mit dem Ionic & Capacitor Framework Daniel Sogl @sogldaniel Architect & Trainer
2. Daniel Sogl • Software Architect @ Thinktecture AG • Angular Trainer @ Angular Architects by Manfred Steyer • Angular Developer since 2015 • Maintainer of Awesome Cordova Plugins (aka @ionic- native) About me
3. • App Types – Hybrid VS Native • Ionic Framework – a short overview • Capacitor Framework • Live Coding • Q&A Agenda
4. Hybrid Apps VS Native Apps Pros & Cons
5. •Native Apps •Cross-Platform Apps •Hybrid-Apps •Web-Apps App Types
7. 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
8. Ionic Framework Write Once – Beautiful everywhere
9. (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
10. Build native looking UIs with Ionic One code base to rule them all
12. Live Coding Building Apps with Ionic
13. Capacitor Bring your web apps to native devices
14. The days before a simple to use API • 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
15. • 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
16. 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
17. Writing your own capacitor plugins Native APIs without a native App
18. 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 • Plugins can be published on npm or added into the project itself Writing your own capacitor plugins
19. Follow me