SlideShare a Scribd company logo
Reimagining Cordova:
Building Cross-Platform Web Apps with
Matt Netkow, Sr Product Evangelist
@dotNetkow; matt.netkow@ionic.io
Later:
Q&A with Max Lynch
CEO, Ionic
@maxlynch
A Brief History: Cordova
Created: 2008
CLI: 2013
Write Once, Run Everywhere
2018: Ongoing, minor updates
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 and Kotlin
What if we created a spiritual successor
to Cordova that used these modern
native tools?
E N T E R :
What is Capacitor?
Cross-platform runtime: iOS, Android, Desktop, and Web
#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
DEMO TIME!
Camera, Local Notifications, Toast
iOS, Android, Web!
Need More Functionality?
Includes common plugins (Camera, Geolocation, File, etc)
Backwards compatible with majority of Core Cordova Plugins
Provides tooling for writing new Plugins
$ npx @capacitor/cli plugin:generate
Capacitor and Cordova Recap
Feature Cordova Capacitor
Supported Platforms iOS, Android, Windows
Phone
iOS, Android, Desktop
(Windows, Mac, Linux), Web,
PWA, and beyond!
Configuration style Abstracted (Config.xml) Per-platform (Info.plist,
AndroidManifest.xml)
Native platform control Limited Full control
Production ready? Yes, stable Soon
➔ Site: https://capacitor.ionicframework.com
➔ Source: https://github.com/ionic-team/capacitor
➔ Matt’s demo code:
https://github.com/dotNetkow/ionic-conference-app
➔ Recording + links emailed after webinar!
Enterprise support packages for Cordova and Capacitor available
Resources
</presentation>
Questions?
Matt Netkow
Sr Product Evangelist
@dotNetkow; matt.netkow@ionic.io
Max Lynch
CEO
@maxlynch

More Related Content

What's hot

Intro to react native
Intro to react nativeIntro to react native
Intro to react native
ModusJesus
 
Openshift Container Platform
Openshift Container PlatformOpenshift Container Platform
Openshift Container Platform
DLT Solutions
 
React Native - Getting Started
React Native - Getting StartedReact Native - Getting Started
React Native - Getting Started
Tracy Lee
 
GitOps and ArgoCD
GitOps and ArgoCDGitOps and ArgoCD
GitOps and ArgoCD
Omar Fathy
 
Présentation du DevOps
Présentation du DevOpsPrésentation du DevOps
Présentation du DevOps
Cyrielle Orban
 
