SPA Sage Theme with the new REST API


#1

Has anyone on the core Roots/Sage team given thought to creating a base theme, similar to Sage, that would pair something like Angular/React to WP using the REST API now in core as of WP 4.4?

This seems like THE community for taking Wordpress forward and this seems like the next big step in the ecosystem. I’m just throwing this out there as a thought exercise right now.


#2

Hey @staypuftman. I’ve given some thought to it, and I’ve also built a few of my own custom APIs and used Angular to build some SPA pages in Sage (as well as built a React app or two).

Here’s a few reasons as to why I haven’t tried anything serious or put a repo up:

  1. Every SPA I have built has individual requirements, no 2 projects have been alike. I know we can grab some posts and put them on a page, but if you do a search there are plenty of repos/projects to show that off. I’m afraid that even with the Roots team members being as awesome as they are, we’d end up with a lot of “I have a custom post type and I want to do x with it with my insert name of project here thing, how do I do that?” - we try to support people on our projects, and that would take A LOT of work.
  2. JS libraries move really really fast. To maintain updates to Angular or React apps would take a lot of work (way more than how much it takes to move with WP), and time I personally don’t have to donate. While I’ve worked with React, Angular, and Ember, I’m not sure Angular would be a good case, because of the divide b/w 1.x and 2.x crowd/implementations/future, and doing stuff with Ember requires so many custom adapters and setup things, not to mention their constant batches of changes, that would be way too much work. The best of the libraries to go with IMHO would be React, but it’s just a view layer. So then we’d have to decide how we want to grab data (redux/flux model? with WP? regular JS?), if we should be making stateless components, etc. Also, we’d probably need to make a babel gulp task just to make it work with the current workflow, which could need some looking at as well. (why use gulp when we can use webpack? - easy for SPAs)
  3. I’m pretty busy with my own crap, and a bit cautious about marrying WP to any specific JS thing. If you haven’t noticed, the Roots team takes their work pretty seriously. Almost every project we spin up and work on stays maintained and supported, so if we do make a new project, we’d want to make sure we can see it through.

All that said, you said this:

… which I totally agree with (and I fixed your P in WordPress).

If you think there’s something that I haven’t thought of, or something that you’d like to SEE started and maintained, and you can pinpoint specific specs and requirements for that project, I might be willing to at least take a look, and help spearhead that and get it started. I’m not talking about “help me build x project”, but something that could benefit a larger community of people. If you can come up with what that would be or should be, I could be down.


Why Laravel Blade and Not React
#3

Insightful response, thanks for it.

I totally see what you are saying, both about how custom a base MVC theme might have to be to actually be useful and how much turnover there is in that space. It’s hard to know which to even choose.

Maybe that’s the answer - choose none. Maybe the theme just provides collections of all the API hooks you’d need to drop an MVC framework in, the same way you can drop Bootstrap, Foundation, etc onto Sage.

Easier said than done - and I’m not even sure how consistent the model layer could be between MVCs but at least it would be an agnostic way to get the MVC model onto WP. Might be something I’ll look into and post further here about any discoveries.


#4

@staypuftman

What are the advantages from a business standpoint?

Why would I want to build something that requires a ton of maintenance, has a much smaller pool of talent (and more expensive) to hire, and produces a similar outcome.

It’s important to mention the SEO implications of SPAs as well if organic traffic acquisition is important the business that’s paying for the build.

I love Angular, and React.js seems really popular…But why not stick with php?

Will utilizing the API + building an SPA theme created a better final product or outcome for my client? If so how? Can I build a comparative project notably faster, easier, etc?


#5

Here are my 2(000) cents about these things.

First of all i’d say it all depends from that the final product. It all comes down to the CONTENT and GOAL in my opinion. Technology is just one of the tools.

Will it be a presentational website that has just some contact info and text and pictures? Do it PHP, adding react/angular to it can be overkill unless you really want to give the visitor a bit of a different experience with transitions etc. Still you can do pretty nice and amazing things with some minor js/css animations so no need to do it overkill. Also check this post by USTWO they have a wp-backend/react front end. Just look at the architecture of the site and tell me what the difference is between a PHP one or the visitor experience? Is it easier or better to read then a php with some ajax or css animation? Is it faster? (try pingdom or gtmetrix with their site).

Doing things in react just because everyone else does it or because it’s hype is pointless and as you said maintenance and learning new things is time consuming.

For example i tried out some example themes with react and imagine this, they are missing simple things like the “read more…” functionality etc. so you’d need to recode those functions probably from scratch just so you can use them on your react blog and there are tons of other such elements.

BUT… if your focus will be building proper Apps with functions/experience non existent or totally different to what WP has now (so not redoing EVERYTHING wp already does like blogs etc.) then you could probably find better ways/frameworks of doing it (meteor+react maybe?) then WP.

If it can be done it doesn’t mean it must be done. End of the day what you put into the website, so the branding part, design, look & feel, the written content and the main message (which is a goal of each website) or a special service that makes things easier (which is one of the goals of apps), all these things should be your starting point and not the technology part.

If you’ve started a project and ask yourself will we do it in react.js/WP, you’ve started it from the wrong point. Read the HumanMade side of the Ustwo project from above and you can see that they were brought in in the middle of the project after design and everything else was already done.

