BRING JAMSTACK TO THE WORDPRESS COMMUNITY

When is your site not built with the JAMstack? Is it a site built with a server-side CMS like WordPress? No, I’d like to share some idea about front end and back end to bring JAMstack to the world’s most popular CMS.

Transcript

1. #3*/(
   +".45"$,
   
   50
   5)&
   803%13&44
   $0..6/*5: 8PSE$BNQ
   4JOHBQPSF
   
   4FJKJ
   "LBUTVLB
 "VHVTU
   UI
   
   
2. W H O A M I ? amimoto-ami.com getshifter.io - D I G I TA L C U B E C U S T O M E R S U C C E S S M A N A G E R - W O R D C A M P T O K Y O 2 0 1 9 M E M B E R S E I J I A K AT S U K A T W I T T E R @ S E I J I A K AT S U K A
3. 1.Why do I want to recommend JAMstack for WordPress? 2.How can we bring JAMstack to WordPress? 3.What changes can JAMstack make for WordPress? AGENDA
4. 1 W H Y D O I WA N T T O R E C O M M E N D I T ?
5. • Improve user experiences • Scale sites infinitely and meet any traffic demands • No need to worry about security vulnerabilities • No more conflicted workflow JAMSTACK IS AN ARCHITECTURE
6. J U S T B E C A U S E M U C H B E T T E R U S E R E X P E R I E N C E S • Better Performance • Cheaper, Easier Scaling • Higher Security • Better Developer Experience
7. ELEMENTS OF JAMSTACK WORDPRESS +".TUBDL 1&01-& 8PSE1SFTT
8. • JavaScript
 
 • APIs
 
 • Markup WHAT’S THE JAM IN THE STACK? Any dynamic programming during the request/ response cycle is handled by JavaScript, running entirely on the client. This could be any frontend framework, library, or even vanilla JavaScript. All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript. These can be custom-built or leverage third-party services. Templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps.
9. TO BRING JAMSTACK TO WORDPRESS #BTJD
   8PSE1SFTT +".TUBDL
   8PSE1SFTT
10. • Hosted on Content Delivery Network • All code in Git • Build tools to automate builds • Use atomic deploying • Instant cache purge BASIC ARCHITECTURE
11. JAMSTACK WEB SITE FITS THESE USE CASES $PNQBOZ
    TJUF $BUBMPH &WFOU -BOEJOH
    QBHF +PC
12. JAMSTAK FOR AUTHOR w#FUUFS
    1FSGPSNBODF
    w$IFBQFS
    &BTJFS
    4DBMJOH
    w)JHIFS
    4FDVSJUZ
    w#FUUFS
    %FWFMPQFS
    &YQFSJFODF w-JWF
    JO
    XFC
    BQQT
    w'PDVT
    PO
    DSFBUJOH
    CFUUFS
    DPOUFOUT
    w/FFE
    $.4
    GPS
    CFUUFS
    DPMMBCPSBUJPO %FWFMPQFS "VUIPS
13. A BRIDGE OVER THE GREAT DIVIDE w8PSE1SFTT
    EBTICPBSE
    w$POUFOU
    .BOBHFNFOU
    4ZTUFN
    w1MVHJOT
    w.VMUJ
    OBUJPOBM
    MBOHBHFT
14. POWER FOR AUTHOR
15. 2 H O W C A N W E B R I N G J A M S TA C K T O W O R D P R E S S ?
16. WORDPRESS PLUGINS w814UBUJD
    w4*.1-:
    45"5*$
    w+".TUBDL
    %FQMPZNFOUT
    w%FQMPZ
    /FUMJGZ
    8FCIPPL
    wOFUMJGZEFQMPZ
    wMJUUMFCPUOFUMJGZ
17. HEADLESS WORDPRESS AND STATIC SITE GENERATOR WordPress Build Deploy •Dashbord •Content Management System •Plugins •Community •Favorite Static Site Generator •Favorite Static Hosting •Only use CLI GraphQL REST API
18. ALL IN ONE HOSTING SERVICE • Shifter
 https://www.getshifter.io/
 • strattic
 https://www.strattic.com/

19. 3 W H AT C H A N G E S C A N J A M S TA C K M A K E S F O R W O R D P R E S S ?
20. THE BIGGEST CHANGE FOR WORDPRESS w1)1
    EPFT
    OPU
    XPSL
    PO
    +".TUBDL
    FOWJSPONFOU
    w'PSN
    w$POUBDU
    'PSN
    
    
    81
    4FSWFSMFTT
    'PSNT
    w'PSNTQSFF
    w#BTJO
    w4FBSDI
    w81
    4FSWFSMFTT
    4FBSDI
    w(PPHMF
    $VTUPN
    4FBSDI
    w"MHPMJB
    w$PNNFOUT
    w&DPNNFSDF
21. Why: JAMstack provide us much better user experience. 
 How: There are many ways to bring JAMstack to WordPress. 
 What: JAMstack refocus the server side dynamic rendering to client side dynamic rendering via JavaScript and APIs. CONCLUSION
22. -FU`T
    CSJOH
    +".TUBDL
 UP
    8PSE1SFTT
    DPNNVOJUZ
    UP
    NBLF
    BMM
    PG
    PVS
    GSJFOET
    IBQQZ 5IBOLT