Ézéchiel Amen Agbla is an electronics engineer and full stack JavaScript developer, also teaching at a private university in Morocco. The document explains Progressive Web Applications (PWAs), highlighting their advantages and development principles, and introduces the Ionic framework, Angular framework, and Capacitor for building cross-platform applications. It emphasizes the importance of modern web capabilities and frameworks in creating efficient and user-friendly applications.

2. Qui suis-je ?
Ezéchiel Amen AGBLA
✅ Ingénieur en Électronique et Systèmes
Embarqués
✅ Directeur des Opérations et
Développeur Fullstack JavaScript à
Vyconsulting
✅ Enseignant à l’Université Privée de
Fès (Maroc)
twitter.com/ezchilamen
github.com/amilamen

4. Qu’est-ce qu’une PWA ?
Une Progressive Web Application (PWA) est un site web qui utilise
les capacités modernes des mobiles (Notifications push, GPS,
Appareil photo…) pour offrir aux utilisateurs une expérience
semblable à celle d’une application mobile native.

5. Pourquoi utiliser une PWA ?
✅ Une seule application d’où la notion de progressive
✅ La sécurité
✅ La rapidité
✅ L’engagement
✅ Le référencement
✅ Le fonctionnement hors-ligne
✅ L’installation d’un raccourci

6. Quels sont les principes de
développement d’une PWA ?
✅ Le manifeste
✅ Le HTTPS
✅ La mise en place d’un Service Workers
✅ L’engagement

8. Ionic Framework

9. Framework Ionic
UI Components for native mobile apps, PWAs, and even
Desktop
Pre-built Gestures and Animations
Platform Continuity for iOS and Material Design
Full access to all Native APIs and Plugins
A large, vibrant world-wide community

10. UI Components (100+)

11. Gestures & Animations
Swiping gestures between views
Sliding items for reveals
Carousel slides for App intro

12. Platform Continuity
A N D R O I D I O S
Platform-aware components
Look-and-feel at home
Up to date with latest UI design

13. Native Access
Community driven plugin ecosystem
@ionic-native to integrate with Ionic
Can integrate with custom needs and APIs

14. Framework/components are open source (MIT)
Native layers (Cordova/Capacitor) also open source
Open Web Standards - available to everyone
Open Source everything

15. Integration with Popular Frameworks
Angular and Vue currently, more to come
Use framework specific tooling to better integrate with ecosystem
Ionic handles the UI/UX, frameworks handle the logic layer

16. Angular Framework
One framework.
Mobile & desktop.

17. Framework Angular
Angular is an application design framework and development
platform for creating efficient and sophisticated single-page
apps.

18. Main Concepts
✅ Components
✅ Templates
✅ Directives
✅ Dependency Injection

19. Built-in features
✅ Routing & Navigation
✅ Forms
✅ HTTP Client
✅ Internationalization (i18n)
✅ Animations
✅ Schematics
✅ Service Workers & PWA

20. What is Capacitor ?
The new Native Bridge for Web Apps

21. What is Capacitor ?
Cross-platform runtime for iOS, Android, Electron and Web
Web-focused APIs that stay close to the Standards
Modern Native tooling for easy native project maintenance
Inspiration from Cordova, React Native, and Turbolinks

22. Add to any project
$ npm install @capacitor/core @capacitor/cli --save
$ npx cap init
$ npx cap add {ios, android, web, electron}
$ npx cap open

23. import { Plugins, CameraResultType } from '@capacitor/core';
export class MyClass {
const { Camera } = Plugins;
async takePicture() {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: true,
resultType: CameraResultType.Uri
});
var imageUrl = image.webPath;
imageElement.src = imageUrl;
}
}

24. import { Plugins, FilesystemDirectory, FilesystemEncoding } from '@capacitor/core';
export class MyClass {
const { Filesystem } = Plugins;
async fileRead() {
let contents = await Filesystem.readFile({
path: 'secrets/text.txt',
directory: FilesystemDirectory.Documents,
encoding: FilesystemEncoding.UTF8
});
console.log(contents);
}
}

25. 👩🏽💻 ☕️🚀 Instant Coding 🚀☕️🏽🏽💻

26. M E R C I