Где посмотреть реальные примеры использования «правильных» клиентских javascript?

Сейчас на большинстве сайтов скрипты вставлены через множество script-тэгов в начале, середине и конце страницы, в каждом из которых свои глобальные функции, повторные вызовы $(document).ready, просто "инлайновые" скрипты и прочие штуки, которые с точки зрения некоторых современных положений "не тру".

Где можно найти реальные примеры использования клиентского javascript, который был бы грамотно и приятно оформлен с точки зрения программирования, например, с одной точкой входа, в виде модулей, с аккуратным использованием своих и сторонних библотек, таких как API Яндекс.Карт, jQuery, например, и т.п.?
  • Вопрос задан
  • 2618 просмотров
Пригласить эксперта
Ответы на вопрос 7
@everdimension
Отличный вопрос, а большинство ответов дурацкие. Да, до "однозначно идеальной" архитектуры коммьюнити пока не доросло, но это не значит, что не надо интересоваться тем, как можно сделать лучше и опираться на чей-то опыт.

Как раз за последнее время с появлением es2015 и webpack дела стали куда лучше, чем когда-либо.
Однако в сводобном доступе больших полноценных проектов я встречал мало, хотя может быть не так хорошо искал. Но известные примеры есть, посмотри вот —

https://github.com/andrewngu/sound-redux
https://github.com/vslinko/ripster

Помимо этого неплохой идеей будет посмотреть на бойлерплейт проекты, которые как раз созданы для того, чтобы предложить своё видение архитектуры и того, "как правильно".

Посмотри на react-starter-kit. Там собрано очень много полезного. Хотя я и не советую вслепую брать бойлерплейты и разворачивать на них свой проект, но очень советую на них посмотреть "изнутри" и узнать много интересного или просто нового.

Посмотри на examples в react-router'е. Конкретно в примере huge-apps показывается, как можно бить вебпаком код на куски и подгружать только необходимое на лету.

Может смутить то, что во всех приведённых ссылках используется react, но для твоей цели (узнать о хорошей архитектуре приложений) это большого значения не имеет. Хотя реакт и сыграл большую роль в "компонентном" мышлении и представлении и повлиял — в хорошем, на мой взгляд, смысле — на то, какими сейчас видятся клиентские js приложения. Из большинства упомянутых проектов реакт убирается довольно легко и заменяется другой понравившейся библиотекой, а именно такая лёгкость смены технологий и является одним из критериев хорошей архитектуры.
Ответ написан
Комментировать
нигде.

Просто юзай webpack или browserify и не парься.

Посмотри на React-router, там есть единая точка входа, посмотри на flux архитектуры, там так же есть единая точка входа.
Ответ написан
Комментировать
Нигде. Стандартов "кошерности" в js нет. Есть ряд популярных фреймворков со своим видением "правильной" архитектуры. Но все это сугубо субъективно и к каждому подходу можно докопаться. Даже сами разработчики стандарта ES6/7 не знают как на нем писать, функционально или императивно. Ищите "свой" фреймворк подходящий вам идеологически и используйте его.
Ответ написан
Комментировать
SerzN1
@SerzN1
Challenge me!
Считаю что это не минус, а наоборот плюс.

Так как в JS достаточно низкий порог входа, можно писать как угодно (наследование и классы, функциональное программирование, просто говнокод).

Задача сеньор девелоперов как раз сводиться к тому чтобы в нужном месте использовать нужные паттерны проектирования - следовательно нужно изучать паттерны и уметь их применять. Фреймворки - этот как раз и есть "навязываемый" набор паттернов для программиста.

Если посмотреть на гуру, то все что TLDR - используйте модули и слабое связывание, а как вы это все организуете - это ваши проблемы.

Примеры допустим тут - https://github.com/facebook/react , https://github.com/asduser/angularjs-recipes
Ответ написан
Комментировать
Единственно верный путь - это смотреть в сторону того, что говорит Nicolas C. Zakas
Гуглите, у него есть несколько книг и презенташек, которые дают ответы 95% ваших вопросов
Ответ написан
Комментировать
@khrnsb4y
В премиум темах для CMS можно иногда наткнуться на весьма достойный код. Но раз на раз не приходится. Сейчас мне по работе как раз попалась тема с модулями, событиями и аккуратным использованием, но чаще лапшакод встречается, потому что js не очень много.
Ответ написан
Комментировать
@mbob
Вот шикарный и достаточно свежий скринкаст про webpack
learn.javascript.ru/screencast/webpack
Код, который генерируется webpack, и есть искомые шаблоны.
Разберите, например, как подключается в webpack полифил для fetch, как и почему это работает
С другой стороны, есть хорошая книжка Стояна Стефанова про шаблоны js. И другая литература. Для разбора шаблонов нужно балансировать пропорцию теории и примеров кода, которые Вы разбираете.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы