Что учить frontend разработчику?

Question

[wingo77]

Какими скилами должен владеть junior frontend developer в 2018 году? В последнее время на разных форумах встречаю комментарии типа jquery в 2017 rly? зачем тебе бутсрап, учи css grid? В итоге, я так и не могу понять, так что учить то?

Comments

[Froggyweb]

надо подождать 2018 года. Знание CSS не запрещают использовать бутстрап. Без знаний CSS использовать бутстрап можно только в рамках примеров кода

[Дмитрий Локшин]

Ребята, какой bootstrap? Завязывайте!
Да, похоже на хайп, но это не так! Bootstrap это большой костыль, люди сейчас даже не соображают, когда тянут всю эту мешанину ради каких-нибудь табов. Это действительно так, пусть его используют люди для своих однодневных продуктов, backend программисты для админок и т.д.

[devalone]

Спрашивал бы уже сразу, что нужно знать в 2020

Answer 1

[Дмитрий Есин]

1. Сначала учим фундаментальщину (как работают компьютеры, сети и браузер, http, основы программирования).
2. Затем изучаем как работают конкретные веб-технологии (html, js, css, как всё это парсится браузером и рендерится в веб-страницу, учимся верстать и использовать js, книжек и курсов масса).
3. Далее изучаем технологии, которые всё это автоматизируют, упрощают и абстрагируют (фреймворки, бутстрапы, реакты, сборщики, jquery, новые стандарты, гриды итд итп).
4. Практика, применение изученного, выбор специализации (зависит от того, что хотите далее делать во фронте - это может быть просто вёрстка, создание интерфейсов или визиуализация данных, а может быть и работа с графикой\аудио\видео, тренды (сейчас это react, bootstrap, foundation, babel, es6, d3, RxJS, функциональное программирование)), далее развиваться на протяжении жизни можно до бесконечности. Но без первых пунктов это всё ничто.

Answer 2

[campus1]

То же что и в 2017.

Comments

[Сергей Горностаев]

То есть всё :)

Answer 3

[Alexander Litvinenko]

Да тут за 2017 еще все изучить...
Существует специальный роадмап на гитхабе для фронтендеров
https://github.com/kamranahmedse/developer-roadmap

Comments

[wingo77]

А вот за это огромное спасибо!)

Answer 4

[litash]

Учите то, что Вам здесь посоветовали, хорошие ответы. jQuery хорошая тема, её нужно знать и в 18 году, не обращайте внимание на "хайп" и всяких понтовых балаболов, потому как на деле всё по другому.

Comments

[Антон]

jQuery хорошая тема, её нужно знать и в 18 году,

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

внимание на "хайп" и всяких понтовых балаболов, потому как на деле всё по другому.

у тех, кто клепает дешевые лендинги, может и по-другому

[litash]

Антон, не согласен.

Answer 5

[Владимир Проскурин]

Вы читаете на английском, значит https://github.com/getify/You-Dont-Know-JS подойдет и для новичков (первая книга), и для опытных (все книги), рассматриваются очень важные вещи. Это даст вам крепкий фундамент знаний языка, а со хорошим знанием языка фреймворки даются очень легко.

Answer 6

[Sergey Ryabov]

State of JavaScript 2017 - путеводитель по использованию технологий.
А тут перевод на хабре.

Answer 7

[zooks]

1. HTML+CSS+JS
2. SASS+Pug
3. React, Vue

Comments

[triggerfinger]

Второе можно смело вычеркивать.

[N!crO]

triggerfinger, а чем плох SASS?

[triggerfinger]

N!crO, нету SASS, есть Sass и SCSS. (это крик создателя Sass)

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

А по поводу чем плох - да ничем, учитывая что его изучение занимает 2 часа, он вообще не стоит упоминания. Я сам стайлус юзаю, он поинтереснее чем Sass

[N!crO]

triggerfinger, Я иногда юзаю Паг, пока особых проблем не выявил. А какие у тебя проблемы с ним были?

[triggerfinger]

