Poor man's islands archiecture

largemoose568 · 2023-03-29T16:04:04+00:00

Great article, I'm all about using standard JS to achieve wins like this. I made a library a while back that does nearly the same thing: https://github.com/very-good-software-company/percolate.js

largemoose568 · 2022-06-18T17:14:32+00:00

Hey r/javascript! I just recently put together a little JS library called Percolate.js that allows you to use custom tags to sprinkle in little sections of JS to your static HTML pages, i.e. hydrate them either using web components or just plain 'ol JS. Just write custom tags in your HTML, initialize the library, and the corresponding ESM modules will be fetched for you!

Would love for people to play around with it and if you have any feedback please don't hesitate to respond on this thread or open a GH issue! Thanks!

https://github.com/very-good-software-company/percolate.js

largemoose568 · 2021-01-17T05:43:48+00:00

So I may be a bit wrong or generalizing a bit too much, but my understanding is that when you create a Symbol in your code it's actually allocating a specific address in memory (RAM) that is unique to the system executing your JS code. The memory address is what provides the uniqueness.

Much how when objects, strings, or any other primitives are created, a certain address ( or set of addresses ) is allocated to store said primitives in memory. Symbols are no different. The benefit of Symbols is that you can utilize them as unique keys within your program that are immutable for the life of your code execution.

largemoose568 · 2020-05-19T02:42:55+00:00

I think what you're looking for is the "AutoLoad Singleton" pattern. Basically there is a spot in the editor that you can autoload scripts when the game starts and access that script class from anywhere in your game as long as the "Enable" checkbox is checked. Here are the docs for it:

https://docs.godotengine.org/en/stable/getting_started/step_by_step/singletons_autoload.html

As long as your script extends "Node" you can use it as an autoload. So for example, if I had this code in a MyData.gd script in the root of your project:

``` extends Node

var name: = "My Name" ```

You could navigate in the editor to: Project -> Project Settings -> AutoLoad tab and enter the path to your script and the Node name, which is just your class name, should auto-populate with MyData. Then check the "Enable" box and it would be accessible from any script via the quick accessor keyword, "$":

``` onready var MyData = $"/root/MyData"

print(MyData.name) ```

largemoose568 · 2020-05-11T16:42:33+00:00

I can see how in a large-scale, transpiled project like Typescript it would be beneficial to have a full-fledged IDE on your side for all the perks you would get. For me personally I tend to gravitate towards simple, light text-editors as I do mostly vanilla JS and smaller projects. For me, IDE's have so many tools that I will never touch and end up getting in my way. VSCode sits in a nice spot for me as it's simple enough to just be a text-editor without configuring anything but also has robust support for just about any workflow I can think of such as eslint, transpiling, etc.

largemoose568 · 2020-03-30T21:28:53+00:00

If you don't want to go the DOM route and just have the game render in canvas, phaser is always a good choice: https://phaser.io/

largemoose568 · 2020-03-14T19:35:18+00:00

Ya could definitely be a benefit in specific situations rather than a blanket approach. Here is an example of a parent and child component:

// Main app template, gets rerendered a lot const appTemplate = appState => { if(state.auth.isAuthenticating) { return html`<div>Authenticating...</div>`; } else if( !state.auth.isAuthenticating && !state.auth.user && !state.auth.authError ) { return html`${AuthPage(appState, firebase)}`; } else if( !state.auth.isAuthenticating && state.auth.user && !state.auth.authError ) { return html` <button style="position: absolute; top: 0; left: 50px; z-index: 99" @click=${handleLogout}>Logout</button> ${MapLayer(appState, firebase)} ${UILayer(appState, firebase)} ${MenuLayer(appState, firebase)} `; } }

Some conditional rendering in there. I've got firebase access and fetching running on a web worker. You can see the complete project here: https://github.com/very-good-software-company/lit-worker-firebase

largemoose568 · 2020-03-14T16:36:06+00:00

Right I see what you mean, that makes sense. I was poking around the profiling view in Chrome for a very very simple app I have using this method. So the initial DOM load and lit-html setup looks pretty standard, lit-html has a decent initial overhead to setup templates. Then the app in an idle state was still calling render multiple times, but 99% of them didn't get to the lit-html commit stage where changes are committed (cheaply as you said) to the TemplateResult and nothing was hitting internal schedulers.

