Шаги становления хорошего фроненд разработчика?

Question

[O_godo]

Дорогие друзья, хочу в полной мере освоить фронтенд , но для этого мне нужны четкий порядок с чего стоит начать изучение и чем закончить, таким образом я смогу более эффектно организовать свое обучение. Прошу опытных разработчиков в этой области поделится планом по наращиванию скила. То есть к примеру :
1) CSS
2)html
3) NodeJS
Прошу в список включить и современные библиотеки и умения , которые были бы полезны в разработке.

Answer 1

[Антон Мудренок]

А какие у вас цели?
Если хотите работать на хорошую компанию, то лучше смотреть по вакансиям, например, тут.
Я считаю что это — минимум, но целится лучше на что-то такое или выше.
В плане порядка изучения советую поступать таким образом("книгу" можно заменять на "сайт" или "документацию"):
1) прочитали книгу по CSS+HTML, сверстали несложный сайт
2) прочитали еще одну книгу по CSS+HTML , сверстали что-то посложнее
3) та же история с JavaScript, первая книга — выполняете упражнения, потом пишете что-то несложное, потом читаете другие книги в стиле best practices. Вот вам список книг и навыков, которые требуют от студентов в одной из фирм.
4) изучаете "плюшки", тут лично мои предпочтения: JQuery, SCSS, Jade, ES6, gulp, InternJS, BackboneJS. Тут все изучается по документациям, хотя книг по JQuery тоже много.
5) можете зацепить backend и NodeJS если вам интересно, минимум — понимать что и как там происходит, почитать про RESTful и MVC на серверах
6) базовые понимания и знания дизайна и сопутствующего софта
—> дальше пункты которые касаются слова "Хороший"
7) поиграться с 2D-3D графикой, анимациями и разными библиотеками с ней связанными
8) совершенствовать свои навыки во всех пунктах выше(оптимизация, best practices), изучать самые интересные решения на разных сайтах, интересоваться всем новым и много практиковаться

Answer 2

[Константин Китманов]

Я написал подробный ответ на вопрос «Front-end разработка, с чего начать?», посмотрите, пожалуйста.

Answer 3

[Елизавета Борисова]

Мое мнение - хорошему фронтендеру нужна такая же база, как и любому другому разработчику.
1. Алгоритмы/структуры данных, опыт программирования, например C++
2. Язык javascript, изучить тонкости и понимать отличия от других платформ.
3. базовые веб-технологии (протоколы, как устроен браузер, веб-сервер и тп)
4. HTML5, CSS3, Javascript в браузере. На этом же шаге можно ознакомиться с историей js-технологий. Посмотреть старые фреймворки, какие задачи они решали.
5. jQuery на уровне понимания устройства
6. CSS-препроцессоры, методологии, шаблонизаторы, CSS-фреймворки Bootstrap и пр.
7. MV* фреймворки и практика реализации SPA
8. Производительность на клиенте, оптимизация всего.
9. Специализированные фреймворки по вашей теме
10. Инструменты vcs, node.js инфраструктура, билд, CI, командная разработка

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

Comments

[Даниил Колесниченко]

начинать с C++, чтобы в результате заниматься фронтендом
мда

[Елизавета Борисова]

Не обязательно C++. Я пояснила, что в фронтенде разные направления, если иметь в виду js-разработку широкого плана, то опыт программирования на других языках обязателен, хотя бы для того, чтобы знать особенности языка JS и среды исполнения в отличие от других платформ.
Я бы даже сказала, что начавшие с других платформ фронтендеры - один из самых востребованных запросов последнего года

[Даниил Колесниченко]

Елизавета Борисова: ну тогда мб. Я, например, могу понять, почему опыт Python может быть полезен фронтендеру — питон учит, что складывать строки с числами нельзя. Могу понять, чем Haskell может быть полезен —в JavaScript есть немало возможностей для функционального программирования, и Haskell может помочь понять принципы ФП и как его вообще эффективно использовать. А вот С++... он, конечно, тоже чему-то учит, но это в основном все достаточно низоуровневые вещи, которые в JS не получится использовать.
К тому же, если речь идет о том, что фронтендеры, пришешие с других платформ, востребованы, то не с Python/Ruby/PHP ли они приходят? Тогда эо объясняется тем, что фронтендеру нужно так или иначе взаимодействовать с разработчиками серверной части.

[Елизавета Борисова]

Это объясняется тем, что ему нужно писать качественный код, независимо от языка и платформы. C++ был как пример, java/python/ruby/go/dart/ ... тоже замечательно. С++ замечательно сочетается с js, по крайней мере с производительностью у такого разработчика проблем не будет, и сможет писать nativeJS любой сложности

Answer 4

[Даниил Колесниченко]

Всякие HTML, CSS и JavaScript учатся вполне себе линейно по всяким htmlbook.ru и learn.javascript.ru
Параллельно обязательно разбирайтесь с Git, Grunt/Gulp, препроцессоры (LESS, Sass, Stylus), автопрефиксер, популярные фреймворки (Bootstrap, Foundation, Axis). Бесят потому что верстальщики, проставляющие вручную префиксы (актуальные? хрен его знает!), потом пакующие всю верстку в архив и пересылающие по почте. Не надо так, вот.

Comments

[Елизавета Борисова]

Это если вы хотите стать интерфейсщиком. Надо определиться, код или интерфейсы

[Даниил Колесниченко]

Елизавета Борисова: лично в моём понимании интерфейсчик = дизайнер интерфейсов, и ему знать HTML и CSS как раз совершенно не обязательно

Answer 5

[Степан]

Рынок уже переполнен хорошими фронтендами, спросите у них.

Comments

[Алексей]

Дак у них и спрашивают...