 Ik ga het vandaag hebben over moderne JavaScript en ook een beetje over WordPress, want het is een WordCamp, dus ik moet het ook over WordPress hebben. JavaScript is booming. Je komt er eigenlijk bijna niet meer omheen als je developt, vooral als je websites bouwt. Als je appschut bouwt, dat soort dingen. JavaScript kom je altijd tegen. De vraag naar JavaScript is nog nooit zo hoog geweest. Een aantal jaar geleden werd het ook wel gebruikt en dat was een klein onderdeel van je werk. Maar inmiddels met de komst van Gutenberg, dat soort dingen, zullen WordPress ook wel echt aan de JavaScript gaan moeten. En ja, ik zou er echt, als ik jullie was, wel een keer mee bezig gaan, als je er nog niet mee bezig bent. Vandaag wil ik je eigenlijk meer gaan uitleggen wat moderne JavaScript is, wat je ermee kunt doen, hoe je het kunt toepassen en hoe je dat in je dagelijkse werk eigenlijk kan gaan gebruiken. Ik wil je niet gaan uitleggen hoe je het in WordPress gebruikt, want dat zou ik niet weten, want dat doe ik zelf ook niet. Ik ben Guy Kessler. Ik ben eigenlijk een freelance webdeveloper. Ik specialiseer me vooral op JavaScript en react in Node.js. Ik doe eigenlijk van alles. Welkom. Mijn achtergrond ligt ook echt in de software development. Vandaag, maar uiteindelijk is de specialisatie naar JavaScript te gaan. A, wat ik leuk vond en B, omdat er gewoon heel veel vragen is. Ik heb een app gemaakt, Dramat. Als je het leuk vindt om op te zoeken, gaat het over whiskey drinken. Dus dat is mooi. En Formable, een kleine service waar je wat formuliers mee kan bouwen. En als je mij wil volgen op Twitter of iets wil vragen en zeggen, mijn hundel is Guy Kessler. Dat is lekker makkelijk. Ik ga de slides na deze taalk ook online zetten. Dus als je ze terug wil lezen, dan kan je al deze mooie gele dingetjes die je op het schepen ziet. Die kan je al aanklikken, dat is ook heel leuk. Een aantal jaar terug werkte ik nog wel veel met WordPress. Ik werkte voor bedrijven die WordPress als systeem gebruikt om een website te gaan bouwen. Momenteel werk ik voor klanten die met WordPress werken, maar zelf hoef ik nul WordPress aan te raken. Dus mijn verbinding nu met WordPress is, ik weet dat het bestaat en ik weet dat mijn collega's het gebruiken. Maar eigenlijk heb ik er zelf nooit meer iets mee te maken direct. Dus dat is in principe mijn binding met WordPress. Om het verhaal wat duidelijker te maken over waar ik naartoe wil gaan, ga ik even een soort van geschiedenislesje geven over JavaScript. Eigenlijk begon het fensie maken van je webpagina begon vroeger. Je had wel JavaScript, maar het werkte allemaal anders in verschillende browsers en het werkte eigenlijk allemaal gokut of niet. Flash werd dan veel gebruikt om mooie fensie dingen te bouwen. Ja, het was leuk. Een tijdje later kwam jQuery op en als een plugin, dat is niet eens zo heel lang geleden. Ik denk dat het een jav8 geleden is, dat het toch wel opkwam. Iedereen begon ineens jQuery te gebruiken. Supergaaf, mensen die kwamen met JavaScript in aanraking. Dat was heel leuk. Ik was toen eigenlijk al heel erg bezig met vanilla JavaScript. Dus toen kwam jQuery en was eigenlijk wel een soort van openbaring. Ik hoefde niet meer javascriptcode voor 500 verschillende browsers te typen. Ja, superfijn. In deze periode had je ook Mootools en Prototype. Mootools is nog wel eens wat op spraak over, vooral de laatste tijd. Die details zal ik je besparen. Dan kwam er eigenlijk een boel van allemaal frameworks waarmee je je applicaties kon fixen. Angular, Amber, je kreeg ineens tools. Node.js kwam in deze tijd uit. Dus je kreeg tools die je ineens op je command-line kon draaien. Kom binnen jongens. Jullie hebben nog niet veel gemist hoor, dus helemaal goed. Ik ben Gaia Kersteltroos. In deze periode kregen we heel veel tools zoals Grunt en Gulp. Om je proces wat te streamlijnen en wat te automatiseren. Dat is een mooie periode geweest, want in deze periode is er een hoop nagedacht over bepaalde zaken. Die inmiddels allemaal van de tafel zijn geveegd, maar... Ja, deze periode is wel heel veel gebeurd. Het logo van de mensen die leesbaar zijn is Required.js. Het heeft heel bepaald geweest, want in deze periode zijn een beetje het modulaire van javascript verzonnen. We werden niet door iedereen gebruikt, maar... Hier begonnen we in ieder geval wel een beetje professioneler te worden. En de laatste tijd is het eigenlijk bijna niet meer bij te houden. Je hebt een paar grote spelers, React, View. En je hebt dan ook tools zoals Webpack waarmee je bundels kan maken. Maar er zijn ook alweer tien varianten van die dat dan weer proberen op te lossen. En van React alleen al heb je... Volgens mij een van vijf of tien verschillende implementaties door andere mensen... ...die eigenlijk hetzelfde willen bereiken, maar dan efficiënter. Daar heb je ook wel best wel veel van die van dat soort pakketten erbij zitten tegenwoordig. Er zijn principes als Flux en Redux waar je toch wel eens wat dingen over hoort. Het is eigenlijk allemaal net iets te snel in bij te houden... ...voor een buitstaander of iemand die nog niet in javascript zet. Je krijgt zoveel over je heen en wat is nou goed, wat is nou niet goed... ...is superlastig in bij te houden. Ik wil eigenlijk ook de desktop een klein beetje aangeven van... ...dat je wel rustiger ook mee om moet gaan. Om al alles aan te gaan pakken wat er op je afkomt is niet slim. En daar schiet je niks mee op. Hoe ziet de toekomst van je afskript eruit? Ik weet niet hoe het er volgende week uitziet. Er gebeuren zoveel dingen tegenwoordig. Het is echt niet meer bij te houden. Maar als je goed blijft lezen... ...de principes die blijven hangen, die zijn er over een maand ook nog... ...en dan wordt er nog steeds over gepraat. Op een gegeven moment kom je er niet meer onderuit... ...om bepallen onderwerpen in te zoomen... ...want er wordt er heel veel over gesproken. Dat zijn de dingen waar je het beste op kan focussen. Maar hoe dat er nou precies uit gaat zien, geen idee. Een heel groot... ...bijkomend voordeel tegenwoordig... ...is dat er ontzettend veel werk in javascript is. Heb jij nou eens iets van... ...ik vind mijn front en het baan leuk? Of ik doe backendcodes, maar ik vind eigenlijk... ...dat ik best wel wat meer javascript mag doen... ...maar mijn baas heeft geen javascriptwerk voor mij. Nou, ik kan je vertellen. De job offerings van afgelopen december... ...de bovenste is Java. Wat er onderstaat is javascript. PHP is hier. Dus wil je javascript gaan doen? Dat is echt een werkstad. Afgelopen september ben ik voor mezelf begonnen. Eigenlijk was ik... ...best wel gespannen daarover. Ik vroeg mij wel af... ...zijn er wel mensen die javascript mensen willen aannemen. Nou, de aanvragen die ik over me heen kreeg... ...dat is echt... ...is niet normaal. Als je ziet dat ik wil deze stap gaan maken... ...doe het nu, want nu is de tijd. Het is echt... ...heel erg... ...heel erg populair. Ik weet niet wat ik wil zeggen, maar... ...ik heb gestern een beetje gedronken dus. Het is wel lastig. Wat is dan eigenlijk... ...modern javascript? Waar hebben mensen het over als ze... ...of modern javascript praten? Voor mij is het eigenlijk... ...de nieuwe... ...de nieuwe echmascript. De nieuwe centraks, de nieuwe features die komen. De dingen die je dan... ...als ze nog implementeerd moeten worden... ...die je dan mooi kan gebruiken in javascript. En alle tools eromheen, zoals webpack... ...het automatiseren van je bundels. Dat soort dingen, dat is voor mij... ...het moderne javascript maakt. En het is echt awesome. De woorden superwildingen veranderd in de javascript... ...en in het ecosysteem. Maar we groeien heel snel... ...en we groeien de goede kant op. En het mooie is... ...dat er zo vaak dingen veranderen... ...en discussies zijn over bepaalde dingen... ...dat er ook heel veel beslissingen goed gemaakt gaan worden... ...en ook heel snel achter elkaar... ...waardoor de taal ook snel kan groeien. Er zijn best wel veel systemen... ...ik wil niet te veel negatief doen... ...over andere dingen... ...want iedereen heeft natuurlijk zijn eigen manier van werk. Er zijn er best wel veel... ...ecosystemen die heel erg vast blijven hangen... ...omdat er te veel gepraat wordt over bepaalde dingen... ...het groeit niet... ...daar blijkt de javascript niet echt heel veel last van te hebben. Bij komen nadelen is wel dat er zoveel veranderd... ...dat je eigenlijk af en toe niet bij kan houden... ...zoals ik al eerder vertelde. De nieuwe syntax is superfijn... ...de woorden dingen makkelijker voor je gemaakt... ...dus je hoeft niet meer zoveel dingen te typen... ...als je vroeger zou doen... ...en de features worden steeds beter... ...dus dat is zo goed... ...welkom. Welkom, welkom. Een groot nadeel... ...het gebruiker van is wel redelijk ingewikkeld. Het wordt steeds makkelijker... ...maar wil jij bijvoorbeeld een jaar geleden... ...echt al in de moderne javascript gaan duiken... ...was toch redelijk lastig om daar in te komen. Sorry. We worden een beetje gepraat. Dingen die vooral lastig waren... ...des tijds was... ...je had heel veel configuratie... ...die je moest doen met webpack... ...ontzettend... Oké, thanks. Het is heel erg gehoorig hier... ...dus ik word heel erg snel afgeleid, sorry. Je had heel erg veel config in webpack... ...en dat soort tools... ...het was eigenlijk best wel lastig... ...om daar in te komen... ...voor dat ik zelf... ...het beetje in de gaten had... ...van hoe ik deze setup zou moeten doen... ...bij al een week verder... ...en die tijd en geld... ...die hebben mensen gewoon niet... ...je moet het eigenlijk ook als baas niet willen... ...dat jouw werkdebat daar... ...zoveel tijd en gast teken... ...voor iets wat dan weer... ...misschien leuk is of misschien niet. Er zijn heel veel verschillende tools nou... ...beschikbaar om je moderne javascript te doen... ...en je moet heel erg goed oplaten... ...met het gebruiken van nieuwe features... ...want er zijn features die worden dan aangekondigd... ...die zijn dan nog niet gefinaliseerd... ...maar die kan je gewoon gebruiken... ...gaan mensen die features gebruiken... ...en met eindelijk nee... ...we gaan het toch niet zo doen... ...en wordt van de baan geveegd... ...en dan zit jij daar met je mooie... ...nieuwe javascriptcodes... ...die eigenlijk niemand meer gaat gebruiken... ...en dat is redelijk vervelend... ...en wat je dus heel vaak ook nou hoort... ...van mensen die bijvoorbeeld niet met frontend werken... ...of met javascript... ...frontend was ooit zo makkelijk... ...je typte een vaaltje... ...en je je zet dan met fdp op de server... ...en dat was het... ...ja oké... ...maar ik kan het ook weer... ...weerleggen... ...backend was ook ooit makkelijk... ...niet moet ik het dockervaal... ...moet ik een omgeving... ...moet ik gaan opspanen... ...en ik had laatst... ...wilde ik gewoon... ...een heel simpel WordPress installtje doen... ...want ik wilde een plug-in maken... ...ik kreeg een soort van advies... ...om van al die database-systeem... ...achtige automatisering dingen te doen... ...en ik was er gewoon binnen 10 minuten... ...al klaar mee... ...en ik wilde nou... ...wil ik dat gewoon hebben... ...ja, daar is tegenwoordig gewoon niet echt meer... ...wil je je systemen gaan streamlijnen... ...dan moet je daar ook een klein beetje... ...een soort van effort achterzetten... ...ja, de JavaScript... ...die je... ...de moderne JavaScript die je gaat typen... ...die wordt eigenlijk omgezet... ...in een soort van leesbaar format... ...en daar heb je een soort van proces van nodig... ...die dat JavaScript gaat omzetten... ...en daar heb je een soort van... ...ja, een beeldstap van nodig... ...een stap... ...die jouw JavaScript dan eigenlijk gaat omzetten... ...en dat is inderdaad niet zo makkelijk... ...maar ja, je krijgt er zo veel voordelen mee... ...het heeft zijn aardelen om zo te werken... ...maar ook heel veel voordelen... ...en waarom zou je dan... ...moderne... ...woah, die is heel gil hier... ...waarom zou je dan moderne JavaScript... ...moeten gaan gebruiken... ...en ten eerste... ...en dat is eigenlijk de aller... ...aller belangrijkste reden voor mij... ...was het... ...module systeem... ...de mogelijkheid... ...om je JavaScript bestanden eigenlijk... ...op de deel en kleine moduletjes... ...en kleinere bestanden... ...zoals je het ook in PHP zou doen... ...of in andere talen... ...was voor mij een zo grote winst... ...en daar ook mee om te gaan... ...op een logische manier... ...dat je eigenlijk... ...dat je weet... ...ok, ik ga nou in module gebruiken... ...dat je weet dat dat op een veilige... ...manier wordt gedaan... ...maar ook is overnagedacht... ...is echt enorm... ...enorm handig... ...je kan ook... ...MPM modules gebruiken... ...MPM install... ...en dan heb je een package... ...zoals bijvoorbeeld jQuery... ...nou, dan zeg je... ...install jQuery... ...en dan kan je het ook gewoon... ...meteen gebruiken in je code... ...perfect... ...zonder dat je in een script teken... ...of zo hoeft te plakken in je... ...en je HTML... ...en je verbeterde syntax... ...wat ik ook al eerder zei... ...enorm handig... ...nieuwe syntax... ...dingen worden gewoon korter om te schrijven... ...je hebt nieuwe features... ...die je echt... ...die je echt gaat helpen... ...en je kan nieuwe features gewoon gebruiken... ...in oude omgevingen... ...doordat... ...doordat er een meaginisme... ...waar ik het duidelijk over heb... ...is die jouw nieuwe code... ...omzet naar... ...leesbare code voor oude gebrousers... ...kan je dat gewoon gebruiken... ...ook in oude gebrousers... ...is bijvoorbeeld anders dan... ...nieuwe PHP features gebruiken... ...op PHP 5.2... ...waar het is gewoon helemaal niet in werkt... ...en het voordeel... ...is dat je eigenlijk gewoon... ...door kan gaan... ...met nieuwe features... ...in Javascript te gebruiken... ...towel eigenlijk... ...systeem waarvoor je het... ...bouwt... ...een oude browser ofzo... ...daar ook gewoon kan begrijpen... ...want... ...daar is een... ...toeltje... ...die je dan vertaalt... ...naar... ...die oude wetste taal... ...en als... ...dat is wel heel erg handig... ...dat je daar gewoon... ...kan blijven gebruiken... ...en... ...hoe kan je dan... ...moderne Javascript gebruiken... ...veel features... ...van de modernen Javascript... ...zijn eigenlijk al ondersteund... ...in browsers... ...dus... ...ga je Javascript schrijven... ...voor bijvoorbeeld... ...de laatste versie van Chrome... ...dan is... ...90% van de features... ...die jij wil gebruiken... ...is gewoon al ondersteund... ...hoef je geen... ...buildstapp voor te gebruiken... ...dus het kan ook gewoon... ...goed zijn... ...dat jij gewoon... ...nu al de modernen Javascript... ...kan gaan typen... ...en dat je je neerzorgers... ...of ook te maken... ...kan... ...maar... ...dan heb je browsers... ...ieë... ...en andere... ...wat kleinere of ouderen browsers... ...die... ...daar zou je het wel... ...dan moet je niet inwerken... ...maar... ...maar mocht je bijvoorbeeld... ...een applicatie maken... ...die... ...waarvan je de browser... ...kan afspreken... ...met je klant... ...dan is... ...dan hoef je vaak niet eens... ...in transpilers... ...zoals... ...bebel te gebruiken... ...wat bebel eigenlijk doet... ...die kijkt naar je code... ...en die schrijft het op... ...naar een leesbaar formaat voor... ...voor de omgevingen... ...die jij het aangeeft... ...waar het in moet gaan werken... ...dat heet dan de preset-amp... ...die preset-amp... ...die kan je eigenlijk zo instellen... ...ja, ik wil eigenlijk... ...dat die in alle laatste twee versies... ...van de bekendste browsers... ...mijn code gaat werken... ...dus dan kijkt hij naar je code... ...ij ziet... ...die features die gebruikt die... ...die zijn nog niet ondersteund... ...dus dan schrijf ik ze om... ...naar een... ...begrijpbaar formaat voor... ...die oude browsers... ...bebel wordt eigenlijk... ...nou meestal... ...gebruikt om... ...om moderne JavaScript... ...en transpilen... ...naar... ...leesbare JavaScript... ...ook op Node.js... ...wat dit... ...gebruikt... ...zijn ook... ...features... ...die nog niet ondersteund worden... ...naar dan met bebel... ...kan je die dan ook... ...om laten schrijven... ...naar begrijpbaar JavaScript... ...en... ...dan kan het ook gewoon... ...mooi... ...ja... ...mooi begrijpen... ...um... ...hoe wordt bebel ingezet... ...het wordt vaak met... ...MPM scripts... ...of met webpack ingezet... ...grunt en gulp kunnen ook... ...um... ...goed met... ...met bebel omgaan... ...dus... ...mocht je zo'n... ...zo'n... ...tool in gebruiken... ...prima... ...kan je ook gewoon... ...bebel ingegooien... ...um... ...ja... ...webpack is al... ...iets ingewikkelder om... ...om op te zetten... ...maar dat kan ook gewoon prima... ...um... ...nij welke tegengaan hebben over... ...wat moderne... ...Javascript entwilt... ...eigenlijk een beetje... ...heb ik geprobeerd... ...om jullie situatie te... ...te... ...reflecteren op wat ik doe... ...is eigenlijk... ...wat wat meer... ...verschillende WordPress developers... ...voor met te houden... ...als eerste heb ik... ...de thema-bouwer... ...voor me bedacht... ...en toen dacht ik eigenlijk van... ...ja... ...het... ...Javascript werk... ...wat de thema-bouwer doet... ...dat vind ik zo heel erg veel... ...waarschijnlijk heb je iets van grunt... ...of... ...of ik hulp om je assets te bouwen... ...en... ...ja, op zich kan je... ...babel daar ook gewoon in verwijken... ...zodat je wat nieuwe Javascript kan gebruiken... ...ik ga hier niet teveel aan veranderen... ...je hoeft niet ingewikkelde... ...systemen te gaan bouwen... ...om dit te kunnen gaan doen... ...dus... ...wat dat betreft... ...will je... ...wat moderne Javascript... ...in je sites gaan gebruiken... ...kan gewoon prima... ...met... ...met babbel... ...dan had ik de... ...de plugin-levelen performen genomen... ...um... ...een plugin... ...zijn frontend... ...is eigenlijk niet heel veel verschillend... ...van de thema-bouwer... ...um... ...bundels die geïnjecteerd worden... ...in je... ...in je thema's... ...ja prima... ...gebruik ook gewoon je... ...wat je nou hebt... ...alleen babbel erbij... ...en eigenlijk kan je... ...allee moderne Javascript gaan gebruiken... ...um... ...maar bijvoorbeeld... ...pluggin-levelers die in de admin... ...een applicatie willen gaan bouwen... ...die wat er wat... ...interessant er is... ...misschien een single-page app... ...binnen je admin... ...en dan wordt het... ...woord al redelijk... ...een gewikkelder... ...of je kan er al wat meer... ...op los gaan... ...voorbeeld wil je... ...een echt single-page app... ...een admin gaan bouwen... ...ja dan heb je toch... ...ook wat meer tools als webpack nodig... ...en dat soort dingen... ...maar hou het vooral zo simpel mogelijk... ...um... ...want... ...echt complexiteit toevoegen... ...aan dit soort systemen... ...dat wordt niemand blij van... ...um... ...maar... ...ja het probleem... ...bij dit soort dingen... ...is dat je eigenlijk... ...altijd maar met die config zit... ...en gelukkig... ...hebben ze daar... ...mooie... ...antwoord opgegeven... ...met create-react-app... ...met een view-cli... ...um... ...eigenlijk zorgen zij ervoor... ...dat jij met een simpel commando... ...en nul... ...webpack-config gewoon... ...aan de gang kan gaan... ...om een... ...verhopte react-app te gaan bouwen... ...en... ...hoe zou dat dan... ...in WordPress-wereld uitzien? Eigenlijk zeg je tegen... ...create-react-app... ...start mijn app op... ...wat dat doet... ...hij start een servertje op... ...en hij geeft jou een... ...jaafscript-bestandje... ...of ja... ...hij heeft een jaafscript-bestandje... ...dan zou je gewoon... ...in jouw WordPress-admin... ...of in jouw pagina... ...zou je gewoon eigenlijk... ...dat... ...bestandje als een script kunnen... ...inladen... ...gezondheid... ...en... ...of je doet dan... ...an Q-script... ...of... ...hoe heet die hoek... ...dus eigenlijk... ...is daar een server... ...naar jouw code aan het kijken... ...en jouw code aan het transpilen... ...aan het goed aan het maken... ...zodat je browser het snapt... ...en dan laat je hem in WordPress in... ...en hij zorgt ook... ...dat je je pagina automatisch... ...refriest... ...als je een aanpassing doet... ...of als je... ...dat je... ...componenten in react bijvoorbeeld... ...gaan hot reloaden... ...dat zorgt je dan allemaal voor... ...en dat is wel... ...ontzellend handig... ...want... ...webpack config schrijven... ...dat je wordt niemand blij van... ...en... ...en dit soort... ...dit soort tooling... ...die maakt het echt... ...heel makkelijk om... ...met moderne jaafschript... ...aan de gang te gaan... ...ik had... ...laas een ideeëtje... ...binnen een dag... ...had ik eigenlijk mijn product... ...ogelanceerd... ...en ook al ge-deployed... ...want dan zit er ook allemaal... ...in gebakken... ...hecht fantastisch... ...wil je een beetje react gaan leren... ...kijk dan... ...an create react app... ...want de docs ook... ...die er... ...die ervoor geschreven zijn... ...zijn echt fantastisch... ...wat je ook kan doen... ...is gewoon beelden voor release... ...echt echt... ...ja... ...je zegt echt... ...ik tegen hem van... ...maak het goed voor mij... ...zodat ik het kan... ...ergens op de site kan zetten... ...hij zorgt er gewoon voor... ...echt prima... ...alleen er is een probleem... ...in de WordPress-wereld... ...en dat is dependency management... ...van je frontend assets... ...eigenlijk vertel jij in PHP... ...wat... ...de... ...dependencies zijn van je frontend... ...en dan moet je er eigenlijk... ...maar van uitgaan... ...dat... ...PAP dat goed heeft geregeld... ...of in ieder geval... ...dat al die scripts... ...op de juiste manier zijn ingeladen... ...en dat al die... ...modules... ...ook... ...op de juiste manier... ...in de... ...op de Global Window... ...object worden geregistreerd... ...ja... ...het is heel... ...heel... ...heel... ...ja... ...een beetje flimsy manier om te doen... ...en... ...wat je dus kan doen... ...in... ...in webpack bijvoorbeeld... ...zeg je van... ...ja, ik heb jacquery nodig... ...ik heb dat in dit... ...hij maakt het allemaal... ...in één bundle... ...en daar dan... ...ja, dan wordt dan gezerveerd... ...het probleem daar weer bij is... ...is dat... ...stel er is een andere... ...plugin... ...die ook jacquery gebruikt... ...en dan heb je eigenlijk... ...dat je twee keer jacquery gaat... ...gaan importen... ...in je... ...ja, in je admin... ...en dat is eigenlijk wel... ...witje... ...overbodig... ...wat je kan doen... ...in webpack... ...en dit is dan een klein beetje... ...een soort van... ...crapie oplossing hiervoor... ...is aliasing... ...en dan kan je eigenlijk... ...tegen webpack zeggen... ...op het moment... ...dat iemand jacquery... ...import... ...dan gebruik ik maar gewoon... ...de window variant ervan... ...dus eigenlijk iets wat... ...voorbeeld... ...een webpress kan aanbieden aan je... ...dat is een oplossing... ...is het goed... ...ja... ...ik ben dan niet echt helemaal mee eens... ...om het zo te doen... ...maar... ...het is een manier... ...om in webpress bijvoorbeeld... ...dan... ...dit soort dependency management... ...op te lossen... ...en dan wil ik het... ...even... ...kort hebben over... ...the best of both worlds... ...is eigenlijk... ...een beetje een introductie over day... ...je hebt een... ...single page app... ...en dan webpress... ...maar nou... ...wil ik het hebben over... ...webpress als backend... ...in een jam stack... ...en wat is de jam stack... ...is eigenlijk... ...javascript... ...een api en markup... ...dat staat jam voor... ...en api in dit geval... ...is dan... ...webpress... ...markup is eigenlijk... ...je html... ...en uc6... ...en javascript... ...is dan het bundeltje... ...wat daar gaat draaien... ...die dan... ...pangelijk gaat opbouwen... ...en de logica gaat serveren... ...hoe ziet het er dan ongeveer uit? Je hebt de react app... ...en react... ...die vraagt eigenlijk aan... ...aan webpress... ...wat zijn de posts? Dus die geeft wat JSON terug... ...die geeft wat JSON terug... ...en... ...ja... ...dus die geeft eigenlijk gewoon terug... ...ja, hier heb je een lijst met posts... ...die... ...die uit jouw... ...ja... ...uit jouw webpress komen... ...het mooie van dat is... ...is dat eigenlijk... ...ook gewoon helemaal niet... ...afhankelijk is... ...van wat voor... ...welk platform je daar achter hangt... ...dan pak je gewoon een CMS... ...die ook werkt... ...en dan... ...ja... ...veel maakt er niet uit... ...als je gewoon een lijst met posts krijgt... ...dat is prima... ...wie die posts aan mij geeft... ...ja, dat maakt mij niet uit... ...alles is gewoon een statische bestandje... ...daar eigenlijk staat... ...waar je posts gestaat... ...ook ja, prima... ...perfect... ...en dan... ...is er een voorbeeld... ...waar ik laatst dan overhoorde... ...dit ken ik nog niet... ...Gatsby is een static site generator... ...van gebaseerd op React... ...dus dan kan je eigenlijk met React... ...een static site laten genereren... ...dus eigenlijk gewoon je HTML en CSS... ...en je afschrijpt gewoon... ...dat die dat voor je bouwt... ...en dan... ...een mooi dynamische site van maakt... ...dus eigenlijk gewoon met een hele volle structuur en alles... ...de combinatie... ...Gatsby en WordPress... ...en GraphQL... ...is enorm gaaf... ...want... ...wat dan al gebeurt... ...eigenlijk ga je je Gatsby site zo inrichten... ...zoals je bijvoorbeeld een front en het thema ook zou doen... ...dus je hebt bijvoorbeeld een... ...een archief pagina... ...en dan zeg je in... ...ik wil de post... ...en ik wil deze informatie van de post weten... ...wat er nou gebeurt in deze setup... ...is dat... ...dat een klant... ... gewoon zijn post in WordPress kan maken... ...ij drukt op opslaan... ...Gatsby... ...ergens anders... ...op een ander servetje krijgt... ...een signaaltje... ...er is iets geupdate... ...ah, hij gaat daar zeggen... ...oké, dan ga ik mij zelf opnieuw maken... ...dus hij gaat zichzelf weer opnieuw genereren... ...en heeft eigenlijk een nieuwe versie van site... ...en zet het klaar... ...tel ik als die site wat benadert... ...blijft hij statisch... ...alleen je kan wel WordPress gebruiken... ...als je bij kunt... ...om post en pagina's en dat soort dingen... ...aan te passen... ...dit werkt ook prima samen... ...bijvoorbeeld comments... ...door wordt een comment geplaatst... WordPress die geeft een signaaltje... ...woah, dat is een nieuwe comment... ...en jouw Gatsby site gaat gewoon opnieuw... ...gaat hij weer zijn site bouwen... ...en hij zet het weer klaar voor jou op jouw server... ...en zo blijft jouw site echt super snel... ...en je hoeft eigenlijk geen WordPress... ...ja, geen WordPress thema meer te bouwen... ...of wat je daar dan... ...hoe je dat dan ziet... ...maar je maakt dus gewoon heel snel... ...en goeie static websites... ...en dat is eigenlijk ook wel mensen... ...waal dan heel fijn vinden... ...om over te brouzen... ...want die dingen die werken echt reet en snel... ...toe komt ziet er heel goed uit... ...steeds minder afhankelijkheden van elkaar... ...ik ben heel erg enthousiast... ...over het feit dat dingen... ...als WordPress, WooCommerce... ...weer gezien worden als een soort van API... ...om je om mee te communiceren... ...op dan dat je er echt... ...ontzettend lochtesystemen in gaat bouwen... ...het afsplitsen van deze afhankelijkheden... ...af deze dependencies... ...is gewoon enorm bevoordelijk voor de community... ...en ook voor jezelf... ...als jij verder wil groeien in bepaalde richting op... ...en WordPress houd je tegen bijvoorbeeld... ...of welk systeem je dan ook in werkt... ...is gewoon heel jammer... ...kan je dat loskoppelen... ...en kan je je gaan focussen... ...op dit soort dingen te maken van apps... ...of een single-page application... ...als je dat dan echt leuk vindt... ...dat is fantastisch dat er gewoon nu kan... ...want nu kan je zeggen van... ...ja... ...ik ga meer op focussen... ...en iemand anders die doet WordPress-kant... ...en dan ja, fantastisch... ...en... ...nog maar als... ... wil je in je afscript komen... ...nu is het moment... ...mensen die betaal je gewoon... ...om dingen te gaan leren... ...ik heb een klant die ging mij vragen... ...of ik View wilde doen... ...jij doet normaal geen View... ...maar hij zei van... ...ik betaal je gewoon... ...jouw uren... ...die hij spendeert aan het leren... ...van het framework... ...prima... ...ja... ...maar dat... ...ik krijg betaald aan nieuwe kennis... ...mensen... ...geven je enorm geld... ...on heel veel geld om je afscript te doen... ...is echt... ...echt goed... ...heb je interesse... ...in dit onderwerp... ...en hoe je... ...hoe je hiermee... ...meek kan beginnen... ...kom maar mee praten... ...ik ben er vandaag de hele dag... ...ik denk... ...dat ik... ...vanavond ook nog wel ergste vinden ben... ...en... ...mocht je... ...dit soort werk leuk vinden... ...en... ...ik kan je ook wel wat... ...wat tips geven... ...en mensen... ...en wat bedrijven aanwijzen... ...die... ...die bezig zijn met dit soort werk... ...en... ...zij kan hier wel wat helpen erin... ...bedankt voor jullie aandacht...