I am trying to use Yew in an SPA alongside some external Javascript.
I'm looking for the right way to enable the external Javascript code to change
the current route in my Yew application without causing a network reload.
I have experimented with setting window.location.href from the console but that
reloads the Yew app (as expected) and this is not what I want in this SPA.
I believe I need a small bit of Javascript to deliver a message
to my Yew app and have my Yew app use the Navigation API to call navigator.push() as appropriate.
I've used Elm a little bit before this is my first Yew application.
I searched around and looked at the source to various applications to find
an idiomatic way in Yew to do to something like what Elm enables with ports.
In Elm I'd declare a port, have my Javascript send a message to it and use
a subscription to trigger an update to Elm's Browser.Navigation module.
While looking around I did come across an article
and chat application which relays input from a web socket to Yew via a Yew agent and a web worker. It is very clever but seems a little much for what I'm trying to do.
So my questions are:
What is the idiomatic way to change the Yew router route from external Javascript?
More generally is there anything in the Yew ecosystem to allow a Yew SPA to
communicate with external Javascript in the way Elm ports do? Or is there a
simpler approach? From what I've read I think I might be able to create a
callback in Yew and register it somewhere the external JS can call with wasm-bindgen.
I found a way to do what I need by having
Yew render a div within a BrowserRouter
Yew add an EventListener on the div which changes the route when it sees a CustomEvent
A Javascript function dispatch a CustomEvent to the div when called
Example is here: https://github.com/jq170727/change_yew_route_from_js
This works but I'm sure it could be improved.
Suggestions or coding advice always appreciated 🙂.
Related
I am trying to create a general web service using Nextjs.
In my research, I often see cases where Express is used as the backend for Nextjs.
However, Nextjs has an api function.
In what cases do we need to use Express for the backend?
Well, you don't really need Express as the backend server. You should be able to use any framework from any programming language. I guess the reason that you often see it used is because it is the best documented.
Regarding api routes, you will always have to use some kind of backend server as it does not work with next export (aka creating a static folder containing html, css and JavaScript).
I want to use React for a project I am working on, but I also want to use an API.
How can I do it?
I have tried to Google this and ask different people, but I have not got a response yet, so I thought I would ask here. I want to use express and maybe not use create-react-app (as it takes up a lot of storage).
Working on a custom server doesen't preclude the use of an API.
If you want fetch the API from the express server and inject it directly on react frontend you need to enable server side rendering (useful post) and pass the data collected as a props from the server (check this example).
Rather then you can build your react project (using even create-react-app) and build an express server who return the index.html on call.
Personally I prefer the first one solution.
I would like to start with a disclaimer that I have no previous coding experience at all, and I have just learned HTML, CSS, JS, node.js, phaser.io, understanding all the jargon such as API, asynchronize, I/O driven, cookies & session, etc.. all that in the past 1.5 months on the web by myself, so if my question doesn't make sense please let me know.
I would ultimately like to make a cross-platform online multiplayer "webgame" (No realtime interaction between clients), I know it is ambitious but I don't mind take one step at a time, finishing the game in the period of 2-3 years on my spare time as a hobbyist, so let's move on to the actual question.
After doing all my research I decided to use phaser as client framework, PhoneGap to compile for crossplatform, and node.js + passport + mongodb for server, user authentication and storage. Since there are no realtime element between clients, and there are more tutorial on using express along with the stack of backend packages mentioned above. I am more keen on using http protocol with express then using websocket or socket.io.
Now I have created a simple login screen with input field using phaser-input plugin, and a button to send the data out. I am surprised when I cannot find any Phaser API on http request.
Q:Are there any Phaser API to do a http POST or GET request? if not is it possible to implement jQuery Ajax (does phaser include the jQuery library already or do I need to include the script as well?)? And if I should use socket.io anyway?
I am working on a phonegap project that use html as login screen too.
First. Yes and no, Phaser itself is just a framework. Phaser 's not a library. But if you want to make http request, i suggest create a Network.js that abstract all of your network call on different platform .I think you can use:
IOS: use Cordova http request.
Android: use Ajax is fine. Yes and it is possible to use jquery. Cordova, Phongap, IONic is nothing more than a web view. So you can use whatever js library you like.
Web: use Ajax too.
I've recently dived into React+Flux on the front-end, and I love it! But I want to also be able to use React on the back-end to avoid having to duplicate views and rendering logic.
I've seen that React supports server-side rendering if you use Node, but I do not use Node for my back-end logic.
So I'm wondering, can I set up a daemon written in Node that just renders HTML based on the data it receives and the root React component?
What I have in mind is to have my back-end application call this daemon with data already prepared (so that domain logic can live on my main back-end application), get HTML, and return that to the front-end.
Is this approach feasible? Has this been done before? I'd love some feedback!
I see that it's been a month and there are still no comments, I will share some of my understandings.
We can use this setup:
An API written in PHP or something similar that serves data.
Isomorphic React components - render on the server, attach event listeners on the client.
Server-side (Node) - the React component uses AJAX calls to get its props from the API and embeds them into a <script id="props" /> tag in the HTML as a JSON string.
Client-side - the component checks the script tag for props. If there is data, then it uses that to skip the re-rendering; if not (due to a server error or something), it can still use AJAX to get its props.
The main idea is that the website is isomorphic (server and client share the same code), so your existing front-end can be easily adapted to this setup.
A good place to start is a simple example about isomorphic React components. This tutorial can also provide an overview to this subject.
I'm developing a very dynamic web application via ember.js. The client-side communicates with a server-side JSON API. A user can make various choices and see diced & filtered data from all kinds of perspectives, where all of this data is brought from said API.
Thing is, I also need to generate static pages (that Google can understand) from the same data. These static pages represent pre-defined views and don't allow much interaction; they are meant to serve as landing pages for users arriving from search engines.
Naturally, I'd like to reuse as much as I can from my dynamic web application to generate these static pages, so the natural direction I thought of going for is implementing a server-side module to render these pages which would reuse as much as possible of my Ember.js views & code.
However - I can't find any material on that. Ember's docs say "Although it is possible to use Ember.js on the server side, that is beyond the scope of this guide."
Can anyone point out what would be possible to reuse on the server-end, and best practices for designing the app in a way to enable maximal such reuse?
Of course, if you think my thinking here doesn't make sense, I'd be glad to hear this (and why) too :-)
Thanks!
C.
Handlebars - Ember's templating engine - does run on the server (at least under Node.js). I've used it in my own projects.
When serving an HTTP request for a page, you could quite possibly use your existing templates: pull the relevant data from the DB, massage it into a JSON object, feed it to handlebars along with the right template, then send the result to the client.
Have a look at http://phantomjs.org/
You could use it to render the pages on the server and return a plain html version.
You have to make it follow googles ajax crawling guides: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started