4 ms·

I'm pretty convinced that rather than shying away from SPAs (which is totally fine), we could solve this with an extra layer of abstraction. Consider the Unrea

I'm pretty convinced that rather than shying away from SPAs (which is totally fine), we could solve this with an extra layer of abstraction. Consider the Unreal network architecture: https://docs.unrealengine.com/udk/Three/NetworkingOverview.html https://docs.unrealengine.com/udk/Three/NetworkingOverview.h... When Tim Sweeney needed to make an engine, he didn't simply hardcode each of the tasks: Update position, update velocity, play animation... Instead, he created a system that allowed those things to become implicit. They synchronize themselves across the network by default. There's no special logic required. So when I look at SPAs, I see a similar sort of situation. Rather than hardcoding each of our endpoints, why don't we come up with a system where we can synchronize some variables from the server to the client? Then adding some new data is as simple as declaring a new variable. No need to create an endpoint for every single thing. This is vague and handwavey, but there's an underlying idea here worth examining. It seems like we could leverage abstraction in a way that unifies these systems (as opposed to simply shoveling another layer of abstraction on top of the current pile). Has anyone been working on anything like this?

faitswulff 9y ago
Like Firebase? https://firebase.google.com/ https://firebase.google.com/
- sillysaurus3 9y ago
  I meant aimed specifically at SPAs. Firebase is nice, but it doesn't really help reduce code bloat on the front end. E.g. if you're making a react app, your instinct is to reach for redux + reducers, even though that means dozens or hundreds of lines of boilerplate code.
  - gieksosz 9y ago
    In my experience you can/should skip redux if you use firebase-firestore. One good reason is that if you try to use them both, you will end up writing a lot of "mee too" action and reducers that will just wrap firebase update events. It is really not necessary to always use Redux.
everdev 9y ago
GraphQL is a single endpoint API
- intrasight 9y ago
  Yes. GraphQL combined with Relay Modern. Even better, add a GraphQL proxy/ORM onto your RDBMS.
vvanders 9y ago
As someone who's worked with the unreal 3 engine in a professional capacity I can tell you that there's a fair bit about those systems that are hard-coded. They just look very nice from a 1000ft perspective. There are parts of UE(like the material editor) which are very modular but the networking stack is not one of them. This is not a knock against UE3, more that things are more complex then they first look.
m_fayer 9y ago
Sounds like MeteorJS.
jstimpfle 9y ago
I don't really want to contribute to the vague-ness of the discussion, and one failed SPA project is all that I can pride myself of: I'm sceptical this can be done. The synchronisation unit is the transaction: What subsets of data must be updated atomically, which business rules apply before the data can be committed, what chunks of data in the UI should be as updated as possible when an editing form is presented to the user. This requires thought and specialized code (structure). Not saying that every form must be coded ad-hoc, but I doubt that a well-engineered SPA can be written by anyone without solid domain experience by just grabbing the next framework.
hungerstrike 9y ago
I'm building an SPA with React and instead of hard-coding each and every form I have a few high level components that take some data and render my forms complete with validation and rules for transforming input back into the store. The web server is configured to respond with the main `index.html` file for any path that is requested. So, using the browser history with JavaScript I'm able to show the user any URL and dynamically render the page for it. The only endpoints that I need to define are for the API server. If I wanted to, I could make the client completely dynamic. Although I don't have time for that right now, it's not a far leap. So, I expect systems like this are coming.
bpicolo 9y ago
It's quite different in games where what you want to sync to users is just the global state of everything at a hard-defined frequency (10, 20hz, whatever), with well-defined heuristics like planar distance from a character. That's not what you want or what you get in web apps.
tfb 9y ago
What you're describing is called "replication" in Unreal Engine. It helps tremendously with writing declarative code, and I've found it to be exceptionally powerful and predictable. I love this architecture so much that I brought it into the world of React and Redux a couple years ago (see https://github.com/loggur/react-redux-provide https://github.com/loggur/react-redux-provide and https://github.com/loggur/redux-replicate https://github.com/loggur/redux-replicate). Dan Abramov and the ReactTraining guys immediately shit on it for some odd reason (I probably did a horrible job of explaining it), saying it wouldn't work in the real world, but I (and my team) have been using it very successfully... in the real world. With that said, I do need to update the docs and improve some internals (and remove some unnecessary stuff like query handling), but there's only so much time in a day. :)

faitswulff 9y ago

Like Firebase? https://firebase.google.com/ https://firebase.google.com/

sillysaurus3 9y ago
I meant aimed specifically at SPAs. Firebase is nice, but it doesn't really help reduce code bloat on the front end. E.g. if you're making a react app, your instinct is to reach for redux + reducers, even though that means dozens or hundreds of lines of boilerplate code.
- gieksosz 9y ago
  In my experience you can/should skip redux if you use firebase-firestore. One good reason is that if you try to use them both, you will end up writing a lot of "mee too" action and reducers that will just wrap firebase update events. It is really not necessary to always use Redux.

everdev 9y ago

GraphQL is a single endpoint API

intrasight 9y ago
Yes. GraphQL combined with Relay Modern. Even better, add a GraphQL proxy/ORM onto your RDBMS.

vvanders 9y ago

As someone who's worked with the unreal 3 engine in a professional capacity I can tell you that there's a fair bit about those systems that are hard-coded. They just look very nice from a 1000ft perspective. There are parts of UE(like the material editor) which are very modular but the networking stack is not one of them. This is not a knock against UE3, more that things are more complex then they first look.

m_fayer 9y ago

Sounds like MeteorJS.

jstimpfle 9y ago

I don't really want to contribute to the vague-ness of the discussion, and one failed SPA project is all that I can pride myself of: I'm sceptical this can be done. The synchronisation unit is the transaction: What subsets of data must be updated atomically, which business rules apply before the data can be committed, what chunks of data in the UI should be as updated as possible when an editing form is presented to the user. This requires thought and specialized code (structure). Not saying that every form must be coded ad-hoc, but I doubt that a well-engineered SPA can be written by anyone without solid domain experience by just grabbing the next framework.

hungerstrike 9y ago

I'm building an SPA with React and instead of hard-coding each and every form I have a few high level components that take some data and render my forms complete with validation and rules for transforming input back into the store. The web server is configured to respond with the main `index.html` file for any path that is requested. So, using the browser history with JavaScript I'm able to show the user any URL and dynamically render the page for it. The only endpoints that I need to define are for the API server. If I wanted to, I could make the client completely dynamic. Although I don't have time for that right now, it's not a far leap. So, I expect systems like this are coming.

bpicolo 9y ago

It's quite different in games where what you want to sync to users is just the global state of everything at a hard-defined frequency (10, 20hz, whatever), with well-defined heuristics like planar distance from a character. That's not what you want or what you get in web apps.

tfb 9y ago

What you're describing is called "replication" in Unreal Engine. It helps tremendously with writing declarative code, and I've found it to be exceptionally powerful and predictable. I love this architecture so much that I brought it into the world of React and Redux a couple years ago (see https://github.com/loggur/react-redux-provide https://github.com/loggur/react-redux-provide and https://github.com/loggur/redux-replicate https://github.com/loggur/redux-replicate). Dan Abramov and the ReactTraining guys immediately shit on it for some odd reason (I probably did a horrible job of explaining it), saying it wouldn't work in the real world, but I (and my team) have been using it very successfully... in the real world. With that said, I do need to update the docs and improve some internals (and remove some unnecessary stuff like query handling), but there's only so much time in a day. :)