A presentation at Devoxx France in in Paris, France by Horacio Gonzalez
Capacitor : from PWA to native app in 5 minutes Horacio Gonzalez @LostInBrittany 1 @LostInBrittany #Capacitor @LostInBrittany #Capacitor#DevoxxFr #DevoxxFr
Who am I? Introducing myself and introducing OVH @LostInBrittany #Capacitor @LostInBrittany #Capacitor#DevoxxFr #DevoxxFr
Horacio Gonzalez @LostInBrittany Spaniard lost in Brittany, developer, dreamer and all-around geek Flutter @LostInBrittany #Capacitor #DevoxxFr
OVH : Key Figures 1.3M Customers worldwide in 138 Countries 1.5 Billions euros investment over five years 30 Datacenters (growing) 350k Dedicated Servers 200k Private cloud VMs running 650k Public cloud Instances created in a month 15TB bandwidth capacity 35 Points of presence 4TB Anti DDoS capacity Hosting capacity : 1.3M Physical Servers @LostInBrittany #Capacitor #DevoxxFr
OVH: A Global Leader on Cloud 200k Private cloud VMs running 1 Dedicated IaaS Europe 2018 27 Datacenters Own 15 Tbps Hosting capacity : 1.3M Physical Servers 360k Servers already deployed @LostInBrittany #Capacitor #DevoxxFr Network with 35 PoPs
1.3M Customers in 138 Countries 2020 50 Datacenters
Ranking & Recognition 1st European Cloud Provider* 1st Hosting provider in Europe 1st Provider Microsoft Exchange Certified vCloud Datacenter Certified Kubernetes platform (CNCF) Vmware Global Service Provider 2013-2016 Veeam Best Cloud Partner of the year (2018) * Netcraft 2017 - @LostInBrittany #Capacitor #DevoxxFr
OVH: Our solutions Cloud Web Hosting Mobile Hosting Telecom VPS Containers ▪ Dedicated Server Domain names VoIP Public Cloud Compute ▪ Data Storage Email SMS/Fax Private Cloud ▪ Network and Database CDN Virtual desktop Serveur dédié Security Object Storage Web hosting Cloud HubiC Over theBox ▪ Licences Cloud Desktop Securities MS Office Hybrid Cloud Messaging MS solutions @LostInBrittany #Capacitor #DevoxxFr
Capacitor The Native Bridge for Cross-Platform Web Apps @LostInBrittany #Capacitor @LostInBrittany #Capacitor#DevoxxFr #DevoxxFr
What’s Capacitor? Cross-platform app runtime making it easy to build web apps that run natively on iOS, Android and web @LostInBrittany #Capacitor #DevoxxFr
Spiritual heir to Apache Cordova Evolution, not revolution @LostInBrittany #Capacitor #DevoxxFr
Spiritual heir to Apache Cordova Support for many Cordova plugins @LostInBrittany #Capacitor #DevoxxFr
Extensible and evolutif ● Close to web-standards ● Plugin API ○ Swift on iOS ○ Java on Android ○ JavaScript for the web @LostInBrittany #Capacitor #DevoxxFr
Developer Friendly Easy to get started Works on any framework @LostInBrittany #Capacitor #DevoxxFr
You still need the platform tools Android Studio and/or Xcode to build the native packages @LostInBrittany #Capacitor #DevoxxFr
Weren’t you a PWA advocate? And you are also championing Flutter! Where is the coherence, guy? @LostInBrittany #Capacitor @LostInBrittany #Capacitor#DevoxxFr #DevoxxFr
Well, I am a PWA advocate indeed I rooted for PWA before it was fancy… @LostInBrittany #Capacitor #DevoxxFr
And I know the numbers… Apps drive engagement, web drive visitors… @LostInBrittany #Capacitor #DevoxxFr 20 biggest apps account for 80% of user time
An engineer role is to choose The right tool for the right problem @LostInBrittany #Capacitor #DevoxxFr
If you need super fancy UX 60 FPS, slick animations, an experience more than an app Then go full native And BTW, do it in Flutter @LostInBrittany #Capacitor #DevoxxFr
For more normal needs A well done PWA is simply enough @LostInBrittany #Capacitor #DevoxxFr
But if you need to be in the store? For many reasons, not all objective… @LostInBrittany #Capacitor #DevoxxFr
Hybrid PWA apps The best of two worlds @LostInBrittany #Capacitor #DevoxxFr
Capacitor take your PWA to the store In a simple, quick and painless way @LostInBrittany #Capacitor #DevoxxFr
First steps testing Capacitor Adding Capacitor to an existing app @LostInBrittany #Capacitor @LostInBrittany #Capacitor#DevoxxFr #DevoxxFr
From web to native Giving superpowers to you webapp @LostInBrittany #Capacitor #DevoxxFr
Testing with a real webapp Warp 10 Photon - IDE for Warp 10 @LostInBrittany #Capacitor #DevoxxFr
Step 1 - Add Capacitor to the app ● Install Capacitor cd my-app npm install —save @capacitor/core @capacitor/cli ● Init Capacitor npx c ● Add Android and/or iOS and/or Electron support npx cap add android @LostInBrittany #Capacitor #DevoxxFr
Step 2 - Copy to Android ● Edit capacitor.config.json to choose the built folder ● Copy the built resources to Android npx cap copy ● Launch Android Studio npx cap open android @LostInBrittany #Capacitor #DevoxxFr
Step 3 - Test And our webapp is now a native app @LostInBrittany #Capacitor #DevoxxFr
First test: successful! Capacitor 1 - Scepticism 0 @LostInBrittany #Capacitor #DevoxxFr
The Capacitor example app Nice to explore Capacitor @LostInBrittany #Capacitor @LostInBrittany #Capacitor#DevoxxFr #DevoxxFr
Made by the Ionic team To replace Cordova in Ionic 4 @LostInBrittany #Capacitor #DevoxxFr
Official example built on Ionic Showcasing Ionic 4 @LostInBrittany #Capacitor #DevoxxFr
Let’s try the official example @LostInBrittany #Capacitor #DevoxxFr
Using directly the Capacitor repository Custom built project, not a production app @capacitor/core and native libs loaded from local directory @LostInBrittany #Capacitor #DevoxxFr
Let’s build the Android version Some pre-building and building needed… @LostInBrittany #Capacitor #DevoxxFr
We now have an Android project @LostInBrittany #Capacitor #DevoxxFr
Easy and painless Android app @LostInBrittany #Capacitor #DevoxxFr
And in PWA mode? Some elements haven’t web implementation (yet?) @LostInBrittany #Capacitor #DevoxxFr
But it still works! It fails gracefully for unsupported plugins @LostInBrittany #Capacitor #DevoxxFr
Second test: successful! Capacitor 2 - Scepticism 0 @LostInBrittany #Capacitor #DevoxxFr
Let’s try something harder Stencil & capacitor @LostInBrittany #Capacitor @LostInBrittany #Capacitor#DevoxxFr #DevoxxFr
Capacitor without Ionic I want to use it Capacitor with my own toolset @LostInBrittany #Capacitor #DevoxxFr
I’m a Web Components guy And I speak a lot about Polymer @LostInBrittany #Capacitor #DevoxxFr
But Polymer is in a transition phase Polymer 2.x : bower based Polymer 3: npm based but recommended only for legacy LitElement: the new, lightweight, blazing fast library by Polymer team @LostInBrittany #Capacitor #DevoxxFr
So what to use? Stencil, of course! The magical, reusable web component compiler @LostInBrittany #Capacitor #DevoxxFr
Let’s begin with a simple example A Camera app, working well on web mode Using standard Media Capture and Streams API @LostInBrittany #Capacitor #DevoxxFr
Let’s charge it with Capacitor We want the same behavior But now in Android, iOS, Electron AND web @LostInBrittany #Capacitor #DevoxxFr
And does it work? Yes it does… in native mode only! @LostInBrittany #Capacitor #DevoxxFr
But not in PWA mode :( And a big question: why? @LostInBrittany #Capacitor #DevoxxFr
Well, let’s spot the differences… Searching on the example code hmmmm, @ionic/pwa-elements, what’s that? @LostInBrittany #Capacitor #DevoxxFr
@ionic/pwa-elements Web-based alternatives for some Capacitor plugins @LostInBrittany #Capacitor #DevoxxFr
Adding @ionic/pwa-elements Simply install them: npm install @ionic/pwa-elements And then import them: import ‘@ionic/pwa-elements’; @LostInBrittany #Capacitor #DevoxxFr
And then… It’s a kind of magic! @LostInBrittany #Capacitor #DevoxxFr
On Android and Web @LostInBrittany #Capacitor #DevoxxFr
Second test: successful! Capacitor 3 - Scepticism 0 @LostInBrittany #Capacitor #DevoxxFr
And in Real Life? Because examples are examples… @LostInBrittany #Capacitor @LostInBrittany #Capacitor#DevoxxFr #DevoxxFr
Use case 1: Putting PWA into store It simply works, easy and painless! @LostInBrittany #Capacitor #DevoxxFr
Use case 2: Progressive enhancing Giving your PWA an extra P when going native @LostInBrittany #Capacitor #DevoxxFr
And Capacitor already works A true winner @LostInBrittany #Capacitor #DevoxxFr
Conclusions Capacitor or not? @LostInBrittany #Capacitor @LostInBrittany #Capacitor#DevoxxFr #DevoxxFr
Still fairly recent There are small glitches Doc could be more detailed, with more examples @LostInBrittany #Capacitor #DevoxxFr
Easy to use Friendlier than Cordova @LostInBrittany #Capacitor #DevoxxFr
Yet extensible You can use existing Cordova plugins @LostInBrittany #Capacitor #DevoxxFr
Not opinionated Easy to use in any framework Easy to integrate in any dev toolchain @LostInBrittany #Capacitor #DevoxxFr
Thank you! @LostInBrittany #Capacitor #DevoxxFr
Ah, Capacitor, what a beautiful idea, an alternative to Cordova easier to use, easier to integrate in any framework, fully integrated with Ionic…
Well, not really for me, at least at the beginning. After having developed lots of PWA these last years, I was a bit skeptic about the pertinence of native or hybrid apps, so when I heard of Capacitor I put it in the cool techno not really for me basket. Until I when to the website and I read: “Build web apps that run equally well on iOS, Android, Electron, and as Progressive Web Apps”. Oh, that really grabbed my interest.
So I decided to use Capacitor on some of my PWA projects, to see if I could transform them in native iOS or Android apps.
And this talk is the feedback of this process, my first steps with Capacitor in some real life applications, what did work for me and what didn’t, and what I learnt in the process.
Here’s what was said about this presentation on social media.
