Building a JavaScript application - sidebar pt 2

In Building a vanilla JavaScript application we make a basic implementation of Slack using JavaScript and Node.

[priyam]

Nice Stuff Fredrik. Really useful to understand things from basic and most importatntly how to test an application which is built using Vanilla JavaScript.

[aurelianspodarec]

This is one of the best series about JavaScript on the internet!

It's far superior to a lot of free and paid courses out there.

This is something I would actually spend hundreds of dollars to buy.

I see my old 2year old comments :D Soon to be 3year old O_o

[aurelianspodarec]

Think I re-watched this like 5 or 6 time today. Each time I pick up new things, trying to add some of what you say into my code with understanding.

This is simply awesome.

I'm learning more now in the past two weeks than what I've learned at the agency for 3months. Isn't that ironic.

On the other hand, at the agency in two weeks I learned more than with my self for the past 6months before I joined there.

It's about exposure to things. Need to gain exposure and do it fast. It's not hard to learn it, it will just take time to absorb it, but eventually you watch it enough time and try to do it, and you'll succeed after few days, but you'll do it.

Love this content. At least it also gives people some exposure on what to read up on the interet as well, and what to ask help for. As when I ask for help people, its hard to tell then what I want to do when I have no real idea on what is it that I want to do lol this helps a lot as well

[rajashekhar]

I'm started learning nodejs will you provide any website ref.

Is it best to buy any course for learn nodejs?
🙄🙄🙄

[aurelianspodarec]

Trying to do this my self, only now I realized that I need to re-render my stuff, I change the state and doesn't work if I do it programmatically it does, it makes sense on why. Trying to wrap my head around how all of this works and do it my self.

I'm understanding more React doing Vanilla JS. I even read some React docs and now that I'm doing more Vanilla JS with the concept of React its very beneficial.

Learned in 2weeks more than at the agency in 3months.

Though prior to that, in the agency in two weeks I've learned more than on my own in few months.

Isn't that interesting :)

If I can only understand what you're talking Fredrik - I get the idea but putting this to work requires a lot more work and understanding and wrappping my head around, surery I can figure it out and do it.

But damit this crap with re-rendering xD To be honest now that I do all Vanilla I know why people love tools like React and what problem is solved. LIke gosh xD More work than I though, a lot more work. Change state and react does it automagically. Wow ;D I change state and it... looks at me like... NOPE! xd

22:05 - explaining re-rendering on state change

[aurelianspodarec]

You know on ming 5:40 - how does or where does this index file gets called? You never export it, I don't think you read this anywhere. Or am I missing something?

I've created a Calendar, Dashboard, ToDo pages and I've put index on them as well, but in my router I just get them by the component, check if url is the same as what's in the router object and if it is display the Component Object.

But how is the index file meant to actually work?

[cdotdev]

Hi Fredrik, for the link click events is there any reason you didn't use event delegation rather than assigning the links an onclick function?

[aurelianspodarec]

Fredrik, would you consider putting the webapp on yout GitHub profile perhaps? Would be nice to see the entire source code.

And perhaps it would be nice to get starting files in your pt1.

Perhaps make those like: Slack App, Version 1: Tutorial 1 (and put the end code of the tutorial), , Vertions2: Turoails Building JS sidebar (end code) etc.. that would really help us following.

I'm going to make this app as my learning tutorial : p Though I'm just looking around right now, I'm getting my plan up on Trello and dividng the time.

[aurelianspodarec]

Why are we replacin the node? Why not just innerHTML?

Does this have to do with re-rendering later one or something?

I'm de-coding your application to learn, and I created a simple thing

Edit: Oh I know.

Think I watched this video like 10times now. I understand every single piece of this, except the Redux clone yet (althoguh I undersatnd the concept/code just need bit more time), will get to that one.

Okay, this makes perfectly sense.

This is pretty much a 're-rendering'. Of course we can't do innerHTML. Someone asked me why not just do innerHTML when i tried to implement this replaceChild and told my code is ugly as I was just doing it line by line to test this out, but now it makes sense.

Studing your code, readig MDN and other blog posts, learning a lot of new concepts and in general, I just connected soo many dots in my head.

[fahmiirfan]

This is golden, thanks for the works man. But, i get a trouble following your video, i need to understand how the framework works. Thanks

[jovicamarkoski]

Hi Fredrik. First, thanks for the great video series. I have a question. Why do you bind all the functions in the constructor? When you declare them in the class ChannelList for example, they are actually created on the ChannelList.prototype object. Then when you create objects of that class and try to access loadChannel function for example like this: someObject.loadChannel(), it calls the loadChannel on the ChannelList.protototype with the someObject object as 'this'. What's the purpose of making a new function with bind and assigning it to the object, when the function already exists on the prototype and can be shared by all objects of the class? This way you have loadChannel on the object and loadChannel on the prototype which you never use, because with every call to loadChannel you use the function on the object. Thanks.

[aurelianspodarec]

