Как научиться писать приложения на pure JS?

Question

[gleendo]

В общем, как научиться писать полноценные приложения без использования каких либо зависимостей, в частности фреймворков?
Как продумывать архитектуру? Как все организовывать? Какие основные топики нужно знать чтобы писать приложения с нуля на чистом JS?
И самое главное, где об о всем почитать? Желательно на русском*
Хотел найти материалы по MVC, но так ничего нормального не нашел, на каждом сайте одна и та же почти статья, освещающая краткие сведения об этом и все, а как написать полноценное приложение из больше чем одного компонента и написать архитектуру под это, нигде не пишут...

Может быть вообще что то глупое спрашиваю, но вижу что все вокруг обсуждают какую то магию, половина использует готовые фреймворки, там все уже за них сделано, все продумано, а другая половина говорит не используйте фреймворки, пишите на чистом JS. Я могу что то написать в императивном стиле, все в одном файле, 100500 функций. Да может быть будет что то работать, но за хорошее инженерное решение это не сойдет. Хотелось бы самому с нуля писать все собственноручно. Хотя бы научиться этому, а потом уже браться за полезные инструменты в виде какие то зависимостей, те же фреймворки. Не хочется использовать что то не зная как все устроено под капотом.

Answer 1

[Stalker_RED]

Про архитектуру и шаблоны проектирования (паттерны) есть книжки.

Ненормальные статьи про MVC штампуются потому, что MVC задумывался не для web'а, и вообще лет за пятнадцать до появления www. Есть неплохая статья рассказывающая о том, как мы докатились до ситуации, в которой буковки MVC лепят куда попало потому что это модно. Если интересно, почитайте оригинал Реенскауга, но перевода вроде нет.

А в фреймворках и библиотеках нет ничего плохого. Относитесь к ним как к наборам инструментов или готовых деталек (как конструктор лего, например). Но плохо, когда человек не знает ничего кроме своего любимого фреймворка, и если в этом фреймворке нет нужной детальки - сразу конец света наступает.

Comments

[gleendo]

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

[gleendo]

Stalker_RED Да и по MVC недавно был стрим на YT, человек писал ToDo List на чистом JS с использованием паттерна MVC. Все более менее стало понятно, даже легко, но вот только вообще не понятно как писать приложение в котором много компонентов, как это все организовывать и связывать когда для каждого компонента в приложении свои view, model and controller...Спрашивал у автора видео, но что то так и не получил ответа.

[alvvi]

iamevg_: если вы не можете придумать сами, почему бы не заглянуть в эти самые фреймворки и не подсмотреть, как они связаны там?

Answer 2

[kurtov]

А зачем?
Зашел на upwork:
по запросу 'pure javascript' выдает 50+ вакансий, из которых только <20 имеется в виду чистый js
запрос по 'javascript' выдает 11k+

Не хочется использовать что то не зная как все устроено под капотом.

Загляните под капот. Это самый быстрый и надежный способ при самостоятельном обучении. Как правило js проекты в открытом доступе на github

Answer 3

[dummyman]

Поддерживаю вас. В современных браузерах и других интерпретаторах js есть все необходимые средства для программирования без всяких там "jQuery и ко".

Я могу что то написать в императивном стиле, все в одном файле, 100500 функций. Да может быть будет что то работать, но за хорошее инженерное решение это не сойдет.

Не важно сколько функций вы напишете. Разумеется, обычно чем код короче, тем лучше. - имеются в виду не количество символов кода, а точность выражения идеи в реализации, и ничего лишнего.

Хотя бы научиться этому, а потом уже браться за полезные инструменты в виде какие то зависимостей, те же фреймворки.

На самом деле, мета-программирование на javascript - это не всегда положительная сторона. Есть тысяча и один фреймворк, которые могут послужить хорошим примером, как делать не надо!
Вспомним хотябы GWT, YUI. Потом ExtJS4 - полная срака из кастомной структуры классов с наследованием двадцатого уровня. Для реализации того функционала можно было выкинуть 3/4 кода. Может быть, во времена популярности prototype.js+script.aculo.us, ExtJS 2 был "хорошим инженерным решением", но в 4й версии - с абстракциями явный перебор.

На русском языке обязательно прочтите Гарден.
Хорошую книгу написал Джон Резик. Есть русская версия, правда только первое издание.

Поверьте, фреймворки - зло! Не пишите лишнего кода сверх решения задачи. Компенсируйте максимум структуры приложения в html и css.

Comments

[Kovalsky]

*Резиг

[gleendo]

