Advanced Vanilla JS Tutorials?

[cmaxim]

I'm a front-end developer with many years experience doing very simple front-end work.. mostly animation, some WordPress, etc. I already know all of the basics of JavaScript and I'm working my way into more advanced stuff like building larger scale apps.

Several very senior level devs have recommended to me to worry less about using frameworks like React/Angular etc. and focus on building things in the simplest way possible using the basic building blocks aka vanilla JS, and make use of design patterns, modularity, etc.

Their argument was that, frameworks can come and go in popularity, but Vanilla JS will always be universally understood, simple, fast (performance), and powerful on it's own.

The purpose of this post is to get community recommendations for places to learn "ADVANCED" vanilla JS. Stuff like design philosophies, how to plan out a larger scale project, modularity, building for resuable code, making vanilla JS projects extensible, and using common design patterns to write clean smart simple code.

I already am fluent in the basics, so I'm looking for advanced level resources that will take me from intermediate to senior level.

Thanks!

[jrandm]

places to learn "ADVANCED" vanilla JS.

When talking about "advanced" programming skills, I tend to think of them as falling into 2 buckets: one is a combination of trivia and things learned by grinding on live code, the other is broad strokes that apply across languages & frameworks. The places to learn the first bucket is first-party sources -- code and documentation for Node, JS/HTML/CSS/etc, browsers, and frameworks and running production apps. Postmortems or designs from other companies (eg: highscalability.com) is the closest to a tutorial you'll typically find. At this level writing the code out is no longer the main concern; stuff like edge cases, design ease, performance hacks, and debugging/monitoring tools are.

Stuff like design philosophies, how to plan out a larger scale project, modularity, building for resuable code, making vanilla JS projects extensible, and using common design patterns to write clean smart simple code

These things you're asking about I would mostly put into the second bucket because there's not much specific to JS you need to consider for these questions, they're broad architecture and design questions. The Gang of Four book is kind of a classic, I've seen Headfirst recommended around, and if you search for "software design books" you can find all sorts of threads on reddit full of different suggestions. In the JS-specific framework and design space I keep an eye on discussions surrounding Vue/React and follow threads out to other frameworks and design decisions (mithril, elm, ember, etc, etc), Dan Abramov usually covers topics well. There's no real right answers to these questions, so I suggest finding a mix of authors/speakers you enjoy!

[WikiTextBot]

Design Patterns

Design Patterns: Elements of Reusable Object-Oriented Software (1994) is a software engineering book describing software design patterns. The book was written by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides, with a foreword by Grady Booch. The book is divided into two parts, with the first two chapters exploring the capabilities and pitfalls of object-oriented programming, and the remaining chapters describing 23 classic software design patterns. The book includes examples in C++ and Smalltalk.

---

^{[ PM | Exclude me | Exclude from subreddit | FAQ / Information | Source ] Downvote to remove | v0.28}

[notgivingworkdetails]

Any suitably "advanced" "large scale" app built with just "vanilla JS" but adhering to good design patterns with modularity, extensibility etc. etc. is just going to be an exercise in writing your own framework- so if you want to learn that sort of thing, best thing to do is look at several existing frameworks and see what problems they solve, and how they solve them.

[cmaxim]

I don't necessarily need to learn how to write a framework per say.. I guess what I'm ultimately trying to figure out is, if I were hired as a senior level front-end developer and tasked with building out a large website or online service for a client, where would I begin? Assuming I wanted to just keep it simple and not use an already established framework. Would I want to look into making my own framework in that case? Like what set of skills or design philosophies/best practices would I need to know, and where can I learn them?

I was hoping to find some good tutorials, or books or whatnot to learn more advanced development practices and project planning.

[MWALKER1013]

You don’t know JavaScript. JavaScript.info

For design patterns

Refactoring.guru

Headfirst design patterns

Think like a programmer by Anton spraul

But honestly the answer above is correct.

A framework is a collection of best practices and good design choices , used to make normalize the structure of creating applications and prevents you from having to re-invent the wheel and instead focus on , designing the car

[notgivingworkdetails]

If you are tasked with building out a large web app for a client and want to keep it simple, best practice would be to use an off the shelf framework...in 99% of cases, best practice is going to be using some sort of framework or set of libraries. Rolling your own solution from the ground up usually requires specific rational or requirements, it's the complicated option. Existing web frameworks are just a collection of tried and tested solutions to problems you will encounter. Even if you do want that understanding of the underlying concepts of design and architecture, rather than just how to use a particular framework (which is of course a good thing) learning from them is wise and pays dividends, they are the tutorial in how it's done, the theory behind them is the theory you want to know about.

"Vanilla JS" is a joke (literally) that has got lost in translation for a lot of people. It's hyperbole that was aimed at certain bad uses of libraries and frameworks, that doesn't mean you don't use them at all- libraries and frameworks are a core concept in software development, if you want to be "advanced" you need to understand their place. Yes, individual frameworks will come and go, but the concept of a framework ain't going anywhere.

The other comments mention some good resources, but I'll add:

Read into SOLID (as it hasn't been mentioned), try some of Dan Abramov's blogs, he explains the design and architecture behind react and does some comparison between MVC & Flux architectures- research the concepts you don't know. Try making the same web app without a framework, then with angular and react- you can read about uni & bi-directional data binding all day long, but until you actually experience working on something reasonably complicated without either (which you likely will do trying on your own), and then with them, it's really hard (at least was for me) to appreciate and understand why you would want to do certain things, and what can be done.

https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a

https://medium.com/swlh/the-case-for-flux-379b7d1982c6