Экспресс обучение frontend разработке. Как подступиться?

Question

[Даниил Головин]

Всем привет!

Немного о себе

Живу в Москве. Закончил третий курс колледжа по специальности программирование.
В процессе обучения, пробовал себя в разных отраслях веб-разработки, но не мог выбрать что-то конкретное, хотя был успех в продаже интернет магазина склеенного на коленке(python/django).
В июне прошел практику в небольшой веб-студии, где занимался версткой макетов(в рамках обучения), поиском контента и поддержкой сайтов. Сейчас твердо решил двигаться в front-end разработку.

В связи с рядом жизненных изменений для меня очень резко встал вопрос трудоустройства до конца лета по специальности верстальщик/front-end junior.
Проанализировав рынок и тематические форумы я понял, что необходимые знания для junior front-end разработчика это:

1. Html5, css3
   
2. Css фреймворки: bootstrap, foundation и препроцессоры: less, sass
   
3. Javascript, Jquery, Ajax
   
4. Javascript фреймворки: Backbone.js, Ember.js, Meteor.js, AngularJS
   
5. Базовые знание Mysql и php
   
6. Системы сборки и контроля версий: Git, Gulp(Grunt), Npm
   

Достаточно солидны список, неправда ли?
Уважаемые разработчики, прошу поделиться вашим опытом в трудоустройстве. Что действительно нужно и как эффективно к этому подойти?

p.s.
На данный момент освоил: html5/css3, верстку с psd макетов, основы javascript и jquery

Answer 1

[Сергей Протько]

Достаточно солидны список, неправда ли?

Вы не правильно сделали декомпозицию. Дробите список и перемещайте местами пока не будет абстрактных "базовое знание mysql". Да и зачем фронтэндщику вообще базовое знание mysql или php? Вам нужно знать как с бэкэндом взаимодействовать (HTTP, принципы REST хотя бы приблизительно понимать), примерно понимать что такое базы данных (localStorage, IndexedDB). Словом никаких mysql/php. Это потом когда-нибудь освоите.

Или например список ваших фреймворков. Выкидываем backbone - о нем можно почитать просто что он есть и что из себя представляет, но на вашем этапе толку не будет. Есть тройка лидеров - React/Angular/Ember. Затем идут небольшие фреймворки и библиотеки - Aurelia/Vue/Backbone/etc.

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

p.s. я бы требовал еще es2015/2016, webpack/systemjs/вообще модули, препроцессоры стилей (хотя бы основы и понимание зачем нужны) и т.д.

Ну или еще - jquery можно не изучать. Ознакомиться - да, но на уровне джуниора нужно знать как решить стандартную задачку подключения плагина и организации очереди анимаций. А так в 90% случаев jquery даже и не нужен вовсе. Ну и AJAX - разберетесь с HTTP и вы познаете AJAX.

Ну и последнее. Джуниор это разработчик с годом опыта работы. Это человек который запросто может решать типичные задачи (можно пробежаться по фриланс биржам и составить представление о типичных задачах). Перед джуниором идет стажер.

Comments

[copal]

Да и зачем фронтэндщику вообще базовое знание mysql или php?

Я вот тоже всегда так думал, а оказалось что они ещё и верстают для php на php шаблонизаторах или просто с использованием php массивов, циклов и прочего.

[Сергей Протько]

copal: если человек в состоянии изучить JS то я думаю с PHP он тоже справится на таком уровне. Ну и да - PHP очень плохой шаблонизатор. Если разработчики не используют какие-либо шаблонизаторы с автоматическим экранированием вывода они скорее копают себе яму. Причем это и к JS-у относится.

[Сергей Протько]

copal: ну и опять же, почему только PHP? возьмем Go или там Ruby где люди вообще на haml фигачат.

Answer 2

[Андрей]

Я бы зашел с другого края, CSS и HTML это все прекрасно, но это все не более чем способ описать интерфейс.

PHP однозначно отстатвить в сторону, как и MySQL.

Коли уж вознамерился стать фронтендером, то должен до глубины души осознать, что никакого фронтенда во второй половине 10-х годов 21-го века от Р.Х. без JavaScript, вернее даже Ecma Script 2015+ не будет.

Таким образом, я настоятельно рекомендую прям вот вгрызаться в хитрости и нюансы JS, начиная с ES5, и походу пьесы добавляя нововведения, которые обязательно появятся. И практиковаться до умопомрачения в кодинге, например на том же codewars.com

Обязательно для вдумчивого просмотра https://www.youtube.com/watch?v=Bv_5Zv5c-Ts

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

Приятным бонусом будет то, что для разработки под Node.JS будет заложен хороший универсальный фундамент.

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

Если английским не владеешь в достаточной мере, чтобы свободно читать и слушать материалы, рекомендую задуматься и осознать, что актуальных материалов в русском переводе раньше чем через 6+ месяцев редко можно отыскать. Если хочешь быть на гребне волны, базовое владение инглишем must have. Вот тут обсуждение этого вопроса Английский язык от профессионалов?

