The document summarizes the launch of Capacitor 1.0, a new way to build native mobile apps with Ionic. It introduces Capacitor as the spiritual successor to Cordova, highlighting key differences like using modern native tools on iOS and Android. The presentation demonstrates migrating an existing Ionic app to use Capacitor APIs through adding them to the project. Resources provided include the Capacitor documentation, GitHub repositories, and enterprise support options.

1. Capacitor 1.0 Launch:
A new way to build native mobile apps with Ionic
May 2019

2. Housekeeping Items
➔ This webinar is being recorded
➔ All registrants will receive a link to the on-demand
recording and slides following the event
➔ The presentation will be about 30 minutes
➔ You can submit questions to the speakers during the
live event using the Q&A panel

3. Who am I?
Matt Netkow
Head of Developer Relations
twitter.com/dotNetkow
github.com/dotNetkow
matt.netkow@ionicframework.com

4. Today’s Agenda
➔ Ionic and Hybrid App Background
➔ Cordova: Brief History
➔ Introducing Capacitor
➔ Differences Between Cordova and Capacitor
➔ Live Demo!
➔ Cordova Migration Strategy
➔ Getting Started, Resources
➔ Q&A

5. A Personal Note: Why I’m Excited
2009: Professional .NET developer
2012: “I should learn JavaScript…” 🤔
2013 - 2018: Built Cordova apps 👨‍💻
Saw the potential despite challenges
Built several successful cross-platform apps
Earned thousands from app store sales 💰
2018: Joined Ionic 🥳
2019: Capacitor 1.0 🤩

6. Ionic Framework
Mobile-ready UI library that works
everywhere: any platform, any device,
any framework.
➔ Build for iOS, Android, Electron, PWAs, Web
➔ One codebase across all platforms
➔ Use basic web skills: HTML, JS, CSS
➔ Full access to Native APIs and Plugins

7. What is a Hybrid App?
HTML, CSS, JavaScript
Runs in “browser” WebView
Wrapped in native app shell
Access device capabilities via plugins
Drop into native code any time
Embed into existing native apps
In sum: A native app!
Cordova/
PhoneGap

8. Cordova:
A Brief History
“Write Once, Run Everywhere”
Created: 2008
CLI: 2013
2019: Ongoing, minor updates

9. Native Platforms Move Fast
iOS, Android constantly undergoing change:
➔ Typically, new OS and hardware every year
➔ Modern plugin system with CocoaPods and Gradle
➔ Modern Languages: Swift & Kotlin

10. What if we created a spiritual
successor to Cordova that used
these modern native tools?

11. E N T E R :

12. What is Capacitor?
Cross-platform runtime: iOS, Android, Desktop, and the Web
Backward-compatibility: Support for Cordova
#UseThePlatform: Web-focused APIs that stay close to Standards
“Code Once, Configure Everywhere”: Modern Native tooling for easy
native project maintenance
Inspiration: Cordova, React Native, and Turbolinks

13. Differences Between Cordova & Capacitor
Native Project Management
C H A N G E B E N E F I T
Source assets (vs. build time assets) Native mobile teams can work alongside web teams
Add custom native code without creating a new plugin
No custom configuration (i.e. config.xml) More visibility into native project changes & better app
maintainability
Easier to troubleshoot native issues
Easier upgrades via step-by-step upgrade instructions
Use Platform-specific IDEs Faster, more typical app dev experience for each
platform

14. Differences Between Cordova & Capacitor
Plugin & CLI Management
C H AN G E B E N E F I T
Built as Frameworks (iOS) & Libraries (Android)
Installed via lead dependency management tools
(CocoaPods & Gradle/Maven)
No copying of plugin files directly into the project. Develop
plugins outside of an app!
“Generate plugin” command for complete plugin
scaffolding
Less error-prone and makes it easier to find help in the
community for each specific platform
Registers and exports all JavaScript for each plugin
based on the methods it detects at runtime
All methods available at runtime. No more need for
“deviceready” event!
Capacitor CLI installed locally into each project Easier to manage versions of Capacitor across apps

15. D E M O T I M E !
Add to Existing Ionic App &
Demoing Capacitor APIs

16. Cordova Migration Strategy
W H Y M I G R A T E ?
Long-term stability and peace of mind
Cordova backward-compatibility
Ionic to continue to invest in Cordova ecosystem
The Future = Ionic + Capacitor

17. Cordova Migration Strategy
M I G R A T I O N P R O C E S S
Audit, then migrate existing cordova plugins
Capacitor Core and Community APIs
See “Incompatible Plugins” list in Capacitor Docs
Continue to use Cordova or Ionic Native if Needed

18. The Ionic Stack
A world-class app building experience.
Fully integrated from top to bottom:
➔ Your Framework of choice—Angular, Vue,
React, etc...
➔ Ionic 4 UI toolkit and components
➔ Capacitor native runtime to reach iOS,
Android, PWA, and Desktop
➔ Your backend of choice—AWS, Azure,
Google Cloud, Firebase…

19. 🎉 V E R S I O N 1 . 0 🎉

20. Changes From
Capacitor Beta to 1.0
➔ Native project scaffolding tweaks
➔ Stability: Bug fixes, community PRs
➔ Better Integration with Ionic Stack
➔ Core APIs: More platforms supported
➔ Complete documentation refresh

21. Getting Started
W E B
cd my-app
npm install @capacitor/core @capacitor/cli
npx cap init
I O N I C
cd my-app
ionic integrations enable capacitor

22. ➔ Site: capacitor.ionicframework.com
◆ See “Migrating from Cordova to Capacitor” in docs
➔ Source: github.com/ionic-team/capacitor
➔ Capacitor “Kitchen Sink” API app: github.com/ionic-team/capacitor-plugin-demo
➔ Recording + links emailed after webinar!
Enterprise support packages for Cordova and Capacitor available
Resources

23. </presentation>
Questions?