Le document compare PHP et JavaScript, deux langages de programmation essentiels, en explorant leur histoire, leurs propriétés, et leurs applications dans le développement web. Il aborde également des concepts comme les bibliothèques et frameworks, le rendu côté serveur (SSR) et les Progressive Web Apps (PWA). La présentation souligne l'évolution de ces langages et leurs implications pour l'architecture moderne des applications web.

1. PHP vs JavaScript
Animé par Mazen GHARBI

2. Deux langages emblématiques
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 2
D’après developpez.com,
« PHP est utilisé par plus de 80 % des sites »
JavaScript est un standard interprété
par tous les navigateurs

3. Complémentaires
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 3

4. Sommaire
1. Contexte de création
2. Librairies & Frameworks satellites
3. Architecture des projets Web
4. Server Side Rendering
5. Progressive Web App
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 4
PHP vs JavaScript

5. mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 5
Création

6. L’histoire de PHP
▷ Créé par Ramsus Lerdorf en 1995
› PHP/FI initialement; librairie de scripts Perl
› Pour créer son CV !
▷ Portée en C et agrémentée de nouvelles fonctionnalités ;
▷ Quelques utilisations pratiques :
› Forums et Messageries ;
› Commerce électronique ;
› Banque / Comptes en ligne ;
› Publication en ligne ;
› Moteurs de recherche ;
› Tout ce que vous voulez (sauf les jeux).
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 6
PHP vs JavaScript

7. L’histoire de Javascript
▷ Création du langage en 1995 ;
› Version initiale de Javascript créée en 10 jours seulement !
▷ 1997 : Javascript gagne la guerre et s’impose comme un standard
« cross-browser » sous le nom officiel « EcmaScript » ;
▷ 2009 : Sortie de NodeJS ;
▷ 2015 : Finalisation du standard EcmaScript 6 ;
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 7
PHP vs JavaScript

8. Propriétés des langages
▷ Dynamiquement* typé
▷ Faiblement* typé
▷ Multi-paradigme (Orienté Objet / Fonctionnel)
› Brendan Eich s’est inspiré de Self, Scheme, Java et C
▷ « Cross-browser » et « cross-platform »
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 8
PHP vs JavaScript

9. Typage
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 9
PHP vs JavaScript
var maVariable = "Ma chaine";
console.log(typeof maVariable); // string
maVariable = 2;
console.log(typeof maVariable); // number
<?php
$maVariable = "Ma chaine";
echo gettype($maVariable); // string
$maVariable = 1;
echo gettype($maVariable); // integer
JavaScript
PHP

10. Limites
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 10
PHP vs JavaScript
<?php
function faitQuelqueChose(int $maVar)
{
echo $maVar;
}
faitQuelqueChose('Oops.'); // Fatal error
PHP 7.1
constructor() {
var a: number = 1;
a = 'Toto'; // Erreur à la transpilation
}
TypeScript -> JavaScript
Au fur et à mesure du temps, des besoins pour de grosses applications ont nécessités l’évolution des deux langages

11. Coercion
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 11
PHP vs JavaScript
JavaScript Equivalence Table
<?php
echo true + '1' + 0; // 2
PHP
console.log({} + [] + true); // 1...
JavaScript

12. Du mieux ! Côté JavaScript
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 12
PHP vs JavaScript
▷ Les classes !! Avec héritage
▷ Modules
▷ Arrow Functions
▷ Template Strings
▷ Spread & Rest
▷ Déstructuration (objet et array)

13. Du mieux ! Côté PHP
▷ Typage des paramètre et des retours de fonction ;
▷ Classes avec PHP5
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 13
PHP vs JavaScript
<?php
function enroll(Student $student, array $classes): int
{
foreach ($classes as $class) {
echo "Enrolling " . $student->name . " in " . $class;
}
return 1;
}

14. mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 14
Librairies & Frameworks

15. ▷ Framework PHP créé par des français !!
▷ Augmente la productivité des développeurs et permet de CADRER
le développement
▷ Voici quelques sites utilisant Symfony
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 15
PHP vs JavaScript

16. Symfony 4 - Fonctionnement
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 16
PHP vs JavaScript

17. Symfony 4 – ORM !
▷ Gérer votre base au travers d’Entity
▷ Symfony inclut Doctrine comme ORM
▷ Couche d’abstraction
▷ Améliore la maintenabilité
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 17
PHP vs JavaScript
/**
* @ORMEntity(repositoryClass="AppRepositoryProductRepository")
*/
class Product
{
/**
* @ORMId
* @ORMGeneratedValue
* @ORMColumn(type="integer")
*/
private $id;
/**
* @ORMColumn(type="string", length=255)
*/
private $name;
/**
* @ORMColumn(type="integer")
*/
private $price;
public function getId()
{
return $this->id;
}
}

18. Injection de dépendance – Orienté Aspect
▷ Symfony4 met en avant le développement orienté aspect
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 18
PHP vs JavaScript

