Extracting A Layout Component
In this lesson, we'll learn how we can create EdgeJS layouts using components so that we don't have to redefine or HTML structure for every page in our application.
- Author
- Tom Gobich
- Published
- Feb 13
- Duration
- 5m 13s
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
Extracting A Layout Component
-
(upbeat music)
-
So while we're on the topic of components,
-
let's go and talk about layouts.
-
Layouts within EdgeJS,
-
if you're coming from AdonisJS 5, have been removed.
-
And they've been removed in favor of components
-
because components have a lot more capabilities
-
in terms of what they can do,
-
and allows you to do a lot more with your layouts as a whole.
-
So up till now,
-
if we dive back into our text editor for our pages,
-
we've been providing the markup for our entire HTML body
-
as a whole for each page that we have.
-
Here's our homepage, and here's our movie show page.
-
What we can do is copy everything,
-
including and up to our navigation, give that a copy.
-
And let's go ahead and right click our components folder
-
and click new file.
-
And let's create a folder called layout.
-
We can have multiple layouts,
-
but we can define a base layout of just index.edge,
-
which will allow us to use it very similarly to our button
-
where we can just call at layout and use the default.
-
Now we have a layout folder with an index file inside of it.
-
And let's paste that markup that we had copied earlier.
-
We'll end our div and end our body.
-
And we already know about main slots.
-
So we can provide our main slot
-
in where the main body content would go.
-
So that's gonna be slots.main,
-
and don't forget to await it.
-
And give this a save.
-
Now we can jump into both of our pages.
-
So our movie show page,
-
we can get rid of everything up to our navigation,
-
replace that with at layout, just like so.
-
And we can get rid of the body and end HTML here as well.
-
Cool, so that should be good for our show page.
-
Let's do our homepage next.
-
Everything up through our navigation,
-
replace that with at layout, scroll down,
-
get rid of the end body and HTML,
-
and replace that with an end for our layout component.
-
Cool, we can give that a save.
-
Let's jump into our browser real quick
-
and make sure everything's working A-okay still.
-
Looks good on this page.
-
Let's dive into a movie page.
-
Looks good there too.
-
Awesome, we'll hide that back away.
-
So within traditional layouts, you would have sections,
-
right, you would have maybe your main body section,
-
maybe a meta section, maybe a footer section,
-
so on and so forth.
-
Each of those sections can be easily replaced with slots.
-
We've already done so with our main body section
-
by replacing it with the main slot.
-
Let's go and do the same.
-
Let's dive back into our layout component for metadata.
-
So within our head here,
-
we'll put this above our byte declaration,
-
three curly braces, await slots.meta.
-
We can put any meta information that we want to
-
within our HTML head by specifying it into our meta slot.
-
Now let's give this a save and we're gonna see an error,
-
but let's dive into our browser
-
to see what the error looks like.
-
So we're gonna see slots.meta is not a function.
-
Within our components, the only slot
-
that will always be provided is the main slot.
-
The others are nullable.
-
So if we don't specify a meta slot here as per scene,
-
we're gonna get an error
-
because that's not gonna be a function.
-
Not only that, it's not going to exist.
-
The value will be undefined whenever we try to read it.
-
So if we hide our browser back away,
-
we'll want to wrap this particular function in an if check,
-
since we want it to be optional.
-
We don't wanna force ourselves to use it
-
in order for our page to render out successfully.
-
So we do @if slots,
-
and we can just read for meta to see if it has a value.
-
If it does, it will be a function
-
and we'll be able to apply our slot.
-
So now we can give that a save,
-
jump back into our browser,
-
and we should be good to refresh our page here
-
and everything's back to working.
-
Cool. Let's go ahead and add some metadata.
-
So let's go down to our homepage.
-
Oh, hold on a second.
-
Looks like we have an extra div down here.
-
Let's go ahead and get rid of that.
-
There we go.
-
Okay, so to specify a name slot that we wanna use,
-
we'll do @slot, and we'll provide it in the name
-
of the slot that we wanna provide data for.
-
And our slot as well.
-
And anything in between the start and end slot tags,
-
we'll go into the name slot that we've provided.
-
It's been a while since I've written this,
-
so I might get the structure here wrong,
-
but I think it's meta name description.
-
And I think it's content equals our awesome movie list.
-
And we can end that meta tag there.
-
Let's give it a save and see whether or not it worked.
-
Step back into our browser,
-
let's right click, inspect, head into the head.
-
And sure enough, there's our meta description right there.
-
If you wanted to, you could do the same thing
-
for your title.
-
Alternatively, the title is also a good option for a prop.
-
So if we dive back into our layout for the title here,
-
let's go ahead and replace it, double curly braces.
-
And we just provide title there if it's provided as a prop.
-
Otherwise we'll provide, let's learn AdonisJS 6.
-
So if we give this a save, before we take a look at it,
-
let's dive down to our show page for our movie
-
and let's provide a title here.
-
So we'll provide title in here
-
and this will just be our movie title.
-
And then we'll also provide in a slot
-
for our meta description and our slot.
-
We'll do meta name description content equals
-
and we'll apply our movie summary into there.
-
I think we also have that extra div here as well.
-
Yeah, it looks like it.
-
So we can get rid of that there too.
-
So let's go and dive back into our browser now
-
and take a look at this.
-
So first things first, we can see directly up in our title,
-
the title for our homepages.
-
Now let's learn AdonisJS 6.
-
If we right click and inspect, take a look at the head,
-
we see exactly that, the title
-
and our description is still there.
-
Let's go and dive into one of our movies.
-
So let's dive into this one.
-
We can see the title for this one
-
is now Awesome Movie, The Trilogy.
-
If we dive into the head, we see exactly that.
-
And we see that the description is the summary for the movie.
-
So everything there seems to be working A-OK,
-
which is awesome.
-
So we can hide that back away, hide our browser back away.
-
And now anytime that we create any additional pages
-
for our application, we no longer need to provide
-
the entire bootstrapping of the HTML markup,
-
but rather just reach directly for our layout.
-
And not only will it provide that HTML bootstrapping,
-
but it will also provide our navigation along with it.
-
And later on, we can add in a footer
-
or any other details that we want across all of our pages
-
directly within our layout.
-
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!