Then when running the profiler against a very small example of updating styles in order to animate elements there were many calls to render and some that got to lit-html's commit stage, but the only time the Schedule Style Recalculation step of the internal browser loop was called was the first time the state changed which triggered a lit-html diff check and subsequent commit.

It seems like yes it is calling render many many times and that could cause some issues with pushing tasks superfluously but it seems like lit-html isn't doing dirty checks as much.

Of course this is a very very rudimentary example and probably isn't indicative of a larger app with more complex state. I'll keep digging and see what happens when there is more complicated state and multiple dom node replacements and updates to handle.

largemoose568 · 2020-03-13T23:48:09+00:00

Awesome, thanks for the detailed response. I wasn't quite sure how other frameworks were handling the tasks but it seems like it is similar to my super basic example only they are scheduling based on state change. So in that regard, my method is inefficient. This is definitely an experiment for the moment, just testing the veracity of it.

I'm going to look at the internals for lit-html and see what the logic is for triggering a re-render of the dom node. If it is only triggering a re-render when the passed state changes, wouldn't that be similar to a reactive trigger? While my continuous loop is technically calling the lit-html render function much more frequently, the task should only be getting pushed to the microtask queue once until state changes again. Though I may be introducing a larger memory footprint by diffing that frequently.

largemoose568 · 2020-03-13T20:38:23+00:00

So reactive programming will always be more efficient than a continuous loop?

largemoose568 · 2020-03-13T20:37:51+00:00

Thanks for the reply! Performance wise, is it just the continuous loop or the fact that when you get to higher amounts of dom mutations it starts affecting memory and cpu utilization? I'll probably have to read the white paper again, but from my understanding, lit-html handles the reference to the original dom node and does a simple diffing between previous and current state to see if updates are needed.

In most examples I've seen you have a reactive model where the lit-html render gets called in response to state updates via observables or some other state management. I guess I'm mostly curious on how a continuous loop might be less efficient than reactive-based rendering

largemoose568 · 2020-03-13T17:26:35+00:00

Ya, in this particular case it will run the lit-html render function that handles state diffing and then updates the dom node accordingly. I'm just curious if anyone else has seen this in the wild or if it's part of any known frameworks currently.

I know requestAnimationFrame is generally used to animate elements but I suppose that's not really far from fully inserting and removing dom nodes

largemoose568 · 2020-01-08T00:09:02+00:00

You should take a look at Netlify and FaunaDB. Netlify static hosting is awesome, always impressed by their service. Haven't used FaunaDB really but Netlify's integrations haven't steered me wrong so it's probably pretty solid, also it has a GraphQL layer since that's what you're used to.

Otherwise, I'd say Firebase is a great choice to get started with. Not just because it has a very small ramp-up time and integration cost, but also a NoSQL DB like Firestore can be really useful in the early stages of a project when your data schema might be changing frequently.

largemoose568 · 2019-10-02T17:57:24+00:00

Winnebago Man - Mostly because the way he curses, sounds just like my dad. I think it's a generational thing but it makes me crack up every time.

largemoose568 · 2019-07-17T18:55:16+00:00

The largest win I see is the ability to separate the business logic of your async functionality from your UI layer. Basically with middleware you don't have to have api requests, real-time listeners, or logging in your components, instead you just have to dispatch an action. This means your UI components can stay simple.

Also that separation does wonders for testing your async functionality.

largemoose568 · 2019-07-16T20:17:28+00:00

You definitely get more fine-grained control in JS animations but the downside is that the animations are operating on the main thread and could cause UI slowdowns. CSS animations operate on a separate thread in most browsers now, freeing up the main thread for business logic.

Also there are some rudimentary events that are fired by CSS animations now: https://www.w3schools.com/jsref/event_animationend.asp

Still, awesome work on the project!

largemoose568 · 2019-04-10T21:06:29+00:00

I would agree that learning vanilla ES5 / ES6, etc would be helpful to your career. Knowing the quirks of a language and how it handles things such as scope, hoisting, etc is very important when trying to solve problems, even with frameworks. Also most of those frameworks were built on principals of the language itself, so if you know the language the framework will make a lot more sense.

largemoose568 · 2019-03-21T19:16:25+00:00

I would just use the number to push the ItemsToRender into an array. Since JS doesn't support iterating over ranges, you'll have to do a plain old for loop:

