I would like to develop themes/plugins for WordPress based on React. To make it search engine friendly, I need it to be rendered initially on the server (serverside-rendering).
The only way to do this, as far as I know, is to use react-php-v8js, which requires the PECL V8js extension. This is a problem since I have no control over the platform on which these themes/plugins will be run.
Is there a way to make React and WordPress work together without having to install additional extensions? Perhaps by building/compiling React files into PHP?
There's an article that describes how to do this:
https://sebastiandedeyne.com/server-side-rendering-javascript-from-php/
But it's a fairly complex setup and it requires using composer. That can be difficult in Wordpress projects since Wordpress tends to completely eschew the modern php architecture.
If you're looking for a library to help with SSR in PHP:
https://github.com/spatie/server-side-rendering
Best of luck on it.
If you want your content to be indexed by search engine without js, you can print your minimal content using Wordpress, just the bare minimum + crucial meta tags, maybe localize some initial state for your react app to boot. A bare bone theme such http://underscores.me/ would be sufficient. When js is available, you can replace your whole WordPress generated content with React ones.
The ideal one is to have React generate the content for you. But it's hard until we can see that nodejs / PECL V8js extension available everywhere.
If you can at least install nodejs and launch a node process then it should be ok, although not so simple.
You would need to generate a ssr version of your assets and use it in a node process that would listen on a socket to write the html result..
In your controller you can create a socket to your node process (something like stream_socket_client(...)) and then you can send a dummy function written as a javascript string to that socket (something like stream_socket_sendto($sock, "getResultForMyWidget(someParams){...}")). That function would be evaluated in the node process that would return the response to the controller (the html response as a ReactDOMServer.renderToString from the component you want to render).
That's it for the big picture.
There is a symfony plugin that illustates it very clearly (see this github) and comes with a dummy server node process to illustrate how it handles the socket listening and eval of the incoming function and returns the html result. See also the example in the sandbox for a bigger picture and in depth implementation. You should be able to adapt it to wordpress.
Related
I'm trying to write a webscraper, to get some sales leads. The problem is that in modern webdesign, most of websites uses some JavaScript to modify DOM (usually using React, Angular, or even just some jQuery). The problem is, that if I scrap some website by request node.js package, and pass html code to cheerio, then I'm simply not able to parse the code and get the info I want. Instead, all I can see are some React.js components ¯_ツ_/¯
Any resources on this topic will be helpful, thanks in advance.
Because the request package will not execute any of the javascript on the page. It will just download the html as is. If you want to see the actual page like a browser does, you would have to create a javascript parser that executes all javascript code in the state you want it to.
Luckily, there are some other options here:
You could take a look at the developer tools on the website you want to scrape and try to find the xhr requests that fetches the data you need. Then you can call this url directly.
You could use headless browser scraping like PhantomJS or CasperJS. These are packages that will try and modify the downloaded dom as good as possible with the included javascript resources.
What are good practices about building a multiple page application using modern JS frameworks?
Multiple page application
In multiple page application we have multiple templates using some “template syntax” to provide us with backend data and AJAX (if needed) or advanced UX voodoo is often handled by jQuery.
Single page application
In single page application “backend data” is provided by AJAX requests and whole routing, frontend logic is handled by JS. We often use some JS framework like Angular or React and compile our sources with task runners/bundlers like webpack or gulp.
Hybrid application
But the most popular around the web seems to be hybrid app. What is typical build workflow while working with such an app? I could not find any tutorials or guides.
So to be specific. I imagine webapp where in which, each page has to be compiled and could share some resources. Every page has own JS routing like wizards or subcomponents. Data is loaded both during page load and AJAX.
For example my webapp would have 3 pages:
guest page - would provide website user with limited content and attract him to sign up
user - would provide signed website user with full content, resources would be extended guest content
admin - shares only styles and webapp “core”
Task Runners/Bundlers
For example in webpack is there a way to specify multiple entry and output points? Maybe the better way is to have multiple webpack/gulp configurations. In that case If I have a lot of pages I would have to write webpack/gulp configurations for every page even though some of them could be exactly the same. How to run that kind of build?
Sharing resources
Will browser load cached js bundle with the same hash like bundle.a2k4jn2.js within the same domain but different address? If so, how to specify such a behaviour in tools like webpack or gulp. I heard about CommonsChunkPlugin but not sure how to use it or even I’m looking at right direction.
Templates
What if I want to load some “backend” data not by AJAX but at the page loading. Of course every templating engine provides us with ability to write native code directly in html template like JSP or PHP. But what if some routing is handled by JS and “template tag” is not visible for page at initial loading i.e. template would not be compiled. Sometimes template engine in server and client could have the same special tag like Blade and Angular which can lead to conflicts.
Directory structure
I suppose that in hybrid app frontend and backend will be tightly coupled. Sharing JS in hybrid app could lead to very complicated imports (in es6 or html script tag). How to keep it simple.
Deploy
What about deploying an application? In java it’s easy because we just specify directories (compiled pages) in build tool (maven, gradle) which be copied to jar/war, but in PHP source code is not compiled how to keep “js source” away from production I could not imagine sensible resolution other than writing own batch/bash script
Summary
I have mentioned specific technologies and frameworks. But my question is about common approach to work with such an webapp rather than “how to do sth in that tool”. Although code examples would be greatly appreciated.
Their is a lot in this question, as a starting point you can define multiple entry points in webpack.
https://webpack.js.org/concepts/entry-points/
If you want to mix data loading between FE and BE then you really need to write an isomorphic JS application and use Node as your BE, otherwise you’ll end up writing everything twice in different languages and having once come across a project like that, trust me you really want to avoid that.
The other bit of this question on shared resources is best answered by WebPack’s bundle splitting which is made for what is being asked here
https://webpack.js.org/guides/code-splitting/
Not sure if I totally understand the question, but single-spa (yes it's redundant) is a tool that can be used to combine multiple apps (even if they are different frameworks) into one single page application. Link to the docs: https://single-spa.js.org/docs/getting-started-overview
I'm a UI developer with very less knowledge in server side. My current work included Oracle Weblogic server, with Java coding language.
The problem is, for each minor change that I make in UI file like js or html, I need to stop the server and rebuild the entire solution to see the change. This is taking a huge effort from a UI perspective.
Is there any way to work on UI files without building each time ?
Go to _WL_user directory (e.g. Oracle\Middleware\user_projects\domains\<your _domain_name>\servers\<server_name>\tmp\_WL_user\<application_name>). In one of folders below (e.g. <...>\war\WEB-INF\jsp), you should find your UI files which you can modify. After reloading a page results should be visible in a browser.
Well, you could just connect a debugger to your server from your IDE so changes you make are pushed remotely, but it's not an elegant solution (and there are things it can't handle and you'll need to bounce the server anyway)
Use Split Development Environment in exploded folder. Then, all you need is to write one file .beabuild.txt and map virtual JS/CSS paths to your source folders.
I'm writing a single-page web-app custom data editor, which currently does not require any server side code to function.
The app generates a .tex file as output. The generated file uses memoir document class and does some complex formatting stuff that is hard to reproduce outside of a *TeX ecosystem.
I would like to let users download PDFs, not .tex files.
I would prefer to generate these PDFs in browser, client-side. I would settle for server-side generation though.
I tried texlive.js, but it lacks memoir. As for the server side, I would like to avoid setting a tex to pdf generation pipeline from scratch --- I feel that it would be a security nightmare.
Any advice?
Basically you just have to compile your own version of texlive.js.
The instructions are here. Just add the memoir package.
Server side renderers do exist. However I would recommend to auto-generate a VM for every run. Like CI-tools do it.
I am tasked with creating a website using only client side techs such as HTML, CSS and JavaScript. We can't using any server-side tech because the instructor is too lazy to install anything and won't allow us to deploy using something such as Heroku. Is there a way I can do this? In particular I want to create partials for that navigation and footer without having to copy and paste them in every single file.
I know of two different approaches:
1. Using Ajax
You can use ajax to do this - probably with the help of a JavaScript library or framework.
JQuery's load can do things like $('#header').load('header-partial.html');
If you're building something more complex with a lot of views, etc... I'd consider using a MV* javascript framework like Backbone.js or AngularJS.
Check out the AngularJS seed project on GitHub for an example
2. Using a build script
If your site is simple enough that all you want to do is include a header and footer on each page, you should consider doing this as a build step in your deployment process. I.E. complile your html with the partials locally, and upload full pages, with the header/footer code on every html page.
This approach has the benefit of not breaking your site if js is disabled.
For an example, check out html5boilerplate's ant build script