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 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
Děkuji za pozornost
WordPress šablony postavené na JavaScriptu
By Martin Malinda
WordPress šablony postavené na JavaScriptu
- 1,389