Capacitor: from PWA to native app in 5 minutes

Capacitor : from PWA to native app in 5 minutes Horacio Gonzalez @LostInBrittany @LostInBrittany #Capacitor #DevFestLille

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

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

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

2 500 Employees in 19 countries 20 Years of Innovation @LostInBrittany #Capacitor #DevFestLille

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

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 Oﬃce Hybrid Cloud Messaging MS solutions @LostInBrittany #Capacitor #DevFestLille

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

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

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

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

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

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

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

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

Well, I am a PWA advocate indeed I rooted for PWA before it was fancy… @LostInBrittany #Capacitor #DevFestLille

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

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

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! @LostInBrittany #Capacitor #DevFestLille

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

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

Hybrid PWA apps The best of two worlds @LostInBrittany #Capacitor #DevFestLille

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

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

From web to native Giving superpowers to you webapp @LostInBrittany #Capacitor #DevFestLille

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

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 @LostInBrittany #Capacitor #DevFestLille

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

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

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

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

Made by the Ionic team To replace Cordova in Ionic 4 @LostInBrittany #Capacitor #DevFestLille

Official example built on Ionic Showcasing Ionic 4 @LostInBrittany #Capacitor #DevFestLille

Let’s try the official example @LostInBrittany #Capacitor #DevFestLille

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

Let’s build the Android version Some pre-building and building needed… @LostInBrittany #Capacitor #DevFestLille

We now have an Android project @LostInBrittany #Capacitor #DevFestLille

Easy and painless Android app @LostInBrittany #Capacitor #DevFestLille

And in PWA mode? Some elements haven’t web implementation (yet?) @LostInBrittany #Capacitor #DevFestLille

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

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

Let’s try something harder Stencil & capacitor @LostInBrittany #Capacitor #DevFestLille

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

I’m a Web Components guy And I speak a lot about Polymer @LostInBrittany #Capacitor #DevFestLille

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

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

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

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

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

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

Well, let’s spot the differences… Searching on the example code hmmmm, @ionic/pwa-elements, what’s that? @LostInBrittany #Capacitor #DevFestLille

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

Adding @ionic/pwa-elements Simply install them: npm install @ionic/pwa-elements And then import them: import ‘@ionic/pwa-elements’; @LostInBrittany #Capacitor #DevFestLille

And then… It’s a kind of magic! @LostInBrittany #Capacitor #DevFestLille

On Android and Web @LostInBrittany #Capacitor #DevFestLille

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

And in Real Life? Because examples are examples… @LostInBrittany #Capacitor #DevFestLille

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

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

And Capacitor already works A true winner @LostInBrittany #Capacitor #DevFestLille

Conclusions Capacitor or not? @LostInBrittany #Capacitor #DevFestLille

Still fairly recent There are small glitches Doc could be more detailed, with more examples @LostInBrittany #Capacitor #DevFestLille

Easy to use Friendlier than Cordova @LostInBrittany #Capacitor #DevFestLille

Yet extensible You can use existing Cordova plugins @LostInBrittany #Capacitor #DevFestLille

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

Thank you! @LostInBrittany #Capacitor #DevFestLille