19. Injection de dépendance
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 19
PHP vs JavaScript
public function getSkills(Request $request, ElasticSearch $es) {
$user = $request->attributes->get('user');
$coach = $request->attributes->get('coach');
$skills = $coach->getSkills($es);
return new JsonResponse($skills);
}
class ElasticSearch
{
private $host;
private $guzzle;
private $logger;
...
}
▷ Voici comment un contrôleur peut injecter un service :
Service injecté !

20. Gestion du routing avec les annotations
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 20
PHP vs JavaScript
/**
* @Route(
* path="/coach/disponibilities",
* name="coach_get_disponibilities",
* methods={"GET"}
* )
*/
public function getDisponibilities(Request $request, ElasticSearch $es)
{
$user = $request->attributes->get('user');
$coach = $request->attributes->get('coach');
$disponibilities = $coach->getDisponibilities($es);
return new JsonResponse($disponibilities);
}

21. Pleins d’autres
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 21
PHP vs JavaScript

22. Front-end
▷ Côté front-end, il existe une ribambelle de librairies / framework
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 22
PHP vs JavaScript

23. Développement orienté Composants
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 23
PHP vs JavaScript
C1
C2
C3
C4
C5

24. Séparation par composants
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 24
PHP vs JavaScript
C1
C2 C3 C4
C5

25. Autre exemple
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 25
PHP vs JavaScript

26. Angular 8
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 26
PHP vs JavaScript

27. React
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 27
PHP vs JavaScript

28. Vue
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 28
PHP vs JavaScript

29. Single Page Application
▷ Ces 3 frameworks permettent la création de Single Page
Applications
› Application monopages
▷ L’entièreté de l’application WEB est chargée en amont
› Plus aucune requête ensuite !
▷ Améliore l’expérience utilisateur, le changement de page est fluide
▷ Que du statique, tout peut être mit en cache dans un CDN* ☺
› *Content Delivery Network
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 29
PHP vs JavaScript

30. mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 30

31. mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 31
Evolution des architectures WEB

32. Programme CGI
▷ Un programme CGI est un programme côté serveur dont la sortie
est dédiée à un navigateur
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 32
PHP vs JavaScript

33. API RESTful
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 33
PHP vs JavaScript

34. Développement modularisé – Back-end
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 34
PHP vs JavaScript

35. Développement modularisé – Front-end
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 35
PHP vs JavaScript

36. Architecture WEB – Inversion totale !
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 36
PHP vs JavaScript

37. mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 37
Server Side Rendering

38. mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 38
PHP vs JavaScript

39. Server Side Rendering
▷ Une application Angular, React ou Vue doit préparer son contexte
avant d’afficher la page
› « Bootstrap time »
▷ On va chercher à optimiser ce temps de chargement initial :
› Pour optimiser le SEO ;
› Améliorer l’expérience utilisateur !
▷ 2 choses qu’on va pouvoir optimiser avec le SSR !
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 39
PHP vs JavaScript

40. SSR – Angular
▷ La mise en place en Angular est extrêmement simple !
▷ Et le tour est joué !
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 40
PHP vs JavaScript

41. mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 41
Progressive Web App

42. mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 42
PHP vs JavaScript

43. Avantages
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 43
PHP vs JavaScript
Fiabilité
Tourne online comme offline
Vitesse Engagement

44. Mettre en place un PWA
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 44
PHP vs JavaScript
ServiceWorker

45. Manifeste
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 45
PHP vs JavaScript
{
"short_name": "Meetup PWA",
"name": "Meetup Javascript vs PHP",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
manifest.json
<head>
...
<link rel="manifest" href="./manifest.json" />
</head>
index.html

46. Service Worker
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 46
PHP vs JavaScript
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/notre-sw.js', { scope: '/' })
.then(function(reg) {
// Etat du SW qui peut être installing | waiting | active
});
}
main.js
this.addEventListener('install', function(event) {
event.waitUntil(
caches.open(‘meetup-pwa').then(function(cache) {
return cache.addAll(['/public/index.html']);
})
);
});
notre-sw.js
Une fois terminé, le navigateur
va chercher à installer le SW
Création d’un
nouveau cache

47. Ce n’est pas fini
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 47
PHP vs JavaScript
Un ServiceWorker agit comme un proxy !
this.addEventListener('fetch', function(event) {
event.respondWith(caches.match(event.request));
});
Advient à chaque requête d’une ressource
La ressource doit être en cache pour
que cela fonctionne

48. Framework à la rescousse
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 48
PHP vs JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker’;
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.register();

49. Merci
Place aux questions
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 49

50. mazen@macademia.fr
Gardons le contact
mercredi 2 octobre 2019 PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia 50
Voici mes coordonnées

51. Restons en contact ...
mercredi 2 octobre 2019 51
@MacademiaFrance
@MacademiaFrance
hey@macademia.fr
macademia.fr
PHP vs JavaScript ⋅ Animé par Mazen GHARBI ⋅ Macademia