First steps with Capacitor… in the real world

First steps with Capacitor… in the real world Horacio Gonzalez @LostInBrittany #capacitor @LostInBrittany

Who am I? Introducing myself and introducing OVH #capacitor @LostInBrittany

Horacio Gonzalez @LostInBrittany Spaniard lost in Brittany, developer, dreamer and all-around geek #capacitor @LostInBrittany

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

• 2 500 Employees in 19 countries 18 Years of Innovation 35 Points of presence 4TB Anti DDoS capacity Hosting capacity : 1.3M Physical Servers #capacitor @LostInBrittany

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 2020 50 Datacenters Netwok with 35 PoPs

1.3M Customers in 138 Countries #capacitor @LostInBrittany

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 #capacitor @LostInBrittany

Capacitor The Native Bridge for Cross-Platform Web Apps #capacitor @LostInBrittany

What's Capacitor? Cross-platform app runtime making it easy to build web apps that run natively on iOS, Android and web #capacitor @LostInBrittany

Spiritual heir to Apache Cordova Evolution, not revolution #capacitor @LostInBrittany

Spiritual heir to Apache Cordova Support for many Cordova plugins #capacitor @LostInBrittany

Extensible and evolutif ● Close to web-standards ● Plugin API ○ Swift on iOS ○ Java on Android ○ JavaScript for the web #capacitor @LostInBrittany

Developer Friendly Easy to get started Works on any framework #capacitor @LostInBrittany

You still need the platform tools Android Studio and/or Xcode to build the native packages #capacitor @LostInBrittany

Weren't you a PWA advocate? And you are also championing Flutter! Where is the coherence, guy? #capacitor @LostInBrittany

Well, I am a PWA advocate indeed I rooted for PWA before it was fancy... #capacitor @LostInBrittany

And I know the numbers... Apps drive engagement, web drive visitors... 20 biggest apps account for 80% of user time #capacitor @LostInBrittany

An engineer role is to choose The right tool for the right problem #capacitor @LostInBrittany

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 believe me, you will thank me! #capacitor @LostInBrittany

For more normal needs A well done PWA is simply enough #capacitor @LostInBrittany

But if you need to be in the store? For many reasons, not all objective... #capacitor @LostInBrittany

Hybrid PWA apps The best of two worlds #capacitor @LostInBrittany

Capacitor take your PWA to the store In a simple, quick and painless way #capacitor @LostInBrittany

First steps testing Capacitor Adding Capacitor to an existing app #capacitor @LostInBrittany

From web to native Giving superpowers to you webapp #capacitor @LostInBrittany

Testing with a real webapp Warp 10 Photon - IDE for Warp 10 #capacitor @LostInBrittany

Step 1 - Add Capacitor to the app Install Capacitor cd my-app npm install --save @capacitor/core @capacitor/cli Init Capacitor npx cap init Add Android and/or iOS and/or Electron support npx cap add android #capacitor @LostInBrittany

Step 2 - Copy to Android Edit capacitor.config.json Copy the built resources to Android npx cap copy Launch Android Studio and navigate to the project #capacitor @LostInBrittany

Step 3 - Test And our webapp is now a native app #capacitor @LostInBrittany

First test: successful! Capacitor 1 - Scepticism 0 #capacitor @LostInBrittany

The Capacitor example app Nice to explore Capacitor #capacitor @LostInBrittany

Made by the Ionic team To replace Cordova in next Ionic #capacitor @LostInBrittany

Official example built on Ionic Showcasing the upcoming Ionic 4 #capacitor @LostInBrittany

Let's try the official example #capacitor @LostInBrittany

Using directly the Capacitor repository Custom built project, not a production app ● @capacitor/core and native libs loaded from local directory #capacitor @LostInBrittany

Let's build the Android version Some pre-building and building needed... #capacitor @LostInBrittany

We now have an Android project #capacitor @LostInBrittany

Easy and painless Android app #capacitor @LostInBrittany

And in PWA mode? Some elements haven't web implementation (yet?) #capacitor @LostInBrittany

But it still works! It fails gracefully for unsupported plugins #capacitor @LostInBrittany

Second test: successful! Capacitor 2 - Scepticism 0 #capacitor @LostInBrittany

Let's try something harder #capacitor @LostInBrittany

Capacitor without Ionic I want to use it Capacitor with my own toolset #capacitor @LostInBrittany

I'm a Web Components guy And I speak a lot about Polymer #capacitor @LostInBrittany

But Polymer is in a transition phase Polymer 2.x : bower based Polymer 3: npm based #capacitor @LostInBrittany

So what to use? Stencil, of course! The magical, reusable web component compiler #capacitor @LostInBrittany

Let's begin with a simple example A Camera app, working well on web mode Using standard Media Capture and Streams API #capacitor @LostInBrittany

Let's charge it with Capacitor We want the same behavior But now in Android, iOS, Electron AND web #capacitor @LostInBrittany

And does it work? Yes it does… in native mode only! #capacitor @LostInBrittany

But not in PWA mode :( And a big question: why? #capacitor @LostInBrittany

Well, let's spot the differences... Searching on the example code hmmmm, @ionic/pwa-elements, what's that? #capacitor @LostInBrittany

@ionic/pwa-elements Web-based alternatives for some Capacitor plugins #capacitor @LostInBrittany

Adding @ionic/pwa-elements Simply install them: npm install @ionic/pwa-elements And then import them: import '@ionic/pwa-elements'; #capacitor @LostInBrittany

And then... It's a kind of magic! #capacitor @LostInBrittany

On Android and Web #capacitor @LostInBrittany

Second test: successful! Capacitor 3 - Scepticism 0 #capacitor @LostInBrittany

And in Real Life? Because examples are examples... #capacitor @LostInBrittany

Use case 1: Putting PWA into store It simply works, easy and painless! #capacitor @LostInBrittany

Use case 2: Progressive enhancing Giving your PWA an extra P when going native #capacitor @LostInBrittany

And Capacitor already works A true winner #capacitor @LostInBrittany

Conclusions Capacitor or not? #capacitor @LostInBrittany

Paint is still wet Some things are broken Some things will change #capacitor @LostInBrittany

Easy to use Friendlier than Cordova #capacitor @LostInBrittany

Yet extensible You can use existing Cordova plugins #capacitor @LostInBrittany

Not opinionated Easy to use in any framework Easy to integrate in any dev toolchain #capacitor @LostInBrittany

Thank you! #capacitor @LostInBrittany