Answer 3

[Фёдор Ананин]

Из SASS и LESS стоит выбрать что-то одно, в препроцессорах нет ничего сложного.

Если речь о вёрстке макетов для небольшой вебстудии, то про все страшные слова по типу Angular, React, Backbone можно забыть, как и о необходимости в чём-то серьёзнее связки HTML+CSS+jQuery.

Бустрап (любое другое творение для ускорения работы) будет плюсом не только для работодателя, но и лично для вас. Изучается за пару дней.

Comments

[Erling]

Фёдор Ананин Что выбрать: SASS или LESS в наше время?

[Фёдор Ананин]

Erling: я сделал свой выбор в пользу SASS. Запутался немного в терминологии, у сасс есть такая штука как SCSS (надеюсь не путаю ничего), у него синтаксис сильно похож на привычный css. К слову, вы первое время сможете писать на чистом css, но с переменными, например. Потом поэтапно доберётесь до миксинов и прочих плюшек. Насколько мне известно, sass чуть более мощный, чем LESS.

[Erling]

Фёдор Ананин: спасибо за ответ

Answer 4

[Frel]

blog.flppv.me/all/frontend

Answer 5

[Алекс Глебов]

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

Answer 6

[Shane Matte]

для frontend разработки хватит nodejs, angular или react(по вкусу), mongodb (тоже кому как удобней), ну и bootstrap, html5, css3, и как ни странно javascript :) full stack

Answer 7

[Максим Тимофеев]

пункты 1,2 и 3 - обязательно
4 - весьма опционально, зависит от работодателя. Иногда и вовсе не требуется. Желательно иметь общее представление, в идеале неплохо знать 1 из них. Сейчас весьма перспективен и популярен AngularJS
5. - это backend. Да есть странные компании, которые требуют, но я бы их сторонился. Из этого неплохо было бы иметь представление о php и его шаблонизаторах, но достаточно весьма поверхностное для frontend.
6. Еще не все требуют, но многие. Но опять таки для frontend достаточно понимать как "запулить реквест". Думаю на достачном для Вас уровне за день можно освоить.

Добавить в список: svg, canvas. Желательно немного разбираться в google и yandex api (карты, плееры и т.д.)

Answer 8

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

Как заметили выше, для экономии времени, нужно оставить 1 препроцессор, и фреймворк на выбор: react/angular, остальное изучать позже. Что бы ни говорили, но в вакансиях фронтенда обычно есть фокус либо на интерфейс, либо на разработку. Для интефрейсщика самое важное - портфолио, при этом максимально качественные примеры (возьмите сервис тестирования, чтобы максимально улучшить результат), также оценят легкий интерактив, svg и прочие плюшки, знания фотошопа, основ графики, ui/ux.
К разработчику другие требования, готовьтесь к техническому интервью, поможет отличное знание nativeJS, устройства фреймворка, и портфолио соответственно должно состоять из кода. Надо выбрать что-то одно, не стоит за 3 месяца пытаться делать все.

Answer 9

[iBird Rose]

На данный момент освоил: html5/css3, верстку с psd макетов, основы javascript и jquery

если реально освоили это, то с остальным проблем вообще не будет.
1) sass учится за пару дней. даже видосы на ютубе есть
2) с Ajax то же самое - тот же js
3) Базовые знание Mysql и php - научись натягивать шаблон на любые популярные cms - и считай ты этот пункт выполнил - от верстальщика большего требовать не будут
4) Git, Gulp(Grunt), Npm - то же самое что и с sass. даже легче. это просто сборщики. ставишь их. гуглишь какие функции тебе нужны - ставишь плагины - все. висит в watch и можешь забыть о нем.
5) а вот с AngularJS уже посложнее. но если хорошо знаешь нативный js - то за недели 2 разберешься. но я все же советую учить react.

Comments

[Eugene Zabolotny]

Почему реакт а не ангулар? Ваше мнение

[iBird Rose]

Евгений: потому что он работает с виртуальным DOM деревом и быстрее ангуляра

Answer 10

[Стася]

По личному опыту недавнего трудоустройства, самое нужное, чтобы устроиться верстальщиком в среднюю компанию: HTML5, CSS3 на хорошем уровне, базовый JS + JQuery, Git используется далеко не везде, хотя вещь полезная, Bootstrap нужен кое-где (для трудоустройства достаточно пробежаться по документации, она есть на русском языке), знать приблизительно, как работает CMS, а вообще если покажешь на собесе, что готов быстро научиться/доучиться чему бы то ни было, будут рассматривать, что ты уже это по сути знаешь. Фреймворки нужны, если хочешь углубляться в js-разработку, тоже на собесе важно показать, что ты готов их изучать

Comments

[Ranwise]

Стася на дату вопроса смотрели?