Share vs Global Data Flow
In this lesson, we'll compare the difference between sharing information with an EdgeJS instance and defining a Global within EdgeJS.
- Author
- Tom Gobich
- Published
- Feb 17
- Duration
- 6m 7s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
Share vs Global Data Flow
-
(upbeat music)
-
So now that we know the difference
-
between sharing stateful information
-
into the direct state of our page
-
and sharing it globally for the view instance,
-
there's a third option that we can introduce here as well,
-
and that's a full-blown global.
-
So let's take the same approach as we did before.
-
Let's create an instance of a full-blown global
-
and see where exactly it propagates.
-
As you probably expect, it's gonna be everywhere.
-
To start out with though,
-
we need to introduce a new start file.
-
And if you recall, start files are registered
-
during the boot process of our application.
-
Now, the reason that we want it
-
to be during the boot process
-
is that it's going to be shared
-
across all view instances that we create.
-
So whenever we introduce it during the boot process,
-
it can register it appropriately
-
and make use of it throughout all of our instances.
-
First, we need to create a new file
-
within our start directory.
-
And to do that, we can use the ACLI.
-
So let's go and stop our server,
-
clear a terminal out,
-
and let's do node ace list to find our options.
-
We're gonna be taking a look within the make section here.
-
And the particular one that we're looking for this time
-
is make preload.
-
This will create a new preload file
-
inside of our start directory.
-
The reason it's called preload
-
is because it's a file that's preloaded
-
during the boot process of our application.
-
So it's a great place to register information
-
for our application.
-
So we'll do node ace make preload,
-
and let's call this globals
-
because this is where we'll define our EdgeJS globals.
-
Hit enter on that.
-
It's gonna ask, do you wanna register the preload file
-
in the .adonisrcts file?
-
And so that it's actually registered
-
during the boot of our application,
-
we will want to hit yes for that.
-
And now it's created our global file
-
and altered our .adonisrc.ts file,
-
adding our global into our application's preloads.
-
So if we open our text editor back up,
-
the first thing we'll see is that we do indeed
-
have our globals within our start directory.
-
We'll take a look at that here in a second.
-
First though, let's inspect our .adonisrc.ts file.
-
So we left off within the provider section of this file.
-
If we scroll down a little bit more,
-
we're gonna see preloads.
-
And particularly, we're gonna see the start globals
-
that it added within here.
-
If I give this a save,
-
it's gonna break those down into separate lines,
-
thanks to the linter's auto formatting
-
that we set up within our Visual Studio Code lesson.
-
We'll see that within the preloads,
-
we have our start routes.
-
So this is where it's registering our routes file.
-
We have our start kernel.
-
That's where that's being registered as well.
-
We haven't quite taken a look at that yet,
-
but we will hear in a little bit.
-
And there's our new globals file right there.
-
Just as we described, there's a comment here
-
noting that this is a list of modules imported
-
before the start of our application.
-
If we go ahead and dive into our new global file,
-
it's just gonna be an empty file.
-
So let's start out by typing out edge
-
and hitting tab to auto import that from edge.js.
-
With edge, we have the option to create a global.
-
This is a simple method.
-
It accepts in a name as the first argument
-
and a value as the second.
-
And the value can really be anything that we want.
-
It could be a string,
-
or as I show it in the example here,
-
it could also be a function,
-
could be an array, so on and so forth.
-
We'll stick with the naming example
-
that we've been going with so far.
-
This one will be our global example,
-
and our value will just be a simple string, global info.
-
If we give this a save,
-
let's add this to all of the inspect calls
-
that we have so far.
-
So we have our state example, share example,
-
and now our global example here as well.
-
I'll give this a copy once more,
-
and we'll wanna dive into our navigation
-
and overwrite this one,
-
and dive into our card
-
and overwrite that one there as well.
-
Cool, now that we have that in place,
-
let's dive back into our terminal
-
and start our server backup.
-
So npm run dev.
-
Once that's booted, we can dive back into our browser
-
and take a look at what we have.
-
So here's our global example,
-
and we can see that we have global info
-
within our navigation inspect,
-
and it's also within our page inspect.
-
And if we scroll down to our components inspect,
-
it's there as well.
-
Remember, our state example is there
-
only because we're explicitly passing it
-
in to that component.
-
So if we dive back to our homepage,
-
we're passing it into that component right here.
-
If we were to take that away,
-
our state example will go back to undefined
-
within our components.
-
So our global example is working almost identical
-
to our share example.
-
As we said though,
-
the main difference between the two
-
is that our global is shared across all view instances,
-
whereas share is specific to the view instance
-
for this particular request,
-
meaning share is great for user-specific information,
-
and global is great for application-specific information.
-
In addition to that,
-
if we go ahead and hide our browser back away,
-
within our movies controller here,
-
if we were to even attempt to try and use global
-
within a particular view instance,
-
so view.
-
You'll see that global just doesn't exist
-
within this context
-
because we're already within a specific view instance.
-
So if you do happen to get the two confused,
-
know that EdgeJS has your back
-
and will only let you share on instances
-
and will only let you set global on EdgeJS itself.
-
Whenever we set globals,
-
EdgeJS will use that global
-
anytime that it creates a new view instance
-
and that property will be automatically shared
-
directly onto that instance.
-
And globals can really be whatever you need it to be as well.
-
You can even pass your model into here as well.
-
So if we wanted to,
-
we could switch this global example to movie
-
and provide our movie model in here.
-
We'll need to import that just like so.
-
Give that a save.
-
I have an unsafe change within our movies controller.
-
Yep, definitely wanna get rid of that.
-
Let's go ahead and get rid of our view shares here as well.
-
Let's get our state information back to just movies.
-
And while we're at it,
-
let's go ahead and get rid of our inspecs.
-
So we'll get rid of inspect there within our navigation
-
and within our card component as well.
-
Now, since we're sharing our movie model
-
as an EdgeJS global called movie,
-
what we could do,
-
not necessarily saying that you should do it,
-
but what you could do is we could comment out
-
our movie.all call,
-
get rid of that from the state for our page.
-
And inside of our page up at the top,
-
we could do @let movies equals await movie.all.
-
Give that a save, jump into our browser and look at that.
-
Everything's still working a-okay
-
because we have movie accessible now anywhere within EdgeJS
-
where we can call all
-
and we can do whatever we need with that particular model
-
directly inside of EdgeJS
-
since it supports JavaScript expressions,
-
including but not limited to fetching information
-
for our page.
-
Cool.
-
So I don't wanna leave it like that.
-
So let's go ahead and undo what we just did right there.
-
Let's get rid of that global just like so.
-
We'll go ahead and go back a couple of steps
-
just so that we leave something in this file as an example,
-
even though we're not using it anywhere on our page.
-
And then let's dive back into our movies controller
-
and bring our movies back from there.
-
Cool.
-
Let's verify that we left everything in a working state.
-
Jump back into our browser, give it a refresh.
-
Sure enough, there's our movies and dive into them still.
-
That's working a-okay.
-
We can dive into another one.
-
Oh, that was the same one.
-
There we go.
-
Now we can dive into another one.
-
There we go.
-
Okay, cool.
-
So everything seems to be working a-okay.
-
We're leaving it in a working state
-
and we're ready to move on.
-
Introduction
-
Fundamentals
-
2.0Routes and How To Create Them5m 23s
-
2.1Rendering a View for a Route6m 29s
-
2.2Linking Between Routes7m 51s
-
2.3Loading A Movie Using Route Parameters9m 17s
-
2.4Validating Route Parameters6m 6s
-
2.5Vite and Our Assets6m 38s
-
2.6Setting Up Tailwind CSS9m 5s
-
2.7Reading and Supporting Markdown Content4m 32s
-
2.8Listing Movies from their Markdown Files8m 51s
-
2.9Extracting Reusable Code with Services7m 4s
-
2.10Cleaning Up Routes with Controllers4m 52s
-
2.11Defining A Structure for our Movie using Models9m 38s
-
2.12Singleton Services and the Idea of Caching6m 11s
-
2.13Environment Variables and their Validation4m 16s
-
2.14Improved Caching with Redis10m 44s
-
2.15Deleting Items and Flushing our Redis Cache6m 46s
-
2.16Quick Start Apps with Custom Starter Kits6m 28s
-
2.17Easy Imports with NodeJS Subpath Imports8m 40s
-
-
Building Views with EdgeJS
-
3.0EdgeJS Templating Basics8m 49s
-
3.1HTML Attribute and Class Utilities6m 9s
-
3.2Making A Reusable Movie Card Component10m 24s
-
3.3Component Tags, State, and Props4m 53s
-
3.4Use Slots To Make A Button Component6m 56s
-
3.5Extracting A Layout Component5m 13s
-
3.6State vs Share Data Flow2m 59s
-
3.7Share vs Global Data Flow6m 7s
-
3.8Form Basics and CSRF Protection6m 13s
-
3.9HTTP Method Spoofing HTML Forms3m 3s
-
3.10Easy SVG Icons with Edge Iconify7m 57s
-
-
Database and Lucid ORM Basics
-
4.0Configuring Lucid and our Database Connection4m 3s
-
4.1Understanding our Database Schema9m 35s
-
4.2Introducing and Defining Database Migrations18m 35s
-
4.3The Flow of Migrations8m 28s
-
4.4Introducing Lucid Models5m 43s
-
4.5Defining Our Models6m 49s
-
4.6The Basics of CRUD11m 56s
-
4.7Defining Required Data with Seeders11m 11s
-
4.8Stubbing Fake Data with Model Factories13m 48s
-
4.9Querying Our Movies with the Query Builder15m 30s
-
4.10Unmapped and Computed Model Properties3m 24s
-
4.11Altering Tables with Migrations7m 6s
-
4.12Adding A Profile Model, Migration, Factory, and Controller2m 57s
-
4.13SQL Parameters and Injection Protection9m 19s
-
4.14Reusable Query Statements with Model Query Scopes8m 11s
-
4.15Tapping into Model Factory States9m 15s
-
4.16Querying Recently Released and Coming Soon Movies4m 59s
-
4.17Generating A Unique Movie Slug With Model Hooks7m 59s
-
-
Lucid ORM Relationships
-
5.0Defining One to One Relationships Within Lucid Models5m 49s
-
5.1Model Factory Relationships2m 54s
-
5.2Querying Relationships and Eager Vs Lazy Loading5m 17s
-
5.3Cascading and Deleting Model Relationships5m 16s
-
5.4Defining One to Many Relationships with Lucid Models6m 56s
-
5.5Seeding Movies with One to Many Model Factory Relationships5m 24s
-
5.6Listing A Director's Movies with Relationship Existence Queries8m 41s
-
5.7Listing and Counting a Writer's Movies8m 41s
-
5.8Using Eager and Lazy Loading to Load A Movie's Writer and Director5m 18s
-
5.9Defining Many-To-Many Relationships and Pivot Columns9m 48s
-
5.10Many-To-Many Model Factory Relationships4m 50s
-
5.11A Deep Dive Into Relationship CRUD with Models18m 5s
-
5.12How To Create Factory Relationships from a Pool of Data13m 55s
-
5.13How To Query, Sort, and Filter by Pivot Table Data9m 47s
-
-
Working With Forms
-
6.0Accepting Form Data12m 15s
-
6.1Validating Form Data with VineJS9m 29s
-
6.2Displaying Validation Errors and Validating from our Request7m 16s
-
6.3Reusing Old Form Values After A Validation Error2m 3s
-
6.4Creating An EdgeJS Form Input Component5m 28s
-
6.5Creating A Login Form and Validator5m 1s
-
6.6How To Create A Custom VineJS Validation Rule9m 7s
-
-
Authentication & Middleware
-
The Flow of Middleware7m 49s
-
Authenticating A Newly Registered User4m 14s
-
Checking For and Populating an Authenticated User2m 10s
-
Logging Out An Authenticated User2m 24s
-
Logging In An Existing User6m 54s
-
Remembering A User's Authenticated Session6m 55s
-
Protecting Routes with Auth, Guest, and Admin Middleware5m 36s
-
-
Filtering and Paginating Queries
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!