Confused.

Where do we get the `createElement()` function? I don't see it anywhere. I do see makeCreateElement, I though your GitHub was wrong but it seems like you have the same in the video, I must be cleary missing something xd

Where does the createElement come from xd

[aurelianspodarec]

When would you use a template data-child specifically?

Imagine you have a header with a search, user details, weather etc...

You would have a class Header and sub-components of it like mentioned above.

And these components are meant to be there forever, meaning they will never change, you load them once and they update (update in terms if the user wants to search, he clicks search and you show him the search input, he clicks close the sercahc closes, or a weather that updates automatically. Like, it's not really a template like the screen main view that updates based on different navigation).

COmpared to a template that you would switch the content.

Would you use for all of them a 'template'? data-child?

So a component header

have a placeholder data-child=search, data-child=weather, data-child=user-details?

Perhaps instead of using the 'template' tag could use a normal div for these, and template for an component that updates so it also communicated to the developer this changes, the other just loads once?

EDIT: Or is it, we put we use this.props.somethig when we have a dynamic data? So for anything else it would be template, and search will have a dynamic data but we would map the results into another part or something

Edit: So you do have a refference on you sidebar ul data-js, and then you append it via that way, so I suppose the re-rendering is meant to be used for anything, like we should use data-ref to access the element and then append/replace the child with new info, no matter what it is.

So its sort of like a new template tthat we can switch, so it doesn't mean we are going to ummm, have to update something like the weather, tis still a component inside a new component. I guess?

[aurelianspodarec]

Heh wonder whats my watch time compared to other people on this video. I wonder how much I inflated the watchtime of this video xD

I'm starting to understand the more advanced parts as well.

Learned about composition and now putting it to work, understand Redux/Flux more and trying to set all of these things up.

Its pretty cool stuff. But still need a lot of work and finish it ^^

[rajashekhar]

one small doubt: If we used addEvenetListener then need to remove the listener.
if not remove what happened.

element.addEventListener('click', function(){}, {once:true})? Is it right?

[aurelianspodarec]

Watching this over and over again xd now I'm in a part where I want to create little components and build up a major component.

But not sure how to render the HTML inside the main component.

I have 'Search' component
```
import Component from "../../../component";

class Search extends Component {
constructor(props) {
super(props);
}

openSearch(event) {
event.preventDefault();
console.log("Open Search");

}

closeSearch(event) {
event.preventDefault();

}

onSearch(event) {
event.preventDefault();
alert("Search");
}

render() {
return /*html*/`
<form
<div
<input name="search" class="header__search-input" placeholder="Search" />
<button type="button">
<i fas fa-times"></i>
</button>
</div>
</form>
`;
}

}

export default Search;
```

And here is where I'm trying to call it, at the end, inside the Header (I bet I got a lot of stuff wrong here)

import Component from "../component";
import search from "./components/search/Search";
import Search from "./components/search/Search";

class Header extends Component {
constructor(props) {
super(props);
// this.search = this.search.bind(this);
this.onEvent = this.onEvent.bind(this);
// this.openSearch = this.openSearch.bind(this);
// this.setSubscriber("header", this.onEvent);
}

onEvent(state, action) {

}

render() {
this.search = new Search();
return /*html*/`
<header class="header">
<div class="header__outer">


<div class="header__item-list">
<button class="header__item header__item--special header__toggle-view-btn" type="button">
<i class="fas fa-bars"></i>
</button>
<div class="header__item">
Weather -10
</div>
<button class="header__item header__item--pull-right header__item--special header__search-btn"
<i class="fas fa-search"></i>
</button>
<div class="header__item header__item--special">
<span Spodarec</span>
<i class="fas fa-angle-down"></i>
</div>
</div>

<div

</div>


</div>
</header>
`;
}
}

export default Header;


I've tried few things with this or without quite a fwe things but not exactly sure, can't exactly visualize whats happening and how this is meant to glue with each other.

[rajashekhar]

small doubt: What is media attribute in link

[aurelianspodarec]

Talking about children. I'd assume the main panel would be a component of its own right, since I need to add a class with it etc... would be mroe logical to put it in the component and do it that way so it follows the convention.

So the header, container, footer would be children of the main panel, and tht would be fine right

```
<div class="main-wrapper">
<aside data-js="sidebar-element" class="sidebar"></aside>

<main data-js="main-panel" class="main-panel">
<header data-js="header-element" class="header"></header>

<section data-js="container-element"

<footer data-js="footer-element" class="footer"></footer>
</main>

</div>
```

Lots of work with this. Though already re-factored the header and footer HTML and CSS at least, need to create search component and well, other components I got there in my project.

Learning a bunch!

[aurelianspodarec]

And back at this video again. Probably a video with the most comments from me lol

You should package this as a course and just sell it for 'free' and perhaps once you build some more audience, do something very polished, and charge some money, I'd still pay for your stuff lol

Probably the only person I would be willing to give my money to.