SlideShare uma empresa Scribd logo
1 de 12
Baixar para ler offline
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

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

An Introduction to Redux
An Introduction to ReduxAn Introduction to Redux
An Introduction to Redux
 
Flutter Intro
Flutter IntroFlutter Intro
Flutter Intro
 
Introduction to WSO2 ESB
Introduction to WSO2 ESB Introduction to WSO2 ESB
Introduction to WSO2 ESB
 
Flutter
Flutter Flutter
Flutter
 
Building APIs with the OpenApi Spec
Building APIs with the OpenApi SpecBuilding APIs with the OpenApi Spec
Building APIs with the OpenApi Spec
 
Virtual Container - Docker
Virtual Container - Docker Virtual Container - Docker
Virtual Container - Docker
 
Flutter
FlutterFlutter
Flutter
 
Redux Toolkit - Quick Intro - 2022
Redux Toolkit - Quick Intro - 2022Redux Toolkit - Quick Intro - 2022
Redux Toolkit - Quick Intro - 2022
 
Overview of Zookeeper, Helix and Kafka (Oakjug)
Overview of Zookeeper, Helix and Kafka (Oakjug)Overview of Zookeeper, Helix and Kafka (Oakjug)
Overview of Zookeeper, Helix and Kafka (Oakjug)
 
Introduction to flutter
Introduction to flutter Introduction to flutter
Introduction to flutter
 
Windows Communication Foundation (WCF)
Windows Communication Foundation (WCF)Windows Communication Foundation (WCF)
Windows Communication Foundation (WCF)
 
What is flutter and why should i care?
What is flutter and why should i care?What is flutter and why should i care?
What is flutter and why should i care?
 
Docker by Example - Basics
Docker by Example - Basics Docker by Example - Basics
Docker by Example - Basics
 
Flutter
FlutterFlutter
Flutter
 
Reactive Microservices with Spring 5: WebFlux
Reactive Microservices with Spring 5: WebFlux Reactive Microservices with Spring 5: WebFlux
Reactive Microservices with Spring 5: WebFlux
 
Ionic in 30
Ionic in 30Ionic in 30
Ionic in 30
 
DevOps on AZURE
DevOps on AZUREDevOps on AZURE
DevOps on AZURE
 
Continuous Integration vs Continuous Delivery vs Continuous Deployment
Continuous Integration vs Continuous Delivery vs Continuous Deployment Continuous Integration vs Continuous Delivery vs Continuous Deployment
Continuous Integration vs Continuous Delivery vs Continuous Deployment
 
Flutter session 01
Flutter session 01Flutter session 01
Flutter session 01
 
CI/CD Pipeline with Kubernetes
CI/CD Pipeline with KubernetesCI/CD Pipeline with Kubernetes
CI/CD Pipeline with Kubernetes
 

Semelhante a 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 FrameworkCihad Horuzoğlu
 
React native app development
React native app developmentReact native app development
React native app developmentJhonthSmith
 
Hybrid App Development, Redefined
Hybrid App Development, RedefinedHybrid App Development, Redefined
Hybrid App Development, RedefinedIonic 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 AngularJSZvika 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.pptxGokulKanna18
 
NCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsNCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsJohn M. Wargo
 
Hybrid Mobile Applications
Hybrid Mobile ApplicationsHybrid Mobile Applications
Hybrid Mobile ApplicationsRuwan 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 IonicKadhem Soltani
 
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
 
Sencha Tooling - Senchacon Conference
Sencha Tooling  - Senchacon ConferenceSencha Tooling  - Senchacon Conference
Sencha Tooling - Senchacon ConferenceSandeep Adwankar
 
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 wheelMateusz 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 startedsparkfabrik
 
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 AppsIonic 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 SourceAll 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
 
ChrisSchilling_SideProjects
ChrisSchilling_SideProjectsChrisSchilling_SideProjects
ChrisSchilling_SideProjectsChris Schilling
 

Semelhante a 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
 
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
 
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 Tooling - Senchacon Conference
Sencha Tooling  - Senchacon ConferenceSencha Tooling  - Senchacon Conference
Sencha Tooling - Senchacon Conference
 
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
 
ChrisSchilling_SideProjects
ChrisSchilling_SideProjectsChrisSchilling_SideProjects
ChrisSchilling_SideProjects
 

Mais de 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 storesIonic Framework
 
Build your first Ionic React app
Build your first Ionic React appBuild your first Ionic React app
Build your first Ionic React appIonic Framework
 
Ionic App Platform Overview
Ionic App Platform Overview Ionic App Platform Overview
Ionic App Platform Overview 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 hassleIonic 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 appsIonic Framework
 
Building capacitor apps in appflow webinar
Building capacitor apps in appflow webinarBuilding capacitor apps in appflow webinar
Building capacitor apps in appflow webinarIonic 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 EasyIonic Framework
 
Submitting ionic apps to app stores
Submitting ionic apps to app storesSubmitting ionic apps to app stores
Submitting ionic apps to app storesIonic 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 ThemIonic Framework
 

Mais de Ionic Framework (13)

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