WordPress šablony postavené na JavaScriptu

Martin Malinda

martinmalinda.cz / @martinmalindacz

Server Side Rendering

Request → Server →  HTML Response

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

https://www.webpagetest.org/result/170520_CW_CTB/

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

https://www.webpagetest.org/result/170308_1Y_16PV/

https://www.webpagetest.org/result/170308_52_1738/

https://reacttraining.com/

SSR + CSR

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

https://www.webpagetest.org/result/170313_R1_NH5/

Optimalizace

• Hydratace
• Redukce kódu
• Updaty JS engine
• Service Worker (warm cache)
• Optimalizace JavaScriptu
• Web Workers

Src: https://medium.com/dailyjs/javascript-framework-battle-hello-world-in-each-cli-cfdba8bf5e4b

Src: https://medium.com/dailyjs/javascript-framework-battle-hello-world-in-each-cli-cfdba8bf5e4b

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

WordPress server rendering

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

Wallace Theme

• Angular
• Sdílení šablon pomocí twigu
• Outsourcing routingu do WP
• Open source
• https://demo.wallacetheme.com/

Foxhound theme

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

Serenity Scribe

• Ember.js
• Nejširší feature set
  • Komentáře, Customizer, Menu, Support, Emeds...
• https://meetserenity.com/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

https://blog.meetserenity.com

https://demo.meetserenity.com

Děkuji za pozornost