Also Ustwo isn’t a great example in some ways as their goal was to test/experiment/learn and create something they can show off to others with their website. It isn’t a perfect example of how things should work it’s just another experiment (but a good one) of how things could work in the future.

I think it’s too early to tell which way things will evolve with Wordpress & JS so until then do what you do best.

Your clients/audience won’t care if it’s JS/PHP etc. they want things to work like they should and have VALUE for their company or their audience. Focus on making that better.

Also note that i may be wrong :smiley: just in case you shift your companies focus because of this post :smile:


#6

The biggest use case I see for an SPA-ready base theme is that it finishes the job Roots started out to do. If you want to take WordPress fully into the modern era, you have to use some semblance of a service oriented architecture. A theme like this would get you WordPress moving in that direction.

The biggest question to me is what happens to the community if something like this really catches hold? Drupal has had a really tough time reinventing itself for v8 - it’s a cautionary tale for the WordPress community.

I completely hear what you are saying @kjprince. I’m not sure it really helps anyone make a site that is demonstrably better/faster/etc but it opens WordPress up in a new way that may pay dividends down the road.


#7

@staypuftman

If you want to take WordPress fully into the modern era

As a developer this makes sense. Just looking at the new Calypso project from Automattic you can see JS and the WP-API will play a big role in shaping the future of the platform.

A few questions:

I’m curious what the modern era is, how it’s defined, why it’s important, and what it means for the people that use WordPress?

SOA makes sense too. But Why? Why can’t I go with the old, “if it ain’t broke don’t fix it” mindset?

More importantly how can I persuade a client / user / etc? They likely don’t understand and therefore don’t care about SOA, PHP7 or other tech things.

Clients want a better performing website so they can deliver a better experience to their visitors—so they can make more money.

but it opens WordPress up in a new way that may pay dividends down the road.

I think you’re right. As the API gains traction WP may head in the app framework direction, but who knows.


#8

@kjprince - good questions.

  • I’m not sure there is a tight definition on a more modern state of development but I see it as embracing the web as a platform for applications and not just static sites. That has been enabled by all the new tooling, especially on the front-end. And you’re right - I’m not sure WordPress should or necessarily wants to go that way but, as you stated, Calypso and WP-API sure make it seem like that’s a serious ambition.

  • For most WP projects, SOA doesn’t make sense. But what if you are a entreprise-level media site? I can easily see the use case there for wanting to physically separate the back/front-end for something like the New Yorker which relaunched on WordPress.

  • As such, I don’t see this as an argument you can even have with a smaller, non-technical client. It’s more of a forward looking concept that could help WordPress enter a new type of conversation, with larger sites that resemble content distribution platforms. The Roots community seems poised to drive that more than any other I’ve seen.


#9

#10

You know what’s funny about WordExpress that @duncan linked to above? I use ScriptSafe in Chrome (like NoScript in Firefox) so by default all new sites have javascript disabled. And guess what? WordExpress doesn’t render anything.

I love that javascript is being promoted with WordPress, I think the Rest API will open up a lot more opportunities. I just hope WordPress doesn’t go client-side rendering for everything and forget about server-side rendering that it’s traditionally had using PHP.

For the ambitious, you can use existing WordPress themes like Sage and use all the goodness that these popular JS MVCs like Ember, Angular and React by starting to use ES6, Service Workers, Push Notifications, and Web Streams among many others. You have a complete server-side rendering theme and can build upon the client-side rendering with the data from the Rest API!


#11

Content delivery JS, such as Angular can be done server-side - avoiding the JS off/block issue in the browser.

Angular is great for content structure, something that ‘traditional’ WP templates are falling down on a bit in modern coding.

Jury is still out on whether it is actually faster to deliver a full WP site this way, but definitely a balance between PHP and Angular (or equivalent) makes for more efficient theme writing.

The SEO issues CAN be overcome. My main issue is backwards compatibility. Mainly allowing for normal page loading as a fallback. This makes for a very robust site as, theoretically, the page would load even on Netscape Navigator for example :slight_smile: Ignoring IE6 for a moment, I think there is a lot to be said for future-proofing sites/content with solid, simple code fallback.

The point being, excessive use of JS libraries on the client side may fail sooner than one would like, or be harder to maintain - such as the Angular 1/2 issue mentioned above.

The Roots discourse pages use a lot of Angular, don’t they?


#12

I’m curious if anyone have adapted React into their WP workflows yet. I’ve seen a couple of examples, such as Us Two, and small unfinished repos on Github. I’m about to embark on a new project and I figured I’d try to test React this time around. But seeing the complexity and the fact that React and WP doesn’t marry that well (yet). I’m a bit thrown off.

In a way I feel I missed the React bandwagon, I mean, it’s been out there for awhile now, but while researching now I feel it’s not mature for bringing in, in a time sensitive project as there is too much work with figuring out how stuff will work together.

Ideally how I would like to work with React would be to use it as a theme like any other. But the route that seem to make sense right now would be to push up WP as a separate app onto DO or AWS and then develop the front-end using React that consumes data from my WP install and simply keep them separate from each other.

Any thoughts or resources?


#13

Check this as an examples of REST + Angular2 and React



#14

Nope. Discourse uses Ember.


#15

This lets you see the api request - geek out!


This is the theme repo


#16