Angular goes Mobile iOS und Android Apps mit dem Capacitor Framework Daniel Sogl @sogldaniel Consultant

Daniel Sogl • Consultant @ Thinktecture AG • Angular Developer since 2015 • Maintainer of Awesome Cordova Plugins (aka @ionic- native) About me

• App Types – Hybrid VS Native • Ionic Framework – a short overview • Capacitor Framework • Live Coding • Q&A Agenda

Hybrid Apps VS Native Apps Pros & Cons Daniel Sogl @sogldaniel Consultant iOS und Android Apps mit dem Capacitor Framework

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

•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 - 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

Ionic Framework Write Once – Beautiful everywhere Daniel Sogl @sogldaniel Consultant

(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

Build native looking UIs with Ionic One code base to rule them all Daniel Sogl @sogldaniel Consultant

No content

Capacitor Bring your web apps to native devices Daniel Sogl @sogldaniel Consultant

• 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

• 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

„There's an app plugin for that“ • The Capacitor team provides core plugins (camera, storage, HTTP, keyboard, etc.) • Developers can contribute to the official Capacitor community project • Custom plugins can be published individually • Existing Cordova plugins can be used Capacitor Plugin Eco-System

System Requirements 1. Node.js LTS 2. iOS 1. Xcode 2. Homebrew 3. CocoaPods 3. Android 1. Android Studio 2. Android SDK Bring existing apps to native devices

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 platforms - npx cap add ios | android - command 4. Run the - npx cap sync - command 5. … 6. Profit! Bring existing apps to native devices

Capacitor Live Demo Daniel Sogl @sogldaniel Consultant

Writing your own capacitor plugins Native APIs without a native App Daniel Sogl @sogldaniel Consultant

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

• Capacitor allows developers to bring any web app to native devices • Easy-to-use core plugins • Community-driven plugin ecosystem that is backward compatible with Cordova plugins • Custom plugins can be created using the easy-to-use Capacitor plugin API • Even native views can be displayed • More details? Expert 1:1 Summary

Thank you For your attention and questions! Daniel Sogl @sogldaniel Consultant