WordPress šablony postavené na JavaScriptu

Martin Malinda

martinmalinda.cz / @martinmalindacz

Server Side Rendering

Request → Server →  HTML Response

  • Spolehlivé, rychlé řešení
  • SEO
  • Přístupnost

Client-Side Rendering

Request → Server →  HTML Kostra + JavaScript

Dále: AJAX Request Server JSON Response

  • Lepší interaktivita
  • Rychlé překliky
  • Lepší offline podpora
  • Rychlost ?
  • SEO ?
  • Přístupnost ?

Wix

 

SSR + CSR

  • Time to render
  • Přístupnost
  • SEO
  • Rychlé prokliky
  • Interaktivita
  • Time to interactivity (?)
  • Komplexita

Optimalizace

  • Hydratace
  • Redukce kódu
  • Updaty JS engine
  • Service Worker (warm cache)
  • Optimalizace JavaScriptu
  • Web Workers
Ember.js React.js
SSR Jednoduchý Komplexní
Performance Dobrá Vysoká
Flexibilita Nízká Vysoká
Šablony (Handlebars) JSX
Tooling Pohodlný Mocný
Konvence Ano Ne
Rozšiřitelnost Pohodlná Neomezená
Update Stability without stagnation ?
Komunita 651 contributors 954 contributors
Debugging +/- Dobrý

WordPress jen jako API

 
Node.js
[Not supported by viewer]
Client
[Not supported by viewer]
Ember Fastboot
 
[Not supported by viewer]
Next.js
[Not supported by viewer]
Nuxt.js
[Not supported by viewer]
React
[Not supported by viewer]
Vue.js
[Not supported by viewer]
Angular
[Not supported by viewer]
Ember
[Not supported by viewer]
1. req
[Not supported by viewer]
N. req
[Not supported by viewer]

Node.js server rendering

  • Reálné řešení, production-ready
  • Server rendering bez duplicity kódu
  • Nutnost spuštění Node.js serveru
  • Menší využití WP
  • Flexibilita (formát URL adres)
  • Přístup k WP jen přes API
    • Memory leaky (debugging... PM2)
    • Obsluha přes CLI
    • Vyšší cena

JS Aplikace jako WP šablona

Client
[Not supported by viewer]
React
[Not supported by viewer]
Vue.js
[Not supported by viewer]
Angular
[Not supported by viewer]
Ember
[Not supported by viewer]
N. req
[Not supported by viewer]
1. req
[Not supported by viewer]

WordPress server rendering

  • The loop, funkce...
  • Jak sdílet kód?
    • Twig (Angular)
    • Handlebars (Ember)
  • Transpilace?
  • V8JS? (PHP Extension)

Wallace Theme

Foxhound theme

  • React
  • Bez server renderingu
  • Open source
  • První theme na WordPress.org 

Serenity Scribe

Budoucnost?

  • Open source
  • Sdílení kódu mezi FE a WP
    • Alespoň šablony
    • Vyšší rozšíření V8JS?
  • Lepší offline podpora (sync dat)
  • Lepší SEO? (PWA)

Demo

Děkuji za pozornost

WordPress šablony postavené na JavaScriptu

By Martin Malinda

WordPress šablony postavené na JavaScriptu

  • 1,382