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

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

• App Types – Hybrid VS Native • Ionic Framework – a short overview • Capacitor Framework • Live Coding • 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 - 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

(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

No content

Live Coding Building Apps with Ionic

Capacitor Bring your web apps to native devices

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

• 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 • Plugins can be published on npm or added into the project itself Writing your own capacitor plugins

Follow me