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

Какими знаниями должен обладать 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, а также иметь представления применения фреймворков с целью экономии времени и средств. Большинство из них, к сожалению, изобретают велосипеды.

#вопросы #Разное

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Редакция vc.ru", "author_type": "self", "tags": ["\u0440\u0430\u0437\u043d\u043e\u0435","\u0432\u043e\u043f\u0440\u043e\u0441\u044b"], "comments": 49, "likes": 44, "favorites": 1, "is_advertisement": false, "subsite_label": "ask", "id": 6158, "is_wide": true, "is_ugc": true, "date": "Fri, 19 Dec 2014 15:27:46 +0300" }
{ "id": 6158, "author_id": 2, "diff_limit": 1000, "urls": {"diff":"\/comments\/6158\/get","add":"\/comments\/6158\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/6158"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199125 }

49 комментариев 49 комм.

Популярные

По порядку

Написать комментарий...
7

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

Или нет.

Ответить
2

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

Ответить
2

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

Ответить
7

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

Ответить
6

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

Ответить
6

backbone

2015

seriously?

Весь хайп сейчас вокруг react + flux. Многие начали паниковать после того, как гугл анонсировала angular 2.0, который полностью не совместим с предыдущей версией и очень похож архитектурой на react + flux.

Ответить
2

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

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

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

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

Ответить
4

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

Ответить
3

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
1

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

Ответить
2

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

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.

Ответить
0

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

Ответить
2

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

«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)»

Ответить
1

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

Ответить
0

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."

Ответить
1

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

Ответить
1

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

Ответить
1

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

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

Ответить
1

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

Ответить
2

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

Ответить
0

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

Ответить
2

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

Ответить
0

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

Ответить
0

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

Ответить
4

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

Ответить

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

2

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

Ответить
2

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

Ответить
2

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

Ответить
–2

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

Ответить
4

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

Ответить
2

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

Ответить
1

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

Ответить
1

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

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

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

Ответить
1

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

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

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

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

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

Ответить
1

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

Ответить

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

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

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

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

0

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

Ответить
0

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

Ответить
4

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

Ответить
1

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

Ответить
2

Go Lang ведь(

Ответить
1

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

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

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

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

Ответить
0

ИМХО,

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

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

Ответить

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

0

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

Ответить
0

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

Ответить
0

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

Ответить
0

Кто все эти люди? Зашел посмотреть на makeReport, посмотрел на 500 ошибку, лол :)

Фронтендер в 2015 году (и в следующих тоже) должен обладать мозгом, остальное - не важно.

Ответить

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

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления