Вопросы
Редакция vc.ru

Какими знаниями должен обладать Front-end разработчик в 2015 году

Здравствуйте. Меня зовут Тим Грибанов. Появился такой вопрос — чем нужно владеть front-end разработчику в 2015 году? Какие вещи нужно знать?


На вопрос отвечают основатель Surfingbird Сергей Шалаев, гендиректор MakeReport Виктор Бабичев, основатель bSimple Рамин Алиев.

Сергей ШалаевSurfingbird

Если бы мы нанимали человека на front-end, то для нас бы был очень большим плюсом опыт работы с backbonejs. Наверное, даже решающим. Мне кажется, мы стали слишком идеализировать девелоперов.

На самом деле, этот вопрос звучит как «что нужно фрезировщику в 2015 году» — то же, что и всем, хорошо делать свою работу.

Виктор Бабичевгендиректор MakeReport.ru

Front-end разработчику в 2015 году нужно уделять больше внимания JS и разнообразным опенсорсным фреймворкам, которые сильно упростят жизнь. Могу выделить несколько основных моментов, которые нужно точно знать:

— знать хотя бы несколько js-фреймворков: Ember.js, AngularJS, React;

— разбираться в CSS-фреймворках, чтобы в случае необходимости быстро набросать прототип: Bootstrap, Foundation и так далее;

— ознакомиться с node.js и фреймворками на его основе, типа express.js, total.js и так далее;

— ecmascript 6, новая версия JS, в в язык добавлены всякие удобности и новые возможности;

— веб-компоненты: Polymer, Shadow DOM;

— помнить о существовании Autoprefixer, Compass;

— знать билд-системы для JS: gulp.js, grunt, middleman.

Рамин АлиевbSimple

Стоит разделить фронтальную разработку на простые и сложные проекты. Особенность верстки заключаются в знании спецификаций HTML5/CSS3/Bootstrap/браузерных требований, адаптивности и отзывчивости сайта. Результатом является валидная кроссбраузерная верстка. В программировании основные требования: знание js; практическое применение библиотеки jQuery; знание технологии Ajax.

Для более крупных проектов добавляется знание js-фреймворков (Angularjs, Meteor, Backbone и др), автоматическое тестирование (модульное jasmin, karma и функциональное selenium например), знание систем контроля версий, системы автоматической сборки приложений, ряд полезных методологий при разработке больших проектов, например БЭМ, препроцессоры CSS (less, sass), технология WebSocket. В основном крутой инструментарий работает на NodeJS, основы его тоже надо знать.

Если говорить более простым языком, то front-end разработчик должен как минимум обладать навыками HTML5/CSS3/JS/jQuery/Bootstrap, а также иметь представления применения фреймворков с целью экономии времени и средств. Большинство из них, к сожалению, изобретают велосипеды.

0
49 комментариев
Популярные
По порядку
Написать комментарий...
рамзан куроев

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

Или нет.

Ответить
7
Развернуть ветку
Stepan Ipatyev

Ага, еще навык, это править чужую либу, где последний коммит был пол года назад.

Ответить
2
Развернуть ветку
рамзан куроев

Ай красава, прямо до моего сердца достучался.

Ответить
2
Развернуть ветку
Nikolay Talanov

В общем во втором совете написан весь джентльменский набор.
Если заострять внимание конкретно на UI составляющей, то отличное владение канвасом/сложными svg будут вас очень выгодно выделать на фоне рядовых "верстальщиков" (каждый раз плохеет с этого слова). Но перед этим советую изучить все что связано с более простыми анимациями на основе css3 transitions и библиотек типа velocity/GSAP.

Ответить
7
Развернуть ветку
Станислав Кузнецов

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

Ответить
6
Развернуть ветку
Привычный клуб

Комментарий удален по просьбе пользователя

Ответить
6
Развернуть ветку
Владислав Козуля

В принципе, ответ Сергея можно адаптировать для любой подобной статьи. Если бы я набирал ответы экспертов для своей статьи, лаконичность была бы большим плюсом. Даже решающим. Наверное, я стал идеализировать статьи на ЦП.

Ответ Виктора хорош, но нужно немного технических подробностей. Например, не просто js-фреймворков, а MVVM/MVW-фреймворков. JQuery и Underscore тоже js-фреймворки, но их знанием уже особо не покичишься.

Новый Экма и разные Полимеры все же еще не мастхев, но уже на передовице фронта (простите за каламбур). Так что нужно присматриваться, да.

Странно, что только Рамин упомянул о css3/html5, ко мне на собеседование приходили чуваки, которые вообще не слышали о том, что в вебе можно делать эффекты, анимацию и семантически размечать страницу.

Ответить
2
Развернуть ветку
Ilya Pukhalski

jQuery и Underscore не фреймворки, боюсь вас расстраивать.

Ответить
4
Развернуть ветку
Yaroslav Nazarov

Как и упомянутый в топике backbone, кстати.

Ответить
3
Развернуть ветку
Владислав Козуля

Интересный момент, давайте дальше. Может, мы такими темпами придем к актуальной информации.

Ответить
1
Развернуть ветку
Woronkow Stanislaw Olegowich

Почему backbone не фреймворк ?
Почему jquery не фреймворк ?
Андерскор - ок, типичная библиотека =)
Но остальное-то за что ? =)

Ответить
0
Развернуть ветку
Ilya Pukhalski

Всмысле "за что"? Я не клевету развожу тут и не обзываюсь, я всего лишь называю вещи своими именами )

Ответить
1
Развернуть ветку
Woronkow Stanislaw Olegowich

Окей, заменим "за что" на "почему" ? )

Ответить
1
Развернуть ветку
Ilya Pukhalski

Далеко не стоит ходить. Из вики:

Frameworks contain key distinguishing features that separate them from normal libraries:

inversion of control: In a framework, unlike in libraries or normal user applications, the overall program's flow of control is not dictated by the caller, but by the framework.[1]
default behavior: A framework has a default behavior. This default behavior must be some useful behavior and not a series of no-ops.
extensibility: A framework can be extended by the user usually by selective overriding or specialized by user code to provide specific functionality.
non-modifiable framework code: The framework code, in general, is not supposed to be modified, while accepting user-implemented extensions. In other words, users can extend the framework, but should not modify its code.

Ответить
2
Развернуть ветку
Woronkow Stanislaw Olegowich

Прекрасно !
backbone же прекрасно подходит !
и jquery тоже )

Ответить
0
Развернуть ветку
Владислав Козуля

Таки нет. Я специально сходил в бекбоун проверить, почему это не фреймворк, и там прямым текстом об этом написано:

«Backbone is a library, not a framework, and plays well with others. You can embed Backbone widgets in Dojo apps without trouble, or use Backbone models as the data backing for D3 visualizations (to pick two entirely random examples)»

Ответить
2
Развернуть ветку
Woronkow Stanislaw Olegowich

Ну тут спорить глупо, конечно.
Но спринг вон тоже со всем прекрасно интегрируется, однако ж 100% фреймворк.

Ответить
1
Развернуть ветку
Ilya Pukhalski

RLY? "In a framework, unlike in libraries or normal user applications, the overall program's flow of control is not dictated by the caller, but by the framework."

Ответить
0
Развернуть ветку
Woronkow Stanislaw Olegowich

В backbone всё построено на событиях: обновление модели - рендер представления, например. Да, вы подписываетесь на эти события, и явно делате фетч колллекции, например. Да вы можете изменять этот механизм, но это не противоречит термину фреймворк.

Ответить
1
Развернуть ветку
Ilya Pukhalski

Backbone прямым образом не контролирует program's flow, как и jQuery.

Ответить
1
Развернуть ветку
Woronkow Stanislaw Olegowich

Разве идеология backbone "изменилась модель - рендер" это не контроль program's flow прямым образом ?

То, что разработчики открещиваются от термина "фреймворк" скорее всего говорит о желание донести возможность совместимости backbone с чем угодно.

Ответить
1
Развернуть ветку
Владислав Козуля

Черт, действительно, налажал с терминами.

Ответить
1
Развернуть ветку
Кальченко Кирилл

Вы не правы. jQuery и Underscore это библиотеки. Это написано на главных страницах сайтов этих проектов.

Ответить
2
Развернуть ветку
Woronkow Stanislaw Olegowich

