Where can I see real examples of using the "correct" client-side javascript?

Question

JavaScript

Now on most sites, scripts are inserted through a lot of script tags at the beginning, middle and end of the page, each of which has its own global functions, repeated calls to $(document).ready, just "inline" scripts and other things that, from the point of view of some modern provisions "do not work".
Where can I find real examples of using client-side javascript, which would be competently and pleasantly designed from a programming point of view, for example, with one entry point, in the form of modules, with careful use of their own and third-party libraries, such as the Yandex.Maps API, jQuery, for example , etc.?

Answer 1

Great question, and most of the answers are stupid. Yes, the community has not yet matured to a "definitely ideal" architecture, but this does not mean that one should not be interested in how one can do better and rely on someone else's experience.
Just recently, with the advent of es2015 and webpack, things have become much better than ever.
However, in the free access of large full-fledged projects, I met few, although I may not have been looking so well. But there are well-known examples, look here -
https://github.com/andrewngu/sound-redux
https://github.com/vslinko/ripster
offer your vision of architecture and "how to do it right".
Look at react-starter-kit. There are a lot of useful things in there. Although I do not advise blindly taking boilerplates and deploying your project on them, I strongly advise you to look at them "from the inside" and learn a lot of interesting or just new things.
Look at the examples in react-router . Specifically, the huge-apps example shows how you can break the code into pieces with a webpack and load only what you need on the fly.
Может смутить то, что во всех приведённых ссылках используется react, но для твоей цели (узнать о хорошей архитектуре приложений) это большого значения не имеет. Хотя реакт и сыграл большую роль в "компонентном" мышлении и представлении и повлиял — в хорошем, на мой взгляд, смысле — на то, какими сейчас видятся клиентские js приложения. Из большинства упомянутых проектов реакт убирается довольно легко и заменяется другой понравившейся библиотекой, а именно такая лёгкость смены технологий и является одним из критериев хорошей архитектуры.

Answer 2

нигде.
Просто юзай webpack или browserify и не парься.
Посмотри на React-router, там есть единая точка входа, посмотри на flux архитектуры, там так же есть единая точка входа.

Answer 3

Нигде. Стандартов "кошерности" в js нет. Есть ряд популярных фреймворков со своим видением "правильной" архитектуры. Но все это сугубо субъективно и к каждому подходу можно докопаться. Даже сами разработчики стандарта ES6/7 не знают как на нем писать, функционально или императивно. Ищите "свой" фреймворк подходящий вам идеологически и используйте его.

Answer 4

I think that this is not a minus, but rather a plus.
Since JS has a fairly low entry threshold, you can write whatever you like (inheritance and classes, functional programming, just shitty code).
The task of senior developers is just to use the right design patterns in the right place - therefore, you need to study the patterns and be able to apply them. Frameworks - this is precisely the "imposed" set of patterns for the programmer.
If you look at the gurus, all that TLDR - use modules and loose coupling, and how you organize it all - that's your problem.
Examples are allowed here - https://github.com/facebook/react , https://github.com/asduser/angularjs-recipes

Answer 5

Единственно верный путь - это смотреть в сторону того, что говорит Nicolas C. Zakas
Гуглите, у него есть несколько книг и презенташек, которые дают ответы 95% ваших вопросов

Answer 6

В премиум темах для CMS можно иногда наткнуться на весьма достойный код. Но раз на раз не приходится. Сейчас мне по работе как раз попалась тема с модулями, событиями и аккуратным использованием, но чаще лапшакод встречается, потому что js не очень много.

Answer 7

Here is a chic and fairly fresh screencast about webpack
learn.javascript.ru/screencast/webpack
The code that is generated by webpack, and there are the desired templates.
Understand, for example, how the fetch polyfill is included in webpack , how and why it works
On the other hand, there is a good book by Stoyan Stefanov about js templates. And other literature. To parse patterns, you need to balance the proportion of theory and code examples that you parse.