Как писать приложение на js?

Question

[Youlias]

Подскажите как написать приложение на чистом js в учебных целях? Знаю js, могу писать скрипты и приложения с небольшим количеством кода в императивном стиле. В большом коде начинается портянка неподдерживаемого кода, нет никакой системы, не понимаю с чего начать, в каких местах объявлять переменные и функции, как делить код. В общем нужна какая-то система, архитектура написания кода. В интернете не нашла ролевантной информации

Answer 1

[Сергей delphinpro]

На самом деле проблема нетривиальная для новичка. Себя помню вначале пути. Какая же это была головная боль.
И при том, даже с высоты своего опыта посоветовать что-то конкретное не могу. Оно как-то с опытом нарабатывается. Помогают на этом пути общие книги по программированию, Макконел там, Фаулер. Помимо книг можно было бы посоветовать посмотреть код популярных проектов. Но новичку в них тоже бывает сложно разобраться.
Наиболее продуктивный путь, на мой взгляд, это поработать в команде под присмотром более опытных коллег. Они и подскажут и направят в нужное русло.
А если самостоятельно, то запилить какой-то свой проектик и вылизывать его, рефакторить по мере приобретения новых знаний и опыта, вплоть до переписывания с нуля.

Answer 2

[Надим]

Для начала придумайте задачу. Например, сделать простейший блокнот в виде локальной html-странички или еще что-нибудь, главное чтобы задача была вам интересной.

Далее, задачу разбейте на блоки и по частям пишите функционал. В случае с блокнотом деление на блоки выглядело бы примерно так:
1. Научится создавать поля для ввода текста,
2. Научится программно читать текст из полей
3. Научится сохранять данные в памяти браузера
4. Научится извлекать данные из памяти браузера
5. Научится выводить текстовую информацию на странице

Как только есть решение по всем составляющим блоки, остаётся лишь объединить все в готовое единое решение.

В общем, для создания приложений достаточно следовать обычному здравому смыслу и логике. Пот этом не забывать гуглить, если не понятно как реализовать ту или иную микрозадачу - в программровании это самое важное (умение гуглить).

Comments

[Youlias]

С микрозадачами проблем нет. Проблема с сбором этого всего воедино

[Надим]

Youlias, просто следуйте здравому смыслу и логике при сборке, ничего сложного.

Это примерно как с правильно сформулированным вопросом, который уже содержит в себе ответ (или наводку на ответ).

[Сергей delphinpro]

Youlias, ну давайте посмотрим на данную задачу.
Первое, создание полей ввода. Пишем класс или функцию, где полностью инкапсулируем данную функциональнось. Представляем его в виде черного ящика — передали данные, получили результат. Так чтобы нам не думать что там внутри происходит, и чтобы происходящее внутри никоим образом не влияло на внешнее окружение. И вот вам уже частичка программы, изолированная и отделенная от основного кода.
Второе, сохранение и извлечение данных. Точно так же реализуем автономную функциональность.
Третье, вывод инфы. Пишем какой-то шаблонизатор. которому нам нужно лишь передать данные.
И в финале пишем обвязку для всех этих компонентов, связывая их воедино.

[Youlias]

Сергей delphinpro, а можно отправить вам мой код на код ревью?

[Сергей delphinpro]

Youlias, завтра. в телеграм

Answer 3

[Максим Дунаевский]

Стоит задача написать что-то именно на чистом IS, без библиотек? В таком случае, вам нужно будет пройти несколько этапов.

1. Разбить проект на базовые модули и собственно приложение
   
2. Написать базовые модули для работы с DOM, AJAX, событиями, строками, числами, формами, стилями, потоками, cookies, наследованием, роутингом и т. д. (посмотрите дизайн Dojo Toolkit версии 1. X, там эталонная реализация всего этого уже есть).
   
3. Разделить приложение на модули, написать их
   
4. Собрать из отдельных частей готовый bundle-файл (не знаю, что сейчас стильно-модно-молодёжно, но вроде WebPack популярен, хотя порог входа очень крутой)
   

Comments

[Youlias]

1.Что содержит модуль? Это какой-то класс с созданными на основе его объектами?
2.Как модули могут взаимодействовать между собой?
3. Как модуль делать независимым, если код привязан к dom и зависит от других модулей?

[Максим Дунаевский]

1. Внутри модуля содержится решение 1 (одной) задачи. Например, модуль для создания DOM-объектов. При импорте в проект он должен отдавать всего один объект или функцию, которая делает нужную задачу. Посмотрите, например, в Dojo Toolkit реализацию модулей в каталоге dojo/_base. Скажем, модуль array дает функционал для работы с массивами. Внутри он проверяет, какой уровень поддержки массивов у браузера и при необходимости использует полифиллы. Для того, кто этот модуль использует, нужно знать лишь его API.
   
2. Для взаимодействия используется несколько подходов. Первый - внедрение зависимостей, так называемое Dependency Injection. Модуль при вызове импортирует в себя другие модули и использует их функционал. Существует несколько подходов для решения этой задачи. Второй - обмен сообщениями. Вам нужен паттерн "Посетитель", реализация которого описана, например, на Wiki. Если совсем просто, есть некий глобальный объект с двумя методами - subscribe() и publish(). При необходимости передать, например, переменную из одного модуля или объекта в другой вы делаете так: первый подписывается на прослушивание определенного типа событий, а второй эти события по мере необходимости генерирует. Реализация и применение указаны в модуле dojo/topic.
   
3. Никак. Если модуль привязан к DOM, то это первый признак быдлокода. Правильным решением является абстрагирование от прямой работы с DOM, особенно от обращения к конкретным ID. Если в вашем коде часто используется document.getElementById(), то мои поздравления: вы используете антипаттерн hard code ("прибито гвоздями"). React и Angular для решения этой проблемы вводят понятие "компонент" - объединение в одном месте разметки и логики.
   

Answer 4

[Степан]

Electron

Comments

[Сергей delphinpro]

фраза "на чистом javascript" подразумевает, что человеку не нужно использовать какие-то фреймворки.
Ваш ответ бесполезен

[Youlias]

Спасибо за ответ, но electron не то, что нужно

[SheikhRamil]

Зачем electron?

Answer 5

[Rerurk]

Typescript

Comments

[SheikhRamil]

Зачем тайпскрипт