Ну ежели на то пошло, то любой фреймворк поставляется в виде библиотеки.=)

Ответить
0
Развернуть ветку
Кальченко Кирилл

в лекциях яндексовой ШРИ хорошо объясняется разница между этими двумя понятиями.
Библиотека - это только инструмент. Фреймворк же говорит вам КАК надо делать и структурировать код.

Ответить
2
Развернуть ветку
Woronkow Stanislaw Olegowich

Кирилл, вы считаете backbone не говорит КАК надо делать и как структурировать код ? )

Ответить
0
Развернуть ветку
Кальченко Кирилл

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

Ответить
0
Развернуть ветку
Ilya Finagin

Лучше бы спросили какого-нибудь Sorax'a еще, вопрос не раскрыли. Даже гит не упомянули. Все перечисленные названия знают, наверное, и не верстальщики.

Ответить
4
Развернуть ветку

Комментарий удален

Развернуть ветку
Андрей Ситник

Autoprefixer вместе с Compass — это весело :). На самом деле постпроцессоры фактически исключают препроцессоры. Твиттер вон уже откаазался от препроцессоров и перешёл на Rework и PostCSS (на чём написан Автопрефиксер).

Ответить
2
Развернуть ветку
Victor Babichev

Я же не писал, что их нужно использовать вместе? Я лишь сказал, что фронт должен знать о их существовании.

Ответить
2
Развернуть ветку
Максим Баринов

На мой взгляд, frontend девелопер в новом году должен освоить: ES6, web components и готовиться к Angular 2. Желательно освоить reactive web, в частности meteor. Также стоит попробовать сверстать что то для продакшена на flexbox, он уже к этому готов.

Ответить
2
Развернуть ветку
Ruslan Ismagilov

Дополнение.
Вопросы front-end разработчику:
https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/Translations/Russian/README_RU.md

Ответить
–2
Развернуть ветку
Юрий Ковалёв

Вы знаете секретный жест HTML5-банды?
Что это за херня?

Ответить
4
Развернуть ветку
Ruslan Ismagilov

Это перевод, в оригинале "Светской беседы" нет.
Догадка что имел в виду автор в приложении.
Темы может и не из 2015 года, но тем не менее, актуальность не потеряли.

Ответить
2
Развернуть ветку
Юрий Ковалёв

Знать не знал про эти штучки, которые никак к делу не относятся)

Ответить
1
Развернуть ветку
Вячеслав Мацнев

HTML5/CSS3/JS/jQuery/Bootstrap,... Большинство из них, к сожалению, изобретают велосипеды.

А откуда берутся всякие jquery и bootstrap'ы? Сдаётся мне это чьи-то бывшие велосипеды.

Разработчики изобретают. Не изобретают - кодеры.

Ответить
1
Развернуть ветку
Pavel Rapoport

Во многих вещах согласен с Виктором Бабичевым.

Node.js основной инструмент для управления веб проектами, важно знать какие модули есть на npmjs.com и как работать с bower.io.

AngularJS и React это два основных коня вокруг которых полно химии, ежедневно создаются новые плагины и компоненты.

Что касается UI, Bootstrap взял своё, важно понимать как фреймворк компилируется при помощи LESS/SASS и писать дополнительные компоненты используя его переменные (variables.less / variables.sass).

А самое главное в 2015 не писать код! Всё давно написано! Учитесь искать компоненты и модули на Github и используйте их.

Ответить
1
Развернуть ветку
Tim Gribanov

Спасибо за наводку :)

Ответить
1
Развернуть ветку

Комментарий удален

Развернуть ветку

Комментарий удален

Развернуть ветку

Комментарий удален

Развернуть ветку

Комментарий удален

Развернуть ветку
Ilya Pukhalski

Это прошлогодняя статья, так? Для 2014? Все верно?

Ответить
0
Развернуть ветку
Владислав Козуля

Ну-ка, а для 2015 у нас что?

Ответить
0
Развернуть ветку
Nikolay Talanov

БОЛЬШЕ WEBGL БОГУ WEBGL

Ответить
4
Развернуть ветку
рамзан куроев

Предположу, что Hoplon. Для тех, кто слишком много говнится.

Ответить
1
Развернуть ветку
Ilya Pukhalski

