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

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

Почему JavaScript?

Стоит отметить открытость языка - компании, обычно соперничающие друг с другом, сотрудничают с целью развития JavaScript. Язык очень гибок и подойдёт сторонникам как объектно-ориентированного, так и функционального подхода. Огромное количество библиотек и фреймворков позволяет с лёгкостью решать любые типы задач, а серверная платформа Node.js даёт возможность использовать язык не только в браузере, но и в консоли. Вы даже можете писать настольные и мобильные приложения: первые - при помощи фреймворка Electron, а вторые - на NativeScript или React Native.

Основы

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

• объектно-ориентированный JS - конструкторы и фабрики, наследование;
• функциональный JS - функции высшего порядка, замыкания, рекурсия;
• спецификации тестов Jasmine;
• основы HTML, CSS и jQuery.

Git

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

• создание и перемещение файлов в каталогах;
• инициализация и коммиты в Git;
• настройка репозиториев в GitHub.

Алгоритмы и структуры данных

Затем стоит изучить алгоритмы (в частности, понятие сложности алгоритмов), а также базовые структуры данных: связные списки, очереди, стеки, двоичные деревья поиска и хэш-таблицы. В этом вам поможет .

Бэкенд

Node.js

10 лет назад JavaScript можно было использовать только для фронтенд-разработки. Теперь благодаря Node.js одним «фронтом» дело не ограничивается. Node - это просто среда для выполнения JS-кода на стороне сервера, поэтому вам не придётся изучать новый синтаксис, но понадобится импортировать и экспортировать файлы, разбивать код на модули и использовать менеджер пакетов npm.

Серверы, HTTP, Express.js

После изучения Node стоит продолжить знакомство с бэкенд-разработкой и разобраться в серверах и маршрутизации. Можно начать с портов и протоколов с акцентом на HTTP, а потом заняться Express - Node-библиотекой для обработки запросов.

Асинхронный JavaScript

Базы данных, схемы, модели и ORM

Базы данных - один из важнейших элементов веб-разработки. Если вашему приложению нужно загружать или хранить какие-либо данные, не теряющиеся при обновлении страницы, придётся использовать БД. Нужно научиться различать реляционные и нереляционные базы данных и разобраться в типах связей. Затем и познакомиться с разными . Умение работать с ORM тоже не будет лишним.

Фронтенд

HTML и CSS

HTML и CSS - это основа основ для любого веб-разработчика. Вам не обязательно знать их в совершенстве, но разбираться в них вы должны. Также можно изучить какую-нибудь популярную библиотеку (например, Bootstrap) и CSS-препроцессор вроде Sass - он поможет сделать CSS похожим на обычный код. Для упрощения работы с HTML можно выбрать один из популярных шаблонизаторов, например, pug.

jQuery и манипуляция DOM

Создав внешний облик страницы при помощи HTML и CSS, вы будете использовать и библиотеку jQuery для управления DOM. Многие считают, что jQuery бесполезна и её скоро заменят Angular и React, но она безумно популярна, и поэтому её стоит знать. Кроме того, однажды вы попадёте в ситуацию, когда забивать гвозди React-микроскопом вам будет неудобно, и тогда на помощь вам придёт лёгкая jQuery.

Инструменты разработчика Chrome

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

AJAX

Если вы хотите, чтобы приложение не перезагружало страницы после каждой операции с базой данных, вам точно понадобится AJAX - он отправляет фоновые асинхронные HTTP-запросы, ответы на которые обновляют лишь часть отображения. Работать с AJAX можно через jQuery при помощи метода.ajax .

Продвинутые темы

Разработка через тестирование

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

Веб-сокеты

Этой теме стоит уделить особое внимание, поскольку очень полезны. Протокол WebSocket, в отличие от HTTP, позволяет работать с двунаправленным потоком данных, что делает эту технологию уникальной. Самой распространённой реализацией является библиотека socket.io - разобраться с ней и применить полученные навыки на практике поможет по созданию многопользовательской браузерной игры.

ES6, Babel, Webpack

Сейчас основным стандартом является ES6 (ES2015), но уже принят ES2016, а ES2017 находится в разработке, поэтому нужно всегда быть в курсе обновлений и использовать их. Проблемы совместимости решаются всего парой инструментов:

