Frederik, thank you for your channel! This is pure gold. Last time I've build something like that 4 years ago, before I switched to React. This brings memories!
Glad to hear you enjoyed the video m8! I am right now working on a bigger series where we kick it up a notch by building something that would have been perfect for React with vanilla JavaScript to illustrate some of the differences between building something with React vs vanilla JavaScript. Have a great day and thank you so much for watching!
This is really great! Very interesting ideas and I like that you didn't just say frameworks suck do this. For future videos maybe structure it a bit more! Great video
I am glad to hear it m8 and thank you! I have the modest ambition to show what you can do with Javascript if you learn some tricks before you start, frameworks are great but I don't want an industry of people who think it is the only way to make something in Javascript. Have a great day and thank you so much for watching!
Would be awesome if you actually created full courses step by step doing Vanilla JS projects. I would give you $500 for it. It will be worth the money. I would not be the only one to buy it. It would be worth getting less food for that knowledge. Pretty sure about it. YOu know Step 0: Overview of the project Step 1: Setting up the enviroment Step 2: Setting up Webpack Step 3: Setting up Webpack (2) Step 4: Setting up the files Step 5: Writing the model for recipe list In that format. Most people out there claiming they are seniors aren't. Well, actually many people actually admit they are not, and that they code isn't the best. Though I look at you and this code is much better than theirs + expamples and explanation is well put together, and everything is properly done. You speak well too.
M8 all you have to do is ask and I will put your request on my list, I do this because I think it's fun. Right now I am working on a series on automation where I will show you a few of my projects I have for automating my life. I am currently porting my bot systems to Kubernetes so I can show you some of the benefits that can be gained from scheduled jobs. I am also setting up a few job scrapers and putting that data in a metrics dashboard, the goal being to start a series where we will look at what technologies the job postings are mentioning in different regions of the world and then we can compare how popular things are. If that turns out well I think it could be a really interesting series for more people than just programmers. Have a great day and thank you so much for watching!
Appreciate the hard work to get this knowledge out there! I read some of the comments and can't believe the negativity in so many; possibly some pride that you could build it and they couldn't. Well, I appreciate the fact that I'm a little closer now after studying this tutorial. Thanks
I would rarely subscribe to anyone, but I have for you. Please continue to make these vanilla js/js software pattern kinds of videos. I really think the community needs this level of expert knowledge. I'm currently trying to prove to myself that I can build mostly js rendered web pages without using a framework though still allowing it to be easier than just accessing the DOM all the time. Thank you
many youtubers forget that people watch youtube videos on small screen these days. It will be good to increase the font size of their IDE and a bigger mouse cursor while recording tutorial for youtube. It is really hard to follow the mouse cursor if it is small and is not cotrasting to the background.
Thank you, I am trying different formats to figure out how I best can relay the key points to take away but also the mindset to the student. The main goal is to avoid students mimicking my approach and instead have them understand why I do things this way, I want them to understand my thoughts. It is a challenges to do that and still capture all the parts of the code, if you have suggestions let me know. Have a great day and thank you so much for watching!
Thank you very much m8! I am just making some videos to share some ideas, these are things I have learned after working for a while as a programmer and it is just a hobby so it makes me very happy that someone finds my silly little videos useful. Have a great day and thank you so much for watching!
I just wanted to say thank you for such an incredible video! I have a question though. Is it normal for a junior to struggle with all of this? I'm deeply interested in building and maintaining scalable vanilla applications. I've started and built a relatively simple word game app with only 3 pages, but I didn't use things like template engines, redux and webpack. Now, I'm planning to build a vanilla e-commerce application for free for a close friend starting a small business. My question is, is there something wrong that I'm having a really hard time trying to come up with the structure and the necessary tools to start off? Should I keep going with this, even if it took weeks? I know this is going to give me a very deep understanding of how everything works, but everyone is just telling me to use React or Angular and get it done with and I don't know.
You need to ask "why am I doing this?". If the goal is to learn you are doing the right thing. If the goal is to build your friend a good website you need to do what is right for the product. There is no greater failure of a programmer than to make a client project about them. It sounds to me that whatever you decide to do will teach you something. Anything and everything can be a learning opportunity if you approach it correctly.
@@FredrikChristenson The main goal was just to learn and then I decided that I should help someone while learning. Thank you for your answer and for your video, which will be my guidance throughout the process. It's the only video I found that follows this approach and I really appreciate it!
Aghhh....it's server-side...lol. Web Components in the client can be nice and using GraphQL on the backend removes those API endpoints and keeps things really flexible. Nice project though. You've taken the time to set it up so it's lean and organized :)
How would you handle different components with differnet javascript files in this sort of framework? Would each component have it's own bundle or how would that work? Let's say I wanted to include a login form for my todo list. I'd use mixins to include the pug template for the todo, and the template for the login in some sort of main template probably, but how would you handle the js? It doesn't look like this pattern allows for the import and exporting of modules like in React. Would you just handle this in webpack by bundling together all the js in the whole project structure or how would it work in practice?
A traditional application like this is well suited for amd.js and loading on demand but if you want to bundle you simply include the script in your entry point file and then you can require scripts as you see fit just as with any CommonJS project. In your example creating a login form would be as simple as creating a entry point file called say "login.js" with the js code you need and load it on the login page or you can include everything in one bundle and have your code only execute on the correct page but personally I would create a new entry point. This style of working is how we did things before SPA's and is not a framework but rather tried and true practices. Have a great day and thank you so much for watching!
@@FredrikChristenson But how would you utilize amd.js on a component level in this case? How would you export the JS for the todoList into another component for instance?
In the same way it works in any CommonJS project and with amd.js you would either declare all the components by hand in the entry script or you would create a loader that traverses the file system at build time to pull in the script names. When it comes to the component dependency there is no difference between this and how React does it for example. A React component is just a function that becomes part of a node tree and that tree needs a root element to hook in to so if your todoList needs to work on several pages you simply need to include the js code in that pages entry file and make sure the root element is there.
@@FredrikChristenson Maybe I haven't grasped the basics of CommonJS and amd.js well enough, but I don't understand how this could really be scalable. Could you perhaps make a video in the future on how to integrate and reuse different components using this structure?
Do you have any experience dealing with i18n on frontend projects that you could share with us? I'm really trying to find a solution for managing translations for months, and I can't find a way that can solve all the problems. I can't decide if the localization files should be part of the project or they should be decoupled, each approach have its pros and cons. Currently having a decoupled project holding the locales allows changes to be made on the fly without the dev team being involved but makes development a pain, and it is also hard to maintain over time, because there's no hard dependencies between the translations and the project.
Sure m8, I have worked quite a bit with this and it is a fairly big topic but I can show you what we used to do at my previous job and why that worked well at large scale and I can share what we are doing today at smaller scale. We also have to remember that i18n is hands down the biggest change a product can face and there is no way to do it without a lot of overhead for the company, I will put something together that will show you the general structure of how to solve the problem in a scalable way but trust me, no solution will be perfect for this problem, no one has "solved it" without compromises. Have a great day and thank you so much for watching!
If your app is not SSR nor static rendered, lazy-load and cache localizations for selected language. You can hook it on change language button. If it is SSR or static, it doesn't really matters.
Thank you so much for this demo! I'll need to refactor a frontend structure and I am not allowed to use frameworks. So since I am not a senior yet, I am totally lost. Now, with your demo I have an idea about how to start. Do you mind if I ask you for more resources where I can find content and information about working to build a structure like that?
It is rare that a dev needs to build a UI in vanilla JavaScript and the hype around making content for JavaScript didn't really start before the SPA frameworks became a default. I have a video series iirc where I make a basic Slack application without any framework but I don't know of any other sources. In general building large scale apps without a framework is a bad idea unless you are a senior dev.
Thank you m8! I hope it gave you some ideas about how things can be done in vanilla Javascript but we have to rememer that standard solutions usualy is the best way to ensure the success of a project long term but every once in a while a custom solution like this can be the way to go. Have a great day and thank you so much for watching!
If you switch out the server code for any other language what remains is vanilla JavaScript. It is not relevant that we use a framework for the server part as that is different from project to project but what is relevant is the frontend part which is where most companies face issues with JavaScript. If the intention was to show how to build a server with JavaScript and no framework the title would have been "Building a scalable web application in vanilla Node". Have a great day and thank you so much for watching!
This is an example of how most non SPA applications are built, the other way is usually that you send the markup from the server as a string and add it to the page using JavaScript together with rendering. This is common knowledge for anyone who has worked on a project that wasn't created in the last 5 years or was migrated over to an SPA application just because it became popular. This is what I am trying to show you guys because this is what you can face in the real world, there are plenty of companies where Jquery is still the norm and it is very tiresome to argue with people who seem to believe that everything is an SPA. It is worth to invest in the things that are popular but if you want to be able to feel confident that you can handle the jobs you get in the industry you have to understand the different ways people build applications and not just what the internet is telling you is popular. A real professional can't just look confused when a client makes a request, you have to know enough to be able to build what is needed in the way that is needed because you don't always have the choice of tool. Have a great day and thank you so much for watching!
@@FredrikChristenson Yeah, I think the one I was learning/working with was with API all the time actually. I'm still learning about Vanilla JS SPA, I'm reading about the anatomy of SPA development and learning more JS. Though I guess there is a lot more to just that. I definitely agree. I would do this with more time xd I'm all in without frameworks. I'd rather build without Frameworks, although React is nice etc... but foundations first. I think the 'different ways people build' is probably corelated to understanding the code very well, having general knoweldge about this. There's nothing more to say than just read about these differnt ways and gain more experience with it, and on the way understand more programming I believe. BUt this code here does make sense to me actually. Maybe not every single part, and I think it would take a while for me to write this, but then I'm inexperienced with it. I need to build more stuff xd I mean, there is no getting around that xd I think 6-12months would be realistic to get good or decent at all the different ways and just get decent at programming from what I see. I did try game development and you need to understand how an actually game works, the state, scenes, objects, spawn , offscreen, memory leaks and all that shit xd SPA on the other hand has routing this and that API THen this. xD But this is exciting! Thanks for the answer. It definitelly makes me look at all of this a lot more. I also understand what you mean you can't be areal programming in 3months. Maybe you can specialise in a thing and be good at it, perhaps get a mid-weight position doing SPA in vanilla, doesn't mean you are a "Real Dev". And then companies ahve also different standards so uff. But man, this is gold :D
I suppose it would sound absurd to anyone who has never worked on a project older than 8 years. What do you think we did before SPA's? Have a great day and thank you so much for watching!
I've been looking for this video for days. I knew it existed
Frederik, thank you for your channel! This is pure gold. Last time I've build something like that 4 years ago, before I switched to React. This brings memories!
Glad to hear you enjoyed the video m8!
I am right now working on a bigger series where we kick it up a notch by building something that would have been perfect for React with vanilla JavaScript to illustrate some of the differences between building something with React vs vanilla JavaScript.
Have a great day and thank you so much for watching!
Added this to some of my coding playlists, thanks for making this. Great video.
This is really great! Very interesting ideas and I like that you didn't just say frameworks suck do this. For future videos maybe structure it a bit more! Great video
thanks for sharing dude, love this vanilla javascript subject!
keep up the good work, stay awesome!
I am glad to hear it m8 and thank you!
I have the modest ambition to show what you can do with Javascript if you learn some tricks before you start, frameworks are great but I don't want an industry of people who think it is the only way to make something in Javascript.
Have a great day and thank you so much for watching!
Would be awesome if you actually created full courses step by step doing Vanilla JS projects.
I would give you $500 for it. It will be worth the money. I would not be the only one to buy it. It would be worth getting less food for that knowledge. Pretty sure about it.
YOu know
Step 0: Overview of the project
Step 1: Setting up the enviroment
Step 2: Setting up Webpack
Step 3: Setting up Webpack (2)
Step 4: Setting up the files
Step 5: Writing the model for recipe list
In that format.
Most people out there claiming they are seniors aren't. Well, actually many people actually admit they are not, and that they code isn't the best. Though I look at you and this code is much better than theirs + expamples and explanation is well put together, and everything is properly done. You speak well too.
M8 all you have to do is ask and I will put your request on my list, I do this because I think it's fun.
Right now I am working on a series on automation where I will show you a few of my projects I have for automating my life.
I am currently porting my bot systems to Kubernetes so I can show you some of the benefits that can be gained from scheduled jobs.
I am also setting up a few job scrapers and putting that data in a metrics dashboard, the goal being to start a series where we will look at what technologies the job postings are mentioning in different regions of the world and then we can compare how popular things are.
If that turns out well I think it could be a really interesting series for more people than just programmers.
Have a great day and thank you so much for watching!
Appreciate the hard work to get this knowledge out there! I read some of the comments and can't believe the negativity in so many; possibly some pride that you could build it and they couldn't. Well, I appreciate the fact that I'm a little closer now after studying this tutorial. Thanks
I would rarely subscribe to anyone, but I have for you. Please continue to make these vanilla js/js software pattern kinds of videos. I really think the community needs this level of expert knowledge. I'm currently trying to prove to myself that I can build mostly js rendered web pages without using a framework though still allowing it to be easier than just accessing the DOM all the time. Thank you
many youtubers forget that people watch youtube videos on small screen these days. It will be good to increase the font size of their IDE and a bigger mouse cursor while recording tutorial for youtube. It is really hard to follow the mouse cursor if it is small and is not cotrasting to the background.
Your teaching approach is spectacular. Thank you for sharing your knowledge
Thank you, I am trying different formats to figure out how I best can relay the key points to take away but also the mindset to the student.
The main goal is to avoid students mimicking my approach and instead have them understand why I do things this way, I want them to understand my thoughts.
It is a challenges to do that and still capture all the parts of the code, if you have suggestions let me know.
Have a great day and thank you so much for watching!
Great content and very valuable channel! :)
Thank you very much m8!
I am just making some videos to share some ideas, these are things I have learned after working for a while as a programmer and it is just a hobby so it makes me very happy that someone finds my silly little videos useful.
Have a great day and thank you so much for watching!
Great video Fredrik :)
Glad you liked it m8.
Have a great day and thank you so much for watching!
Hi @Fredrik - hope you make more contents like this .
15:30 - gold :)
I just wanted to say thank you for such an incredible video! I have a question though. Is it normal for a junior to struggle with all of this? I'm deeply interested in building and maintaining scalable vanilla applications. I've started and built a relatively simple word game app with only 3 pages, but I didn't use things like template engines, redux and webpack. Now, I'm planning to build a vanilla e-commerce application for free for a close friend starting a small business. My question is, is there something wrong that I'm having a really hard time trying to come up with the structure and the necessary tools to start off? Should I keep going with this, even if it took weeks? I know this is going to give me a very deep understanding of how everything works, but everyone is just telling me to use React or Angular and get it done with and I don't know.
You need to ask "why am I doing this?". If the goal is to learn you are doing the right thing. If the goal is to build your friend a good website you need to do what is right for the product.
There is no greater failure of a programmer than to make a client project about them.
It sounds to me that whatever you decide to do will teach you something. Anything and everything can be a learning opportunity if you approach it correctly.
@@FredrikChristenson The main goal was just to learn and then I decided that I should help someone while learning. Thank you for your answer and for your video, which will be my guidance throughout the process. It's the only video I found that follows this approach and I really appreciate it!
Aghhh....it's server-side...lol. Web Components in the client can be nice and using GraphQL on the backend removes those API endpoints and keeps things really flexible. Nice project though. You've taken the time to set it up so it's lean and organized :)
How would you handle different components with differnet javascript files in this sort of framework? Would each component have it's own bundle or how would that work?
Let's say I wanted to include a login form for my todo list. I'd use mixins to include the pug template for the todo, and the template for the login in some sort of main template probably, but how would you handle the js? It doesn't look like this pattern allows for the import and exporting of modules like in React.
Would you just handle this in webpack by bundling together all the js in the whole project structure or how would it work in practice?
A traditional application like this is well suited for amd.js and loading on demand but if you want to bundle you simply include the script in your entry point file and then you can require scripts as you see fit just as with any CommonJS project.
In your example creating a login form would be as simple as creating a entry point file called say "login.js" with the js code you need and load it on the login page or you can include everything in one bundle and have your code only execute on the correct page but personally I would create a new entry point.
This style of working is how we did things before SPA's and is not a framework but rather tried and true practices.
Have a great day and thank you so much for watching!
@@FredrikChristenson But how would you utilize amd.js on a component level in this case? How would you export the JS for the todoList into another component for instance?
In the same way it works in any CommonJS project and with amd.js you would either declare all the components by hand in the entry script or you would create a loader that traverses the file system at build time to pull in the script names.
When it comes to the component dependency there is no difference between this and how React does it for example.
A React component is just a function that becomes part of a node tree and that tree needs a root element to hook in to so if your todoList needs to work on several pages you simply need to include the js code in that pages entry file and make sure the root element is there.
@@FredrikChristenson Maybe I haven't grasped the basics of CommonJS and amd.js well enough, but I don't understand how this could really be scalable. Could you perhaps make a video in the future on how to integrate and reuse different components using this structure?
Do you have any experience dealing with i18n on frontend projects that you could share with us?
I'm really trying to find a solution for managing translations for months, and I can't find a way that can solve all the problems. I can't decide if the localization files should be part of the project or they should be decoupled, each approach have its pros and cons. Currently having a decoupled project holding the locales allows changes to be made on the fly without the dev team being involved but makes development a pain, and it is also hard to maintain over time, because there's no hard dependencies between the translations and the project.
Sure m8, I have worked quite a bit with this and it is a fairly big topic but I can show you
what we used to do at my previous job and why that worked well at large scale and I can share what we are doing today at smaller scale.
We also have to remember that i18n is hands down the biggest change a product can face and there is no way to do it without a lot of overhead for the company, I will put something together that will show you the general structure of how to solve the problem in a scalable way but trust me, no solution will be perfect for this problem, no one has "solved it" without compromises.
Have a great day and thank you so much for watching!
If your app is not SSR nor static rendered, lazy-load and cache localizations for selected language. You can hook it on change language button. If it is SSR or static, it doesn't really matters.
Thank you so much for this demo! I'll need to refactor a frontend structure and I am not allowed to use frameworks. So since I am not a senior yet, I am totally lost. Now, with your demo I have an idea about how to start. Do you mind if I ask you for more resources where I can find content and information about working to build a structure like that?
It is rare that a dev needs to build a UI in vanilla JavaScript and the hype around making content for JavaScript didn't really start before the SPA frameworks became a default.
I have a video series iirc where I make a basic Slack application without any framework but I don't know of any other sources.
In general building large scale apps without a framework is a bad idea unless you are a senior dev.
@@FredrikChristenson okay thanks for that! I am watching your slack playlist. It's very helpful. ☺️
Very interesting
Thank you m8!
I hope it gave you some ideas about how things can be done in vanilla Javascript but we have to rememer that standard solutions usualy is the best way to ensure the success of a project long term but every once in a while a custom solution like this can be the way to go.
Have a great day and thank you so much for watching!
But, how exactly is this "vanillaJS" when you're using libraries for basically anything?
If you switch out the server code for any other language what remains is vanilla JavaScript.
It is not relevant that we use a framework for the server part as that is different from project to project but what is relevant is the frontend part which is where most companies face issues with JavaScript.
If the intention was to show how to build a server with JavaScript and no framework the title would have been "Building a scalable web application in vanilla Node".
Have a great day and thank you so much for watching!
Exactly what I was looking for. Can we see the code on Github?
Nevermind, I rewrote the whole thing watching the video lol. That helped me understand it very well
@Fredrik Can you post the code base? Perhaps on github?
Sure m8 I will post a link when I get home.
Have a great day and thank you so much for watching!
You can find the code here m8:
github.com/fChristenson/server-side-components
A mid-weight developer should be able to build this with his eye closed you say?
This is an example of how most non SPA applications are built, the other way is usually that you send the markup from the server as a string and add it to the page using JavaScript together with rendering.
This is common knowledge for anyone who has worked on a project that wasn't created in the last 5 years or was migrated over to an SPA application just because it became popular.
This is what I am trying to show you guys because this is what you can face in the real world, there are plenty of companies where Jquery is still the norm and it is very tiresome to argue with people who seem to believe that everything is an SPA.
It is worth to invest in the things that are popular but if you want to be able to feel confident that you can handle the jobs you get in the industry you have to understand the different ways people build applications and not just what the internet is telling you is popular.
A real professional can't just look confused when a client makes a request, you have to know enough to be able to build what is needed in the way that is needed because you don't always have the choice of tool.
Have a great day and thank you so much for watching!
@@FredrikChristenson Yeah, I think the one I was learning/working with was with API all the time actually. I'm still learning about Vanilla JS SPA, I'm reading about the anatomy of SPA development and learning more JS. Though I guess there is a lot more to just that.
I definitely agree. I would do this with more time xd
I'm all in without frameworks. I'd rather build without Frameworks, although React is nice etc... but foundations first.
I think the 'different ways people build' is probably corelated to understanding the code very well, having general knoweldge about this.
There's nothing more to say than just read about these differnt ways and gain more experience with it, and on the way understand more programming I believe.
BUt this code here does make sense to me actually. Maybe not every single part, and I think it would take a while for me to write this, but then I'm inexperienced with it.
I need to build more stuff xd
I mean, there is no getting around that xd I think 6-12months would be realistic to get good or decent at all the different ways and just get decent at programming from what I see.
I did try game development and you need to understand how an actually game works, the state, scenes, objects, spawn , offscreen, memory leaks and all that shit xd
SPA on the other hand has routing this and that API
THen this.
xD
But this is exciting!
Thanks for the answer. It definitelly makes me look at all of this a lot more.
I also understand what you mean you can't be areal programming in 3months. Maybe you can specialise in a thing and be good at it, perhaps get a mid-weight position doing SPA in vanilla, doesn't mean you are a "Real Dev".
And then companies ahve also different standards so uff.
But man, this is gold :D
not going to watch the video but wanted to say the title sounds absurd
I suppose it would sound absurd to anyone who has never worked on a project older than 8 years.
What do you think we did before SPA's?
Have a great day and thank you so much for watching!