The document provides an overview of hybrid and native mobile app development using the Ionic and Capacitor frameworks. It discusses the pros and cons of native versus hybrid apps, detailing features of the Ionic framework as a cross-platform mobile UI SDK and the capabilities of the Capacitor framework for integrating existing web applications into native environments. Additionally, it includes a brief history of mobile development technologies and highlights the process for creating and utilizing custom plugins with Capacitor.

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