5 ключевых вопросов для Javascript-разработчика


Оглавление (нажмите, чтобы открыть):

25 вопросов, которые задают на собеседовании JavaScript-разработчику

Доброго времени суток, дорогой гость! Рада приветствовать на страницах своего блога.

Сегодня речь пойдет о том, какие вопросы задаются на техническом собеседовании кандидату на позицию Javascript-разработчика. Цель — проверить необходимый уровень знаний языка кандидата и теоретической подготовки.

Мне бы хотелось выразить благодарность Senior Frontend Developer Греченок Евгению и Senior Backend Developer Гиззатову Марселю за помощь в создании статьи. Те вопросы, которые идут дальше, из их методички, которую они используют для собеседований кандидатов «и на 30 тысяч, и на 130». Большое спасибо, ребята, за время, которое мне уделили, и считаю, что для меня на собеседовании был хороший стимул убрать пробелы в собственных знаниях и сделать еще один шаг к тому, чтобы стать профессионалом.

Вопросы по JavaScript (синтаксис и особенности языка)

1. Если вам необходимо проверить, определено ли свойство у самого объекта … (hasOwnProperty)
2. Как работает this ( http://bonsaiden.github.io/JavaScript-Garden/ru/#function.this )
3. Замыкания ( http://bonsaiden.github.io/JavaScript-Garden/ru/#function.closures )
4. Определение переменных (всплытие)
5. Переменные let, const, var ( https://learn.javascript.ru/let-const )
6. Равенство и сравнение (оператор == и ===)
7. Операторы typeof и instanceof (для чего используются http://bonsaiden.github.io/JavaScript-Garden/ru/#types.instanceof )
8. Почему нельзя использовать eval ( http://bonsaiden.github.io/JavaScript-Garden/ru/#core.eval )
9. Деструктуризация ( https://learn.javascript.ru/destructuring )
10. Строки-шаблоны ( https://learn.javascript.ru/es-string )
11. Классы (прототипы, современные)
12. Итераторы ( https://learn.javascript.ru/iterator )
13. Генераторы ( https://learn.javascript.ru/generator )
14. Новые типы данных ( https://learn.javascript.ru/set-map )
15. Что такое Eventloop? Объясните принцип его работы.

Общие вопросы по программированию

  1. Отличие компилируемого языка от интерпретируемого
    Чем компиляция С отличается от Java
  2. Отличие статической типизации от динамической
  3. Отличие наследование от композиции ( https://habrahabr.ru/post/325478/ )
  4. Алгоритмы и их сложность (JS https://tproger.ru/translations/algorithms-and-data-structures/ )
    a. В приложении к любому языку привести примеры стандартных методов сортировки / обхода дерева / поиска в массиве, дикте с пояснением о их сложности и как работают.
  5. FIFO, LIFO
  6. Структуры данных (JS https://learn.javascript.ru/data-structures )
    a. Числа, Строки
    b. Объекты (ассоциативные массивы), передача по ссылке (что передаётся по значению)
    c. Массивы
    d. Деревья, Списки (связанный, ссылочный)
  7. Архитектура (в чём разница)
    a. асинхронная,
    b. многопоточная
  8. Микросервисы
    a. Будет ли микросервисами распределённая архитектура через общую шину данных
    b. Требования к микросервисам
    i. горизонтальное масштабирование
    ii. отказоустойчивость
  9. Преимущества микросервисов:
    i. легкая поддержка (небольшие сервисы легче)
    ii. нет ограничения на языки и библиотеки для решения задачи
    iii. упрощенное тестирование, возможность замокать взаимодействия
    iv. легкое накатывание и откатывание новых версий
    v. можно экспериментировать с технологиями

Гибкие методологии

  1. Зачем нужны
  2. Какие подходы есть
  3. Выявление проблем в разработке, зачем нужна ретроспектива в scrum
  4. Распределение задач по разработчикам
    • горят сроки
    • планирование

Задача на понимание JavaScript

Задача 1. Что выведет данный код?

Цель задачи: проверить понимание замыкания.

Тема: Замыкание (closure).

Ответ: Если исходить из определения замыкания — способность функции запоминать область видимости переменной, в которой та была объявлена, то правильный ответ 5. Функция a запомнила содержимое объявленной ранее переменной за пределами функции, и после вывода функции, передала в alert 5.

10 навыков, которые нужно освоить, чтобы получить работу front-end разработчика

Если вы хотите сменить свою специальность, чтобы получить новую, более высокооплачиваемую работу, сфера IT и front end подходят для этого как нельзя лучше.

Ключевые преимущества: высокая оплата, творческая работа и гибкий график. Но есть целый ряд и других причин, по которым сфера IT является привлекательным вариантом.

Сейчас я хочу сосредоточиться на front-end разработке. Если говорить обобщенно, front-end разработчики пишут сайты, используя HTML , CSS и JavaScript . Они же реализуют готовый дизайн на сайте.

Быстрый обзор текущих вакансий для front-end разработчиков показывает, что существует четкий набор навыков, которые указывают работодатели. Например, списки требований первых трех вакансий для front-end разработчиков, которые я нашел на Glassdoor.com , во многом идентичны: знания HTML , CSS и Javascript , контроль версий, фреймворки.

Это термины, с которыми вы познакомитесь, когда начнете изучать front-end разработку. Ниже приводится список 10 основных навыков, необходимых каждому front-end разработчику.

1. HTML / CSS

Это стандартный язык разметки, используемый для создания веб-страниц. Язык разметки — это способ задать разметку в цифровом документе, который можно отличить от обычного текста. Это фундамент, который понадобится для разработки сайтов.

CSS ( каскадные таблицы стилей ) — это язык, используемый для представления документа, созданного с помощью HTML . CSS используется для определения макета страницы, цветов, шрифтов и других стилей!

2. JavaScript / jQuery

Еще одним основным инструментом в арсенале начинающего front end разработчика должен стать JavaScript ( JS ). Если HTML — это язык разметки, а CSS — язык стилей, то JS — это язык программирования. Если HTML и CSS определяют представление страницы, JS определяет ее функционал.

Для простых сайтов или веб-страниц достаточно будет HTML/CSS . Но для интерактивных функций ( аудио и видео, игры, прокрутка, анимация страниц ) понадобится JS .

Одна интересная вещь, которую следует знать о JS — это наличие библиотек, таких как jQuery . Библиотеки — это коллекции плагинов и расширений, которые позволяют проще и быстрее использовать JS на сайте.

JQuery принимает общие задачи, для реализации которых требуется несколько строк JS-кода , и сжимает их так, чтобы это можно было сделать с помощью одной строки.

3. CSS и JavaScript-фреймворки

CSS и JavaScript-фреймворки представляют собой наборы файлов CSS или JS , которые выполняют огромный объем работы, предоставляя базовый функционал. Например, формы регистрации на сайте или в блоге. Вместо того чтобы начинать с чистого документа, вы начинаете с файла, в котором уже есть общий JS-код .

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

Чтобы еще больше все упростить, можно использовать фреймворки совместно. Обычно используется пара Bootstrap с другим JavaScript-фреймворком , таким как AngularJS . Содержимое обрабатывает Angular , а внешний вид — Bootstrap ( с некоторым изменениями в CSS ).

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

4. Препроцессинг CSS

Одним из ограничений CSS является тот факт, что вы не можете определять переменные, функции или выполнять арифметические операции. Подобно CSS ( и JS ) фреймворкам, препроцессинг CSS — это еще один способ сделать вашу жизнь более простой.

Используя препроцессоры CSS , такие как Sass , LESS или Stylus , можно писать код на языке препроцессора, доверяя ему делать то, что может занять много времени при использовании CSS . Затем препроцессор преобразует код в CSS , чтобы он работал на сайте.

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

5. Контроль версий / Git

После написания кода HTML , CSS и программирования на JS front end web developer должен будет произвести ревизию проделанной работы. Если что-то пошло не так, последнее, что вам захочется, это начинать все с начала. Контроль версий — это процесс отслеживания и контроля изменений в исходном коде.

Программное обеспечение для управления версиями, такое как Open Source Stalwart Git — это инструмент для отслеживания изменений, чтобы иметь возможность вернуться к предыдущей версии и выяснить, что пошло не так.

6. Адаптивный дизайн

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

Адаптивный дизайн является неотъемлемой частью фреймворков CSS , таких как упомянутый выше Bootstrap .

7. Тестирование / отладка

Чтобы заставить все работать надлежащим образом, нужно тестировать код на наличие ошибок. Поэтому навыки тестирования и отладки являются обязательными для front-end разработчиков.

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

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

Тестирование — важная часть процесса разработки front end на Java . Но это еще одна область, для которой существуют различные фреймворки, которые помогут вам. Такие программы, как Mocha и Jasmine , предназначены для ускорения и упрощения процесса тестирования.

8. Инструменты браузера для разработчиков

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

Встроенные в современные браузеры инструменты для разработчиков обычно состоят из инспектора и консоли JavaScript . Инспектор позволяет увидеть, как выглядит HTML-код на странице, какой CSS связан с конкретным элементом на странице. А также позволяет редактировать HTML и CSS , просматривать произошедшие изменения в режиме реального времени.

Консоль JS позволяет просматривать ошибки, возникающие при попытке браузера выполнить JS-код .

9. Инструменты для построения и автоматизации / производительности

Производительность сайта зависит от количества времени, которое требуется для его загрузки. Если при front end программировании возникли проблемы со временем выполнения, необходимо предпринять шаги для их решения. Например, оптимизация изображений ( масштабирование и сжатие изображений для максимальной производительности ), минимизация CSS и JavaScript ( удаление ненужных символов из кода без изменения функционала ).

Выполнение задач, которые приводят к повышению производительности, также может отнимать много времени. Но здесь на помощь приходят инструменты для построения и автоматизации. Такие программы, как Grunt и gulp , могут использоваться для автоматизации оптимизации изображений, минимизации CSS и JS и других задач.

10. Командная строка

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

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

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

Не останавливайтесь в совершенствовании своих профессиональных навыков!

Данная публикация представляет собой перевод статьи « 10 Skills You Need to Land Your First Front End Developer Job » , подготовленной дружной командой проекта Интернет-технологии.ру

Типичные вопросы на собеседовании javascript разработчика

Для успешного прохождения на должность javascript developera рекомендуем вам почитать эту статью и изучить все важные моменты и подводные камни.

Первое что всегда спрашивают это опыт работы, поэтому если у вас нет опыта работы в front end и js рекомендуем поискать «подработку» вначале у нас на сайте и так же изучить типичные и возможные вопросы на собеседовании которые вам могут задать интервьюеры.

Общие вопросы по front-end

  • Методологии и подходы написания CSS?
  • GruntJS,Gulp, Bower, npm — для чего используются?
  • RequireJS (или подобные) — зачем нужны?
  • Тестирование: какие библиотеки знаете для тестирования, что использовали на практике? (какие подводные камни были и тд)
  • Как логировать JS ошибки с клиента, какие «подводные» камни?
  • Какие фреймворки знаете/использовали на практике (если не использовали, то почему), как они устроены внутри.
  • Паттерны проектирования
  • Другие вопросы из области вёрстки (css, html)

Общие вопросы по javascript

Eсть ли разница между window и document?

Ответ: Да. У JavaScript есть глобальный объект и всё происходит через него. window – тот самый объект, который хранит глобальные переменные, функции, местоположение, историю. Всё находится внутри него, setTimeout, XMLHttpRequest, console и localStorage также являются частью window. Аналогично дело обстоит и с document, который является свойством объекта window и представляет DOM. Все ноды – это часть document, следовательно, вы можете использовать getElementById или addEventListener для document. Но обратите внимание, что этих методов нет в объекте window.

Вызываются ли document.onload и window.onload одновременно?

window.onload вызывается, когда DOM готов и весь контент, включая картинки, стили, фреймы и т.д. загружен. document.onload вызывается когда дерево DOM выстроено, но до момента, как подгружаются картинки, стили и пр.

Как предотвратить нажатие по ссылке?

Использовать preventDefault() внутри обработчика события.

Как остановить дальнейшее распространение события?

Могу ли я удалить удалить обработчик события с элемента?

Да. target.removeEventListener(‘click’, handler)

Как я могу запустить обработчик в фазе захвата, а не в фазе всплытия?

В методах addEventListener и removeEventLister есть третий опциональный параметр. Вы можете установить его в true или false в зависимости от того хотите или нет использовать фазу захвата.

Каким образом можно предотвратить множественный вызов обработчика для одного события?

Если слушатель события прикреплён к одному и тому же типу (click, keydown, и т.д.) элемента, вы можете вызвать event.stopImmediatePropagation() в первом обработчике и другие не будут выполнены.

Самовызывающиеся функции.


Тоже весьма частый вопрос на собеседованиях. Ещё иногда подходят к этому со стороны jQuery: «Почему все плагины обособлены в конструкцию (function() <>)(); ?».

Как поменять контекст функции. Частичное применение функции.

Тут нужно описать разницу между .call , .apply и .bind и некоторых стандартных решений на уровне языка.

Разница между операторами == и ===

Оператор == сравнивает на равенство, а вот === — на идентичность. Плюс оператора === состоит в том, что он не приводит два значения к одному типу. Именно из-за этого он обычно и используется.

Напишите регулярное выражение для проверки строк соответствующих формату даты dd.mm.yyyy. или подобное.

Каков будет результат выполнения следующего кода:

Что вернет выражение +new Date()? Чем отличается от Date.now().

Отличный вопрос. Ответ в том, что +new Date(); создаст экземпляр объекта Date и благодаря + переведет его в числовой формат. Во втором случае вызовется статический метод конструктора, который является более приоритетным, т.к. во-первых он не требует создания экземпляра, а во-вторых является более понятным.

Напишите функцию принимающую строку с именем файла и возвращающую расширение (фрагмент после последней точки)

В чём опасность использования for .. in для объекта или массива?

For..in итерируется по всем полям объекта [b]и его прототипов[/b] (т.е. проходит по всей цепочке прототипов).

В приведённом в вопросе коде проблем как таковых нет, но они могут появиться при использовании библиотек/полифиллов, которые переопределяют или создают новые свойства для прототипов стандартных конструкторов (таких как Array или Object).

Мастер Йода рекомендует:  Как добавить прелоадер в WordPress

Чтобы избежать таких проблем, можно воспользоваться методом

Модифицированный пример, который работает корректно:

Примечание:
Многие инструменты для статического анализа JavaScript кода считают for .. in без фильтрации с hasOwnProperty не безопасным.

Какие языковые конструкции в javascript создают scope? Что произойдет при выполнении следующего куска кода?

В javascript только функции создают новый scope.

Код в вопросе аналогичен следующему:

Что такое hoisting или «поднятие переменных»? Что произойдет при выполнении следующего куска кода?

Интерпретатор JavaScript всегда перемещает («поднимает») объявления функций и переменных в начало области видимости (вверх текущего скрипта или функции). Код в вопросе аналогичен следующему:

В консоль будет напечатано:

Как добавлять элементы на HTML страницу динамически ?

Создание новых элементов осуществляется с помощью document.createElement(tagName);

После создания элемента его нужно присоединить к родительскому элементу с помощью .appendChild(node);

В чем разница между Object.getOwnPropertyNames() и Object.keys()

Object.getOwnPropertyNames() возвращает перечислимые и не перечислимые свойства из объекта или массива.

Object.keys() возвращает перечислимые свойства из объекта или массива.
Пример:

С помощью какой конструкции языка можно управлять потоком выполнения скрипта и отслеживать ошибки?

Это возможно с помощью конструкции try<>. catch<>

Почему вызов a(); происходит успешно, а вызов b(); выдает ошибку?

Функция а() инициализируется на этапе загрузки скрипта, как бы «всплывает вверх» а функция б инициализируется, когда объявляется переменная b

Что такое глобальные переменные ? Как они создаются ? Какие проблемы связаны с использованием глобальных переменных?

Глобальная переменная — переменная, которая доступна (видима) во всем документе, в отличии от локальной (ограничена рамками блока программного кода, внутри которого она определена)

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

Что такое замыкания (closure) в JavaScript?

Простыми словами это внутренняя функция, т.е. функция в функции.
Замыканием (closure) называют потому, что после выполнения родительской или внешней функции, код внутренней все еще «живет» в интерпретаторе, и его можно выполнить. Ошибок не возникнет даже если внутренняя функция (замыкание) будет использовать переменные из внешней функции.
Например, эту особенность можно использовать для создания функций обработчиков событий:

Вопросы, относящиеся к jQuery

Расскажите про $.Deferred.

Как создать утечку памяти с помощью jQuery.

jQuery.extend

Рассказать всё про функцию, возможно попросят написать аналог.

Пять типичных вопросов по JavaScript при собеседовании на работу

Разработчики JavaScript широко востребованы в it-индустрии. Так, при желании повысить, к примеру, свой оклад, недостатка в вариантах трудоустройства, как правило, не бывает. Однако, прежде чем устроиться на работу, необходимо на практике продемонстрировать свои знания и пройти собеседование. В этой стать будут рассмотрены 5 типичных вопросов, задаваемых кандидату при собеседовании, чтобы оценить его знания по JavaScript.

Вопрос 1-ый: Область видимости (scope)

Возьмем следующий код:

jQuery

Что что покажет консоль?

Ответ

Код выше выведет 5 .

Подвох заключается в том, что IIFE (немедленно выполняемая функция) имеет два присваивания, но переменная a объявлена посредством ключевого слова var . То есть a — это локальная переменная функции, а b , напротив, присваивается глобальной области видимости/действия.

Одним подвохом вопрос не ограничивается: внутри функции (строгий режим) ( ‘usestrict’; ) не применяется. В случае его применения код выдал бы ошибку «UncaughtReferenceError: bisnotdefined» . Надо помнить, что жесткий режим требует, чтобы вы явно ссылались на глобальную область видимости, если так было задумано. То есть вы должны написать следующее:

jQuery

Вопрос 2-ой: Создайте «нативные» методы

Опишите функцию repeatify объекта String . Функция принимает целое число. Число определяет сколько раз необходимо дублировать строку. Функция возвращает повторяемую строку столько раз, сколько было заранее определено. Пример:

Будет выведено: hellohellohello .

Ответ

Возможное решение показано ниже:

Javascript

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

Еще одна цель – показать, что соискатель знает, как избежать замещения возможных заранее установленных функций. То есть перед тем как описать функцию нужно убедиться в том, что она не создана:

Javascript

Этот прием особенно полезен, когда просят заклинить JavaScript функцию.

Вопрос 3-ий: Подъем (Hoisting)

Каким будет результат выполнения этого кода и почему?

Javascript

Ответ

Результат будет – undefined и 2 .

Причина: переменная и функции подняты (перемещены на верх функции), а назначенные переменным значения потеряны. То есть, когда переменная выводится в консоли, она существует в функции (объявлена), но еще undefined . Другими словами, код выше равнозначен следующему:

Javascript

Вопрос 4-ый: как работает this в JavaScript

Каким будет результат следующего кода? Обоснуйте ответ.

Javascript

Ответ

Код выведет AurelioDeRosa и JohnDoe . Причина: контекст функции (то, на что ссылается ключевое слово this ) в JavaScript зависит от того, как функция вызывается, а не определяется.

В первом console.log() , getFullname() вызывается как функция объекта obj.prop . Таким образом, контекст ссылается на последний объект и функция возвращает fullname свойство данного объекта. С другой стороны, когда переменной test присваивается getFullname() , контекст ссылается на глобальный объект ( window ). Это объясняется тем, что переменная test по умолчанию установлена как свойство глобального объекта. Именно по этой причине функция возвращает значение свойства fullname от window , которое в нашем случае определенно в первой строке сниппета.

Вопрос 5-ый: call() и apply()

Возвращаясь к 4 вопросу, сделайте так, чтобы последний console.log() выводил AurelioDeRosa .

Вопрос может быть решен путем переопределения контекста функции. Для этого можно использовать методы call() или apply() . Если вам неизвестны эти функции, советую обратиться к статье Методы javascript call и apply . В коде ниже используется метод call() , однако в нашем случае метод apply() даст тот же результат:

Javascript

Заключение

Были рассмотрены 5 типичных вопрос при собеседовании для проверки знаний разработчика JavaScript. От собеседования к собеседованию вопросы могут варьироваться в деталях и частностях, однако их общая проблематика остается неизменной.

5 самых популярных фреймворков для JavaScript

AngularJS

Один из самых популярных инструментов JS-разработчика увидел свет в 2009 году. Благодаря широкой функциональности (хоть и не дотягивающей до Full-stack) и поддержке своего могущественного создателя, Angular быстро взобрался на вершину рейтинга лучших JS-фреймворков, и слезать оттуда не намерен.

Что касается свежих релизов, то в конце марта официально был представлен Angular 4.0.0 (несмотря на то, что 2.0.0 выпустили всего год назад). Такая скорость обновления связана не с «сыростью» выпускаемых продуктов, а в том, что первая версия содержала много упрощений, которые в неумелых руках приводили к ошибкам, а в опытных к существенным потерям в производительности, вторая является компромиссным переходом, третью пропустили, а четвертая — это актуальный продукт, доработанный по итогам всех замечаний. Правда, есть подозрение, что еще не до конца.

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

Во-вторых, Google постоянно выпускает всё новые и новые качественные библиотеки и плагины.

В-третьих, в Angular взаимодействие с HTML не подменяется DOM-моделью (HTML-код не смешивается со скриптами), что в конечном счете сказывается на удобстве чтения и тестирования кода. Кроме того, возможности Angular чуть шире, чем у большинства популярных JS-фреймворков.

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

ReactJS

Данный фреймворк был создан в 2013 году Джорданом Волком из Facebook. Низкий порог входа и простота использования сделали из ReactJS популярный продукт среди корпоративных разработчиков, найдя отклики в сердцах офисов таких компаний, как Airbnb, Netflix Walmart и т.д. Более того, именно React сегодня считается основным инструментом JS-разработчика, ну просто потому, что Angular — это немного сложно и избыточно.

Всё дело в том, что отличии от Angular, React сильно ограничен в функциональности. Более того, некоторые хардкорные разработчики всерьез и не считают ReactJS фреймворком, предлагая более понятное, но не совсем правильное определение «ограниченная библиотека для лентяев».

Зато основные плюсы работы с этим фреймворком такое описание раскрывает достаточно точно. Здесь вы оперируете шаблонами и готовыми callback-функциями, создавая собственный front-end. Для новичка всё достаточно удобно и понятно, но, справедливости ради, в Angular дела с этим обстоят ничуть не хуже.

Главное удобство и вместе с тем основная претензия к React — JSX компоненты. Это как раз тот случай, когда скрипты плотно смешиваются с HTML-кодом, стирая границы между представлением и функциональностью компонента. Ничего страшного в этом нет, но понимание работы и «правильность» страдают. Короче говоря, с React вы экономите время и нервы, а именно это зачастую играет ключевую роль в выборе, но теряете немного самоуважения.

Основным минусом, помимо самой ограниченности подхода, считается не самая лучшая официальная документация. Но то ли её серьёзно переработали, то ли ожидания критиков изначально были сильно завышены, но я не увидел ничего принципиально отличного от тех туториалов, что обычно предлагают своим клиентам Microsoft или Google.

Vue.js

Первая версия Vue.js строилась на тех же принципах, что и React, но исключая использование JSX-компонентов. Это была неплохая альтернатива, но до появления версии 2.0 это была довольно сырая библиотека. А потом понеслось. Просто взгляните на статистику: сумасшедший рост популярности на GitHub, Google Trends и в предпочтениях разработчиков.

Если говорить просто, то Vue.js — это некий компромисс между React и Angular. Front-end код легко создать, но вместе с тем читать и править. При этом это абсолютно никак не сказывается на конечном быстродействии, точнее сказывается, но только в положительную сторону.

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

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

Ember.js

Ещё одна вариация на тему «Больше шаблонов — больше пользы разработчику». В сущности, вы не увидите здесь чего-то революционного, Ember, по сути — упрощённый Angular. Основное сходство обеспечивают двухсторонний биндинг и возможности, лежащие за гранью создания внешнего интерфейса.

Здесь реализуется модель MVC. реализуется по строгим конфигурациям. С точки зрения освоения инструмента новичком и обеспечения быстродействия разработки — почти идеальное решение. А вот когда решите с этой проторенной разработчиками дорожки, то сразу же обнаружите все острые подводные камни. Это и сложности кастомизации, и слишком частые кардинальные изменения версии, и связанный с этим быстро устаревающий типовой FAQ на форумах и в сообществах.

Meteor

Meteor — далеко не самый популярный фреймворк, но он обладает массой преимуществ, которыми обделены ранее перечисленные претенденты. Во-первых, это настоящий Full-stack инструмент разработчика. Во-вторых, писать здесь можно на чистом JavaScript. Третье — интеграция хоть с Angular, хоть с React. Четвертое — почти идеальная реализация механизма создания веб-ресурсов реального времени (примеры — онлайн-конфигураторы Mazda и Ikea). Более того, всё это сдобрено отличной официальной документацией, в том числе и обучающей, и большим сообществом разработчиков


Минусы при этом не слишком существенны: использование Mongo в качестве БД или других, но через Mongo Queries (в Angular, например, таких ограничений нет), да вызывающая сомнения безопасность полученного продукта, что для такой функциональности вполне естественно.

При этом Meteor относительно прост для изучения новичком, а опытному разработчику хватит и одного-двух дней. Однако, к сожалению, ни это, ни усилия разработчиков, постоянно дорабатывающих свой продукт, не позволяют обогнать других сегодняшних претендентов просто потому, что full-stack для многих — всё ещё очень сложно. Но, возможно, это лишь потому, что они не пробовали на вкус Meteor.

А какими фреймворками пользуетесь вы?

Пару недель назад мы писали про 5 самых популярных фреймворков для Java, сегодня речь пойдёт о JavaScript.

AngularJS

Один из самых популярных инструментов JS-разработчика увидел свет в 2009 году. Благодаря широкой функциональности (хоть и не дотягивающей до Full-stack) и поддержке своего могущественного создателя, Angular быстро взобрался на вершину рейтинга лучших JS-фреймворков, и слезать оттуда не намерен.

Что касается свежих релизов, то в конце марта официально был представлен Angular 4.0.0 (несмотря на то, что 2.0.0 выпустили всего год назад). Такая скорость обновления связана не с «сыростью» выпускаемых продуктов, а в том, что первая версия содержала много упрощений, которые в неумелых руках приводили к ошибкам, а в опытных к существенным потерям в производительности, вторая является компромиссным переходом, третью пропустили, а четвертая — это актуальный продукт, доработанный по итогам всех замечаний. Правда, есть подозрение, что еще не до конца.

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

Мастер Йода рекомендует:  Анатомия успешного тимлида статистика и советы

Во-вторых, Google постоянно выпускает всё новые и новые качественные библиотеки и плагины.

В-третьих, в Angular взаимодействие с HTML не подменяется DOM-моделью (HTML-код не смешивается со скриптами), что в конечном счете сказывается на удобстве чтения и тестирования кода. Кроме того, возможности Angular чуть шире, чем у большинства популярных JS-фреймворков.

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

ReactJS

Данный фреймворк был создан в 2013 году Джорданом Волком из Facebook. Низкий порог входа и простота использования сделали из ReactJS популярный продукт среди корпоративных разработчиков, найдя отклики в сердцах офисов таких компаний, как Airbnb, Netflix Walmart и т.д. Более того, именно React сегодня считается основным инструментом JS-разработчика, ну просто потому, что Angular — это немного сложно и избыточно.

Всё дело в том, что отличии от Angular, React сильно ограничен в функциональности. Более того, некоторые хардкорные разработчики всерьез и не считают ReactJS фреймворком, предлагая более понятное, но не совсем правильное определение «ограниченная библиотека для лентяев».

Зато основные плюсы работы с этим фреймворком такое описание раскрывает достаточно точно. Здесь вы оперируете шаблонами и готовыми callback-функциями, создавая собственный front-end. Для новичка всё достаточно удобно и понятно, но, справедливости ради, в Angular дела с этим обстоят ничуть не хуже.

Главное удобство и вместе с тем основная претензия к React — JSX компоненты. Это как раз тот случай, когда скрипты плотно смешиваются с HTML-кодом, стирая границы между представлением и функциональностью компонента. Ничего страшного в этом нет, но понимание работы и «правильность» страдают. Короче говоря, с React вы экономите время и нервы, а именно это зачастую играет ключевую роль в выборе, но теряете немного самоуважения.

Основным минусом, помимо самой ограниченности подхода, считается не самая лучшая официальная документация. Но то ли её серьёзно переработали, то ли ожидания критиков изначально были сильно завышены, но я не увидел ничего принципиально отличного от тех туториалов, что обычно предлагают своим клиентам Microsoft или Google.

Vue.js

Первая версия Vue.js строилась на тех же принципах, что и React, но исключая использование JSX-компонентов. Это была неплохая альтернатива, но до появления версии 2.0 это была довольно сырая библиотека. А потом понеслось. Просто взгляните на статистику: сумасшедший рост популярности на GitHub, Google Trends и в предпочтениях разработчиков.

Если говорить просто, то Vue.js — это некий компромисс между React и Angular. Front-end код легко создать, но вместе с тем читать и править. При этом это абсолютно никак не сказывается на конечном быстродействии, точнее сказывается, но только в положительную сторону.

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

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

Ember.js

Ещё одна вариация на тему «Больше шаблонов — больше пользы разработчику». В сущности, вы не увидите здесь чего-то революционного, Ember, по сути — упрощённый Angular. Основное сходство обеспечивают двухсторонний биндинг и возможности, лежащие за гранью создания внешнего интерфейса.

Здесь реализуется модель MVC. реализуется по строгим конфигурациям. С точки зрения освоения инструмента новичком и обеспечения быстродействия разработки — почти идеальное решение. А вот когда решите с этой проторенной разработчиками дорожки, то сразу же обнаружите все острые подводные камни. Это и сложности кастомизации, и слишком частые кардинальные изменения версии, и связанный с этим быстро устаревающий типовой FAQ на форумах и в сообществах.

Meteor

Meteor — далеко не самый популярный фреймворк, но он обладает массой преимуществ, которыми обделены ранее перечисленные претенденты. Во-первых, это настоящий Full-stack инструмент разработчика. Во-вторых, писать здесь можно на чистом JavaScript. Третье — интеграция хоть с Angular, хоть с React. Четвертое — почти идеальная реализация механизма создания веб-ресурсов реального времени (примеры — онлайн-конфигураторы Mazda и Ikea). Более того, всё это сдобрено отличной официальной документацией, в том числе и обучающей, и большим сообществом разработчиков

Минусы при этом не слишком существенны: использование Mongo в качестве БД или других, но через Mongo Queries (в Angular, например, таких ограничений нет), да вызывающая сомнения безопасность полученного продукта, что для такой функциональности вполне естественно.

При этом Meteor относительно прост для изучения новичком, а опытному разработчику хватит и одного-двух дней. Однако, к сожалению, ни это, ни усилия разработчиков, постоянно дорабатывающих свой продукт, не позволяют обогнать других сегодняшних претендентов просто потому, что full-stack для многих — всё ещё очень сложно. Но, возможно, это лишь потому, что они не пробовали на вкус Meteor.

Собеседование на должность javascript-разработчика (senior). Как пройти и какие вопросы?

Друзья, всем привет.
Покидаю свою студию, хочу заниматься веб-приложениями на должности javascript-разработчика(сеньёр). Нашел в интернете несколько мест в городе, куда возможно податься.

До этого проходил лишь собеседование на должность обычного front-end программиста (верстка, где-то допилить jQuery, где-то что-то поправить), сейчас же хочу писать именно мощные динамические веб-приложения.
Какие вопросы стоит ждать на собеседовании, и какие скиллы нужно иметь, чтобы быть железно уверенным в том, что ты проходишь?

  • Вопрос задан более трёх лет назад
  • 27350 просмотров

Очевидно, надо хорошо знать Javascript :).

Основы: замыкания, чем отличается .call() от .apply(), на что указывает this, как работает прототипное наследование.
Знать ECMAScript 5: например Object.create(), Object.defineProperty(), как работают методы вроде .map(), .filter(), .reduce().
Вероятно, надо знать методы работы с элементами страницы, стандарт DOM3, как работать, чтобы не было тормозов.
Как загружается страница, в какой момент исполняются скрипты, как оптимизировать критический путь. AMD и иже с ним.
Асинхронное программирование, промисы. (Особенно, если предполагается разработка на node.js.)
Паттерны проектирования. Возможно, плюсом будет знание фреймворков вроде Backbone.js, Angular.js или React.js, хотя каждый из них есть за что покритиковать.
Профилирование кода.
Ну и примеры своего кода: «покажи свой GitHub».

Это только моё мнение, навскидку. Возможно, у собеседующих будут свои ожидания.

5 вопросов по JavaScript на которые вы должны знать ответ

На собеседованиях часто любят задавать однотипные вопросы, ответы на которые уже давно выучены.

Сегодня же мы рассмотрим те вопросы, про которые вспоминают достаточно редко.

1. Чему равно foo.x ?

Этот вопрос задают в топ 3% компаний (Apple, Google, Facebook).

Главное на что здесь стоит обратить внимание, так это то, что foo на которую ссылается foo.x “устанавливается” перед тем как foo изменится. foo.x ссылается на старое значение foo.

  • Let lref be the result of evaluating LeftHandS >rref be the result of evaluating AssignmentExpression.

Это значит, что в старом foo появиться новое свойство x равное . А в новое foo запишется .

Значение старого foo находиться в bar :

Так как при дальнейшем выводе foo.x наше foo ссылается на его новое значение, в котором отсутствует x , то соответственно foo.x будет не определенно — undefined .

2. Напишите функцию сложения вида add(num1)(num2)..

Примечание: Количество слагаемых не ограничено

В оригинале это задача решается таким образом:

Но потом вам ставят одно условие.

Убрать в конце лишние скобки

Теперь задача усложнилась. А решение кроется в переопределении метода valueOf .

Когда мы вызываем console.log , он ожидает увидеть String, если его там нет, то он попытается сделать из полученного значения String.

В примере выше после выполнения add(2)(3) возвращается function, которую console.log будет превращать в String, в ходе этих действий будет вызван метод valueOf для преобразования function к примитиву, а так мы переопределили данный метод, то он вернёт наше значение sum вместо стандартного.

Подробнее об этом тут.

Данный пример не работает со всеми console.

3. Что выведется в консоль ? Объясните почему.

Что же происходит? Когда у объекта устанавливается новое свойство, то JavaScript неявно сделает stringify значения. В коде выше b и c являются объектами, следовательно они оба конвертируются в «[object Object]» (String). Так как stringify значения равны, то получается, что мы присваиваем новое значение одному и тому же свойству.

Равносильно, что написать:

4. Напишите простую функцию, чтобы узнать равен ли один из входных параметров 3.

Тут делается упор на проверку знаний об arguments , но иногда заходят ещё дальше и просят рассказать каким образом работает Array.prototype.slice.call(arguments).

Как мы знаем, arguments не массив, а обычный объект, поэтому у него нет такого полезного метода как indexOf. Для этого используется Array.prototype.slice.call(arguments), который делает из argument — > array.

Но всё же, как он работает ?

.call() и . apply() позволяют явно установить this в функции. И если передать argument как this, то slice будет работать с ним как с обычным массивом.

А вот интересный эксперимент:

5. Объедините два массива с вложенностью

[1, [1, 2, [3, 4]], [2, 4]] -> [1, 1, 2, 3, 4, 2, 4]

Задачу можно решать различными способами. Обычно хотят узнать знает ли собеседуемый такой метод как reduce.

Идея заключается в том, чтобы обойти все элементы исходного массива и его “под массивов” с целью вернуть найденные значения в новый массив. Это происходит рекурсивно пока мы не дойдём до последнего элемента.

Так же с формированием нового массива нам помогает concat .

Если эта статья оказалась для вас полезной, пожалуйста поставьте ❤️, так остальные люди смогут найти её!

Собеседование на должность JavaScript-разработчика: популярные задачи с разбором решений

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

Проблема распространённых задач заключается в том, что они не имеют никакого отношения к реальной работе, особенно когда речь идёт о frontend. На собеседовании не хватает простых вопросов, например о совместимости браузера, вёрстке или событиях DOM.

Специалисты по подбору сотрудников, которые поддерживают такой подход, часто говорят что-то вроде:

— Я бы предпочёл нанять умного человека и научить его Х, чем нанять человека, который знает всё об Х, но ему не хватает творчества, логики и умения рассуждать.

Как бы то ни было, на данный момент задачи всё ещё являются важной частью процесса собеседования. Эта статья расскажет, как решить пять распространённых задач по программированию, которые вам могут задать в ходе собеседования на должность младшего JavaScript- или frontend-разработчика.

Подготовка к собеседованию

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

  • Готовьтесь заранее. Определите приоритет в подготовке, изучайте менее знакомые темы и много практикуйтесь. Если у вас нет опыта работы в области компьютерных наук, обязательно ознакомьтесь с некоторыми фундаментальными темами, касающимися алгоритмов и структур данных. Существуют онлайн-платформы, как платные, так и бесплатные, которые предлагают отличные способы отработать свои навыки прохождения собеседований. GeeksforGeeks, Pramp, Interviewing.io и CodeSignal — лишь некоторые из них.
  • Тренируйтесь мыслить вслух, когда пытаетесь найти решение. Фактически, раскрыть ваш ход мыслей в обстановке собеседования предпочтительнее, чем тратить всё доступное время на написание кода в полной тишине. Ваши слова дадут интервьюеру шанс помочь, если вы ошибётесь. Это также подчеркнёт ваши навыки общения.
  • Осознайте задачу, прежде чем начать её решать. Это важно. Иначе вы потратите время на размышления о неверной задаче. Кроме того, это заставит задуматься над вопросами, которые вы можете задать интервьюеру.
  • Практикуйте написание кода вручную. Это поможет, если вам предложат использовать доску, где нет автозаполнения, форматирования и т. д. При подготовке пробуйте записать свой код на листе бумаги или доске вместо того, чтобы держать всё в голове.

Стандартные задачи на JavaScript

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

Палиндром

Палиндром — это слово, предложение или последовательность символов, которая читается слева направо так же, как и справа налево. Например, «racecar» и «Anna» являются палиндромами, а «Table» и «John» — нет.

Формулировка задачи

Дана строка, нужно написать функцию, которая возвращает значение true, если строка — палиндром, и false, если это не так. При решении задачи необходимо учитывать пробелы и знаки препинания. Пример:

Логическое решение задачи

Эта задача строится на идее перевернуть строку задом наперёд. Если обратная строка совпадает с исходной, то это палиндром, и функция должна вернуть значение true. И наоборот, если обратная строка не совпадает с исходной, функция должна вернуть значение false.

Практическое решение

Вот один из способов решения задачи палиндрома:

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

Helastel, удалённо, от 150 000 ₽

Далее переворачиваем исходную строку. Это можно сделать, преобразовав строку в массив с помощью метода .split() (библиотека String), затем перевернув массив методом .reverse() (библиотека Array) и, наконец, преобразовав обратный массив снова в строку с помощью метода .join() (библиотека Array).

Остаётся сравнить перевёрнутую строку с исходной и вернуть результат в виде true или false.

FizzBuzz

Это очень популярная задача на собеседованиях.

Формулировка задачи

Напишите функцию, которая выводит в консоль числа от 1 до n, где n — целое число, которое функция принимает в качестве параметра, при этом:

  • выводит fizz вместо чисел, кратных 3;
  • выводит buzz вместо чисел, кратных 5;
  • выводит fizzbuzz вместо чисел, кратных и 3, и 5.

Логическое решение задачи


Один важный момент в FizzBuzz — способ поиска кратных чисел в JavaScript. Это делается с помощью оператора модуля или остатка — %, который возвращает остаток от деления двух чисел. Остаток 0 означает, что первое число кратно второму:

Если разделить 12 на 5, то получится 2 с остатком 2. Если разделить 12 на 3, то получится 4 с остатком 0. В первом примере 12 не кратно 5, а в во втором 12 кратно 3.

Практическое решение

Вот одно из решений, которое вы можете использовать для задачи FizzBuzz:

Функция выше попросту выполняет необходимые тесты, используя условные операторы, и выводит ожидаемый результат. В этой задаче нужно обратить внимание на порядок операторов if… else : начинайте с двойного условия ( && ) и заканчивайте случаем, когда кратные числа не найдены. Таким образом вы сможете охватить все варианты.

Анаграмма

Слова являются анаграммами другого слова, если имеют одинаковые буквы в одинаковом количестве, но в разном порядке.

Формулировка задачи

Напишите функцию, проверяющую, являются ли две строки анаграммами друг друга (регистр букв не имеет значения). Важны только символы, пробелы или знаки препинания не учитываются. Пример:

Логическое решение задачи

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

Подходящей структурой для хранения данных анаграммы будет объектный литерал JavaScript: ключ — это символ буквы, а значение — количество её повторений в данной строке.

Мастер Йода рекомендует:  Интересное на GitHub Алгоритм поиска Bing от Microsoft

Затем обратите внимание на пограничные случаи задачи:

  • убедитесь, что регистр букв не учитывается при сравнении. Просто преобразуйте обе строки в нижний или верхний регистр;
  • исключите из сравнения всё, что не является символом. Хорошим вариантом будет использование регулярных выражений.

Практическое решение

Вот как можно подойти к решению этой задачи:

Обратите внимание на использование Object.keys() . Этот метод возвращает массив, содержащий имена или ключи в том же порядке, в котором они встречаются в объекте. В этом случае массив будет выглядеть так:

Это удобный способ получить свойства объекта без выполнения громоздкого цикла. В этой задаче вы можете использовать этот способ вместе со свойством .length , чтобы проверить, имеют ли обе строки одинаковое количество символов, что является важной особенностью анаграмм.

Найти гласные

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

Формулировка задачи

Напишите функцию, которая принимает строку в качестве аргумента и возвращает количество гласных, содержащихся в этой строке. Гласными являются «a», «e», «i», «o», «u».

Практическое решение

Вот простое решение задачи с гласными:

На что следует обратить внимание — это использование метода .includes() . Он доступен как для строк, так и для массивов. Вы можете использовать его, чтобы определить, содержит ли массив определённое значение. Метод возвращает true, если массив содержит указанное значение, и false, если нет.

Существует также более краткое решение этой проблемы:

Решение выше задействует метод .match() . Его использование в сочетании с регулярным выражением позволяет выполнять действенный поиск. Если регулярное выражение как аргумент метода найдено внутри указанной строки, возвращаемым значением будет массив совпадающих символов. Если совпадений не найдено, .match() вернёт null .

Фибоначчи

Эта статья не была бы полной без задачи Фибоначчи — классического вопроса, с которым вы наверняка столкнётесь во время собеседования.

Последовательность Фибоначчи — это порядок чисел, где каждое последующее число является суммой двух предыдущих. Например, первые десять чисел последовательности выглядят так: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Формулировка задачи

Напишите функцию, которая возвращает n-ую запись в последовательности, где n — это число, которое вы передаёте в качестве аргумента функции.

Логическое решение задачи

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

Практическое решение

Вот как может выглядеть решение с помощью цикла:

Массив результатов уже содержит первые два числа в своём ряду, потому что каждая запись в ряду Фибоначчи состоит из суммы двух предыдущих чисел. Изначально у вас нет двух чисел, которые вы можете взять для получения следующего числа, поэтому цикл не может сгенерировать их автоматически. Однако вы знаете, что первые два числа всегда 0 и 1, поэтому вручную инициализируете массив результатов этими двумя числами.

Теперь попробуем рекурсивный подход:

Вы продолжаете вызывать fibonacci() , передавая всё меньшие и меньшие числа в качестве аргументов, пока не достигнете уже известного случая, где переданный аргумент равен 0 или 1.

Заключение

Если вы уже прошли несколько этапов собеседований на работу frontend- или JavaScript-разработчика, особенно уровня junior, вы, вероятно, столкнулись хотя бы с одной или двумя из задач, которые перечислены выше. Но даже если они вам не встретились, вы можете использовать их для совершенствования своих навыков программирования на JavaScript.

Ещё больше IT-задач для собеседований с разбором решений можно найти здесь.

Топ 5 навыков JavaScript, которые нужны начинающему

Дата публикации: 2020-06-28

От автора: Джерод, Дивья, Ник и я недавно говорили о востребованных навыках для начинающих разработчиков JavaScript во втором сегменте JS Party #77. Это постоянно повторяющаяся тема в мире JavaScript, потому что все оооочень быстро меняется, и трудно понять, на чем сосредоточиться.

Толчком к обсуждению стала недавняя публикация исследования и анализа под названием «Игра фреймворков: тенденции JavaScript в 2020 году», в нем команда CVCompiler проанализировала 300 спецификаций заданий для разработчиков JavaScript и вывела наиболее распространенные термины. Вот диаграмма того, что они установили:

Посмеявшись над включением таких понятий, как «Java» (не путают ли авторы спецификаций Java и JavaScript?) и подробный список общих терминов, таких как «ООП» и «Шаблоны проектирования», мы приступили к обсуждению того, что на самом деле является важными и полезными навыками.

Полученная информация была слишком хороша, чтобы ее можно было скрыть в стенограмме шоу, так что вот она: 5 ключевых навыков, на которых вам нужно сосредоточиться в качестве джуниор-разработчика JavaScript.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

P.S. Для каждого навыка я также приведу ссылки на ресурсы, с помощью которых вы можете освоить его. Некоторые из этих ссылок являются партнерскими, что означает, что я могу получать комиссию, если вы решите купить продукт, который я рекомендовал. Если вы предпочитаете, чтобы я не получал комиссию, это тоже круто, просто воспользуйтесь ресурсом Google, а не используйте мою ссылку.

1. Овладеть основами JavaScript.

Очень просто увлечься каким-либо новым фреймворком ими свежей концепцией, но, как говорит Дивья: Для кого-то, кто является новичком или кто только начал приобретать навыки, это действительно ошеломляюще. И я разговаривал со многими людьми, которые прошли буткемпы или совсем недавно вышли из школы, и они спрашивают: «На чем я должен сосредоточиться?» Обычно мой ответ такой: «Просто хорошо разбирайтесь в Javascript. Или что ты хочешь делать…» Потому что я думаю, что тренды приходят и уходят. Есть много фреймворков; React сейчас популярен, но кто знает, что будет через пять лет.

2. Сосредоточьтесь на одном фреймворке (вероятно, React)

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

5 лет карьеры разработчика они обычно работают на более высоких уровнях компетенции в рамках конкретной специализации.

И с точки зрения выбора того, какой фреймворк выбрать для изучения… как подчеркивается в оригинальном посте в блоге, и как резюмирует Джерод: Если вы просто выберете один из них и сосредоточитесь на нем, кажется, что React в 2020 году — ваш лучший выбор.

3. Ищите наиболее общие шаблоны, которые можно применить

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

Ранее в этом году я выделил пять таких мегатрендов, но в этом эпизоде выделяются 2 ключевых:

Компонентно-ориентированная разработка. Думать о вещах как о наборе компонентов, которые могут взаимодействовать. React делает это, Angular делает это, Vue делает это, Ember делает это, Dojo делает это, Mithril делает это, Svelte делает это … Это подход, которому мы следуем.

Точно так же такие вещи, как декларативное кодирование … Мы все больше переходим к декларативной парадигме для компонентов. «Вот что должно быть», говорим мы, позволяя фреймворкам решать, как и когда. И это еще одна вещь, которая применима для разных сред. Вероятно не для jQuery… Но если вы занимаетесь React, эти навыки снова будут полезны.

4. Если вы работаете с бэк-энд, изучайте Express

Одной из самых поразительных частей опроса было то, сколько технологий было выделено, как связанных с JavaScript, так и других. И если вы в мире JavaScript используете Node, кажется, у нас есть явный победитель. Ник: Кажется, что все, в некотором роде, сводится к Express, по крайней мере, в том, что я видел … В настоящее время я использую проект под названием NestJS, который похож на оболочку TypeScript для Express, но делает его более Angular подобной (именно так я ее описываю), в хорошем смысле.

5. Через год или два начните фокусироваться на потоках данных.

Я видел, что это происходило с инженерами, которых я обучал… работа с управлением данными (как в бэк-энд, так и фронт-энд) — это одна из самых сложных вещей, которые нужно освоить на первых порах. Вы можете избегать этого в течение первого года или двух, или думать только о данных в контексте отдельных компонентов, но в конечном итоге вам нужно действительно разобраться с данными.

Я думаю, что Дивья описал это лучше всего: Я считаю, особенно потому, что это приходит после работы только с небольшими функциями, вам нужно подумать об общей архитектуре, а также о том, является ли она масштабируемой и поддерживаемой; это то, о чем вы должны подумать — как происходит передача данных, какова архитектура бэк-энд и как он передает данные на фронт-энд, и как фронт-энд взаимодействует с бэк-энд. И чтобы понять это, нужно немного опыта и нужно поработать над различными приложениями, поиграть с вещами… Да, как правило, чем старше вы становитесь, тем выше ожидание, что вы знаете, как это делать и как решать эти проблемы.

Хорошо, это краткое изложение 5 основных вещей, на которые нужно обратить внимание начинающему разработчику.

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

NodeJS. Полное руководство

Овладейте на практике пошаговым алгоритмом серверной JavaScript-разработки на NodeJS

5 редакторов кода для JavaScript

JavaScript — мощный и капризный язык. С одной стороны, множество фреймворков и библиотек, с другой — не самый простой синтаксис и опасности, связанные с «динамикой». Поэтому для работы с ним важно подобрать редактор. Правильный выбор обеспечит вам чистоту кода, высокую скорость разработки, минимум ошибок и удовольствие от работы. На выбор одного из сотен существующих редакторов потратите уйму времени, поэтому мы проделали часть работы за вас. Вот 5 лучших.

WebStorm

WebStorm от JetBrains прекрасен в обоих своих проявлениях: как IDE он поддерживает работу с системами контроля версий, позволяет удалённо развернуть код, как редактор — стандартные удобства, вроде подсветки синтаксиса, автодополнений, навигации.

  • LiveEdit — просмотр внесённых в код изменений без необходимости его сохранять;
  • взаимодействие с фреймворками, например React, Angular, Meteor;
  • больше сотни встроенных тестов для обнаружения ошибок;
  • интегрирование с Mocha, Protractor, Jest, Karma для юнит-тестов;
  • полномасштабный дебаггер для отладки кода на серверной и клиентской сторонах;
  • навигация для одновременной работы с несколькими файлами;
  • автодополнение кода, подсветка синтаксиса.
  • стоит 129 $ за первый год работы;
  • для начинающих кодеров функционал избыточен.

Visual Studio Code

Ответвление IDE Visual Studio, направленное на работу с кодом. Он прост для освоения, удобен в использовании, и при этом функционален.

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

Sublime Text

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

  • горячие клавиши;
  • навигация по коду в виде мини-карты;
  • возможность изменить визуальную тему;
  • поддержка сниппетов;
  • подсветка, автодополнение переменных и синтаксиса;
  • множественная правка благодаря использованию указателей;
  • поддержка систем сборки;
  • проверка синтаксиса прямо во время ввода;
  • куча плагинов;
  • автосохранение.
  • полная версия стоит 70 $;
  • отсутствие анализатора кода для расстановки ссылок.

Atom Editor

Появившийся в 2015 году редактор кода от Git, копирующий дизайн Sublime Text и обёрнутый в Chromium.

  • более 50 открытых модулей;
  • удобный и приятный интерфейс;
  • бесплатный;
  • автодополнение и подсветка кода;
  • менеджер пакетов, которых уже более 3,5 тысяч;
  • гибкие настройки редактора, подключаемых пакетов, тем интерфейса;
  • редактирование и навигация при помощи горячих клавиш.
  • невысокая производительность;
  • пустая комплектация «из коробки».

Brackets

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

  • богатая комплектация «из коробки»;
  • режим Live Preview — предварительный просмотр правок в браузере в режиме реального времени;
  • менеджер пакетов;
  • показ в коде используемых изображений и цветов;
  • автодополнение и подсветка синтаксиса;
  • анализатор кода;
  • бесплатный.
  • строгая ориентация на веб и HTML+CSS+JavaScript;
  • медленное развитие;
  • низкое быстродействие из-за функций предпросмотра.

«>

Редактор кода — подручный инструмент каждого программиста. И каждый подбирает под себя: кто-то ценит функциональность, кто-то мобильность, для кого-то главное — дизайн и удобство. Кому-то даже нравится писать код в Notepad, но это всё равно, что пытаться построить дом при помощи молотка.

JavaScript — мощный и капризный язык. С одной стороны, множество фреймворков и библиотек, с другой — не самый простой синтаксис и опасности, связанные с «динамикой». Поэтому для работы с ним важно подобрать редактор. Правильный выбор обеспечит вам чистоту кода, высокую скорость разработки, минимум ошибок и удовольствие от работы. На выбор одного из сотен существующих редакторов потратите уйму времени, поэтому мы проделали часть работы за вас. Вот 5 лучших.

WebStorm

WebStorm от JetBrains прекрасен в обоих своих проявлениях: как IDE он поддерживает работу с системами контроля версий, позволяет удалённо развернуть код, как редактор — стандартные удобства, вроде подсветки синтаксиса, автодополнений, навигации.

  • LiveEdit — просмотр внесённых в код изменений без необходимости его сохранять;
  • взаимодействие с фреймворками, например React, Angular, Meteor;
  • больше сотни встроенных тестов для обнаружения ошибок;
  • интегрирование с Mocha, Protractor, Jest, Karma для юнит-тестов;
  • полномасштабный дебаггер для отладки кода на серверной и клиентской сторонах;
  • навигация для одновременной работы с несколькими файлами;
  • автодополнение кода, подсветка синтаксиса.
  • стоит 129 $ за первый год работы;
  • для начинающих кодеров функционал избыточен.

Visual Studio Code

Ответвление IDE Visual Studio, направленное на работу с кодом. Он прост для освоения, удобен в использовании, и при этом функционален.

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

Sublime Text

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

  • горячие клавиши;
  • навигация по коду в виде мини-карты;
  • возможность изменить визуальную тему;
  • поддержка сниппетов;
  • подсветка, автодополнение переменных и синтаксиса;
  • множественная правка благодаря использованию указателей;
  • поддержка систем сборки;
  • проверка синтаксиса прямо во время ввода;
  • куча плагинов;
  • автосохранение.
  • полная версия стоит 70 $;
  • отсутствие анализатора кода для расстановки ссылок.

Atom Editor

Появившийся в 2015 году редактор кода от Git, копирующий дизайн Sublime Text и обёрнутый в Chromium.

  • более 50 открытых модулей;
  • удобный и приятный интерфейс;
  • бесплатный;
  • автодополнение и подсветка кода;
  • менеджер пакетов, которых уже более 3,5 тысяч;
  • гибкие настройки редактора, подключаемых пакетов, тем интерфейса;
  • редактирование и навигация при помощи горячих клавиш.
  • невысокая производительность;
  • пустая комплектация «из коробки».

Brackets

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

  • богатая комплектация «из коробки»;
  • режим Live Preview — предварительный просмотр правок в браузере в режиме реального времени;
  • менеджер пакетов;
  • показ в коде используемых изображений и цветов;
  • автодополнение и подсветка синтаксиса;
  • анализатор кода;
  • бесплатный.
  • строгая ориентация на веб и HTML+CSS+JavaScript;
  • медленное развитие;
  • низкое быстродействие из-за функций предпросмотра.
Добавить комментарий