Why Users Are Moving on from Docker and Leaving Its Security Risks Behind (Sp...
Why Users Are Moving on from Docker and Leaving Its Security Risks Behind (Sp...Why Users Are Moving on from Docker and Leaving Its Security Risks Behind (Sp...
Why Users Are Moving on from Docker and Leaving Its Security Risks Behind (Sp...
Amazon Web Services
 
CICD Using CircleCI
CICD Using CircleCICICD Using CircleCI
CICD Using CircleCI
Knoldus Inc.
 
Introduction to .NET Core
Introduction to .NET CoreIntroduction to .NET Core
Introduction to .NET Core
Marco Parenzan
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
Sambhu Lakshmanan
 
Reverse Engineering Android Application
Reverse Engineering Android ApplicationReverse Engineering Android Application
Reverse Engineering Android Application
n|u - The Open Security Community
 
Gitops Hands On
Gitops Hands OnGitops Hands On
Gitops Hands On
Brice Fernandes
 
Introduction to Docker Compose
Introduction to Docker ComposeIntroduction to Docker Compose
Introduction to Docker Compose
Ajeet Singh Raina
 
ASP.NET Core MVC + Web API with Overview
ASP.NET Core MVC + Web API with OverviewASP.NET Core MVC + Web API with Overview
ASP.NET Core MVC + Web API with Overview
Shahed Chowdhuri
 
React Native
React NativeReact Native
React Native
ASIMYILDIZ
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
Thinh VoXuan
 
Platform Engineering
Platform EngineeringPlatform Engineering
Platform Engineering
Opsta
 
Red hat cloud platforms
Red hat cloud platformsRed hat cloud platforms
Red hat cloud platforms
Giovanni Galloro
 
Software Engineering Culture - Improve Code Quality
Software Engineering Culture - Improve Code QualitySoftware Engineering Culture - Improve Code Quality
Software Engineering Culture - Improve Code Quality
Dmytro Patserkovskyi
 
Azure DevOps Tutorial | Developing CI/ CD Pipelines On Azure | Edureka
Azure DevOps Tutorial | Developing CI/ CD Pipelines On Azure | EdurekaAzure DevOps Tutorial | Developing CI/ CD Pipelines On Azure | Edureka
Azure DevOps Tutorial | Developing CI/ CD Pipelines On Azure | Edureka
Edureka!
 
Azure DevOps CI/CD For Beginners
Azure DevOps CI/CD  For BeginnersAzure DevOps CI/CD  For Beginners
Azure DevOps CI/CD For Beginners
Rahul Nath
 

What's hot (20)

Intro to react native
Intro to react nativeIntro to react native
Intro to react native
 
Openshift Container Platform
Openshift Container PlatformOpenshift Container Platform
Openshift Container Platform
 
React Native - Getting Started
React Native - Getting StartedReact Native - Getting Started
React Native - Getting Started
 
GitOps and ArgoCD
GitOps and ArgoCDGitOps and ArgoCD
GitOps and ArgoCD
 
Présentation du DevOps
Présentation du DevOpsPrésentation du DevOps
Présentation du DevOps
 
Why Users Are Moving on from Docker and Leaving Its Security Risks Behind (Sp...
Why Users Are Moving on from Docker and Leaving Its Security Risks Behind (Sp...Why Users Are Moving on from Docker and Leaving Its Security Risks Behind (Sp...
Why Users Are Moving on from Docker and Leaving Its Security Risks Behind (Sp...
 
CICD Using CircleCI
CICD Using CircleCICICD Using CircleCI
CICD Using CircleCI
 
Introduction to .NET Core
Introduction to .NET CoreIntroduction to .NET Core
Introduction to .NET Core
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
 
Reverse Engineering Android Application
Reverse Engineering Android ApplicationReverse Engineering Android Application
Reverse Engineering Android Application
 
Gitops Hands On
Gitops Hands OnGitops Hands On
Gitops Hands On
 
Introduction to Docker Compose
Introduction to Docker ComposeIntroduction to Docker Compose
Introduction to Docker Compose
 
ASP.NET Core MVC + Web API with Overview
ASP.NET Core MVC + Web API with OverviewASP.NET Core MVC + Web API with Overview
ASP.NET Core MVC + Web API with Overview
 
React Native
React NativeReact Native
React Native
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Platform Engineering
Platform EngineeringPlatform Engineering
Platform Engineering
 
Red hat cloud platforms
Red hat cloud platformsRed hat cloud platforms
Red hat cloud platforms
 
Software Engineering Culture - Improve Code Quality
Software Engineering Culture - Improve Code QualitySoftware Engineering Culture - Improve Code Quality
Software Engineering Culture - Improve Code Quality
 
Azure DevOps Tutorial | Developing CI/ CD Pipelines On Azure | Edureka
Azure DevOps Tutorial | Developing CI/ CD Pipelines On Azure | EdurekaAzure DevOps Tutorial | Developing CI/ CD Pipelines On Azure | Edureka
Azure DevOps Tutorial | Developing CI/ CD Pipelines On Azure | Edureka
 
Azure DevOps CI/CD For Beginners
Azure DevOps CI/CD  For BeginnersAzure DevOps CI/CD  For Beginners
Azure DevOps CI/CD For Beginners
 

Similar to Reimagining Cordova: Building Cross-Platform Web Apps with Capacitor

Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
Cihad Horuzoğlu
 
React native app development
React native app developmentReact native app development
React native app development
JhonthSmith
 
Hybrid App Development, Redefined
Hybrid App Development, RedefinedHybrid App Development, Redefined
Hybrid App Development, Redefined
Ionic Framework
 
Hybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJSHybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJS
Zvika Epstein
 
Top Technologies to Develop Mobile Apps.pptx
Top Technologies to Develop Mobile Apps.pptxTop Technologies to Develop Mobile Apps.pptx
Top Technologies to Develop Mobile Apps.pptx
GokulKanna18
 
NCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsNCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile Apps
John M. Wargo
 
Cross-Platform Development
Cross-Platform DevelopmentCross-Platform Development
Cross-Platform Development
Syed Owais Ali Chishti
 
Capacitor 2.0 Launch
Capacitor 2.0 LaunchCapacitor 2.0 Launch
Capacitor 2.0 Launch
Ionic Framework
 
Building mobile apps using meteorJS
Building mobile apps using meteorJSBuilding mobile apps using meteorJS
Building mobile apps using meteorJS
Entrepreneur / Startup
 
Hybrid Mobile Applications
Hybrid Mobile ApplicationsHybrid Mobile Applications
Hybrid Mobile Applications
Ruwan Ranganath
 
Building Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicBuilding Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and Ionic
Kadhem Soltani
 
Sencha Tooling - Senchacon Conference
Sencha Tooling  - Senchacon ConferenceSencha Tooling  - Senchacon Conference
Sencha Tooling - Senchacon Conference
Sandeep Adwankar
 
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
Sencha
 
INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...
INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...
INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...
Heiko Voigt
 
[CocoaHeads Tricity] Do not reinvent the wheel
[CocoaHeads Tricity] Do not reinvent the wheel[CocoaHeads Tricity] Do not reinvent the wheel
[CocoaHeads Tricity] Do not reinvent the wheel
Mateusz Klimczak
 
From React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I startedFrom React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I started
sparkfabrik
 
Introducing: Ionic Studio & Appflow A Better Way to Build Apps
Introducing: Ionic Studio & Appflow A Better Way to Build AppsIntroducing: Ionic Studio & Appflow A Better Way to Build Apps
Introducing: Ionic Studio & Appflow A Better Way to Build Apps
Ionic Framework
 
Cross-platform Mobile Development on Open Source
Cross-platform Mobile Development on Open SourceCross-platform Mobile Development on Open Source
Cross-platform Mobile Development on Open Source
All Things Open
 
What to choose for Mobile app development- React Native vs Native.
What to choose for Mobile app development- React Native vs Native.What to choose for Mobile app development- React Native vs Native.
What to choose for Mobile app development- React Native vs Native.
Techugo
 
An overview of Ionic
An overview of IonicAn overview of Ionic

Similar to Reimagining Cordova: Building Cross-Platform Web Apps with Capacitor (20)

Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
 
React native app development
React native app developmentReact native app development
React native app development
 
Hybrid App Development, Redefined
Hybrid App Development, RedefinedHybrid App Development, Redefined
Hybrid App Development, Redefined
 
Hybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJSHybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJS
 
Top Technologies to Develop Mobile Apps.pptx
Top Technologies to Develop Mobile Apps.pptxTop Technologies to Develop Mobile Apps.pptx
Top Technologies to Develop Mobile Apps.pptx
 
NCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsNCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile Apps
 
Cross-Platform Development
Cross-Platform DevelopmentCross-Platform Development
Cross-Platform Development
 
Capacitor 2.0 Launch
Capacitor 2.0 LaunchCapacitor 2.0 Launch
Capacitor 2.0 Launch
 
Building mobile apps using meteorJS
Building mobile apps using meteorJSBuilding mobile apps using meteorJS
Building mobile apps using meteorJS
 
Hybrid Mobile Applications
Hybrid Mobile ApplicationsHybrid Mobile Applications
Hybrid Mobile Applications
 
Building Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicBuilding Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and Ionic
 
Sencha Tooling - Senchacon Conference
Sencha Tooling  - Senchacon ConferenceSencha Tooling  - Senchacon Conference
Sencha Tooling - Senchacon Conference
 
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
 
INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...
INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...
INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...
 
[CocoaHeads Tricity] Do not reinvent the wheel
[CocoaHeads Tricity] Do not reinvent the wheel[CocoaHeads Tricity] Do not reinvent the wheel
[CocoaHeads Tricity] Do not reinvent the wheel
 
From React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I startedFrom React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I started
 
Introducing: Ionic Studio & Appflow A Better Way to Build Apps
Introducing: Ionic Studio & Appflow A Better Way to Build AppsIntroducing: Ionic Studio & Appflow A Better Way to Build Apps
Introducing: Ionic Studio & Appflow A Better Way to Build Apps
 
Cross-platform Mobile Development on Open Source
Cross-platform Mobile Development on Open SourceCross-platform Mobile Development on Open Source
Cross-platform Mobile Development on Open Source
 
What to choose for Mobile app development- React Native vs Native.
What to choose for Mobile app development- React Native vs Native.What to choose for Mobile app development- React Native vs Native.
What to choose for Mobile app development- React Native vs Native.
 
An overview of Ionic
An overview of IonicAn overview of Ionic
An overview of Ionic
 

More from Ionic Framework

Ionic event: March 2021
Ionic event: March 2021Ionic event: March 2021
Ionic event: March 2021
Ionic Framework
 
Live Demo: 1-click push to app stores
Live Demo: 1-click push to app storesLive Demo: 1-click push to app stores
Live Demo: 1-click push to app stores
Ionic Framework
 
Build your first Ionic React app
Build your first Ionic React appBuild your first Ionic React app
Build your first Ionic React app
Ionic Framework
 
Ionic React
Ionic ReactIonic React
Ionic React
Ionic Framework
 
Ionic App Platform Overview
Ionic App Platform Overview Ionic App Platform Overview
Ionic App Platform Overview
Ionic Framework
 
Ionic in 30
Ionic in 30Ionic in 30
Ionic in 30
Ionic Framework
 
Ionic Native: Native-powered apps, without the hassle
Ionic Native: Native-powered apps, without the hassleIonic Native: Native-powered apps, without the hassle
Ionic Native: Native-powered apps, without the hassle
Ionic Framework
 
Ionic Advisory: Your partner at every stage of development
Ionic Advisory: Your partner at every stage of development Ionic Advisory: Your partner at every stage of development
Ionic Advisory: Your partner at every stage of development
Ionic Framework
 
Offline Storage: Build secure, offline-first apps
Offline Storage: Build secure, offline-first appsOffline Storage: Build secure, offline-first apps
Offline Storage: Build secure, offline-first apps
Ionic Framework
 
Building capacitor apps in appflow webinar
Building capacitor apps in appflow webinarBuilding capacitor apps in appflow webinar
Building capacitor apps in appflow webinar
Ionic Framework
 
Ionic Auth Connect: Single Sign-on Made Easy
Ionic Auth Connect: Single Sign-on Made EasyIonic Auth Connect: Single Sign-on Made Easy
Ionic Auth Connect: Single Sign-on Made Easy
Ionic Framework
 
Submitting ionic apps to app stores
Submitting ionic apps to app storesSubmitting ionic apps to app stores
Submitting ionic apps to app stores
Ionic Framework
 
Top Cordova Challenges and How to Tackle Them
Top Cordova Challenges and How to Tackle ThemTop Cordova Challenges and How to Tackle Them
Top Cordova Challenges and How to Tackle Them
Ionic Framework
 
A Vue from Ionic
A Vue from IonicA Vue from Ionic
A Vue from Ionic
Ionic Framework
 

More from Ionic Framework (14)

Ionic event: March 2021
Ionic event: March 2021Ionic event: March 2021
Ionic event: March 2021
 
Live Demo: 1-click push to app stores
Live Demo: 1-click push to app storesLive Demo: 1-click push to app stores
Live Demo: 1-click push to app stores
 
Build your first Ionic React app
Build your first Ionic React appBuild your first Ionic React app
Build your first Ionic React app
 
Ionic React
Ionic ReactIonic React
Ionic React
 
Ionic App Platform Overview
Ionic App Platform Overview Ionic App Platform Overview
Ionic App Platform Overview
 
Ionic in 30
Ionic in 30Ionic in 30
Ionic in 30
 
Ionic Native: Native-powered apps, without the hassle
Ionic Native: Native-powered apps, without the hassleIonic Native: Native-powered apps, without the hassle
Ionic Native: Native-powered apps, without the hassle
 
Ionic Advisory: Your partner at every stage of development
Ionic Advisory: Your partner at every stage of development Ionic Advisory: Your partner at every stage of development
Ionic Advisory: Your partner at every stage of development
 
Offline Storage: Build secure, offline-first apps
Offline Storage: Build secure, offline-first appsOffline Storage: Build secure, offline-first apps
Offline Storage: Build secure, offline-first apps
 
Building capacitor apps in appflow webinar
Building capacitor apps in appflow webinarBuilding capacitor apps in appflow webinar
Building capacitor apps in appflow webinar
 
Ionic Auth Connect: Single Sign-on Made Easy
Ionic Auth Connect: Single Sign-on Made EasyIonic Auth Connect: Single Sign-on Made Easy
Ionic Auth Connect: Single Sign-on Made Easy
 
Submitting ionic apps to app stores
Submitting ionic apps to app storesSubmitting ionic apps to app stores
Submitting ionic apps to app stores
 
Top Cordova Challenges and How to Tackle Them
Top Cordova Challenges and How to Tackle ThemTop Cordova Challenges and How to Tackle Them
Top Cordova Challenges and How to Tackle Them
 
A Vue from Ionic
A Vue from IonicA Vue from Ionic
A Vue from Ionic
 

Reimagining Cordova: Building Cross-Platform Web Apps with Capacitor

  • 1. Reimagining Cordova: Building Cross-Platform Web Apps with Matt Netkow, Sr Product Evangelist @dotNetkow; matt.netkow@ionic.io
  • 2. Later: Q&A with Max Lynch CEO, Ionic @maxlynch
  • 3. A Brief History: Cordova Created: 2008 CLI: 2013 Write Once, Run Everywhere 2018: Ongoing, minor updates
  • 4. 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 and Kotlin
  • 5. What if we created a spiritual successor to Cordova that used these modern native tools?
  • 6. E N T E R :
  • 7. What is Capacitor? Cross-platform runtime: iOS, Android, Desktop, and Web #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
  • 8. DEMO TIME! Camera, Local Notifications, Toast iOS, Android, Web!
  • 9. Need More Functionality? Includes common plugins (Camera, Geolocation, File, etc) Backwards compatible with majority of Core Cordova Plugins Provides tooling for writing new Plugins $ npx @capacitor/cli plugin:generate
  • 10. Capacitor and Cordova Recap Feature Cordova Capacitor Supported Platforms iOS, Android, Windows Phone iOS, Android, Desktop (Windows, Mac, Linux), Web, PWA, and beyond! Configuration style Abstracted (Config.xml) Per-platform (Info.plist, AndroidManifest.xml) Native platform control Limited Full control Production ready? Yes, stable Soon
  • 11. ➔ Site: https://capacitor.ionicframework.com ➔ Source: https://github.com/ionic-team/capacitor ➔ Matt’s demo code: https://github.com/dotNetkow/ionic-conference-app ➔ Recording + links emailed after webinar! Enterprise support packages for Cordova and Capacitor available Resources
  • 12. </presentation> Questions? Matt Netkow Sr Product Evangelist @dotNetkow; matt.netkow@ionic.io Max Lynch CEO @maxlynch