Какие микро js/css библиотеки/фреймворки посоветуете для изучения?

Question

[NeoCode]

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

В отличие от php, в javascript-мире такое изобилие что глаза разбегатся...
Для css обычно упоминают Bootstrap. В силу отсутствия какого-либо опыта вообще не могу судить хорош он или плох, но возможно если есть какие-то более легковесные альтернативы то будет интересно ознакомиться.
Для js обычно упоминают много всего, на Хабре есть перечисления с десятками(!) разных фреймворков и библиотек. Angular, React, Vue.js и еще десятки названий. Тут вообще сложно, поэтому просто приведу критерии того что мне надо для начала.

1. Простота в изучении
2. Минималистичность; никаких супернаворотов не надо, я сам себе и художник и постановщик задач, и будет лучше если библиотека будет предоставлять какие-то простые, визуально чистые решения для наиболее часто встречающихся задач, а не набор всего на все случаи жизни.
3. Легковесность; сайт не должен тормозить на слабых или загруженных всякой хренью машинах пользователей
4. Лучше библиотека чем фреймворк, в том смысле что библиотека предоставляет больше свободы, а фреймворк как правило требует, чтобы код был написан в соответствии с его, фреймворка, правилами и архитектурой.
5. Многие люди сейчас сидят в интернете через мобильные устройства... я не знаю как правильнее, разработать мобильную версию сайта или какую-то одну универсальную. Мне первый вариант кажется логичнее, поскольку для мобильных устройств не только размер экрана меньше, но и управление другое. Но, в общем, это тоже как-то надо учитывать...

Comments

[lega]

Angular Light (не Angular.js) - библиотека.

[Dark Hole]

То чувство, когда именно такой и пилишь.
Но не либу, а фрейм

Answer 1

[Ivan Bogachev]

Простота в изучении... Минималистичность; никаких супернаворотов не надо... будет предоставлять какие-то простые, визуально чистые решения для наиболее часто встречающихся задач... Легковесность... предоставляет больше свободы...

Для начала стоит попробовать старый добрый VanillaJS - он как раз под ваши требования подходит.

P.S.: Не сочтите это за юмор, учитывая что

обычно упоминают Bootstrap. В силу отсутствия какого-либо опыта вообще не могу судить хорош он или плох

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

Answer 2

[dmz9]

есть концептуальные, есть инструментальные (утилитарные).

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

инструментальные или утилитарные фреймворки - это скорее набор отверток, пассатиж и напильников. не нужно "как то по-особому" ими пользоваться. единственная цель их существования - обеспечить однообразное выполнение определенных простых действий либо сделать "шорткаты" (сокращения) длинно-кодов в короткие понятные команды. самый простой пример - jquery. просто набор полезных утилитарных функций, хорошо делающих своё дело, и предоставляющих однообразный интерфейс.

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

Answer 3

[Сергей Сунцев]

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

Единственный минус это небольшая "необычность" в изучении, но зная es6, проблем быть не должно.

Comments

[Сергей Сунцев]

Но я не знаю вашу задачу, возможно для чистой шаблонизации и изменении DOM вам подойдет связка Lodash+jQuery

Answer 4

[furrya_black]

У меня такое ощущение, что вы изучаете не с того места.

js учить с фреймворка? php так же?

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

Нулевой старт - базовые основы языка, синтаксис, операторы и тд, Примера для js: https://learn.javascript.ru/

UPD:
Потом или параллельно попробуйте написать свой undescore.js с оглядкой на сам undescore)
Сначала будет большой js файл практически с копипастой, глядишь - как дойдете до промисов - будет проект на гите не в виде одного файла, а завернутый в webpack + testem + по мелочи с сорцами в es6 и траспойлерами)

Comments

[NeoCode]

Языки (и php и js) я знаю, они мне вполне понятны. Уж чего, а синтаксис я знаю для нескольких десятков языков. А вот именно опыта практического применения, знания API, библиотек, их архитектуры и не хватает.

[furrya_black]

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

Почитайте описание фреймворков/библиотек, почитайте тематические разделы на хабре фреймворков/библиотек. Какой-то один/2/3 фреймворка/библиотеки на все случаи нет, такова природа сегодняшнего js - проекты быстро плодятся, быстро умирают, что-то живет дольше. Я вижу так - есть задача (реальная или надуманная ради интереса) - смотрим, как задачи этого типа решаются. Делаем, пробуем.