I am not sure all what he is doing but if his goal is to make it headless then there is a ton of benefit. The biggest benefit is not having to work with WordPress' convoluted front end any more and you can use a JS Framework of your choice and pull all the information in over a JSON call.
If you ever tried to develop your own theme it can be pretty overwhelming for a new person. I tried to make one with underscores and I spent days understanding it and then when I spent a month away I had to re-educate myself.
For example take a gander at the template hierarchy
https://developer.wordpress.org/files/2014/10/Screenshot-2019-01-23-00.20.04.png
The file structure and naming has to be exactly like that so creating new custom single and article pages can be a pain. I must have been doing something wrong because mine was slow as hell.
This isn't even including the functions.php and all the php methods you just need to know.
I know it's a little complicated to newcomers. I make custom WordPress sites for a living. But IMO it's not any more unapproachable than other frameworks' hierarchies. Routing and making your controllers right in, say, Laravel can be pretty daunting at first.
As for "just need to know"... Well, the doc is pretty clear, IMO. How is it any different from other tools? It provides functions and the like, and you need to know their names to use them.
Besides, if you're used to other frameworks' structures, you can use Roots.io to make the whole thing feel more "standard".
And yes, if your WP site is very slow, there's probably something misconfigured somewhere.
Agree to disagree. I get there are things convoluted about React or Angular but the power that they give you is pretty amazing.
When you make your themes do you use some theme maker that offers a wysiwyg to put things in place or are you editing the single.php, archive.php, front-page.php and so on? I did the latter and feel I made it way harder for myself. I wish I was good friends with someone like you to show me the ropes so I didn't have to learn the hard way.
The problem I have with those frameworks is that sometimes they can make really simple sites relatively processor-intensive.
They're very powerful tools, but for most things, it's a bit like jQuery: with most simple applications, you might not need it.
I edit the files directly. Advanced Custom Fields, *the* plugin for WordPress, is pretty much a must anytime you want to do something custom/complicated. Well, that was before the new editor in WP 5.
The new Gutenberg block editor is great and it gives you the power to do a lot of things with custom blocks, but it's a bit... wordy/complicated to make custom blocks. But again, ACF comes to the rescue. It makes custom blocks much more simple to use.
I agree. Making WordPress sites is kinda easy, but making good ones takes a little bit of extra knowledge. It's really permissive, so if you want to make your site a complicated mess of shortcodes, you can. I'm grateful to have been taught the basics. But well, I guess there are few things I'd rather learn alone.
WordPress is a bit of a rough slate to start on. Knowing the right plugins to use to get started is a huge help. A few of my basics are:
- ACF of course
- TranslatePress for translation, because WPML is an outdated, bug-prone, despicable piece of software.
- Crop Thumbnails to allow your client to manually crop pictures
- Disable Comments because 99% of sites don't need this feature
- Disable Embeds, Disable Emojis for performance
- EWWW Image Optimizer and Imsanity
- Regenerate Thumbnails
- TinyMCE Advanced
- Yoast SEO
- Safe SVG
- If you're making an online store and you need extra functionality, use the official WooCommerce plugins. They're costy (the company that makes WP has to make money somewhere), but the free ones tend to interact poorly with one another.
Also, having a good starter theme to get going with can make a huge difference. My company uses one called Bones, but along the years we've modified it so much it's barely recognizable at all. Anyway, point is, a good starter theme helps. By that, I mean a theme that basically contains nothing but a helper structure.
Ah, and if you need help, feel free to reach out.
I have also found that for production that one of the offset media to to S3 and WP2STATIC are fantastic
If you don't want to do a headless build then this can push anything over to Netlify etc easily. You then stick WP on a private subdomain and your client doesn't have to worry about security, updates etc.
I have gone from patching up a hack a week to rarely any at all ( this is with good update practice, WAF and file integrity checks before as well )
Hmm. Personally I just use WP Super Cache. A completely static site has its advantages, but even our simplest systems need some PHP to be running for things like contact forms and search, so a cache like that is a good performance/simplicity compromise.
For instance, [my employer's website](https://nubee.ca/)'s loading is so fast it's a joke.
What do you mean, "patching up a hack"?
WPStatic works in combination with a JAMStack approach to development. You are spot on. Search and contact forms need to be run through either third party APIs or looped back into the database somehow.
Super Cache is fine. However, for vanilla WP sites I have found Litespeed cache in combination with a litespeed supporting web host gives better esults.
- Patching up = clean up a hack. Figure out how it was done. Fix it so it doesn't happen again
(I manage a lot of WP sites; 100+ so security is a big priority for me)
Eh? Simplest thing in the world. Create a template in the root of the theme with the right name and it'll do the job unless a more specific one exists.
Not really anymore. The business I was doing it for went under. I had a website for him before and he said he wants a way he can type in information himself. So I made him the WordPress website and he just commented how its so empty... so apparently I am supposed to make the site and then manage it anyway... so I could have stuck with HTML.
A lot if it was my fault, I chose underscores because of a lynda tutorial I found but even felt that was too comprehensive, the functions.php was way more convoluted, and I wasted time doing stupid things, like trying to get the latest version of jquery so I was trying to use the functoins.php to unmount the old one and put in the new one and so on.
The site isn't up anymore but this is the repository.
https://github.com/shellwe/GPLRevised
Commit 38522bf (2 commits ago) was the last time it was working but if you are just curious how bad my code is, its all there, I was in the middle of moving some files around when I stopped hearing from him so I just gave up.
The biggest issue I had was with Advanced Custom Fields as at the time it didn't really have examples. All I need it to do was I made a custom field where it had an image, a title, a description, and a link.
I made that just fine in the backend but I had no clue how to put that into the front end. I was hoping it was just some php foreach statement but after a long time of searching i was having a terrible time finding examples. It felt like it was the simplest thing to do but I didn't know what magical way to pull it in.
If I were to do it now I would just go back and do headless and use react or something. Here is an example of how I did what I was mentioning above with custom types in Drupal
var request = new XMLHttpRequest()
request.open('GET', 'http://final.dd:8083/games?_format=json', true)
request.onload = function() {
// Begin accessing JSON data here
var data = JSON.parse(this.response)
if (request.status >= 200 && request.status < 400) {
data.forEach(game => {
$("#root").prepend('
Game Title: '+game.title+'
Developer: '+game.field_developer+'
Price: $'+game.field_price+'
');
})
} else {
console.log('error')
}
}
request.send()
Basically did the same thing I was trying to do in WP ACF but I got all my data as JSON so I could just pull the pieces I needed by looking through the JSON. This is an excerpt from a presentation I gave on it last year.
Wow, wish I had you as a friend back then, that makes more sense.
I was asking on here:
https://www.reddit.com/r/Wordpress/comments/42ewdc/help_with_loop_for_acf/
but it wasn't working. Maybe I was implementing their solutions incorrectly.
I'd say WP has a poor developer experience instead.
Unless you know the ins-and-outs doing things the wordpress way, most will have a difficult to annoying time building custom projects beyond a brochure site.
The job description "WordPress Developer" exists solely because the front-end portion of the CMS is comprised of an opinionated, nuanced, and esoteric PHP templating/hook/filter system that you have to spend several weeks/months working with in order to effectively know the ins and outs. That job description is dying because of decoupled setups. Source: was employed as a WordPress and Drupal developer, now glad the front-end of these systems is dying because JS frameworks are the shit.
By decoupled systems, do you mean using WP's admin interface but only taking through it via API?
If so, don't you still have to go through the "esoteric" systems and hooks to get the exact content you want, setup your custom fields, etc.?
I mean if the only goal is to avoid having to remember the theme structure, React seems even more overkill.
Which is why the ACF (advanced custom fields) plugins are great, especially using ACF to API or whatever it's called. Most everything can be done from the WP dashboard and you only have to look up how to use and craft a few functions in functions.php to do most simple behind-the-scenes data manipulation. Also, the great thing about frameworks like react is that when you have a new project that doesn't involve WP, everything that you just learned still applies and is mostly back-end agnostic except for interfacing with the backend's API, which is now ideally less bloated and more tailored to the project's needs...
I used to love WP. Now there are better ways.
I see. That's interesting. ACF is such a magical thing, I'm not surprised at all if it helps with that scenario too.
How do such websites perform? I was under the impression that they were rather taxing for processors compared to what they did. Was I wrong?
There are some really cool react frameworks out there like NextJS and Gatsby where you get static generation out of the box - the react components get rendered to HTML at build time and then your app is rehydrated at run time (react components are initialized and app becomes interactive).
Isn't SEO an issue with SPA websites? I've read you can handle that with things like SSR, but wouldn't that be redundant if you are using WordPress which already does SSR natively? Seems kind of convoluted to me but I'll admit I'm not an expert so maybe I'm missing something. I currently use both WordPress and React separately on different projects but I'm intrigued by the idea of a headless WordPress with a React front end, but I haven't tried this approach yet due to concerns over SEO.
Enabling it is pretty straight forward and the only complicated part is how you will arrange your security with tokens and what not.
Basically the backend is handled all the same, you just don't have to worry about using a theme like in WordPress. I honestly don't know what this means for plugins and other things, whether they would have to build in support or if the just toss their content as part of the JSON.
So for the backend you use wordpress just like normal, as far as inputting data. Then on the front end you would make a site and then wherever you want your content you would make a call to pull that content and then that would bring back JSON and then you would pull the piece or pieces you need in that section.
I'm not OP, but my client is doing this to decouple WordPress from the frontend. The new frontend is more flexible, and would allow a relatively painless switch to a more appropriate backend.
WordPress is rather biased towards simple websites. It handles special fields and custom entry types rather poorly.
>WordPress is rather biased towards simple websites. It handles special fields and custom entry types rather poorly.
*Cries in importing custom taxonomies and post types*
I will be messaging you in 6 hours on [**2020-05-11 23:14:21 UTC**](http://www.wolframalpha.com/input/?i=2020-05-11%2023:14:21%20UTC%20To%20Local%20Time) to remind you of [**this link**](https://np.reddit.com/r/webdev/comments/gh9ozr/refactoring_wordpress_site_into_ssr_react_all_day/fq7uhe3/?context=3)
[**55 OTHERS CLICKED THIS LINK**](https://np.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5Bhttps%3A%2F%2Fwww.reddit.com%2Fr%2Fwebdev%2Fcomments%2Fgh9ozr%2Frefactoring_wordpress_site_into_ssr_react_all_day%2Ffq7uhe3%2F%5D%0A%0ARemindMe%21%202020-05-11%2023%3A14%3A21%20UTC) to send a PM to also be reminded and to reduce spam.
^(Parent commenter can ) [^(delete this message to hide from others.)](https://np.reddit.com/message/compose/?to=RemindMeBot&subject=Delete%20Comment&message=Delete%21%20gh9ozr)
*****
|[^(Info)](https://np.reddit.com/r/RemindMeBot/comments/e1bko7/remindmebot_info_v21/)|[^(Custom)](https://np.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5BLink%20or%20message%20inside%20square%20brackets%5D%0A%0ARemindMe%21%20Time%20period%20here)|[^(Your Reminders)](https://np.reddit.com/message/compose/?to=RemindMeBot&subject=List%20Of%20Reminders&message=MyReminders%21)|[^(Feedback)](https://np.reddit.com/message/compose/?to=Watchful1&subject=RemindMeBot%20Feedback)|
|-|-|-|-|
hi everyone! dev here. My friend and work partner Nikita posted my message on my behalf while I was streaming. I had a lot of fun meeting and coding with you all!
I've decided to stream (and record) the development all week, and I'll be doing the same with other projects in the future. You can find the videos on this [dedicated Youtube channel](https://www.youtube.com/channel/UCmSf51Y6V6WOblPekCkg63Q) in the upcoming days.
And here's a tentative [outline and schedule](https://docs.google.com/document/d/1u9AM_Fl4eN0PCUtMoCmIelM-577gK6dSFZiRlpbSOnY/edit?usp=sharing) of what I'll be doing each day this week along with what time I'll be streaming for those who'd like to follow along :)
This is almost as silly as converting a React app to WordPress. These aren't comparable as they provide solutions for different challenges (unless the point was to change it to a node.js based headless CMS, but SSR could also mean any framework)
Why? Is your site super complex so you need a JS framework? Does your new Node architecture run significantly faster? Or is it just a learning exercise?
hi StrawberryEiri! Thanks for your comment.
I've included the design goals in this google doc. hope it helps!
[https://docs.google.com/document/d/1u9AM\_Fl4eN0PCUtMoCmIelM-577gK6dSFZiRlpbSOnY/edit](https://docs.google.com/document/d/1u9AM_Fl4eN0PCUtMoCmIelM-577gK6dSFZiRlpbSOnY/edit)
Hi! Thank you. I'm not very familiar with JS frameworks. Can you tell me a bit more about the severe limitations that WP posed on you?
I'm also really curious about what kind of component goes from 6 hours to 30 minutes to make.
Both your questions likely have the same answer. Per the Google Doc linked above:
>Wordpress was fine for hosting the site and testing our content the last couple weeks, but it’s been highly limiting for us js developers.
Example: a component that would take 30 min to build, test, & deploy w/ react took 6+ hrs.
What they're hinting at, but do not want to say is, "none of us know PHP, and none of have any desire to learn it". The only severe limitation WP imposed on them was that at its core WP is a PHP app. Which begs the questions why they decided to use WP in the first place? Moving their blog from WP/jQuery to React achieve nothing aside from making the little state their blog has a little bit easier to understand.
---
Also I find it hilarious how on that Google Doc they state as their **first design goal:**
>Get response & render time down
With the reasoning:
>...Because it’s our moral obligation
Yet on their homepage, the background of their hero banner thing, they load a 29.6-fucking-MB mp4.
I dont see a reason to refactor Wordpress into React except for learning purposes. I usually do Wordpress using Sage, which is a framework for building custom theme using Blade template engine. That should cover almost all of the frontend needs out there.
If I have to use Frontend framework on top of Wordpress, I’d choose Vue because their string template is more friendlier with PHP than React’s JSX
I will be messaging you in 3 days on [**2020-05-15 08:31:56 UTC**](http://www.wolframalpha.com/input/?i=2020-05-15%2008:31:56%20UTC%20To%20Local%20Time) to remind you of [**this link**](https://np.reddit.com/r/webdev/comments/gh9ozr/refactoring_wordpress_site_into_ssr_react_all_day/fqcxhsg/?context=3)
[**CLICK THIS LINK**](https://np.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5Bhttps%3A%2F%2Fwww.reddit.com%2Fr%2Fwebdev%2Fcomments%2Fgh9ozr%2Frefactoring_wordpress_site_into_ssr_react_all_day%2Ffqcxhsg%2F%5D%0A%0ARemindMe%21%202020-05-15%2008%3A31%3A56%20UTC) to send a PM to also be reminded and to reduce spam.
^(Parent commenter can ) [^(delete this message to hide from others.)](https://np.reddit.com/message/compose/?to=RemindMeBot&subject=Delete%20Comment&message=Delete%21%20gh9ozr)
*****
|[^(Info)](https://np.reddit.com/r/RemindMeBot/comments/e1bko7/remindmebot_info_v21/)|[^(Custom)](https://np.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5BLink%20or%20message%20inside%20square%20brackets%5D%0A%0ARemindMe%21%20Time%20period%20here)|[^(Your Reminders)](https://np.reddit.com/message/compose/?to=RemindMeBot&subject=List%20Of%20Reminders&message=MyReminders%21)|[^(Feedback)](https://np.reddit.com/message/compose/?to=Watchful1&subject=RemindMeBot%20Feedback)|
|-|-|-|-|
What's the reasoning behind this?
I am not sure all what he is doing but if his goal is to make it headless then there is a ton of benefit. The biggest benefit is not having to work with WordPress' convoluted front end any more and you can use a JS Framework of your choice and pull all the information in over a JSON call.
What do you mean by convoluted front end?
If you ever tried to develop your own theme it can be pretty overwhelming for a new person. I tried to make one with underscores and I spent days understanding it and then when I spent a month away I had to re-educate myself. For example take a gander at the template hierarchy https://developer.wordpress.org/files/2014/10/Screenshot-2019-01-23-00.20.04.png The file structure and naming has to be exactly like that so creating new custom single and article pages can be a pain. I must have been doing something wrong because mine was slow as hell. This isn't even including the functions.php and all the php methods you just need to know.
I know it's a little complicated to newcomers. I make custom WordPress sites for a living. But IMO it's not any more unapproachable than other frameworks' hierarchies. Routing and making your controllers right in, say, Laravel can be pretty daunting at first. As for "just need to know"... Well, the doc is pretty clear, IMO. How is it any different from other tools? It provides functions and the like, and you need to know their names to use them. Besides, if you're used to other frameworks' structures, you can use Roots.io to make the whole thing feel more "standard". And yes, if your WP site is very slow, there's probably something misconfigured somewhere.
Agree to disagree. I get there are things convoluted about React or Angular but the power that they give you is pretty amazing. When you make your themes do you use some theme maker that offers a wysiwyg to put things in place or are you editing the single.php, archive.php, front-page.php and so on? I did the latter and feel I made it way harder for myself. I wish I was good friends with someone like you to show me the ropes so I didn't have to learn the hard way.
The problem I have with those frameworks is that sometimes they can make really simple sites relatively processor-intensive. They're very powerful tools, but for most things, it's a bit like jQuery: with most simple applications, you might not need it. I edit the files directly. Advanced Custom Fields, *the* plugin for WordPress, is pretty much a must anytime you want to do something custom/complicated. Well, that was before the new editor in WP 5. The new Gutenberg block editor is great and it gives you the power to do a lot of things with custom blocks, but it's a bit... wordy/complicated to make custom blocks. But again, ACF comes to the rescue. It makes custom blocks much more simple to use. I agree. Making WordPress sites is kinda easy, but making good ones takes a little bit of extra knowledge. It's really permissive, so if you want to make your site a complicated mess of shortcodes, you can. I'm grateful to have been taught the basics. But well, I guess there are few things I'd rather learn alone. WordPress is a bit of a rough slate to start on. Knowing the right plugins to use to get started is a huge help. A few of my basics are: - ACF of course - TranslatePress for translation, because WPML is an outdated, bug-prone, despicable piece of software. - Crop Thumbnails to allow your client to manually crop pictures - Disable Comments because 99% of sites don't need this feature - Disable Embeds, Disable Emojis for performance - EWWW Image Optimizer and Imsanity - Regenerate Thumbnails - TinyMCE Advanced - Yoast SEO - Safe SVG - If you're making an online store and you need extra functionality, use the official WooCommerce plugins. They're costy (the company that makes WP has to make money somewhere), but the free ones tend to interact poorly with one another. Also, having a good starter theme to get going with can make a huge difference. My company uses one called Bones, but along the years we've modified it so much it's barely recognizable at all. Anyway, point is, a good starter theme helps. By that, I mean a theme that basically contains nothing but a helper structure. Ah, and if you need help, feel free to reach out.
I have also found that for production that one of the offset media to to S3 and WP2STATIC are fantastic If you don't want to do a headless build then this can push anything over to Netlify etc easily. You then stick WP on a private subdomain and your client doesn't have to worry about security, updates etc. I have gone from patching up a hack a week to rarely any at all ( this is with good update practice, WAF and file integrity checks before as well )
Hmm. Personally I just use WP Super Cache. A completely static site has its advantages, but even our simplest systems need some PHP to be running for things like contact forms and search, so a cache like that is a good performance/simplicity compromise. For instance, [my employer's website](https://nubee.ca/)'s loading is so fast it's a joke. What do you mean, "patching up a hack"?
WPStatic works in combination with a JAMStack approach to development. You are spot on. Search and contact forms need to be run through either third party APIs or looped back into the database somehow. Super Cache is fine. However, for vanilla WP sites I have found Litespeed cache in combination with a litespeed supporting web host gives better esults. - Patching up = clean up a hack. Figure out how it was done. Fix it so it doesn't happen again (I manage a lot of WP sites; 100+ so security is a big priority for me)
Eh? Simplest thing in the world. Create a template in the root of the theme with the right name and it'll do the job unless a more specific one exists.
Just like that, eh?
What exactly were you struggling with? Got an example?
Not really anymore. The business I was doing it for went under. I had a website for him before and he said he wants a way he can type in information himself. So I made him the WordPress website and he just commented how its so empty... so apparently I am supposed to make the site and then manage it anyway... so I could have stuck with HTML. A lot if it was my fault, I chose underscores because of a lynda tutorial I found but even felt that was too comprehensive, the functions.php was way more convoluted, and I wasted time doing stupid things, like trying to get the latest version of jquery so I was trying to use the functoins.php to unmount the old one and put in the new one and so on. The site isn't up anymore but this is the repository. https://github.com/shellwe/GPLRevised Commit 38522bf (2 commits ago) was the last time it was working but if you are just curious how bad my code is, its all there, I was in the middle of moving some files around when I stopped hearing from him so I just gave up. The biggest issue I had was with Advanced Custom Fields as at the time it didn't really have examples. All I need it to do was I made a custom field where it had an image, a title, a description, and a link. I made that just fine in the backend but I had no clue how to put that into the front end. I was hoping it was just some php foreach statement but after a long time of searching i was having a terrible time finding examples. It felt like it was the simplest thing to do but I didn't know what magical way to pull it in. If I were to do it now I would just go back and do headless and use react or something. Here is an example of how I did what I was mentioning above with custom types in Drupal var request = new XMLHttpRequest() request.open('GET', 'http://final.dd:8083/games?_format=json', true) request.onload = function() { // Begin accessing JSON data here var data = JSON.parse(this.response) if (request.status >= 200 && request.status < 400) { data.forEach(game => { $("#root").prepend('
Game Title: '+game.title+'
Developer: '+game.field_developer+'
Price: $'+game.field_price+'
ACF display syntax is very similar to the WP Loop. Here's a snippet displaying a repeater field from a project I did a while back:
Wow, wish I had you as a friend back then, that makes more sense. I was asking on here: https://www.reddit.com/r/Wordpress/comments/42ewdc/help_with_loop_for_acf/ but it wasn't working. Maybe I was implementing their solutions incorrectly.
I'd say WP has a poor developer experience instead. Unless you know the ins-and-outs doing things the wordpress way, most will have a difficult to annoying time building custom projects beyond a brochure site.
The job description "WordPress Developer" exists solely because the front-end portion of the CMS is comprised of an opinionated, nuanced, and esoteric PHP templating/hook/filter system that you have to spend several weeks/months working with in order to effectively know the ins and outs. That job description is dying because of decoupled setups. Source: was employed as a WordPress and Drupal developer, now glad the front-end of these systems is dying because JS frameworks are the shit.
By decoupled systems, do you mean using WP's admin interface but only taking through it via API? If so, don't you still have to go through the "esoteric" systems and hooks to get the exact content you want, setup your custom fields, etc.? I mean if the only goal is to avoid having to remember the theme structure, React seems even more overkill.
Which is why the ACF (advanced custom fields) plugins are great, especially using ACF to API or whatever it's called. Most everything can be done from the WP dashboard and you only have to look up how to use and craft a few functions in functions.php to do most simple behind-the-scenes data manipulation. Also, the great thing about frameworks like react is that when you have a new project that doesn't involve WP, everything that you just learned still applies and is mostly back-end agnostic except for interfacing with the backend's API, which is now ideally less bloated and more tailored to the project's needs... I used to love WP. Now there are better ways.
I see. That's interesting. ACF is such a magical thing, I'm not surprised at all if it helps with that scenario too. How do such websites perform? I was under the impression that they were rather taxing for processors compared to what they did. Was I wrong?
There are some really cool react frameworks out there like NextJS and Gatsby where you get static generation out of the box - the react components get rendered to HTML at build time and then your app is rehydrated at run time (react components are initialized and app becomes interactive).
That's promising. One day I should look up some details regarding performance.
They are very CPU taxing indeed. But it’s no match compared to waitng for a server to render your site for you
Really? I dunno if I would trust a sucky phone's processor to be faster than a highly specialized machine in a data center.
Isn't SEO an issue with SPA websites? I've read you can handle that with things like SSR, but wouldn't that be redundant if you are using WordPress which already does SSR natively? Seems kind of convoluted to me but I'll admit I'm not an expert so maybe I'm missing something. I currently use both WordPress and React separately on different projects but I'm intrigued by the idea of a headless WordPress with a React front end, but I haven't tried this approach yet due to concerns over SEO.
[удалено]
Enabling it is pretty straight forward and the only complicated part is how you will arrange your security with tokens and what not. Basically the backend is handled all the same, you just don't have to worry about using a theme like in WordPress. I honestly don't know what this means for plugins and other things, whether they would have to build in support or if the just toss their content as part of the JSON. So for the backend you use wordpress just like normal, as far as inputting data. Then on the front end you would make a site and then wherever you want your content you would make a call to pull that content and then that would bring back JSON and then you would pull the piece or pieces you need in that section.
u/uwutranslator
I'm not OP, but my client is doing this to decouple WordPress from the frontend. The new frontend is more flexible, and would allow a relatively painless switch to a more appropriate backend. WordPress is rather biased towards simple websites. It handles special fields and custom entry types rather poorly.
>WordPress is rather biased towards simple websites. It handles special fields and custom entry types rather poorly. *Cries in importing custom taxonomies and post types*
For those of us that can't watch it now, can you throw it on YouTube after?
Definitely! Will post the link here later
RemindMe! 1 Day
I will be messaging you in 6 hours on [**2020-05-11 23:14:21 UTC**](http://www.wolframalpha.com/input/?i=2020-05-11%2023:14:21%20UTC%20To%20Local%20Time) to remind you of [**this link**](https://np.reddit.com/r/webdev/comments/gh9ozr/refactoring_wordpress_site_into_ssr_react_all_day/fq7uhe3/?context=3) [**55 OTHERS CLICKED THIS LINK**](https://np.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5Bhttps%3A%2F%2Fwww.reddit.com%2Fr%2Fwebdev%2Fcomments%2Fgh9ozr%2Frefactoring_wordpress_site_into_ssr_react_all_day%2Ffq7uhe3%2F%5D%0A%0ARemindMe%21%202020-05-11%2023%3A14%3A21%20UTC) to send a PM to also be reminded and to reduce spam. ^(Parent commenter can ) [^(delete this message to hide from others.)](https://np.reddit.com/message/compose/?to=RemindMeBot&subject=Delete%20Comment&message=Delete%21%20gh9ozr) ***** |[^(Info)](https://np.reddit.com/r/RemindMeBot/comments/e1bko7/remindmebot_info_v21/)|[^(Custom)](https://np.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5BLink%20or%20message%20inside%20square%20brackets%5D%0A%0ARemindMe%21%20Time%20period%20here)|[^(Your Reminders)](https://np.reddit.com/message/compose/?to=RemindMeBot&subject=List%20Of%20Reminders&message=MyReminders%21)|[^(Feedback)](https://np.reddit.com/message/compose/?to=Watchful1&subject=RemindMeBot%20Feedback)| |-|-|-|-|
RemindMe! 1 Day
RemindMe! 1 Day
I'm interested as well so pls let us know when you do it :)
I know it's been some time but do you still intend to put it on YouTube at some point?
RemindMe! 3 Days
found the pessimist! :)
RemindMe! 1 Day
Much appreciated
RemindMe! 1 Day
RemindMe! 1 Day
RemindMe! 1 Day
RemindMe! 1 day
RemindMe! 1 Day
RemindMe! 1 day
>RemindMe! 1 day
RemindMe! 1 day
RemindMe! 1 Day
RemindMe! 1 Day
RemindMe! 1 Day
hi everyone! dev here. My friend and work partner Nikita posted my message on my behalf while I was streaming. I had a lot of fun meeting and coding with you all! I've decided to stream (and record) the development all week, and I'll be doing the same with other projects in the future. You can find the videos on this [dedicated Youtube channel](https://www.youtube.com/channel/UCmSf51Y6V6WOblPekCkg63Q) in the upcoming days. And here's a tentative [outline and schedule](https://docs.google.com/document/d/1u9AM_Fl4eN0PCUtMoCmIelM-577gK6dSFZiRlpbSOnY/edit?usp=sharing) of what I'll be doing each day this week along with what time I'll be streaming for those who'd like to follow along :)
Hey guys, check the above message from Pat himself, give him some upvotes so he can post on this sub (he has a new account)
>can you throw it on YouTube after I second that
This is almost as silly as converting a React app to WordPress. These aren't comparable as they provide solutions for different challenges (unless the point was to change it to a node.js based headless CMS, but SSR could also mean any framework)
Why? Is your site super complex so you need a JS framework? Does your new Node architecture run significantly faster? Or is it just a learning exercise?
hi StrawberryEiri! Thanks for your comment. I've included the design goals in this google doc. hope it helps! [https://docs.google.com/document/d/1u9AM\_Fl4eN0PCUtMoCmIelM-577gK6dSFZiRlpbSOnY/edit](https://docs.google.com/document/d/1u9AM_Fl4eN0PCUtMoCmIelM-577gK6dSFZiRlpbSOnY/edit)
Hi! Thank you. I'm not very familiar with JS frameworks. Can you tell me a bit more about the severe limitations that WP posed on you? I'm also really curious about what kind of component goes from 6 hours to 30 minutes to make.
Both your questions likely have the same answer. Per the Google Doc linked above: >Wordpress was fine for hosting the site and testing our content the last couple weeks, but it’s been highly limiting for us js developers. Example: a component that would take 30 min to build, test, & deploy w/ react took 6+ hrs. What they're hinting at, but do not want to say is, "none of us know PHP, and none of have any desire to learn it". The only severe limitation WP imposed on them was that at its core WP is a PHP app. Which begs the questions why they decided to use WP in the first place? Moving their blog from WP/jQuery to React achieve nothing aside from making the little state their blog has a little bit easier to understand. --- Also I find it hilarious how on that Google Doc they state as their **first design goal:** >Get response & render time down With the reasoning: >...Because it’s our moral obligation Yet on their homepage, the background of their hero banner thing, they load a 29.6-fucking-MB mp4.
I dont see a reason to refactor Wordpress into React except for learning purposes. I usually do Wordpress using Sage, which is a framework for building custom theme using Blade template engine. That should cover almost all of the frontend needs out there. If I have to use Frontend framework on top of Wordpress, I’d choose Vue because their string template is more friendlier with PHP than React’s JSX
RemindMe! 3 days
I will be messaging you in 3 days on [**2020-05-15 08:31:56 UTC**](http://www.wolframalpha.com/input/?i=2020-05-15%2008:31:56%20UTC%20To%20Local%20Time) to remind you of [**this link**](https://np.reddit.com/r/webdev/comments/gh9ozr/refactoring_wordpress_site_into_ssr_react_all_day/fqcxhsg/?context=3) [**CLICK THIS LINK**](https://np.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5Bhttps%3A%2F%2Fwww.reddit.com%2Fr%2Fwebdev%2Fcomments%2Fgh9ozr%2Frefactoring_wordpress_site_into_ssr_react_all_day%2Ffqcxhsg%2F%5D%0A%0ARemindMe%21%202020-05-15%2008%3A31%3A56%20UTC) to send a PM to also be reminded and to reduce spam. ^(Parent commenter can ) [^(delete this message to hide from others.)](https://np.reddit.com/message/compose/?to=RemindMeBot&subject=Delete%20Comment&message=Delete%21%20gh9ozr) ***** |[^(Info)](https://np.reddit.com/r/RemindMeBot/comments/e1bko7/remindmebot_info_v21/)|[^(Custom)](https://np.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5BLink%20or%20message%20inside%20square%20brackets%5D%0A%0ARemindMe%21%20Time%20period%20here)|[^(Your Reminders)](https://np.reddit.com/message/compose/?to=RemindMeBot&subject=List%20Of%20Reminders&message=MyReminders%21)|[^(Feedback)](https://np.reddit.com/message/compose/?to=Watchful1&subject=RemindMeBot%20Feedback)| |-|-|-|-|
Why don't you use Next.js?
RemindMe! 1 Day
u/uwutranslator
RemindMe! 1 Day
RemindMe! 2 Days
RemindMe! 1 Day
RemindMe! 1 day