Go Lang ведь(

Ответить
2
Развернуть ветку
Ilya Pukhalski

В кратце — https://medium.com/@addyosmani/javascript-application-architecture-on-the-road-to-2015-d8125811101b

В конце статьи еще куча ссылок.

Удивлен, что про Flux не было упомянуто, хотя про React что-то было (хотя react тоже во фреймворки записали).

Также ни слова про JS для IoT или гибридной/native кроссплатформенной разработки.

Ответить
1
Развернуть ветку
Василий Борисов

ИМХО,

Необходимые базовые навыки:
— Верстать кроссплатформенный адаптивный HTML и CSS без фреймворков и процессоров
— Писать на JavaScript без процессоров
— Уметь тестировать своё творение
— Уметь разбираться в чужом коде
— Пользоваться консолью (терминалом)
— Уметь читать и писать документацию

Инструменты современного Frontend-разработчика:
— Sublime Text
— Jade
— Stylus
— Angular
— CoffeeScript
— Gulp

Ответить
0
Развернуть ветку

Комментарий удален

Развернуть ветку
Stepan Ipatyev

JS знать нужно, и все. Ассинхронное програмирование, отличии api в браузерах, вот это все...

Ответить
0
Развернуть ветку
Ай дэр я, дабл дэр я

Найдите в контакте Артёма Sorax-а и спросите у него. Никто лучше него не ответит :).
Ну а я как front-end разработчик ставлю на mvc фреймворки и ванилу.

Ответить
0
Развернуть ветку
Dmitry Romanovich

Такой стек у меня с 1012 года. Ну разве, что галп предпочел гранту. Веб компоненты, действительно дельный совет. Пора верстальщико поднапряч

Ответить
0
Развернуть ветку
Кавказский колос

Комментарий удален по просьбе пользователя

Ответить
0
Развернуть ветку

Комментарий удален

Развернуть ветку
Читать все 49 комментариев
«Если клиенты видят халяльный логотип, это придаёт им уверенности в продукте»: как устроен исламский банкинг в Индонезии Статьи редакции

Местные финтех-стартапы могут развиваться только после одобрения представителей исламского духовенства. Какие сложности преодолевают предприниматели, чтобы создать приложение по законам шариата, — в пересказе Rest of World.

Как сделать работу компаний и фрилансеров удобной

С помощью сервиса «Рокет Ворк».

«Купи сейчас, плати потом»: новая классика или мимолетная мода

Сервис рассрочек рассказывает о новом финтех-тренде.

Кейс Таргет. Как привлечь 379 заявок на покупку мужских костюмов и предотвратить закрытие ателье

Как я за 4 месяца привлек 379 заявок по 350 рублей на покупку мужских костюмов при среднем чеке 80 000 рублей

Мощные сервисы для быстрого машинного обучения: от GPU SuperCloud до суперкомпьютера

В последние три года мы видим рост спроса на технологии искусственного интеллекта (ИИ) и машинного обучения. Они проникли практически во все сферы нашей жизни, начиная от различных колл-центров и городских систем видеонаблюдения, заканчивая системами медицинского скрининга и диагностики заболеваний. Даже для оплаты проезда в столичной подземке…

Поддержка OZON игнорирует вопрос

13 ноября у нас на складе был сбой и мы не смогли вовремя отгрузиться по FBS. Получилась просрочка, нас заблокировали. Через неделю показатели пришли в норму, но автоматически блокировка с FBS снята не была. Я написала в техподдержку первый раз 23 ноября, ответ был "Решение вашего вопроса займет некоторое время. Ожидайте, пожалуйста, ответа…

Как выпустить заменитель соли на Boomstarter.ru и попасть в список Forbes

Сёстры из Астрахани запустили на Boomstarter.ru продажи нового продукта — зеленой соли. После этого их продукцию начали продавать в сетевых магазинах, а само бизнес-начинение журнал Forbes включил в список лучших стартапов.

Новый дизайн «Секрета фирмы» учтёт пользовательские сценарии потребления и поиска контента

О трендах бизнеса и экономики можно прочесть коротко и ясно в удобных форматах

Wildberries лично ответил на обвинения покупателей о вранье с платным возвратом. Мы провели блиц-опрос с площадкой
null