dummyman И гарден и JS Ninja первое издание я читал. По JS я в общем то много чего читал, везде одно и тоже практически. Рассказывают о языке, но не показывают как его применять на практике. Да какие то мелкие примеры в 20-30 строк кода есть, но это сложно назвать полноценным приложением. Один небольшой класс, создание экземпляра и все, приложение готово. Но это не то чему хотелось в очередной раз учиться. Хочется научиться писать с нуля более менее крупные приложения, хотя бы аналог какого го нибудь сервиса например. Я могу конечно все в одном файле написать, в котором будет простыня кода, малопонятная через некоторое время и практически не поддерживаемая и не масштабируемая, по крайней мере будет не легко. Тот же MVC, я смотрел видео одно на YT, там в первом видео был сделан ToDo list в таком стиле в котором я могу сейчас писать на JS, все в одном файле, императивный стиль и прочее. В другом же видео был сделать тот же ToDO, но с применением MVC. Была какая то файловая структура, было все разбито на модули. В итоге получился легко поддерживаемый и модифицируемый код. Небо и земля с первый вариантом приложения. Стало понятно более менее как сделать обычный компонент. Но вот вообще не понятно как сделать что то более крупное чем простой ToDo, где приложение будет состоять из более чем одного компонента. У каждого компонента придется же делать свои модель, представление и контроллер. Но вот как это все связать между собой, как организовать структуру, непонятно.

[Frozen Coder]

iamevg_: Тут у вас не с js проблемы, и не в языке дело вообще. Почитайте про паттерны проектирования, одним из которых является MVС, который вообще не панацея. Книга банды четырех вам в помощь.
www.ozon.ru/context/detail/id/2457392
Но она больше на ООП завязана. Хотите писать функционально, тогда ищите книжки по функциональному программированию, как делать всякие композиции функций и прочее.
+ Как вам советовали уже идите на гитхаб и смотрите под капот уже готовым популярным решениям, разберетесь как они устроены, сможете и сами своё писать, и на них писать, и лучшие практики скорее всего увидите (а может и гуано там))). Попробуйте понять основные идеи, почему делали так, какую задачу решали, как бы сделали вы и т.д.

[gleendo]

Eugene Aristarhov: Я начал вчера читать книгу М.Гранд - шаблоны проектирования Java. Но все равно в JS я думаю есть свои особенности. Да про MVC я пытался почитать, но вообще никак не могу найти статью хотя бы исчерпывающую, не то что видео, на примере JS. Да какие то мелкие примеры есть, но как организовать более крупное приложение не ясно.
Смотрел на GitHub код, в большинстве базовая структура из многочисленных папок. Есть много файлов view model controller. Есть какие то router.js common.js и т.д
Вот например структура самого маленького примера который мне попался. Но вот как разобраться в этом хз. все эти модули, компоненты, модели, представления, контроллеры, роутинг и т.д.
Один человек советовал в комментариях на YT почитать про вот это - DDD, Inversion of Control и Dependency Injection., но что то это вообще темный лес какой то.


Смотрел вот это видео, самое новое да и почти единственное на RusYT по написанию JS app с использованием MVC. https://www.youtube.com/watch?v=p3CXpKIisPA
Но там структура один файл модели, один файл представления, один контроллер. Более менее понятно стало хоть что то. Но как сделать что то большее, хз

[dummyman]

iamevg_: Хм. Недостаточно внимательно читали. Как раз в гардене коротко, при этом на пальцах разжеванно, как бывать в таких ситуациях. Ну... Может быть, это я вижу, т.к. до js программировал на разных языках, в том числе и под J2EE. - От того с оформлением мегабайтов кода я был знаком до. Java то научит ООП любить (особенно та проприетарная реализация Sun).
Если вы не владеете так называемым "абстрактным зрением", то, наверное, лучше будет попробовать TypeScript: строгая типизация, устойчивые кейсы, и... опережающий ввод. Все прелести кодера!
Для написания ОС в браузере, разумеется, предложил бы ознакомиться с ExtJS4. - Похоже, он подходит только для разработок ОС. Не меньше! Последующие версии значительно упрощены.
Дело в том, что любая организация кода с ментальной точки зрения является ограничением своей воли мысли. В этом нет ничего плохого. Иногда бывает, работая в команде, без каких либо правил и вовсе не обойтись. Слава богу, я с 2010 года больше не сталкивался с такими ограничениями. И переход на ExtJS4 c ExtJS3.4 был уже без моего участия.
Как бы так объяснить... Возможно, purejs это следующий уровень мастерства. А может быть, я пришел к этому с переходом на линукс и nodejs. Собственно, с какого-то переломного момента я стал программировать на js маленькими пакетами/либами/тулзами, и как-то до мегабайтных объемов лапшакода мое творчество никак не дорастает. Я полностью отвязан от идеологии ООП - могу использовать, могу не использовать. Где захочется использовать классы с наследованием (аля pojo), а где захочу - фабрики с миксинами и декораторами, но основной паттерн - простые функции.

Answer 4

[Ваге]

alexatnet.com/model-view-controller-mvc-in-javascript
youmightnotneedjquery.com