Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Приложение на js без фреймворков

Решил написать js приложение без использование фреймворков. Не хочу сказать, что это самый правильный путь, но имеет смысл попробовать писать и так, чтобы лучше понимать как работает язык, ну и что бы лучше понимать как отвечать на вопрос “А зачем нам, собственно, все эти фреймворки? Давайти так писать!”. Вовсе не хочу сказать, что без фреймворков – это путь джедая, или что мой подход к решению самый верный. Я экспериментирую с языком в свободное от работы и личной жизни время, чего и вам желаю 😉

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

Во-первых, роутинг. Приложение конечно будет SPA, так что без этого ни куда. Быстрый поиск поиск по интернету выдал несколько готовых решений, а наглый подсчет количества зваздочек в гитхабе и активность загрузок в npm помолги выбрать победителя, им стал page. Кстати, если вам нравится что-то другое, то отпишитесь в комментариях плиз, интересно кто, что использует.

Во-вторых, темплейтинг. Хотите сами манипулировать DOM’ом? Хардкор – это ваш путь, даже завидую. Я предпочитаю отдать бразды правления тут профессионалам. Давно хотел протестировать lit-html, видимо пришло время. Пользуетесь другим решением? Отлично, как и в прошлый раз – мне интересно услышать ваше мнение.

Идем дальше, нужно как-то хранить данные в памяти и эффективно передавать между компонентами. Мой выбор redux, все хотел заиспользовать его в не контекста реакта.

Над дизайном заморачиваться вообще не будем. Берем bootstrap последней версии и все.

Кстати, по поводу стилей, нужен препроцессор, иначе не дело это. Я решил взять postcss, пора немного отойти от less, а то он прямо везде.

Заметили, что jQuery нет? Это по-дизайну, отвык я от него, предпочитаю работать без этой библиотеки, и так полно библиотек подцепил.

Теперь как все это собирать будем. Разумеется webpack, как же иначе.

Вот и все основные библиотеки, дальше начинаем решать по поводы структуры приложения.

Структура

Разумеется приложение нужно разбить на составляющие и разнести логично по папочкам. Так что бы потом тем кто придет после нас можно было разобраться в том что тут происходит. В процессе проектирования было несколько итераций с разными подходами, не буду вас мучить всеми подробностями – расскажу просто о том к чему пришел:

Теперь отдельно о каждой папке:

Весь исходный код конечно есть в открытом доступе js-webpack-starter

Все, кто хочет посмотреть – велкам, если есть какие рацпредложение, то конечно я хочу их услышать. Особенно, если это в виде пулл-реквестов, а то воздух сотрясать я и сам умею 🙂

Поделиться:
comments powered by Disqus