• Babel - компилирует ES6-код (скоро появится поддержка ES2016) в ES5, который поддерживается всеми браузерами. Он даже умеет компилировать JSX/React-компоненты, что делает его незаменимым для любого веб-разработчика;
• Webpack - собирает все ваши исходные файлы (картинки, шрифты, таблицы стилей, JS-файлы и т.д.) в единый граф зависимостей. Он не пригодится при создании маленьких приложений, но при работе с React его помощь неоценима.

React и Redux

React - библиотека для создания пользовательских интерфейсов. Она была создана компанией Facebook в 2013 году и достаточно быстро стала популярной среди разработчиков. Вам стоит прочитать , а затем разобрать , чтобы понять, как работает React и для чего он нужен. React пригодится не только для фронтенд-разработки: Facebook выпустила варианты фреймворка для мобильной (React Native) и VR-разработки (React VR).

Redux - контейнер предсказуемых состояний, обычно используемый в связке с React. Его можно использовать для сокращения кода благодаря модульности. Особенно полезен в многопользовательских приложениях, работающих в режиме реального времени, например, в играх.

Аутентификация, сессии, cookies

Вам также стоит разобраться, как приложения взаимодействуют с пользователями, обрабатывают вход в учётную запись и выход из неё, выдают привилегии. Для отслеживания личности пользователя в течение сессии используются cookies - небольшие текстовые файлы, передаваемые сервером браузеру в ответе на HTTP-запрос. А для обеспечения связи базы данных и страничек авторизации можно использовать библиотеку express-session.

Веб-безопасность

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

Для работы будем использовать такую вещь как CPS.

Звучит гораздо страшнее, чем есть на самом деле. Это функция, которая получает в качестве параметра другую функцию, и когда первая функция завершается, она вместо retrun вызывает функцию-параметр.

Обернем jQuery.ajax таким образом, чтобы получить требуемый результат.

Function ajax(url, callback){ jQuery.ajax({url: url, success: callback}); }

Функция получает в качестве параметера callback, и мы не описали обработчик ошибок. В реальном коде он обязан быть, но для простоты изложения, мы о нем забудем.
Что же будет, если использовать библиотеку async? Получится что-то типа такого:

Function combine(scripts, callback){ async.map(scripts, ajax, function(contents){ callback(contents.join("")); }); }

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

Сравните с тем, что было:
function combine(scripts, callback){ var data ; for(var i =0; l = scripts.length; i< l; ++i){ (function (i){ jQuery.ajax({ url: scripts[i], success: function(response){ data[i] = response; if(data.length === scripts.length){ callback(data.join("")); } } }); }(i)); } }

Поскольку map для меня уже является естественным способом написания программ, я бы никогда не написал кода приведенного выше. Я бы думал, как приспособить map к асинхронному окружению. И если бы не было библиотеки async, то написал бы асинхронный map сам.

Функциональный подход позволяет гораздо проще смотреть на вещи. И реализовывать более красивые решения.

Частичное применение функций

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

В качестве примера мы будем создавать DOM элементы.
(Прим. переводчика: cull.dom - библиотека, автора, которую он создавал для одного из проектов. Но функции в ней очевидны и просты.)

Var ul = cull.dom.el("ul"); //document.createElement("ul") ul.nodeType === 1 // true

Также можно задавать атрибуты свойств.

Var ul = cull.dom.el("ul", {className: "bands"});

И указывать дочерние элементы

Var li = cull.dom.el("li", "Tom Waits"); var ul = cull.dom.el("ul", {className: "bands"}, li);

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

Va ul = cull.dom.el("ul", className:"bands"}, cull.dom.el("li", "Tom Waits"));

А теперь все-таки приступим к обсуждению частичного применения функций. Помните один из первых примеров?

Function makeAdder(base){ return function(num){ return base + num; } }
Он возвращает функцию, которая будет суммировать два числа. Естественно, при необходимости мы можем использовать именованные функции.

Function makeAdder(base){ return function(num){ return add(base, num); } }

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

Var add2 = cull.partial(add, 2); add2(5); //7

Теперь мы получили достаточно интересную возможность - сделать наш DSL по созданию DOM элементов еще красивее.

Var ul = cull.partial(cull.dom.el, "ul"); var li = cull.partial(cull.dom.el, "li");

И можем строить HTML списки приблизительно так

Var list = ul({className: "bands"}, );

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

["a", "br", "code", "div", ...].forEach(function(tagName){ cull.dom.el = cull.partial(cull.dom.el, tagName); });

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

Var e = cull.dom.el; var list = ul({className: "bands"}, );

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

