Présentation de Mazen Gharbi (Macademia) sur les différences entre les langages PHP et JavaScript durant le MeetUp organisé par JobOpportunIT à Sophia Antipolis le 2 octobre 2019.

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