N!crO, проблемы начались когда я начал спрашивать на форумах советы и прилагать куски кода. Начиная от того что хреново поддерживается подстветка синтакса, заканчивая тем, что люди тупо не знают/не выносят синтаксис Паг. Да и сам я начал замечать, что он тупо неудобен, несмотря на свою лаконичность.

Далее, начались проблемы когда начал использовать Vue компоненты. Слишком много времени стало уходить на изучение каких-то тонкостей Паг, костылей, которые не нужны 99.999% случаев, но понадобились мне из-за того что я юзаю сахар Вью.

Окончательно точкой стал момент, когда я начал активнее использовать SVG в разметке. Тут стало очевидно, что Паг это просто напросто костыль.

[BB 8]

triggerfinger,

"Окончательно точкой стал момент, когда я начал активнее использовать SVG в разметке."

Boy, this is Fiasko.

[triggerfinger]

BB 8, точно. Паг потерпел фиаско в паре с СВГ. Потому что это выглядело слишком безумно для нормального человека.

[zooks]

triggerfinger, ты бы еще твиг с пагом смешал.

[triggerfinger]

zooks, это к чему вообще? При чем тут твиг?

[BB 8]

triggerfinger, Это ты потерпел фиаско вставляя svg в разметку.

[triggerfinger]

BB 8, лолка. А куда ж ты его "вставляешь", не побоюсь спросить?

[BB 8]

triggerfinger, есть такой тег как object, вот прям в него и вставляю.

[triggerfinger]

BB 8, ну блин...а object куда вставляешь? Небось себе в разметку его вставляешь-таки, шалун? И какая тогда разница?)))

[BB 8]

triggerfinger, боже, иди почитай как svg "вставляется" в object и не разводи клоунаду.

"Я вообще больше про Паг - этот идиотизм ни в кое случае нельзя пускать себе в разработку. Потом заебешся переписывать на хтмл."

О да, очень классно когда у тебя > 10 больших svg в разметке...мммм....классно, наверное разбираться в такой разметке при необходимости)

[triggerfinger]

BB 8, да, согласен. с object это я промахнулся. Ну все равно это не опрадание для Паг))

[triggerfinger]

Но прикол в том, что я анимирую СВГ скриптами, и мне нуен доступ к разметке СВГ, чего object мне не даст.

[BB 8]

triggerfinger, Ну, это уже дело вкуса - html или pug.

[triggerfinger]

BB 8, а может вообще HAML? Вы имеете что-то против HAML??

[BB 8]

"Но прикол в том, что я анимирую СВГ скриптами, и мне нуен доступ к разметке СВГ, чего object мне не даст."

Даст. линк на стили прописывается в самом svg или добавляется JS-ом.

[profesor08]

triggerfinger,
"Окончательно точкой стал момент, когда я начал активнее использовать SVG в разметке."
"Но прикол в том, что я анимирую СВГ скриптами, и мне нуен доступ к разметке СВГ, чего object мне не даст."
require вставит любой svg файл в твою разметку, когда твой сборщик начнет все это компилировать.

BB 8,
"Даст. линк на стили прописывается в самом svg или добавляется JS-ом."
Не надо такой дряни учить других.

[triggerfinger]

BB 8, не даст, я говорю о доступе Вью инстанса, а не отдельной ДЖ библы для анимации

[triggerfinger]

profesor08, рекваер не поможет, речь о сахаре Вью

Answer 8

[Монти Пайтон]

Если вам по фану то учите то - что нравится
Если для работы то смотрите вакансии - там все требования

Answer 9

[aftemaht]

webmasters.teamdev.com Всё что здесь есть, то и учите

Answer 10

[Dmitry Pavlov]

JS- React, Angular, ES6 синтакс
CSS - Flexbox, Yandex BEM, CSS3
HTML - HTML5

Answer 11

[rinatoptimus]

Открываем список вакансий. Смотрим требования.

Answer 12

[BookMen33]

На портале skolko-poluchaet.ru видел сколько получают разработчики и там же указано, что должен знать специалист уровня frontend. Чтобы стать frontend разработчиком человек должен обладать аналитическим складом ума, терпением и усидчивостью.