First steps with Capacitor…
in the real world
Horacio Gonzalez@LostInBrittany#capacitor@LostInBrittanyWho am I?
Introducing myself andintroducing OVH#capacitor@LostInBrittany

Horacio Gonzalez@LostInBrittany
Spaniard lost in Brittany,developer, dreamer andall-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 cloudVMs running

1Dedicated IaaS
Europe2018
27 Datacenters
Own
15 Tbps

Hosting capacity :1.3M PhysicalServers
360k
Servers alreadydeployed2020
50 Datacenters

Netwokwith35 PoPs

> 1.3M Customers in 138 Countries#capacitor@LostInBrittany

Ranking & Recognition

1st European Cloud Provider*
1st Hosting provider in Europe1st Provider Microsoft Exchange
Certified vCloud Datacenter
Certified Kubernetes platform (CNCF)
Vmware Global Service Provider 2013-2016
Veeam Best Cloud Partner of the year (2018)#capacitor@LostInBrittany* Netcraft 2017 -OVH: Our solutions

CloudWeb
Hosting

MobileHosting

Telecom

VPSContainers▪ Dedicated Server

Domain names

VoIP

Public Cloud

Compute▪ Data Storage

EmailSMS/Fax

Private Cloud▪ Network andDatabase

CDN

Virtual desktop

Serveur dédié

Security
ObjectStorage

Web hosting

Cloud HubiC
Over theBox▪ Licences

Cloud Desktop

Securities

MS OfficeHybrid 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 Xcodeto 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/cliInit 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 teamTo 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 Captureand 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'sthat?

#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 opinionatedEasy to use in any framework
Easy to integrate in any dev toolchain#capacitor@LostInBrittany

Thank you!

#capacitor@LostInBrittany