WordCampVienna2020WP-HTML:ThemarriageofWPandJSFrameworksforexpansion,ubiquityandprofit.Enablingany sitetoembedWPcontentandfunctionalitybyadding:
<wp-component></wp-component><scriptsrc=“file.js”></script>
ThinkPLUGINS forHTML!
WordCampVienna2020
MarkTwain:
“Ifyouwantmetogivea2hourtalk,Icandothatstraightaway.
Ifyouwantmetogivea10minutetalk,Iwillneed2weekstoprepare.”
PublishWPcontent/functionalityanywhereontheInternetwith‘WebComponents’.
WP-HTML:WordPressanywhere,everywhere…
Purposeoftalk
HTML
Framework...nFramework2Framework1
<scriptsrc=“bundle.js”></script><divid=“app”> WordPress
WordPress
HTML
Framework...nFramework2Framework1
WEBCOMPONENTS
WPComponents
<scriptsrc=“bundle.js”></script><divid=“app”>
WebComponents
WPPHPPAGESGutenbergBlocks
Mystartincomputingatschoolin1979
AtUniversity
Source:Wikimedia CommonsSource:Wikimedia Commons
Source:Wikimedia Commons
Source:Wikimedia Commons
Where/whatwereyouin1979?
Brighton,UK
TheEnglishChannel
58inhumanyears– 243intechyears
WordCampVienna2020
• MicrosoftCertifiedSystemsEngineer(2000-2003)• MicrosoftCertifiedDatabaseAdministrator(SQL2000)• BusinessInformationArchitectataUKRecyclingCompany• WordPress2017• CurrentlyPWAs(offline/instantwebsites),WebComponents,WP-HTML,GoogleAMPandMobileWebOptimisation.• Developing1-2hourtrainingseminarsforcompanies• Stilljustas‘student’!
Inandoutoftechovertheyears
Anotherwebsiteownersays:Ifyouprovidemewith• AneasytodeployandusecomponentthatIcanconfiguretomyrequirements• Whichprovidesrelevantandvaluablecontent• Iwillpromoteyourwebsiteandservices/products• ThinkYouTubeembed• MICROAPPS/SERVICES/WEBSITE
Anexampleuse
ArticlesGuidesBooksCoursesProductsalloncyclingetc…
Wantstoaddusefulinformationonhowcyclingcanbebeneficial,traininginformation,etc.Likea“YouTubeembed”.
WPsitecangainvisibilityandadvertising
DeployingWPMicroAPPs/Blocks
Inreturn,enableWPtoincreasevisibilityand‘sales’.
Sitesellsbikes WPLifestyleSite
Mynewbusiness:ONESTOPWORDCAMPS
• Awebpagethatshowsall(filtered)WordCampstakingplace• DisplayaWordCamp’sdetailsfromorganiserssite=>Bookit• Beshownflightsforthatperiod=>Bookaflight• Beshownhotelsinthatcity=>Bookahotel• Haveacitytourguidedisplayed/downloadwithbestplacestoeat/visit…
• GiveusersaDASHBOARDofWordCampsandflights/hotel
WebApplicationwithavarietyofMICROAPPS/SERVICES
Multiple‘frameworks’gluedtogether
InternationalJSConferenceLondon2018– KeyNoteSpeech
HTML
Framework...nFramework2Framework1
<scriptsrc=“bundle.js”></script><divid=“app”> WordPress
WordPress
HTML
Framework...nFramework2Framework1
WEBCOMPONENTSWEBCOMPONENTS
<scriptsrc=“bundle.js”></script><divid=“app”>
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
WebComponents(1)JavaScriptFile:customElements.define(‘my-component',class extends HTMLElement {
//implementationhere…}
});
HTMLpage:<my-componentcustomAttribute=“2”></my-component>
TheseareregularHTMLtags,nativetobrowser,withallthesamefeatures
§<my-tagattr=“”id=“”…>text…</my-tag>§MUSThaveatleastonehyphenintagname§Wecanaddcustomattributes§Valuesandchangescanbedetectedincomponent…§Wewilllookatanexampleshortly…
WebComponents(2)
WebComponents(3)
WebComponents(4)DemoofFelix’sGithubrepo.
https://wpjs.co.uk/app/gutenberg/
TheycanbeusedinWPPHPpagesforcodemodularity:
https://wpjs.co.uk/app/wp-email-subscribe/ (mydemo)
WebComponents(5)
Example:<show-postid=“38”></show-post>
Ifwechangeid thisupdatesthepostused.Componenthas‘sealed’innerCSSWecanpassincustomCSSvariables
ExamplesofvarioustypesofComponents=>
WordPress
HTML
Framework...nFramework2Framework1
WEBCOMPONENTSWEBCOMPONENTS
<scriptsrc=“bundle.js”></script><divid=“app”>
WordPress
HTML
Framework...nFramework2Framework1
WEBCOMPONENTS
WPComponents
<scriptsrc=“bundle.js”></script><divid=“app”>
WebComponents
WPPHPPAGESGutenbergBlocks
InternationalJSConferenceLondon2018– KeyNoteSpeech
MULTI-FRAMEWORKCOMPONENTSTORE
LET’SBUILD‘ONESTOPWORDCAMPS’!
MULTI-FRAMEWORKCOMPONENTSTORE
LET’SBUILD‘ONESTOPWORDCAMPS’!
OVERLOADEDSLIDENEXTAjokefirst…
Heisenberggetsstoppedforspeeding…thepolicetellshim…
”Doyouknowyouweredoing103.5kmperhour?
”Damm.NowIdon’tknowwhereIam.”
DisplayWordCampsfromWordCampCentral
Show/BookthatWordCampfromtheirwebsite
Cityknown:DISPLAYFLIGHTS
FlightBookingComponentCityisknown:DisplayHotelsHotelSelectedComponent
View/Book
Cityknown:CITYTOURGUIDE
Allindividualwebcomponentswithdifferent‘framework’.CommunicationviaCustomEventsandAttributes.
CentralStore:IndexedDB/ServerDB
ONESTOPWORDCAMPS
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’
// 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
Anotherwebsiteownersays:Ifyouprovidemewith§ AneasytodeployandusecomponentthatIcanconfiguretomyrequirements
§Whichprovidesrelevantandvaluablecontent§ Iwillpromoteyourwebsiteandservices/products
WP-HMTLprovidesonewayofdoingthisWithadditionalsideeffecttocreate‘instant’andofflinepages=>AcceleratedWordPressPages
SUMMARY(1)
