rc
INUX / 1A / DENO / BASIC / BLAZOR / ESP / KOTLIN
Le magazine
Le nouveau back-end
JavaScript
Le retour de
aa Sa att)
DX
Ve
a aT)
Kotlin
pour les
dévs Java
Ma
@, Blazor :
une techno prometteuse ===
Le seul magazine écrit par et pour les développeurs
PHP / WINDOWS / SQL / THREADS / C++ / ROOT ME / LARAVEL / GIToo0e
PRENEZ DE
LA HAUTEUR
EN GARDANT L'ESPRIT D‘EQUIPE !
aoe ed
cybersécurité touchent I'ensemble des entreprises. WALLIX a
tee eee ee oe
identités, le contréle des accés et la protection des données, grace:
Pee ee ce ee eres
PA ec ee ee a acd
‘organisations dans la gestion de leur eybersécurité, la sécurité des
Cee en ees
aon aoe NLU aoe
La culture WALLIX, fortement imprégnée d'un esprit entrepreneurial,
Cee eR
eee ot ee elo no
axe Mta ola loaeeEDITO
« Developers
Developers
Developers »
Le motivation te gagne ? Tu vewcla montrer? Iles une sltion,
simple: le niveau Steve Baier dans son meeting de mat
vetion. Mais ces le niveau ultine de la motivation. fou savter
patout, re matvé comme jamais, une sllechouttée & 30° bien
huride et une bone sueur pour manter que ta motion est la
hauteur du df @ relever..officher un
lo world en 5 lignes de
cae... en Jove. [8 futéte mative non?)
n
Toutes et tous ensemble, clon (déalement sans respirersinon
pas cele)
Developers Developers Developers Developers Developers
Developers Developers Developers Developers Developers
Developers Developers Developers Developers Developers
Devel logers Developers Developers Developers
Le refrain peut te rapris dan le sore. Si vou ove la version
effique ou Kingeon, est encore mieux mais légerement moins
compréhenible par 99,95 % de la population.
Levenson Pokémon est uss une option
Ber tain on 30D)
Avertssement : le Steve Ballmer de 'an 2000 peut générer une
Race Condition. Done méfiance
as
Franois Toi -tone@orammez com
Bréyes 4
Agenda, ———_________________¢
Roadmap 3
Carriére 9
Matériel 12
Aoz Studio.
Abonnez-vous !
eeu)
¢ S Blazor
8 GBD delphi Deno lanowelle
g revient le nouveau techno
B surLinuinrnen 24 SENCUETSinrnn29 fendance ?n.33
Vestn
Programmez! n°238, prochain numéro
date stellaire : 28.02.2020
ro ee ed a Sn ree pared
Go : la nouvelle star du développement
Cerrar ee ee
programmez.comi/ 3as)
Cedric O veut aller
vers la reconnaissance
faciale
Le secrétaire d'ftot ou numérique
souhalterait metre en place une
période desc pour un disposi de
‘idéosurvellance boosté& la
reconnaissance facoleen 2020.
idee a été loncée & Foceasion
une interview sue sujet
Alice, le projet outhentificaton
por reconnlssoncefecale port
parle gowerement.Prwve que
cette technologie nese limitera pos
Ja simple authentication, mais que
le gounernement cimerait bien
Futliee pour la survellance. Simple
petit probleme évoqué por Cedric O
le RGPD interdt purement et
simplement ce type d usage. Reste
6 savoir comment contourner cet
obstacle & Finnovation,
Internet :
La Russie largue les
amarres
Ags favor anne, a Ruse a
fnclement men @ bin ses ess
vant &décomnectr son
inrsrctre Interested
rE2eou mondial. Lobe pout lo
Ruse est csr so capac a
déconnecter compterent le
cberespoce rusted reste dy
monde afin «de potégerles
cloyens en cos data.» Le
euernement user dome
eucun dtl teenie suo rete
de ces eet est cone
tons gratuites et inten
Mag ane ue ic
techniques du numé:
Fique, en s‘adressont priotiremant & ds profi
peu représentés dans ce secteur: demandeurse's
empl, non diplémée's, issues des quarters
priofteies, zones rues, avec un object de par-
18 femmes hommes. implon est abel French
Tech et Grande Ecole du Numérigue
Chez Simplon, la démarche pédogegique repose
sur plsius piers
SUNE PEDAGOGIE ACTIVE qui fovorise
opprenssoge en fin, e mode pro, le co:
cpprentssoge, pair pai, ete
“+ UNE EQUIPE PLURIDISCIPLINAIRE : un
formateur réfrent, des experts techniques, des
coordinateurs pédagogiques et des équipes
ket
Partie 2
“+ VENTREPRISE AU COEUR DU PARCOURS
des actions de sui ovec les équpes RH et let
tuteurs on entreprise, des professionnels qui
vennent émolgnerdeleurparcous, dela éolté
4u terrain et dispenser des master closs, des
projets pédagogiques émanant de besoins
concret dentepies.
Avec 75% de sorte positive 6 mos ops formation
(omploi, création é'enteeprice et poursuite de
formation) Simplon accompagne aussi chaque
apprenant dans son projet et son insertion
profesionnell, pendant et oprés la formation. En
cchoni, Simplondéploie plusieurs programmes de
formation desinés aux demondeurses empl
Des actions d’acculturation aux
meétiers du numérique
Le SAS #Hackeuses : un programme de &
semaines ésenvé ou femmes pour sinter ou
code, découvrir les métiers techniques du
rnumésque et pourquo! pas valider un projet dans
ce domaine. Er maiuin 2019, une vingtaine de
femmes ont bénéficié de ce programme é Lobige
Une seconde session et préwe sur Montpllie.
Le SAS #Refugeek : un programme destiné oun
refuges pour ccquériles compétences numéaues
fondamentoies et amélrerson rive de fron
Des formations métiers
Développeurse web/ web mobile et Techncienine
Supérieure Sytimes ot Réseaux : deux parcours
4e formation de 11 mois dont 3 en enteprie, Ala
dé: un Tie Professionnel de rveou boc+2
Des spécialisations dans les métiers
du numérique
Technicien/ne Data: un nouveou programme de
fermationcerfante de 7 mois en présetil et un
contrat en altermance d'un on,
Pour les développeurise!s, une spécialisation en
objet connecté de 560 heures de formation en
peésenta et @ distance
Enfin, Simplon.co propose aussi des formations
courtes pour les solarées et les demondeurses
lutions modernes et peut sinterfacer avec pour ricfficher quiun simple Pac-Man.
(ul eton on? Fans toutes es technologies du monde JowScrgt_ Ces notre but avec AOZ et AOZ Studio
Baxi etlou node tant back-end que frontend, que fout le monde puisse deve des magi
‘APs Rest, REACT, mySQL, etc. Etfonction- ciens du code. Que tout le monde puisse
En dx minutes, montre en main, le Basic ne évidemment dla vitesse de aveScript, découvrir la programmation por le jeu et lo
vous permet de comprendre la notion de c'esté-ire proche de celle du C pratique, et pusse ensuite passer doutres
programme et de variable, sons erreur et Le transpateur produit un code clr et It langoges pour entrer dans fe monde pro
sons recherche, avec une syntoxe simple sible qui met directement en relation le parla grande pore,
proche du lrgoge ps. Code Bosc cl code JScript, etre Se fil: histo
tune open blusation, utlkoeur pa,
Programmer en ouirant une simple aceaade, niger
comme on parle du JovaScipt directement dons le code
Soneratiericaettnesy Sok AOZ stupio
Alors que les langoges ctuels esscient de A=0
réduire ou maximum le nombre dinstruc-—{
free dediete deme port CONCOURS SPECIAL
eireecceres a LANCEMENT D’AOZ STUDIO
instructions, chacune portont un nom Pith Vous savez développer, vous désirez apprendre, vous voulez
claret proche de a langue parle 1 vite éalise le jeu ou app de vos reves ? AOZ STUDIO
Pour un enfant, pprendre programmer lance out dont vous evi.
an Bote oe cpene eso det Ceefonanalt ont ux es ius power fe pri des magions CAQZ
instructions, ou enlesossaiont@ une - de fie la rnston progressive de Basic ea eri
tion, comme on apprend une récitation. Et vers JavaScript et découvrir ce langage, pat ean pec OL cr
came pour les phrases, cst fstciton porte denise dy monde pro. Objet du concours : réaliser le jeu
des mats danse bon ore, et simplement Le produit comprend dretrent es op ou le programme de votre choix
cel, quiforme la phese ln routine, lopli cations saunegaros su ls machines de
cation. époque, et les convertis en une structure (attention a étre bien propriétaire des droits)
(On racnte des iste aux enfants. Avec mademe avec ls ements constvanss- Fin du concours : 30 Mars 2020
le Basic, ls se racontent eux-mémes des porés, le code source en ASCII, ls images Remise des prix: 20 avril 2020
Hstores, ovee un vocabulaire magique en PNG, ls sons en WAY, et Resear
dons lqusl un seul mat fit pparaire une La premiére version, disponible en mars | Ter pr: 300€ + licence & ve d/AOZ Stud avec’?
image surTécron,etun outela fat bouger prochain, tie sel Stati Code comme | ons de suport + Abonnement |on@Frogomme
cu eile IDE. La version suivante, présue pour i, Dalai aac pte eae wet 407 rks ee
comprendre notre propee IDE progrenmé | ane de support + Abonnement | ond Programmes!
Le retour de la simplicité en AOZ hiiméme, et sera daponble en | Se u 6a Licenced’! on’ A0Z Suto + icence 1
AOZestlare-érture ave ls technologles veri lace eng, cirque denom- | Gnd Dawid Gonecodeur
imodernes JovSerpt et HTMLS de TOS et brewcoccescires pour éaer toner des. | Je aye: Licence de 6 mcis FAOZ Sud + feence
AMOS, qui furent de gros succis en sptes, des sons, des mops, te. formant | de 6 molsé Dovid Gomecodeur
Angltereet danse est de Europe suf ons une vétble gome-engine avec fous
peutéireenFance-enre 1987 t 1993. les outs nécessoes pour fabiquer des ee
W agit dun wongpcteur et non pas un jew
‘compilateur, qui prend en entrée du code Surnotre roadmap, se trowe Névolution du | Pas dinscription, mais ftes nous savoir que vous démarrez
‘ar un simple mall vec vote projet résumé su
de syntexe Basic et le convertion transpilateur, avec Tojout dexpor vers aren Teer
JovoScript, produisant des applications autres langages tls le C# et interfacoge
prétes @ fonctionner dans le navigateur avec Unity pour accéder au marché des | _Enpatipant & ce concours vous comprenez que chaque
sons serveur ou &éte wrappée par des ss- consoles, CIC++ pour utiser Unreal, mais | Paticpant ne peut gagner quune fis, que le ou es auteurs
du programme en reste propria, décidelnt seul) sly
tomes tes que Cordova en exécutables égolement pour a programmation sur |“ brogmmme et ree propre, deca) st
‘pour machines mabiles ou PC. lest done £$P32 et Arduino, blir et communiquer sur ce programme.
possible nec le méme code source dexpor- Je sus persuodé que pulssontne doit pas [Girt la tomar de deveek masicee
ter sur toutes les machines xistantes, forcement dire compliqué. Pussant doit Loteam AQZ Studio
Leroteur utile Thee.js pour le rendu, et plu signifier profond, et ces utlisoteur | Eq partenariat vec Programmer! Et David Gamecodeur
de nowels instructions pou fabrquer des lui-méme qui doit décider de creuser ou pos
16 Iiprogrammez.comBlack Hat : Dino Dai Zovi, hacker émérite new-yorkais,
milite pour la coopération et le DevSecOps
Sess
cus. Ala tate de le sécurité chez
Square, le quotiien de ce cher
cheur est fait de reverse
engineering, de code, exploit
audits et de recherche disxupt
ve. la ouvert Vion 2019 de la
Black Hat dans une aréne bondée
de plus de 20 000 professionnels
de la cybersécurt.
saturds,Jof Mos e boss de Black
Hat impose dans le décor, ise
sent «comme a la malson», nous
cuss, Nous some
patties, le erdateur de Def Con, CEO de Black Hat,
rus Pexpoit d'un 22e rendes-ous @ Las Vagos
Des années de rossemblement qui ant renforcé lo
Coit en plein summer
communauté internationale et une conférence
‘mente qu conserve son inspiration et une co
{Federer hors norme,
Depuis au moins 20 ans qu'on se dit que les ve
loppeurs sont sens intégrer la culture sécurité, on
4 Fimpression que le sujet est €culé. Als que
Stes passé pour que cette key
Folie vintoge donne impression dinnover?
ouverte &
En projetant des images erode save de hack
des années 2000 (sc, Dino Doi Zov parle de bou
leverser lo culture sécurité pour encouroger
engagement de chacun, & univers passe
tout on temps libre a rower des falls de sécurité
ct &sfontrine & les expo, plus tard i eoncourt
‘au Pwn2Own lors de la conférence ConSecWest,
une époque ol s0 posture dons la shcurié est es-
sentielement offensive,
rl comprend que Vntération des besoinslogi-
els et por essence ceux du développeuy, sera plas
fique & impact de son propre job pour fire
face aux ds de sécurité, Cependnt les années
assent et la culture cybersécurté rest toujours
as sufsamment anerée dons les orgonisations
Pour Dino lo révlaton orrve en 2014, lrsquil
constate que les ingénieus sécurité cher Square
ent comme tout le monde, Dés lor sa percap-
tion de Vinfuence dela sécurité dons entreprise
rend une rowelle dimension, empathic fovorse
lo collaboration
I évoque toi grandes étapes pour se prémunir
ficacement et sécuriser au maximum un produit,
Le premiére dot intervenit en amont dela concep
tion logiciel, a doit permet
<‘automatser audit de code tout en poursuivant
le dilogue interne, enfin, il sagt de difuser
Adopter la cure sécurté dans un cade cole
boratif et ouvert. Cette apprache qui semble s
vidente dot perme
semble, en co-esponsabilité et tout au ong du
cele de développement, Pour ino, ne dak pas y
les développeus et ls in
isque la sécurité et trop
re 8 tous de trovailer er
voi de font ent
aénieurs en sécurité
souvent vue comme unfrein & Finaovation, Hl pro:
ose aux Equpes de sécurité de commencer par
die « Qui, comment pul je vous alder? », et de
sotacher&souteirles besoins exp, Selon
Vottude « Mister No» est conte-productive, elle
traduit la peur et celle-ci nest pas ratio
Cette peur est ausi un argument fl
cite & ne sen fore. Se concentrer sur ls attaques
Oday et manquer le reste n'est pos construct
1 qui
oul protiques issues du déve
loppement agile et du DevOps
peuvent s'oppliquer & celles de
Vingénie
maximum d'impact
fen sécurité pour un
«Tout le monde a
un réle a jouer dans
la cybersécurité »
Selon Dino Dal Zov, nous avons
atieint le point de transition en
Lologique du
pr corr entreterue parla com
s chercheurs en
sécurité 0 prouvé so lite de vo
vers opportunité d larg les
liens avec la communauté des développeurs
Pt
lus bénéique quons
mative de sécurité
de fire culpabilisr cos deriors quo
ber @ ours eds?
Dans une ére nouvelle ala recherche de failes
se monnaie, Ninvestistement dans une sécurité
renforcée et le eopprochement
tionneles apparent une valeur jou signif
8 'enrepse, Le management a parfois encourage
Lune opproche en so et dann la pit aur dois
de production Sile DewOps 0 réaluonne lo ma
de répondre aux besoins chongeants des
clients sons sacrfer la producti, la sécurité en
continue n'a pos at inrnséque ou mouvement,
le DevSecOps une prioité. La sécurité est rar
ment au coeur des préoccupations des équipes
‘opéationnelles qui se possent partis d'abserver
toutes les mesures de sé
sve
yité pour atteindre les
las imposes
Une réflexion profonde en feveur du chongement
dott opérer,cor st en permettant une lage i
fusion de la culture sécurité dans les entreprises
{que chacun sera conscient de sa responsablté et
ue la tronsfermaton sero rélle Etre ogi, calle
borer communiquer sont esentels pour fie face
actueles. Les équipes de sécuté qu
adoptent cette approche rédusent es is
en minimisont impact sur la productivté global.
17
programmez.comi/SECURITE
YesWeHack lance une plateforme de
formation autour du Bug Bounty
Le savoir ‘st le powoir! Et YesWeHock fa bien compris. La stortup a a aaa
franceise, leader du Bug Bounty en Europe, a décidé de transmettre Esa gerESGl o> wstsoneennée
tous les enseignements qu'elle a tré de son expérience en matiére de jut on it qu uy Bot et ws inprot
dlétection et de divulgation de files de sécurité travers le lancement pour ecto de fales de sear sures oppeatons
de sa plateforme éducative, YesWeHack EDU. les ses web Cet pouual est tnt ps important ue
reuspuisios nav ome dest peop Sr
Y= EDU s'adresse ainsi ux _représentent a réalité et surtout d’adopter | YésWeHack EDU nous avons un wai sii de notre trv ce
P
romotions aberécuit des Ecoles plus faclement les bonnes patiques du | quest ben plus pédogogiave, dutont aul plteforme
GFingrieurs et plus lrgement 3 Bug Bounty « Aujourd'h, ce qufatavo- | nus pemetd'unformie les données tes appr que
encomble des promtionsspéciases IT leur du Bog Bounty ce sont ls rpports et | nous produsors. Nous powronsfociementreven su ces
{Big Ddcta, développement, etc.) qui veur les données que nous générons, Nous de- | demiers pour les comparer et s‘améliorer. En outre, nous
lentacclérerleparagede datasets (ude vars. impéraivement apprendre aux | wane tral sr des tuations qu sot rs semblobles @
données) de qulté. Lopproche pédago- —noweauxtolents créer des informations | c® que nous rencntons dan oot sans ai poser
lave de Yes WeHock EDU wise abord 8 de qualité pour avoir des sources d'or. | parle plateformes ofc qui restr plu dficles cals
encourager mulation via a garification maton es plus ches possible», déclae | que YsWeHack EDU »
etlnpicaton de chaque élve dont la sé Damien Lecoewe, CTO de YeWeHock.
curstion de soniastitution. Ele ouve auss! les étudiants ayant commencé a tavailer | Hadrien Bouffier
et surtout des perspectives aux futursdéve- sur plateforme abondent dans ce sens, | Etudiant de 'ESGI en troisiéme anne
loppeurs pou aller vers des spécataions « C'est important pour nous de powoir | « our mai quo un background de Blu team, le ug Bounty
prometteuss : DevSecOps, secriy-bydesign, nous confronter facilement & des solutions | est trés complémentare au pain test et au travail des Red
‘etc, Afin de démontrer le fonctionnement qui sont semblobles @ ce que nous retrou- | team. L'ovantage, c'est que c'est ouvert au monde entier et
de 20 solution, YetWeHack nous ovat verons dans det envirnnements | que dons le hacking i fut aur hu powcr confronter
{oilers coniés une mie en situation —profesionnels. En oue,YesWeHack EDU | frente opproces et irene cures, Uovontoge de
{ue sein de formation etd opprents- lve de ombreut fens que nous avons | YésWeHock EDU c'est que go nous appt une lteforme ls
sage en lo présence délves de Ecole précdderment quand nous voulons accé- |r main. En plus del plotefore, ce quest importany, cst
Supsrcure de Génie Infoemotque. der 8 des ploteformes de Bug Bounty », | le programmes que pewent créer les ensegnant. Nous
eplique Aurdlien Delagarde,étudont do | powers fore des instances de labore de séur, créer
‘Avec le nombre croissant de menaces et rESGI en quctriéme année des rapport et ovale dessus pour nous amélorer. Le
Isomorphisme ovec le monde Web en supportant lo syntaxe
des modules ECMAScript et en bannissant la fonction aie)
Comme indiqué précédernment, Node pitt d'une résolution de
épendance inficoce ; Deno résout le probléme en étant plus
expt, simple, et direct, tout en stant conforme aux standards.
(ino *aslg on tse and sogies)
Le code distant ext récupéré et mis en cache localemer
A Vinstor des nude nti, es dépendances nécessoites ou bon
fonctionnement d’un projet sont téléchargées et récupérées
localemert En revanche, elles ne serot pas stockées au niveau du
projet, mais pluét dons le dossler global de cache de Deno
(denise par défout). Une méme vesion d'une dépendance ria
onc pos besoin d'tre retléchargée qu/importe le nombre de
projets locaux la nécestitant. A noter que ce fonctionnement
resemble & yam ipl pnt ampby.omeuesp)
Des permissions spéciiques doivent étre explicitement d
nées par l'utilisateur final
‘une re olla sécurité de tutes nos applications es de mise, eno
«englobe lexéeutoble produit dons un mode bac & soble os chaque
cpération sotant du contete dexécuton doit re autorisée. Un
‘cobs réseau par exemple dot re accordé par un “yes” explicit de
utliscteur das a tgne de commande ou par le flag ~alw-ae
Encore une fois, Deno souhcite se rapprocher des paradigms
Web :accés& la webcam por un ste web, par exemple.
Un liveable, un exéeutoble
Dens un souci de dstibuton effcace, Deno propose son propre
bauer (don tune réont au moment del ison un seul et urique
3){
thon ne no ge toch;
debe
‘hen ne re: ising as;
)
’
os te feat = ema,
Enfin, nous persons et itévons le fichier afin de fete cessor les
lignes contenant le potter recherché:
ot
castor = 928m ethene
lente
‘urlorstineof ew eee decoder pt
‘rendu
consol
‘gee mtb) SBnerepet, eter)
i
)
lumber;
1
atcha
cose gece ig prices.
q
Enfin, pour lancer loppliction, exécuter la commande de
repos gest
fo étont le pater, et tt un fichier contenant des chanes de
coractér,
Exemple 2: Overkill Gues-A-Number
Ce dawxidme exemple est un mini jau: le but est de trower un
romibre ere 0 et 10 & partir dindies “pus” ou “moins”. met
en avant ution d'un framework ters, de import de Reoc, et
<ée la compottilté ISX,
impor dun es et presque identique & cel d'un standard
impatone un get
mga
ian,
fete,
Roster
om hysteria;
ng pp, Guest, eee eg re"
Un fichier tnt import, fet dot ere utilisé pour pouvoir fire
fonctionner ensemble. Le fichier pages est donc compléé irs
Ingres" neat
imu ear fo hsdpa deen
(On peut done grice & extension ts ainsi qu’a React utlser SX
our exporter un composant rendu ct serveur par exemple
‘apr fait ris Homes =Q)=> "
Sieat00USereredestng
cae pp >
deg ga >
>
ws
Yous pouver lancer cat exemple via la commande eno
uesanunbcnes
Enfn, vous pouner retrowez les exemples complets sur Github ou
méme les exécuter directement depuis leurs URL.
“raw gthubusercontent”
tpg come Veet popanner
PRODUCTION & FUTUR
Pour instant, Deno siest pas readto-prod. Les principales
ulstions étant de créer des outs de ligne de commande, des
31
programmez.comi!‘estonnaires de tiche de fond, ou des sereurs Web (6 instr de
Node}, les performances de Deno ne sont pos eu rendez-vous
souhoité por Dahl Il est toutfis possible de commencer a
eopésimenter grice ou développement outs interes comme des
botch scripts por exemple. Un benchmark en temps réel est
disponible sur iy: n/ercmaks
Commit oprés commit, les benchmarks sont mis @ jour et
‘comporent les performances de Deno 4 celles de Node sur
plusieurs niveau, por exemple le nombre de requétes par seconde
{ui et le premier goulet détronglement bloquant ulsation en
production) la ltence maximale, les interoctionsentré-srti, es
Cconsommations mémaire, etc. Deno est déja meilleur que Node
sur quelques points et ne cesse de s'amorer ou fl du temps pour
‘espére inc premier sur ensemble des tess effects
Et la v1.0?
En plus des. performances, Deno compléte lexpérience
diveloppeur grice & un ensemble de fonetonnaltés et doutis
cessontils@ la sortie de la version 1.0 qui pour are cosidérée
‘réte pour une utistion en production
stant os possible de déboguer ou d’nspecer une
pplication ; quelque chose qui peut &tre corrcgnent lors du
aiilectit>
i
1
3
4 gchcoent
5
‘
_cutongondie"ner>Ye tons
1 chi
‘
3 ewee(
10 (Paanee)
11 paicstig Te get se}
2
1 (aanee
pai Redesagpent Caeonet (ee)
s
Pirie)
fern
Cg
fee
= ee 7
telat Web Assembl |
leas i
r
forma
L
ages
Mono.wasm
16 pate wid ted)
wi
18 Goleta Wiehe cose in es baton seeded
v)
»)
Yes fichiers seront ensuite compilés avec MSBuld pour générer des
fichiers ss etl reposont sur Mano et WebAssembly pour accé
derou DOM et fire le rendu de votre application web,
(Cdessus un rapide schéma décrvant ce comportement
Les sections en blew clr sont des patie ies & fnfostrucure
dnt vous ne dewiridofement pos ov vous soucer:)
A noter que lorchitecture déciteci-dessus sovre étre porculé
‘rement adoptie dans des scénaris de développement obi ext
nécessire de régénérer et déboguerfocilement nate applica:
tion, et devit etre en grande parte conseré dans les versions
futures de Blazor.
En ce qui concere ls scénarios de production, le fonctionne-
rant deat changer et permetie une campilason AoT (Aheod
of Time) qui dewoit permetre& son tour de générerdiectement
rot binaies en fichiers asm et dobtenir ainsi des perfor
‘monces bien plus rapide
‘Au final, ce que vous obtener en sot dela compilation est une
poignde de fichiers statques, que vous pouvez tout & fait héberger
comme nlimpore quel site web stique clesique en pur HTML,
CSS Jovescit!
A parte del, tout est pose : de thébergement sur de tAzure
Blob Storage, au simple contaneur Docker Ngin, en passont par
un hébergerent standard sur de laspnetcore, tous les choix so
frent@ vous ! Toujous pas conan? Ayontebtenu une applica:
33
programmez.comi/34
tion web sttique, vous accédex égclement & tout les outiloges
rmedemes du développement web:
* Vous vouler exécuter votre opp Blazor comme une Progressive
‘Web opp pou avi le support de offine, et. ?
* Que diiexvous de lexécuter en mode desktop embargué dans
delElectron ?
Sans oubler de mentionne lexécution de vote opp en mod hybi=
de sur du mobile avec Cordova
(Ok, tout go semble tres expésimental me direzvous. Mais vous
saver qui? Le meileur dans tout ca, cest que Féquipe cxpnetcore
‘est également en tron de sue de prés ces nouveau usages et
‘réroit dele inclue dons leur Roadmap pour que tout ca wenn
‘en standard avec aspnetcare | Ah oui, oublas le point eps i=
dnt: étant donn que note application Blazor est écrtean Ct, le
partage de code enre les partes clientes et serveur sont vider
‘ment tres simples, et fon obtient aces aux packages NuGet égce=
‘ment, et! Si je pense que lutlsaion principale de Blazor se fora
‘rnciplement via sa version Blozor WebAssembly, voyons tout de
‘méme un scénaro plutt inated mais néanmoins tes intr
sant nommé Blazr Serve.
Blozor Server
Erie de conserve un cllent Kiger et une chorge pub cid serves,
tout en fourissant une inferfoce graphique qui peut se mettre &
jour ynemiquement san rechargement de page ?
Bazor Server, bosé sur SignalR, propose que le client se content
de télécharger un petit JovScrit pour se connecter au systéme
Signa, et ensuite enoie tous les éxénementsJovaScist au se-
‘eur sur laquelle DOM sire est coleulé, qui se charger enfin de
‘envoyer au cient les modifications du DOM @ effectuer
Hy. quelques avantages pour cette méthode:
* Les fichiers ll ne sont pos accesses depuis le navigateur web,
* Lexéeution de dotnetcore reste ce serveu et permet deccéder
Plus feclement ous fonctionnalitscités serveur (alt que es
orctioonalés du nevigoeur web)
* Le support dE 11
CCependont, vous rites alos plus dans une SPA et vous perdez es
bénéices uants
* Pus de déploiement "la fichiers stotques' cor un serveur asp-
netcore est requis,
* Pls de PWA cor vous vez besoin dre constammant connect’
* Choque événementlaaScrpt est calculé cits serveur putt que
‘bt cent, générat du coup un peu de latence
‘Aare evantage a theure actual: Blazr Server esta seule version
supportée en production ! Du coup démarrer un projet en Blazor
Server permet de prendre de lavance sur la préparation de ses
composonts Blozor,ofin de pouvoir basculer en Blazor WebAssem-
bly lors de so sortie en version stable.
Commencer 4 développer
une application Blazor en
quelques secondes
Aujourdni, si vous vouler démorer un projet Blazor en quelques
‘seconde, yous pouner implement suive la documentation officiel.
le, qui est composée de 3 étapes principales
* Insole a derrire version 3.0 du SDK NET Core
Iiprogrammez.com
“Instcllr la version lo plus recente du template Blazor en exécu-
‘ont la commande dotnet new -| Microsoft AgpNetCore Blezor.
‘Templates: 30.0-"
+ Cider un nowveou projet Blazr WebAssembly en exécutant les
commandes
dotnet new blazorwosm -o MyBlazoMebAssembiyProject
- pus ed MyBlazorWicbAssembProject
enfin dotnet en
rest tout, vous obtener alors une application Blazor WebAsser-
by uifonctionne, et apart de laquelle vous pouvez commencer a
développer
Pour a déployer en production, il suft dexécuter la commande
dotnet publish c release pus de copier le contenu du dosir publ-
shidit sur votre habergeur de ste statique pret, ot void!
Mais si comme mei, vous rlsimez pos trop pot du principe que
“Rout marche, comme par magi’, coninuez dele la suite de cet
orice
Le projet Blazor le plus simple possible
Pour cider une oppicaton Bloor lo plus simple posible, nos
alos tot dabord evr besoin un fichier de projet Cg
Ceti va pemetre de dfriles veins da tooing spective &
Bla; cin ue les dipendncesnécessrs(Microsoh Aspe.
Gore lao, Microsc AspNetCoreBlzorBuld ot Microsoft Asp-
NetCore zor Cl
Ensuite comme rimporte quel projet ASPET core clsiue vous
cures besoin dun fie rogram. qui opel un hier Sor
tunes. Ce dei sera en charge deter comport aie
Blozr ppl por convention App
Pais, pour la pore purement Blorr, vous avez besoin dun
Aichi App rez dts le omant rine, ans une page
por deft, génécement apps Indexrczor, que Fon place &
Trteur dun dossier Pages tout ca pr coneton
Pouring ce qui pemetra dr tou aes n chi index
contenu dove le dostir mwirat. Dans cfc on y tuner
notamment une rfirence verse amor Hr webesembhis
«ui perme de chorgerle runtime mono das so vsonwebor-
Serb isl que tutes os ibriies NET, eles mmes d-
ries dons un ihr boror boot on
desousun ptt éoptulat de tous es chiens menonnds
+ Un fhe esr de ret C8,
* Un itor dete Programs,
*Unfiior trun,
+ Un compotont Bazan din dons un fichier Ap aon
'* Une page Index.cazor définie dans un dossier Pages (par convention),
+ Pus finleent un fichier index ml & itiour du desir
vrmrot qi sorte pont det.
Yous pouves vor le contenu de ces fichiers dos le commit
Gib #ADD sms publshobl sta Blom projet, mai ce
stade, ils sont principalement vides.
Pour disloer vote prc ist exter le commend dotnat
publish sc release puis de récupérer le contenu du
dossier ./bin/release/netstandard2.0/publish/yBlazorWlebAssembly-
Prec pore poser done vote hibergeur dest tin
preted.
oppicaton Blazren tant que tlle ncesste de lécharger 5,
tno Cela et pincpeement otal de hier mana wasot mics qui pésent espectvement 1,8 mo et 1,3 mo.
Mois puisque application consise uniquement en de simples
Fichiers statiques, ils ne devaient idéolement ete téléchargés
‘qulune seule fis, permettant davoir uniquement quelques ko &
tlechorger lors des future chargements de loppicton:)
Ou héberger
une application Blazor ?
Concernant Ihébergement, en fait la documentation officielle
déert ptt bien les diferentes posses qui soffent & nous,
ais jaimerais even rapidement sur ces options et bien sli y
‘pperter mon grain dese)
Hébergement Blazor sur un serveur web
de site statique
Sivous es 3 for vel bon view server, Blaze ore
ume intégrtion ‘out-thebor et further web config
nécesoire pour thabergerent, rrowebledrctmet parm es,
fchis de pubeation dente cpplction.
For conte comme note aplication Blnor est une SPA, nous
curonsbesin dint le URL Rewrte male ain de redtger
ros equtes hp ves note oppzation 9: eigerrequtte
Jobo ves fcr index hil contenant note SPA ptt que des-
tayo devour des fhe dos un patel dss IS bn)
Er sivous oe ls that de manipuler des seus Ng ou
Apache, vous power bien éidemmenthéberger wore appica-
ton lator desu, Vous pourer tower det expe de congue
fon simple dehierngimcon ou de caniguratin Apache sul
decumentton oil
ais poursuens un peu plus en dtl cthabergement Noi,
rctment iter dun cortener Docker.
Héberger votre SPA dans un simple
conteneur Nginx
fot, vous aves di un exemple de D
fon ofciele (du bon boule cette doc vaiment 3, ma, probable
tment pour des aon de simp, le hier Docker
ue vous és dé en possesion dun pockage pet re depo,
pour leque ne ester plus qu ere opi danse conteneus
Si cate approche va fonctionertechniqueen, ple beau
coup ps ide davoirun fer Docker cE de no slain,
capcle dle bude t de gnéerles hier nécssaies pure
catermon apleation
Pour aver ce scenario, nous alors reproduite
rise quis fur par Vial Sudo pour contneuriser une pp
cation cxpnetcore: utser une Build Docker mult-stoge qui s2
tera sur image du sdk dtnetcoreetsurune pte image Ng
Note: ant donné que Blazorriest appara que depuis la version 3
du framenok amet core, est évdemment cestode rcupé-
rerune mage possédnt ou minim cette verso.
Vol & quo resemble notre Dockerfle
cherfile sur la documenta
1 RoNngipne AS tase
1
3. RON ne niasom one ek 3015 poh
4 WoRKDR sc
Hello, world!
5
6 COM TSmplesaticBanrsp
7 WN dotnet restr
9 am.
1D AUN dotnet bis «reese np
"
FRO bse Sal
13 COP ngcad erga
14 COPY -fom=pblsh Smal shang
Putt simple et concs non?
(On ensuite besoin eectuer les commandes docker bul sim:
slestaicblazor. (ne pas our le" afin) pourbulder nate Image,
end);
n
my
Cetype dhébergement permet égolement des scénarios plus avan-
cstel quel Serer Prerendering
Le him de note epplicaton Blozor est peé-caleulé directement
depuis le serveur ce qui pemet de renvoyer une simple poge him
lees de lrevé dun premier visteu, occompagnée dun pet fichier
JavaScript. Ce pet fichier Javascript permetra ensuite derehydro-
ter notre hier htm ter le hl offic tle dom vi
tuel) pour que notre vsiteur obtienne au bout de quelques
rillsecoades une SPA Blozorcomplétement fonctionnelle!
Daniel Roth, Principal Prageam Menager sur Blaor, a déjd pubis
sur son Github une démo foncionnelle de cete pare,
Comment transformer
une application Blazor en PWA
avec Workbox
Si vous raver pos encore entendu poré des PHIA, ce sont des
cpplctions web qui s‘approchent du look and feel des opplications
ratves, permettnt dre insallables, de fonctions offine, den
voyerdes notifications push te.
Personnelement,fadore Ide de powoir furnir une application
focilement installable sur svimporte quel systéme (Windows
Android, 10S} dans avoir besoin dle difrents out, langage,
rmaniéres de déploye, et... rosso mode, nous alls avr b
de 2fichias pour créer tre PA
‘+n fichier manifest json décivant notre application installable
(con nom, ides, ete)
* un fichier Service Worker sw js pour ger
5 Bush, ec
‘eyons maintenant plus en dis comment es oa
fine les n=
fice
Décrire installation de notre applica-
tion Blazor avec un fichier manifest.json
ANoiter un fichier manifest jon note aplication Blazes pdt
single, on ara bescin de outer cu dossier worroct fin qui
sof publi dns le package Fra ad que de rojuter une ren
ce dane le fichier index
Unichir menietson resemble 8 ga
(
Shu sane' Bambi,“a'r Woon Pw
ios
agen 25
“ape age
“seen
1
‘
“se Tinagesons ST
“te age
“ses
)
1
‘taut
Dacgond_ ol" 836706
gay staal
‘oe,
“ena
00
Ia nous permetre de défnir le nom de natre app (shor_name,
nome), un peu de casmiéiqu cor, background colo theme col,
URL accéderen made ofine stort url ete
(On aura égolement besoin de rjouter quelques asses supplémen
taies tls que des icdnes, favicon ee, pour avoir une jolie PM
enfin rojoutr la Bgne sunate dans la base den
cher index html
Les Owome Dev Tools devient fcher quelque chose desma
Ajouter le mode offline a notre
PWA Blazor avec Workbox
Un avantage que odare avec ls applications Blazor est aca 8
toutlutiloge standard et mature 4
perzomellement fun des oul dant faccés me rend particule
‘ment heureux ‘oppelle Workbox: Je ne Sis pas si vous over dé
essoyé d’écrire un service worker avec du JavaScript Vanilla, mois
personr
de développement )
Du coup Werkbox ext un oul oper source maineru par Google
qui simple grandemente développement de service worker.
En gros, se compose d'un out en ligne de commande eta nous
permetre de générer notre fichier de service workers js, prét re
référence dans note fichieindex hil
Tout dlabord, nous aurone besoin d'un fichier workbox config js
lerent ce r tit cairement pas mo
eure expéence
idee
“she "bvReaettsndn2 Obs nba
“gates
“I fimlsm.ospicpounesnal)
1
"ses iene Opslaan
»
8
+ dlobDirectory permet dndiquer & Workbox ou sont sts ls
fichiers 6 metre dans le cache pour le mode offne. Dans note
38, ga sero le dossier de sortie dela commande dotnet publish
* alobPatterns permet de filer le fichiers & prendre compte dons
le cache tel que les fichier html es, is cs que les fichiers dos
sats, mois surtout les fchiars wasm et dll car Vapelication en
question est une application qui s‘effectue avec le frmewor
mono webassembly
* et pou fi, le poramitre swDest permet de pricser ol placer
note fichier auto généré de Service Worker sw, dans
le dossier de publeation de nate opplication,
Note : existe doutes clés de configuration disponibles avec ce
fichier de configuration. Plas dinformation sponte sur lad
nentation ofcille
nous este outer une référence vers notre fichier de ser.
vice worker dans nate fichier index tml en ojoutot ls lignes su
votes la fn de notre balse
Eni,
1 sit
1 Check see wre ae sppores
(avian ato |
seth wine na eet oe the page a perfomant
vindowadetstere a ()=>{
naga severe eeu)
Pour générer notre package de production, on exécutera les com
bine pbc lese
rior gente werbor-onfggs
Ce packoge est bien entendu utilsable sur nfimporte quel service
application web statiques capable a’héberger une SPA,
programmez.comi/
BLAZOR
37BLAZOR
38
Hello, world!
Eryolé! On obtiant une PW Blazor installable et usable méme
enoffne!
Remarques option de réscou mise & affine et pourtant Fapoica-
tion reste fonctonnelle ! Dernier petite vrfication,regardons ce
‘que Chrome Lighthouse nous donne
Pas mal pour une mise enroute avec pau de lignes decode)
‘Comment afficher une SPA Blazor
webassembly plus rapidement grace au
prérendu serveur
Mointenant que nous vars obten une aplication qu foneton-
neoffine, jon vor un peu comment affichernatre application
Blazorwebassembly ps rpidement ou démarroge
En effet, lrsauelopplcton et composte uniquement de chies
staques, tou las fichiers ont besoin re chargé avant de pou-
voi oficher le rendu graphique, ce au ofche un message “Loo-
ding. &nos ulster rs du pret aces oppcation
Parcote une files ches charges, note SPAreste ben enen-
Ensuite dans le fichier Startup.cs de notre application aspnetoore,
con a besoin dojouter dans la méthode ConfigueSen
vices nécessires au rendu de notre page "Myc, ainsi le Http
ler utisé par notre oppliation Blozor
1 secs ae
2 seis heaped tpn s=>
a
4 varvigainMlager=s.GetequreteniceHavigearnage>()eure tpt
{
sede
eatin Ba
fin dons la méthode Configure, on a besoin dojouter les configu
i ederelpment)
i
sp leben
,
he
i
pli)
0 apse
apes lescbano_ won pwaStaap>0;
2 amlbstates;
3 apt
14 ap snes
BI
6 endpoints Mapa;
endpoints MapfltacToPge_ Hos"
8h,
On peut dors et dé tester le prérendu de ntre application en
longontlapplication aspnetcore, et oins constater que le premier
afichage de note page rlaiche plus de temps de cha
on daccord, ce rlest peut-tre pas aus “ind blowing” que co,
‘mais revoyons le fonctionnement intl sons prérendu serveur
Cest meu, non ?
Sur le chemin de la PWA Blazor “idéale"
‘Aufl, apres quelques points daptinisation (activation de a com.
pression, cjout de bases ou ctrbuts hil nécescires, etc. plas
{infos sur mon GitHub), voyons voi notre score sur Lighthouse
des Chrome DevTool
On obiente score masirnal concemont le été PUA denote opel
Caton ! On a toujours quelques pistes daméboration cété perfor
‘once (correspondant ou score de 83), principalement du 6 tale
lede toutes, note ap,
‘ce sujet, fl pas mal espe que le fture immplémentation dune
ls, nécessaies pour interagi ov
fonetionnalté de compilation AoT (Aheod of Time) omdlior les
performances csi qu la tlle du package. Plus infos dans lc
kot #5466 sur GitHub
En conclusion
Comme toujours, jespare que cet article vous oura donné une
bonne we densemble de Blozor Webossembly et des idées pour
Plier
(1)hap/ga om ai ti-vate
wan eH aeaDeTTBSATehS70 161
BLAZOR
Hello, world!
Hello, world!
Counter
Merc beaucoup & Chis Soiny qui conrbue beaucoup @ la com.
munauté Blazo, et notamment pour son article Perendering 0
Cente Blazor Application qu je vous recommande dele 690
lement! Merc €golement& nore qu Blazor Donel Roth qui avait
portagé un exemple de prérendu serveur avec Blazor en premier:
jeu surGitub!
Nast pas & me joinre sur Twitter @vivienfabing, dors les com
mentczes ou par nimporte quel aure mayen, et que le code soit
39
programmez.comi/Blazor vs Angular :
vrai débat ou idées recues ?
Frédéric POINDRON, architecte logiciel et gérant de Ukitechs, connait Blazor et Angular. Ques sont les pour et les contre
des deux technologies ? Méme sila comporaison nest pas toujours facile, quelques éléments peuvent clare les arguments.
Mais finalement, rien neremplacera les PoC pour uger par so:méme.
Les + de Blazor
Produetivité:
* Un seul langoge informatique & meitiser(C#)
pour ralsr le front End (Client Web qui fone:
tionne dans un browser internet t le back End
(Serveur Web), Ans, un seul et méme dévelop-
eur peut partciper indifléremment @ la
réalstionicoretion de une ou autre des por
* Les équipesne sont plus cbigées d'avcir2 types
[
“wio"=> Tod
i
CContinuonsa configuration de nate table. Nous devonsutlserles|
és de érumérotion sous. La dé: ara tes,
Laméthode up ressemblera donc 6 cei
bli fata)
1
‘Stace ods nt (Bei Sale
Suble>binaenentsi),
Suble> sting wk);
Stable >enum( sats ary. ngge{ eum tat}
Sublets)
1
‘Yous power présentexécute les migrations avec patina
Si vous vr votre tablet, es colonnes suivants apparaiont:
1, th, sats, cea ot updated a, Pett coup dil sue-champ st
tus que nous avo crs en tant qu'éruméation: sit un YAR
(UR, Pos de sou, ces Lorave qui soccupe de tout. I vérifiera
si fentrée du modele correspond bien aux entrées disponibles pour
le champ,
‘Nesntenant,possons & la craton du modéle en hubréme, Ren
dez-vous sur poh.
Le modal est vide, st tout fit normal. Avant de commence i
fout sovoir que Laravel a une protection sur les champs. Dew
variables sont présentes dans so dasse mire silat et guided
La veriabe Sflale permet de li dre explicitement quels champs
44 Iiprogrommes.com
sont éditables et inverzement pour Sql, Par exemple, ID ne
peut pos te étable. Sivous ouhaitez accepter ou reuserlatoto-
Tits des champs, un petit (*]sufro, mois ces tréslorgement
‘déconselé, Ils sont également utlisés lars de lenregsrement de
rmosse d'un tableou. Configurons donc les champs éitbles:
2 sav que los champs ca pitt sont odomotquement
tnedcbls LID nes ps.
Note madd est etn prt
Passons au contréleur
‘Avant de foire quoi que ce soit dans le contréleuy, configurors la
route. Dons nutesapigip. Nous allo fire les choses manuellement
pour bien comprendre la situation. Avec des routes classiques,
Lorave ne détecte pos les méthodes PUT et PATCH, cari est dans
‘un contexte monolthique, olson précise, dans les templates de
application, la méthode @ employer grice & emvtwe(PUT). Nous
‘verrons juste oprés comment fire pour les supporter dans note
‘API, Nous allons juste éerie les routes pour recupérer les Todos,
‘ne Todo et en ajouter une ce qui ext sutisont pour comprendre un
‘ruc génial de Lora
Dons raspy, ajoutons ceci
Paes, Toloatleode
fate:g Rosi), ToCrleristow)
Fate-psttos, Totnes;
Nous oppelons les méthodes get et post de Route qui sont des
méthode tatiques. Le pramir porate ext la outset le second
le contrler etla méthode de celui sbparé por une erobase (@)
Sar lo dewiéme ligne, nous rors éit tod}, mais pouguci?
Nous enverons 1D deo Todo sou, Lora cherche n=
formation en base de données tut seul et cele sera disponible
‘1 le modele Todo que rous avons cr pus tte qui sero un
paraméte des méthode du contle
Surle termina topors
Plparianteit
vo nous listr les routes qui sont configures et accessbles. Vous
remearqueree qu'il y a des middlewares qu sont déa présents. Ce
sont des routes qui exécutent un middleware avant que le contré-
leur ne sit oppelé. Les uiilser dons les routes n'est qu'une des
rombreuses méthodes pour exécuter un middleware (ou plusieurs)
‘Avec Lave il permettet de modifies requétes et uniquement
‘elles Voici un peftéchantilon des méthodes disponibles pour
‘exéuter des middlewares avec Love
‘Dons le coastucteue dun contBleur vec Sb-»mievae ame)
‘Dons les routes aprés leur décaration gre & Rote en
‘iyonrleender)-nitleare ah)
' Exécuter une iste de middlawares par groupe de outs (web, opi)
‘ Bxécuterun middleware dans tous les cos
Sivous désiezen opprendre davantage, je vous conse aller re