wordcamp vienna 2020...we use js to inject html into the tag, (headless cms), or render json data...
TRANSCRIPT
![Page 1: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/1.jpg)
WordCampVienna2020WP-HTML:ThemarriageofWPandJSFrameworksforexpansion,ubiquityandprofit.Enablingany sitetoembedWPcontentandfunctionalitybyadding:
<wp-component></wp-component><scriptsrc=“file.js”></script>
ThinkPLUGINS forHTML!
![Page 2: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/2.jpg)
WordCampVienna2020
MarkTwain:
“Ifyouwantmetogivea2hourtalk,Icandothatstraightaway.
Ifyouwantmetogivea10minutetalk,Iwillneed2weekstoprepare.”
![Page 3: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/3.jpg)
PublishWPcontent/functionalityanywhereontheInternetwith‘WebComponents’.
WP-HTML:WordPressanywhere,everywhere…
Purposeoftalk
![Page 4: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/4.jpg)
HTML
Framework...nFramework2Framework1
<scriptsrc=“bundle.js”></script><divid=“app”> WordPress
![Page 5: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/5.jpg)
WordPress
HTML
Framework...nFramework2Framework1
WEBCOMPONENTS
WPComponents
<scriptsrc=“bundle.js”></script><divid=“app”>
WebComponents
WPPHPPAGESGutenbergBlocks
![Page 6: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/6.jpg)
Mystartincomputingatschoolin1979
AtUniversity
Source:Wikimedia CommonsSource:Wikimedia Commons
Source:Wikimedia Commons
Source:Wikimedia Commons
Where/whatwereyouin1979?
Brighton,UK
TheEnglishChannel
58inhumanyears– 243intechyears
![Page 7: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/7.jpg)
WordCampVienna2020
• MicrosoftCertifiedSystemsEngineer(2000-2003)• MicrosoftCertifiedDatabaseAdministrator(SQL2000)• BusinessInformationArchitectataUKRecyclingCompany• WordPress2017• CurrentlyPWAs(offline/instantwebsites),WebComponents,WP-HTML,GoogleAMPandMobileWebOptimisation.• Developing1-2hourtrainingseminarsforcompanies• Stilljustas‘student’!
Inandoutoftechovertheyears
![Page 8: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/8.jpg)
Anotherwebsiteownersays:Ifyouprovidemewith• AneasytodeployandusecomponentthatIcanconfiguretomyrequirements• Whichprovidesrelevantandvaluablecontent• Iwillpromoteyourwebsiteandservices/products• ThinkYouTubeembed• MICROAPPS/SERVICES/WEBSITE
Anexampleuse
![Page 9: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/9.jpg)
ArticlesGuidesBooksCoursesProductsalloncyclingetc…
Wantstoaddusefulinformationonhowcyclingcanbebeneficial,traininginformation,etc.Likea“YouTubeembed”.
WPsitecangainvisibilityandadvertising
DeployingWPMicroAPPs/Blocks
Inreturn,enableWPtoincreasevisibilityand‘sales’.
Sitesellsbikes WPLifestyleSite
![Page 10: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/10.jpg)
Mynewbusiness:ONESTOPWORDCAMPS
• Awebpagethatshowsall(filtered)WordCampstakingplace• DisplayaWordCamp’sdetailsfromorganiserssite=>Bookit• Beshownflightsforthatperiod=>Bookaflight• Beshownhotelsinthatcity=>Bookahotel• Haveacitytourguidedisplayed/downloadwithbestplacestoeat/visit…
• GiveusersaDASHBOARDofWordCampsandflights/hotel
WebApplicationwithavarietyofMICROAPPS/SERVICES
Multiple‘frameworks’gluedtogether
![Page 11: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/11.jpg)
InternationalJSConferenceLondon2018– KeyNoteSpeech
![Page 12: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/12.jpg)
HTML
Framework...nFramework2Framework1
<scriptsrc=“bundle.js”></script><divid=“app”> WordPress
![Page 13: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/13.jpg)
WordPress
HTML
Framework...nFramework2Framework1
WEBCOMPONENTSWEBCOMPONENTS
<scriptsrc=“bundle.js”></script><divid=“app”>
![Page 14: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/14.jpg)
ThisuseseitheraDIVelementoraCustomElement:customElements.define(‘my-very-own-unique-tag’, JSClass)gives->
<my-very-own-unique-tag></my-very-own-unique-tag>
WeuseJStoinjectHTMLintothetag,(HeadlessCMS),orrenderJSONdatareceived,(DecoupledDMS).
ThiswasthebasisoftheDecoupledSiteandthisledtotheabilitytostoreallthecodeontheWPServerandinjectacompleteblogorformtotheclient=>demo…
WordPressComponent
![Page 15: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/15.jpg)
WebComponents(1)JavaScriptFile:customElements.define(‘my-component',class extends HTMLElement {
//implementationhere…}
});
HTMLpage:<my-componentcustomAttribute=“2”></my-component>
TheseareregularHTMLtags,nativetobrowser,withallthesamefeatures
![Page 16: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/16.jpg)
§<my-tagattr=“”id=“”…>text…</my-tag>§MUSThaveatleastonehyphenintagname§Wecanaddcustomattributes§Valuesandchangescanbedetectedincomponent…§Wewilllookatanexampleshortly…
WebComponents(2)
![Page 17: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/17.jpg)
WebComponents(3)
![Page 18: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/18.jpg)
WebComponents(4)DemoofFelix’sGithubrepo.
https://wpjs.co.uk/app/gutenberg/
TheycanbeusedinWPPHPpagesforcodemodularity:
https://wpjs.co.uk/app/wp-email-subscribe/ (mydemo)
![Page 19: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/19.jpg)
WebComponents(5)
Example:<show-postid=“38”></show-post>
Ifwechangeid thisupdatesthepostused.Componenthas‘sealed’innerCSSWecanpassincustomCSSvariables
ExamplesofvarioustypesofComponents=>
![Page 20: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/20.jpg)
WordPress
HTML
Framework...nFramework2Framework1
WEBCOMPONENTSWEBCOMPONENTS
<scriptsrc=“bundle.js”></script><divid=“app”>
![Page 21: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/21.jpg)
WordPress
HTML
Framework...nFramework2Framework1
WEBCOMPONENTS
WPComponents
<scriptsrc=“bundle.js”></script><divid=“app”>
WebComponents
WPPHPPAGESGutenbergBlocks
![Page 22: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/22.jpg)
InternationalJSConferenceLondon2018– KeyNoteSpeech
MULTI-FRAMEWORKCOMPONENTSTORE
LET’SBUILD‘ONESTOPWORDCAMPS’!
![Page 23: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/23.jpg)
MULTI-FRAMEWORKCOMPONENTSTORE
LET’SBUILD‘ONESTOPWORDCAMPS’!
![Page 24: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/24.jpg)
OVERLOADEDSLIDENEXTAjokefirst…
Heisenberggetsstoppedforspeeding…thepolicetellshim…
”Doyouknowyouweredoing103.5kmperhour?
”Damm.NowIdon’tknowwhereIam.”
![Page 25: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/25.jpg)
DisplayWordCampsfromWordCampCentral
Show/BookthatWordCampfromtheirwebsite
Cityknown:DISPLAYFLIGHTS
FlightBookingComponentCityisknown:DisplayHotelsHotelSelectedComponent
View/Book
Cityknown:CITYTOURGUIDE
Allindividualwebcomponentswithdifferent‘framework’.CommunicationviaCustomEventsandAttributes.
CentralStore:IndexedDB/ServerDB
ONESTOPWORDCAMPS
![Page 26: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/26.jpg)
INSTANT(WP)PAGES
§ HTTP1vsHTTP2§ CriticalCSS,CodeSplitting/Fonts,CDN§ ServiceWorkers,CacheAPI,IndexedDB– instantandoffline§ Browserhints:<linkrel=“dns-connext/preconnect/prepreload
/prerender/prefetch/>§ <portal>- ontrial,embeddednavigation§ IntersectionObserver API– ‘lazyloading’§ window.requestIdleCallback()– loaddataetc
Braintreats<100msas‘instant’,<1sas‘smooth’
![Page 27: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/27.jpg)
// Intercept URL request and handle…self.addEventListener('fetch', function(event) {event.respondWith(// search all cachescaches.match(event.request).then(function(response) {// if in cache use else go to network return response || fetch(event.request);}));
});
OFFLINE– SERVICEWORKERS
![Page 28: WordCamp Vienna 2020...We use JS to inject HTML into the tag, (Headless CMS), or render JSON data received, (Decoupled DMS). This was the basis of the Decoupled Site and this led to](https://reader033.vdocuments.net/reader033/viewer/2022053013/5f103caf7e708231d4481db3/html5/thumbnails/28.jpg)
Anotherwebsiteownersays:Ifyouprovidemewith§ AneasytodeployandusecomponentthatIcanconfiguretomyrequirements
§Whichprovidesrelevantandvaluablecontent§ Iwillpromoteyourwebsiteandservices/products
WP-HMTLprovidesonewayofdoingthisWithadditionalsideeffecttocreate‘instant’andofflinepages=>AcceleratedWordPressPages
SUMMARY(1)