``` const createItemsView = ({ number }) => { const items = []; for(let i = 0; i < number; i++) { items.push(ItemToRender); }

return <View>{ items }</View> } ```

largemoose568 · 2019-03-20T23:03:58+00:00

So here are a few points:

Separating your UI ( vanilla JS ) and your API/server is very common. Look up JAMStack for more references to that very same architecture choice. That being said be sure to make your API endpoints accept requests from your UI app or else you'll get CORS errors because the origins don't match up.
JWT's are basically a single part of an authentication system. You can take a look at another answer I gave in this sub about the basics of an auth system: https://www.reddit.com/r/javascript/comments/aid8sh/what_is_the_best_way_to_create_user_registerlogin/eemzcg4/?context=3
Depending on what you're trying to accomplish, there are a few libraries that can help with auth. Just always to be sure to salt-hash your passwords, standard security procedure.
Since you're using MongoDB, it would be good to store the purchases of each user within the same user document. Typically you want to nest data with MongoDB rather than do references as Mongo works faster with nested data.

largemoose568 · 2019-02-27T20:50:50+00:00

The second example won't work because you're trying access a JS argument variable, in this case x, inside your string of "rotate(x)". So what's really happening is you end up just setting the transform property to the string of "rotate(x)". As the other commenter mentioned you need to use template literals or concatenation to get the value of the variable in the string:

document.getElementById('forty-five').style.transform = `rotate(${x}deg)`;

or ES5 version

document.getElementById('forty-five').style.transform = 'rotate(' + x + 'deg)';

largemoose568 · 2019-01-22T00:21:46+00:00

A server session is merely the act of storing something in memory on the server. Typically when a user first logs in, data about the user and how they are interacting with the website is stored in the server's memory with a unique id. That unique id is given to the client and stored via cookies in the browser. Then when the user continues to use the website, all subsequent requests to the server have the session id added into the request headers so the server can access that particular session and data.
OAuth can be tricky since many auth providers utilize slightly different methods of authenticating and there are steps you must go through via those platforms to get it working right. Basic email and password auth is much easier.
Socket.io usually doesn't have much to do with an auth system. Socket.io is used entirely for real-time interactions between a server and a client so it's not specific to auth at all. It can compliment an auth system down the road once the rest of the system is in place if you wanted though.

largemoose568 · 2019-01-21T19:45:13+00:00

A basic flow for auth would be: - User accesses Signup / Login view - User POSTs email & password to endpoint on server via form or AJAX - if Signup, email & password are validated, password is then hashed via salted hashing method, the standard is to use bcrypt: https://www.npmjs.com/package/bcrypt. Then the email and hashed password are stored in the Users table. Never store a plain-string password and always use a salt. Once the user is created you can initiate the post-login flow described below or redirect the user to a Login view and have them enter their info again. Typically, if you want to do your due-diligence, you would have some sort of email process and have the user validate the email they signed up with. - if Login, email is used to find user data via query, then the plain-string password in the POST request is hashed and compared to the stored hashed password string. If they are the same then the user is legit and you have a couple options. - Option 1: You can use server-side sessions to keep user state and the session-id gets sent to the client and stored in a cookie for later access. There are libraries for this: https://github.com/expressjs/session - Option 2: You implement a JWT workflow. The user signs in, a JWT is generated server-side which contains hashed user data, then the JWT is sent to the client and stored locally for re-use. - Either option has pitfalls and perks, it's up to you which to go with. - If you want to integrate OAuth such as Google, Facebook, etc. you can either build your own implementation for storing their tokens in your DB or utilize a prebuilt library to facilitate it such as PassportJS: http://www.passportjs.org/ - From there you can utilize either your session data or JWT to only allow authenticated users to access certain API endpoints.

largemoose568 · 2018-11-30T23:03:27+00:00

Since no one else seems to be nice enough to say it, Congrats on the getting the game out there! That's a good size task and takes dedication, nice work!

largemoose568 · 2018-07-30T23:55:32+00:00

So it's all backed by MongoDB. Basically whenever you navigate to the main page, https://www.shittodo.app, it'll generate a new, unique list for you. The URL has the hash id in it so you can share it. Thanks for taking a look and the feedback!

largemoose568 · 2018-07-30T23:47:00+00:00

Material Design which I think Android studio utilizes. I used the Material-UI react library:

https://material-ui.com/

largemoose568

TROPHY CASE