Композиция функций

Вот еще пример простого приложения - опросника.

Необходимо ответить на каждый блок. Каждый блок содержит несколько вопросов. После ответа на один блок, мы переходим к следующему.

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

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

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

Помните нашу любимую функцию prop ?

Tweeps.map(prop("name"));

У нее есть брат-близнец func .

Tweeps.map(func("to.String"));
Она возвращает функцию, которую вы можете применять к объектам.

Теперь посчитаем результат каждого блока в опроснике

BuildSummary: function(){ return div(this.components.map(func("buildSummary"))); }

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

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

Поэтому мы можем написать 2 функции: buildSummary и getSummary .

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

И как только нам понадобилась хитрая обработка результатов, вся красота начала рушиться.

BuildSummary: function(){ var div = document.createElement("div"); for(var i =0; l=this.components.length; i

Однако, мы уже достаточно функционально ориентированы, чтобы улучить этот кусок кода. Первое очевидное улучшение - применить foreach.

BuildSummary: function(){ var div = document.createElement("div"); this.components.forEach(function(component){ var p = document.createElement("p"); p.innerHTML = component.getSummary().text; div.appendChild(p); }); return div; }

Мы избавились от переменных цикла, но возможно ли использовать map ?

BuildSummary: function(){ return div(this.components.map(function(component){ var p = document.createElement("p"); p.innerHTML = component.getSummary().text; return p; })); }

Коротко, но далеко до идеала. Основная проблема в этом выражении:
component.getSummary().text;

Проблема в том, тут происходит не одна, а целых три вещи:

1. Получение результата через getSummary()
2. Получение свойства text
3. Оборачивание результата в тег p

А как насчет нескольких функций map?

BuildSummary: function() { return div(this.components. map(function(component){ return component.getSummary(); }).map(function(summary){ return summary.text; }).map(function(text){ var p = document.createElement("p"); p.innerHTML = text; return p; })); }

Функциональный стиль налицо, но выглядит страшно. И читать очень неудобно.

Но давайте глянем на код еще разок. Что у нас здесь?

Return component.getSummary();

Здесь мы вызываем метод объекта. Но ведь мы создали специальную функцию для этого, func .

BuildSummary: function() { return div(this.components. map(func("getSummary")). map(function(summary){ return summary.text; }).map(function(text){ var p = document.createElement("p"); p.innerHTML = text; return p; })); }

Function(summary){ return summary.text; }

Мы получаем доступ к свойству объекта. И для этого тоже есть удобная функция.

BuildSummary: function() { return div(this.components. map(func("getSummary")). map(prop("text")). map(function(text){ var p = document.createElement("p"); p.innerHTML = text; return p; })); }
Остался последний участок.
function(text){ var p = document.createElement("p"); p.innerHTML = text; return p; }

Мы здесь создаем DOM элемент и устанавливаем его внутреннее свойство. У нас есть что-то похожее в нашем DSL, не правда ли?

BuildSummary: function() { return div(this.components. map(func("getSummary")). map(prop("text")). map(p)); }
Теперь почти красиво. Но есть один нюанс. Мы делаем 3 прохода по списку. В каких-то случаях это может быть нормально, но в целом несколько неоптимально. Что же можно сделать?

Пора использовать композицию функций. Мы хотим заставить одну функцию делать то, что делают три.

Var summarize = compose();

Как же нам реализовать compose?

По частям. Для начала создадим синонимы, чтобы не писать много кода.

Var callGetSummary = func("getSummary"); var getText = prop("text"); var summarize = compose();

Шаг первый

var callGetSummary = func("getSummary"); var getText = prop("text"); var summarize = compose(); // summarize(obj); // => callGetSummary(obj)
Объект предеается в последнюю функцию из списка, а именно getSummary . Она возвращает нам объект типа summary . А этот объект передается в следующую функцию, getText

Шаг второй

var callGetSummary = func("getSummary"); var getText = prop("text"); var summarize = compose(); // summarize(obj); // => getText(callGetSummary(obj))

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

Шаг третий

var callGetSummary = func("getSummary"); var getText = prop("text"); var summarize = compose(); // summarize(obj); // => p(getText(callGetSummary(obj)))

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

Итак, вернемся к нашему многострадальному примеру.

BuilSummary: function() { var summarize = compose(); return div(this.components.map(summarize)); }

Сначала мы создали функцию вычисления результатов. А потом применили map.
При этом заметьте, что функция summarize абсолютно не знает, с каким объектом она работает. Это три различных абстракции, которые соединяются исключительно благодаря функции compose. Поэтому мы можем вынести summarize в отдельную сущность.

Var summarize = compose(); // ... builSummary: function() { return div(this.components.map(summarize)); }

Выглядит здорово и красиво, но что насчет производительности?

Вопросы производительности

For - 5M операций в секунду
forEach - 1,5M операций в секунду
reduce - 1.5M операций в секунду

Работа с DOM - 50K операций в секунду

Так что беспокоиться стоит не о функциональном подходе, а о тормозах работы с DOM. Само собой, тут все зависит от вашей задачи, поэтому если сомневаетесь - делайте замеры. Особенно на мобильных устройствах.

Заключение

Используем чистые функции
Используем функции высшего порядка (map, reduce).
Используем небольшие абстракции.
Много мелких абстракций могут легко собираться в одну большую мощную вещь.

P.S. Слайды оригинального выступления можно посмотреть по адресу

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

Языки программирования – это только лишь инструмент, с помощью которого человек строит правила в созданных системах.

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

Общая информация

Многие люди, даже не имеющие никакого отношения к IT-сфере, слышали слово Java . Революционный независимый от платформ язык, на котором активно пишут приложения для мобильных систем. Он был разработан перспективной компанией Sun , которая затем перешла «под крыло » Oracle . Но ни та, ни другая компании не имеют никакого отношения к JavaScript :

От Sun потребовалось лишь разрешение на использование части названия. Удивительно, но JavaScript вообще не принадлежит ни одной фирме.

При написании веб-приложений, программирование на JavaScript используется наиболее часто. Если кратко перечислить ключевые особенности данного языка, то следует выделить следующее:

• Объектно-ориентированность. Выполнение программы представляет собой взаимодействие объектов;
• Приведение типов данных проводится автоматически;
• Функции выступают объектами базового класса. Эта особенность делает JavaScript похожим на многие функциональные языки программирования, такие как Lisp и Haskell ;
• Автоматическая очистка памяти. Так называемая, сборка мусора делает JavaScript похожим на C# или Java .

Если говорить о сути применения JavaScript , то этот язык позволяет «оживлять » неподвижные страницы сайтов с помощью кода, который можно запустить на исполнение (так называемые, скрипты ). То есть, можно провести аналогию с мультфильмами, где html и css – это прорисованные герои, а JavaScript – это то, что заставляет их двигаться.

Если говорить о синтаксисе JavaScript , то ему присущи следующие особенности:

• Регистр важен. Функции с названиями func() и Func() – совершенно разные;
• После операторов необходимо ставить точку с запятой;
• Встроенные объекты и операции;
• Пробелы не учитываются. Можно использовать сколько угодно отступов, а также переводов строки, чтобы оформить свой код.

Простейший код на JavaScript выглядит следующим образом:

Сфера применения

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

• Разработка веб-приложений. Хотите установить простой счетчик, организовать передачу данных между формами или поместить на своем сайте игру? Тогда JavaScript выступит верным помощником в этом деле;
• «Активное участие» в AJAX . Эта технология позволила значительно ускорить работу приложений, осуществляя обмен данными с сервером в «фоновом » режиме:

• Операционные системы. Возможно, кто-то не знал, но Windows , Linux и Mac имеют своих браузерных конкурентов, львиная доля кода которых написана на JavaScript ;
• Мобильные приложения;
• Сфера обучения. Любая программистская специальность в университете включает в себя изучение JavaScript в том или ином объеме. Это обусловлено тем, что язык изначально разрабатывался для не очень сильных программистов. Уроки JavaScript логически вплетаются в базовый курс HTML , поэтому освоение проходит достаточно просто.

Преимущества и недостатки

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

• Необходимость обеспечивать кроссбраузерность. Раз уж JavaScript выступает как интернет-технология, то приходится мириться с правилами, которые устанавливает всемирная паутина. Код должен корректно выполняться во всех, или хотя бы самых популярных, браузерах;
• Система наследования в языке вызывает трудности в понимании происходящего. В JavaScript реализовано наследование, основанное на прототипах. Люди, изучавшие другие объектно-ориентированные языки программирования, привыкли к привычному «класс потомок наследует родительский класс ». Но в JavaScript такими вещами занимаются непосредственно объекты, а это не укладывается в голове;
• Отсутствует стандартная библиотека. JavaScript не предоставляет никаких возможностей для работы с файлами, потоками ввода-вывода и прочими полезными вещами;
• Синтаксис в целом затрудняет понимание. Красота кода – явно не конёк JavaScript , но главное правило программистов соблюдено: «Работает? Не трожь! ».

Теперь стоит отметить некоторые преимущества

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

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

Для тех, кто хочет изучать

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

• Прежде всего, HTML . Нельзя начинать делать что-либо для интернета без основы основ. Каскадные таблицы стилей (CSS ) также очень сильно пригодятся;
• Использовать новую литературу. Программирование – это не физика, законы которой нерушимы, а новые учебные пособия – это урезанные старые. IT-технологии постоянно развиваются, и не стоит пренебрегать полезными обновлениями;
• Стараться самостоятельно писать все участки программы. Если что-то ну совсем не получается – можно позаимствовать чужой код, но лишь предварительно уяснив для себя каждую строчку;
• Отладка – ваш верный друг. Быстро находить ошибки – один из важнейших моментов в программировании;
• Не игнорируйте нормы форматирования. Конечно, код не станет лучше или хуже от разного количества отступов и пробелов, но легкость чтения и понимания программистом – тоже немаловажный момент. Код, приведенный ниже? очень трудно воспринимается, особенно если вы не его

• Имена переменных должны иметь лексическое значение. В процессе написания простых программ это кажется вовсе не важным, но когда количество строк кода переваливает за тысячу – все черти ломают ноги;

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

Назовите две наиболее важные для JavaScript-разработчика парадигмы программирования?

JavaScript – мультипарадигмальный язык, поддерживающий императивное/процедурное программирования наряду с ООП и функциональным программированием. JS поддерживает ООП с прототипным наследованием.

Желательно упомянуть:

1. Прототипное наследование (также: прототипы, объектные ссылки)

2. Функциональное программирование (также: замыкания, функции первого класса, лямбды)

Следует избегать:

Не иметь представления о парадигмах, не упомянуть прототипное ООП или функциональное программирование.

Что такое функциональное программирование?

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

Функциональное программирование – одна из основополагающих концепций JavaScript (один из двух столпов JS). Некоторые функциональные утилиты были добавлены в JavaScript в ES5.

Хорошо упомянуть:

1. Чистые функции / чистота функций

2. Избежание побочных эффектов

3. Простой состав функций

4. Примеры функциональных языков: Lisp, ML, Haskell, Erlang, Clojure, Elm, F Sharp, OCaml и т.д.

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

Следует избегать:

1. Отсутствие упоминаний чистых функций / избежание побочных эффектов

2. Не привести примеры функциональных языков

3. Не привести примеры функциональных фич JavaScript

В чем заключается разница между классовым и прототипным наследованием?

Классовое наследование: экземпляры наследуются от классов, создаются подклассовые отношения (иерархическая систематизация классов). Экземпляры реализуются через конструктор функции, через дескриптор new. Экземпляр класса может не содержать дескриптор class начиная с ES6.

Прототипное наследование: экземпляры наследуются напрямую от других объектов, реализуются через фабрики или Object.create() и экземпляры могут быть составлены из множества различных объектов для упрощения выборочного наследования. Прототипное наследование более простое и гибкое, нежели классовое.

Хорошо упомянуть:

1. Классы: тесные связи, иерархия

2. Прототипы: конкатенативное наследование, делегирование, функциональное наследование, композиция

Следует избегать:

Не указать на преимущества прототипного наследования перед классовым

Каковы плюсы и минусы функционального и объектно-ориентированного программирования?

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

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

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

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

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

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

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

Хорошо упомянуть:

1. Проблемы общих состояний, нежелательного поведения

2. Возможности ФП по радикальному упрощению кода программ

3. Разность в сложности изучения

4. Побочные эффекты и их влияние на надежность программ

5. Сложность изменения и общая хрупкость базы ОО кода в сравнении с таковой в функциональном стиле

Следует избегать:

Не упомянуть недостатки одного из подходов – каждый, кто сталкивался с одним из них, знает и о паре-другой недостатков

Когда классовое наследование – подходящий выбор?

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

Хорошо упомянуть

«…композиция объектов лучше, чем наследование классов»

Следует избегать:

Упоминание Rect Components. React.js использует дескриптор class, но не позволяет избежать подводных камней классового наследования. Вопреки популярным ответам, не нужно использовать class, чтобы пользоваться React. Такой ответ покажет не понимание как классов в JavaScript, так и Реакта.

Когда лучше использовать прототипное наследование?

Существует более, чем один тип прототипного наследования:

1. Делегирование (цепочка прототипов)

2. Конкатенация (миксины, Object.assign())

3. Функциональное наследование (не путать с функциональным программированием. Функция используется для создания замыкания для private/инкапсуляции)

Хороший ответ:

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

2. Когда нужно собрать объект из нескольких источников

3. В любом случае, когда нужно применить наследование

Следует избегать:

1. Не знать, когда применяются прототипы

2. Не знать о миксинах или Object.assign()

Что значит «композиция объектов лучше, чем наследование классов»?

Это цитата из книги “Design Patterns: Elements of Reusable Object-Oriented Software”. Повторное использование кода должно достигаться за счет сборки малых единиц функциональности в новый объект, а не наследованием классов и созданием иерархий.

Хорошо упомянуть:

1. Избежание наследования и тесных связей

2. Избежание вытекающей из классического наследования проблемы «банан/мартышка» (нужен был банан – получили мартышку, держащую банан посреди джунглей)

Следует избегать:

Не назвать какую-то из упомянутых выше проблем. Не объяснить разницу между композицией и наследованием или не суметь рассказать об преимуществах композиции.

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

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

Однонаправленный поток данных означает, что только модель – источник истины. Изменения в интерфейсе запускают сообщения, которые сигнализируют пользователю о намерении модели (или «store» в терминах React). Смысл в том, что данные всегда идут в одном направлении, что облегчает понимание.

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

Хорошо упомянуть:

1. React – новый канонический пример однонаправленного потока данных, так что упоминание Реакта будет хорошей идеей. Cycle.js — еще одна популярная реализация однонаправленного потока данных.

2. Angular – популярный фреймворк, использующий двустороннюю привязку.

Следует избегать:

Непонимание этих концепций, неспособность объяснить разницу между ними.

Каковы плюсы и минусы монолитной архитектуры и микросервисов?

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

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

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

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

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

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

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

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

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

Хорошо упомянуть:

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

2. Практические различия микросервисов и монолитных приложений

Следует избегать:

1. Незнание различий архитектур

2. Незнание недостатков микросервисов

3. Недооценивать преимущества масштабирования микросервисов

Что такое асинхронное программирование и почему оно важно в JS?

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

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

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

Node.js по умолчанию асинхронен, по сути, сервер проводит все время в цикле, ожидая сетевой запрос.

В JavaScript это важно, так как естественно для интерфейсов и положительно сказывается на производительности сервера.

Хорошо упомянуть:

1. Значение блокировок, влияние на производительность

2. Понимание обработчиков и почему они важны для интерфейсов

Следует избегать:

1. Непонимание терминов синхронности и асинхронности

2. Неспособность определить последствия для производительности

Соколов - Томск

30 000 - 65 000 руб.

...Нужен программист для стартапа (Всероссийская база данных мошенников). Архитектура: Сервер ... ...сайта (front-end) на PHP / VueJS или Java. Желательны знания: CSS, Html ... ...Boot, Hibernate) Android, iOS JavaScript Базы данных (Postgres, Mysql) ...

26 дней назад

Чернецов Антон Константинович - метро Ботанический сад, Москва

60 000 руб.

...автоматизированной системы (PLM, CRM, ЭДО). Установка, отладка, написание расширений для корпоративных систем. Написание Java- кода и JavaScript. Отладка большого web-приложения (JavaEE, Tomcat, JSP, JavaScript). Создание схемы БД Требования: ...

26 дней назад

ООО Центральная Касса - Пермь

50 000 - 120 000 руб.

...сложных и интересных задач для разработки современных платежных решений. Сейчас мы применяем большое количество технологий: · Java 8, Spring (+Spring Boot), Redis, Wildfly, PostgreSql, TestNg & Mockito. · Maven, Git, Youtrack, Upsource. Присоединяясь к нашей ...

9 дней назад

ГК Safe Logic - метро Семёновская, Москва

...ищем активных, целеустремленных, ориентированных на результат сотрудников Обязанности: JavaScript программист для разработки проектов на ExtJS 6 и выше Java 1.8 Spring Framework (Core, Data, Web, Security, Boot и т.д.) MySQL PostgreSQL, PostGIS ...

8 дней назад

JCat, сервис размещения объявлений - метро Маяковская, Санкт-Петербург

35 000 руб.

...основными веб-технологиями: Php5+, jQuery, Html, Css, кроссбраузерная верстка. Большим плюсом будет знание Php7, JavaScript, AngularJs, Html5, MySql, Ajax. Java (Jse, Jee). Spring ответственность, аккуратность, работоспособность, креативность; самостоятельность ...

9 дней назад

Эшелон-Северо-Запад - метро Василеостровская, Санкт-Петербург

...корпоративные Web-приложения и мобильные приложения для Android и iOS. Приглашаем на работу разработчика со знаниями С++ / Qt / JavaScript / Java с перспективой развития в направлении Web-разработки. Будем рады пообщаться как с состоявшимися профессионалами, так и с ...

20 дней назад

Объединённая компания РУСАЛ - метро Парк Победы, Москва

...ОК РУСАЛ приглашает кандидатов на вакансию Java Программист. Обязанности: Разработка, сопровождение и доработка программного ... ...программирования; Знание основ XML, HTML, CSS, JavaScript, Ajax, SOAP, WSDL; Уверенные знания Java2 SE/Java 2 EE; ...

13 часов назад

Bell Integrator - Москва

...Написание тестов. Требования: Высокий уровень знаний core JavaScript; Знание TypeScript, React, ES6 Желательные требования: ... ...опыт работы с Ember, Vue.js или AngularJS, а так же знание Java, C# или любого другого «взрослого» объектно-ориентированного ...

26 дней назад

Финстарлабс - Румянцево, Москва

100 000 - 150 000 руб.

...Обязанности: 1. Разработка веб- и серверных приложений на Java с использованием Spring, Hibernate, AngularJS, Web Services, СУБД ... ...опыт разработки под Unix/Linux (желательно); 5. хорошее знание JavaScript; 6. опыт разработки используя AngularJS (ember.js, KnockoutJS ...

14 часов назад

Фролов Николай - Ростов-на-Дону

40 000 - 100 000 руб.

...Вакансия Java- программиста (или же C#-программиста, готового в краткие сроки перейти на Java) в одном из крупнейших предприятий южной столицы ... ..., Interbase, Firebird и др. Web-технологиями: html, javascript, jquery, spring framework. Системами контроля версий: Git ...

10 дней назад

Группа компаний «ИСЕРВ» - Чебоксары

2 001 руб./год

...ЖКХ, образовательных и медицинских учреждений приглашает программиста JavaScript (ReactJS) В настоящий момент, в связи с расширением территории ... ...запросов T-SQL; Знание какого-нибудь серверного языка (java, python, ruby, C#). Мы предлагаем: Возможность ...

26 дней назад

Металлинвестбанк - Белгород

150 000 руб.

...Разработка внутренней платформы развития бизнеса Требования: Знание Java, Spring; Владение SQL; Понимание процессов разработки веб-приложений, работы REST . Знание Javascript/ Jquery или аналогичных фронт-энд библиотек будет большим плюсом. (не ...

9 дней назад

Северсталь, Москва - Череповец

...стали; Участие в проектах внедрения системы Hybris в качестве Java- разработчика. Требования: Опыт работы (от года) с ... ...работы (от года) со Spring MVC; Опыт работы с HTML/CSS/ JavaScript (jQuery, Dojo, etc.); Опыт работы с веб-сервисами (REST/SOAP ...

10 дней назад

TEZ TOUR - Москва

150 000 руб.

...Разработка архитектуры платформенного решения и программных модулей на Java Разработка интеграционных приложений Разработка и ... ...Знание SQL Знание XML и JSON Базовые знания HTML, CSS, JavaScript Опыт работы – не менее 1 года Английский язык – на ...

18 дней назад

TANDEM - Екатеринбург

65 000 - 85 000 руб.

...Компания TANDEM приглашает программистов на позицию Middle Java developer "а в группу разработки. Работа на этой позиции предполагает освоение ... ...SQL. Знание HTML, опыт разработки с использованием JavaScript, понимание или опыт работы с технологией Ajax. Знакомство ...

10 дней назад

Центр Информационных Технологий - метро Динамо, Екатеринбург

60 000 руб.

...Компания Центр Информационных Технологий приглашает java -программистов для разработки региональн ой информационной медицинской системы ... ...ORM Опыт разработки web приложений (HTML, CSS, JavaScript) Опыт работы с СУБД Мы предлагаем: Работа в ...