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 / GIToo0e 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 loaeeEDITO « 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/ 3as) 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 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.comBlack 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 wasot 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 37BLAZOR 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