PHP vs JavaScript

PHP vs JavaScript
Animé par Mazen GHARBI

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

Complémentaires

Sommaire
1. Contexte de création
2. Librairies & Frameworks satellites
3. Architecture des projets Web
4. Server Side Rendering
5. Progressive Web App
PHP vs JavaScript

Création

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).
PHP vs JavaScript

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 ;
PHP vs JavaScript

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 »
PHP vs JavaScript

Typage
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

Limites
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

Coercion
PHP vs JavaScript
JavaScript Equivalence Table
<?php
echo true + '1' + 0; // 2
PHP
console.log({} + [] + true); // 1...
JavaScript

Du mieux ! Côté JavaScript
PHP vs JavaScript
▷ Les classes !! Avec héritage
▷ Modules
▷ Arrow Functions
▷ Template Strings
▷ Spread & Rest
▷ Déstructuration (objet et array)

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

Librairies & Frameworks

▷ 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
PHP vs JavaScript

Symfony 4 - Fonctionnement
PHP vs JavaScript

Symfony 4 – ORM !
▷ Gérer votre base au travers d’Entity
▷ Symfony inclut Doctrine comme ORM
▷ Couche d’abstraction
▷ Améliore la maintenabilité
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;
}
}

Injection de dépendance – Orienté Aspect
▷ Symfony4 met en avant le développement orienté aspect
PHP vs JavaScript

Injection de dépendance
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é !

Gestion du routing avec les annotations
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);
}

Pleins d’autres
PHP vs JavaScript

Front-end
▷ Côté front-end, il existe une ribambelle de librairies / framework
PHP vs JavaScript

Développement orienté Composants
PHP vs JavaScript
C1
C2
C3
C4
C5

Séparation par composants
PHP vs JavaScript
C1
C2 C3 C4
C5

Autre exemple
PHP vs JavaScript

Angular 8
PHP vs JavaScript

React
PHP vs JavaScript

Vue
PHP vs JavaScript

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
PHP vs JavaScript

Evolution des architectures WEB

Programme CGI
▷ Un programme CGI est un programme côté serveur dont la sortie
est dédiée à un navigateur
PHP vs JavaScript

API RESTful
PHP vs JavaScript

Développement modularisé – Back-end
PHP vs JavaScript

Développement modularisé – Front-end
PHP vs JavaScript

Architecture WEB – Inversion totale !
PHP vs JavaScript

Server Side Rendering

PHP vs JavaScript

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 !
PHP vs JavaScript

SSR – Angular
▷ La mise en place en Angular est extrêmement simple !
▷ Et le tour est joué !
PHP vs JavaScript

Progressive Web App

PHP vs JavaScript

Avantages
PHP vs JavaScript
Fiabilité
Tourne online comme offline
Vitesse Engagement

Mettre en place un PWA
PHP vs JavaScript
ServiceWorker

Manifeste
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

Service Worker
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

Ce n’est pas fini
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

Framework à la rescousse
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();

Merci
Place aux questions

mazen@macademia.fr
Gardons le contact
Voici mes coordonnées

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

PHP vs JavaScript

Contenu connexe

Similaire à PHP vs JavaScript (20)

Dernier (11)

PHP vs JavaScript