Вопросы
Редакция 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 комментариев
Поиск страны для иммиграции

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

Ничего не понятно, ничего не случилось: что Центробанк предложил делать с криптовалютами в России Статьи редакции

Если идеи регулятора примут, скорее всего, для физлиц ничего не изменится, но вести криптобизнес в стране будет сложно.

Часовая запись пресс-конференции Центробанка, на которой представили доклад
Тренды финтеха. Разработки, технологии и поиск новой ценности

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

«Делимобиль» добавил Tesla Model 3 в свой парк в Москве Статьи редакции

Аренда стоит от 24 рублей за минуту.

Как мы сделали интерактивный курс о том, чему нельзя научить в онлайне

Цифровые технологии сегодня всё чаще смешиваются с физическими объектами. Отсюда возникают примеры активностей в формате «фиджитал» (от англ. physical + digital). В статье мы рассказываем о том, как использовали такой подход в корпоративном обучении.

Проблема с внешним диском Seagate в onlinetrade.ru

28 декабря я купил в магазине onlinetrade.ru внешний жёсткий диск Seagate Backup Plus Hub 8Tb. Приехал домой, распечатал коробку подключил к компьютеру.

Кому нужен футбол в селе

Как «Кружок» и «Тинькофф» организовали футбольные сборы в Тамбовской области или история о спорте за пределами больших городов.

Фото: Филипп Задорожный / Stereotactic
Два новых продукта в бете, кастомное хранилище и дешевый CDN

Дайджест продуктовых апдейтов, которые могут вас заинтересовать.

Как заказать товар для маркетплейсов из Китая и заработать
TikTok не будет доставлять еду в США — главу по маркетингу, который отвечал за эту историю, уволили Статьи редакции

«TikTok не занимается ресторанным бизнесом», — заявил сотрудникам один из руководителей компании перед его увольнением.

Сказ о том, как брокер Тиньков акции в счет налогов без согласия клиента продавал

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

null