Каков Ваш код на... запах? Как люди мы имеем огромное количество различных желез на теле. Как у программистов у нас есть множество строчек кода в проектах. Как у людей некоторые наши железы выделяют запах - хороший или не очень. Как у программистов некоторые наши строчки кода также могут иметь своеобразный "запашок". В мире программирования "запашок" недопустим. Подобно тому, как неприятный запах может свидетельствовать о различных медицинских проблемах организма, плохо организованный код также может быть симптомом плохо построенной архитектуры приложения. Итак, должны ли мы беспокоиться при наличии "запаха" у нашего кода? "Запах" кода - это не то же самое, что и баг. Если коротко, "запах" кода - это та ситуация, когда вроде бы нам не очень нравится код, который мы написали, но не так, чтобы его исправлять или переписывать... Это как раз таки фатальная ошибка. Рост кода подобен по своей природе росту дерева. Отсекание некошерных веток важно, чтобы дерево оставалось в добром здравии. Если этого не делать, ветки становятся все длиннее и длиннее - и, как следствие, процесс сбора плодов также становится затруднительным. Без рефакторинга поддержка кода может стать затратным вложением. Дурной запах кода усложняет поддержку, так как любой код требует поддержки. Вообще, "запах" кода был классифицирован в зависимости от сценария, который он представляет. Эта статья - краткий взгляд на различные виды несовершенств кода, чтобы мы могли понять, на что стоит обратить внимание в разрабатываемых продуктах. И давайте быть честными по отношению хотя бы к самим себе: если не сейчас, то никогда. Что же, начнем! "Дух" плохих методов Первое, на что стоит обратить свое пристальное внимание, - это название метода. Также не стоит забывать и о названиях и общей длине параметров. Вот типичный "идеальный" метод: Название четкое и ясное Не длиннее 30 строчек и принимает не более 5 параметров Реализация - простейшая из возможных, нет "мертвого" кода Здесь представлен список возможных несовершенств:   Название Описание 1 Мертвый код метод не используется. 2 Ленивый объект метод делает очень мало работы. 3 Посредник все, что делает этот метод, - это вызывает другой метод. 4 Божественный метод метод исполняет слишком много обязанностей. 5 Длинный список параметров не забываем про рекомендацию в 5 параметров. 6 Перекрученная сложность слишком сложная реализация простых операций. 7 Цикличный ад злоупотребление циклами и условными конструкциями. 8 Излишняя близость метод очень сильно зависит от особенностей реализации другого метода. 9 Завистливый объект метод полагается на данные другого объекта больше, чем на свои. 10 Черная овечка метод сильно отличается от других методов класса. "Запашок" класса Проверяйте название класса и то, насколько реализуемый классом контракт отвечает его сути. Как правило, идеальный класс прекрасно отображает назначение различных сущностей на уровне бизнес-логики и реализует ее в рамках архитектуры, выбранной для самой бизнес-логики. Вот список возможных несовершенств, связанных с классом:   Название Описание 1 Ленивый объект класс выполняет слишком мало работы. 2 Посредник класс ничего не делает, просто вызывает объекты другого класса. 3 Божественный объект класс слишком много о себе возомнил. Реализует слишком много операций. 4 Узколобое мышление слишком примитивная реализация типов с особым назначением. 5 Шпион на допросе реализуемый классом интерфейс не сообщает достаточное количество информации, чтобы понять назначение объекта. 6 Эксгибиционист необязательное раскрытие внутренних деталей реализации. 7 Излишняя близость класс слишком сильно зависит от реализации объектов, на которые он ссылается. 8 Жадинка класс наследует поведения объекта, тогда как на самом деле классу нужны лишь некоторые его фрагменты. 9 Неопределенность разработка класса становится слишком сложной из-за вороха фич, которые "когда-то" будут доведены до ума. 10 Непостоянство класс содержит член данных, не характерный для всего времени жизни объекта. Общее впечатление о коде Рассматривая более высокий уровень абстракции, стоит также упомянуть несколько немаловажных аспектов:   Название Описание 1 ​Утраченный смысл код не совсем точно реализует требуемую от него задачу. 2 Выбирай, что хочешь та же самая проблема уже решена - причем несколькими способами. 3 Комбинаторный взрыв различные участки кода делают одно и то же, но с разным набором параметров. 4 Не копируй себя много идентичного кода. 5 Сложность слишком сложная реализация простых вещей. 6 Размазня нет единого глобального класса. Ответственность размазана по целому вороху промежуточных классов. 7 Подводный айсберг изменения внешне не связанных компонентов затрагивают слишком много вещей.  8 Спагетти-код изменение одного компонента требует множество мелких изменений в других местах. 9 Пиар-комментарии классные комментарии в плохом коде. 10 ​Информационный комок группа переменных почти всегда передается вместе. Стоит также уделить минутку своего внимания комментариям в коде. В то время, как комментирование назначения метода будет полезным для всех, кто читает его, комментирование реализации метода - достаточно спорное решение. Риск состоит в том, что по неосторожности можно использовать упомянутые "пиар-комментарии" к тем строчкам, которые этого отнюдь не заслуживают. Отличный код таков, что нуждается в малом количестве комментариев, так как его реализация становится понятной интуитивно. Комментарии стоит использовать, когда мы комментируем особенности технических решений, вещи, оставленные для рассуждения или будущие этапы разработки. Как бы это странно ни прозвучало, но комментарии никогда не должны рассматриваться в качестве обязательных для написания. Также не стоит забывать о различных тестах (в особенности о тех, которые не пишутся просто для повышения процента покрытия кода). Стереотипы Конечно же, куда без них. Кто-то может утверждать, что подобные тонкости коддинга начали выделять с прогрессом информационной индустрии. Мол, "запашок" кода очень часто является следствием "плохих привычек" написания или же в силу определенных обстоятельств. Подобные оправдания звучат несколько неубедительно и говорят о тараканах в голове разработчика: каждый уважающий себя программист должен стараться писать хороший код абсолютно всегда. По умолчанию! Другой стереотип, о котором также стоило бы упомянуть, - это избыточная вера в рефакторинг. Что же, рефакторинг как процедура переписывания кода также может быть выполнен из рук вон плохо. Излишняя цикличность, слишком сложные решения и прочее-прочее запросто может быть добавлено в проект из лучших побуждений - особенно в том случае, если по принципу организации исходный код не сильно отличается от здорового клубка спагетти. В итоге все разработчики могут "запачкать" свой код. Что хуже, часто это бывает под давлением внешних обстоятельств, особенно у "временных" разработчиков для хотфиксов. Проверки качества кода должны происходить всегда сразу после быстрых релизов. И в заключение Большинство из тех проблем, с которыми мы сталкиваемся, часто связаны с логическим промежутком, пропастью между уровнем абстракции выбранного языка программирования и языком бизнеса. Чем больше нам удается отстранится от "самовыражения" посредством языка программирования к бизнес-целесообразности, тем более читабельным и поддерживаемым будет наш код. Гранулярность, модульность, разделение задач и все те прекрасные теоретические концепции, о которых мы могли слышать до этого, становятся конкретными и вещественными, когда мы загораемся желанием следовать концепции делового прагматизма и утилитарности. Источник Переводчик: Евгений Лукашук

Дмитрий Охрименко – один из создателей ITVDN, автор видео курсов, консультант по построению распределенных и веб-ориентированных приложений, сертифицированный специалист Microsoft (MCTS, MCPD, MCT). Более 10 лет Дмитрий проводит корпоративные тренинги для IT специалистов в таких компаниях как 3Shape, GlobaLogic, Ciklum, Terrasoft, Simcorp и других. Мы попросили Дмитрия ответить на ряд вопросов, связанных с обучением IT специалистов и о том, в какой мере ITVDN может помочь в решении этих задач.   Как HR-специалисту узнать, какие новые технологии нужно изучить разработчику? Для этого есть много инструментов, которыми можно воспользоваться для определения действительно важных для разработчика тем. Так как бизнес должен зарабатывать деньги, то неправильно будет идти только на поводу у разработчика. Если говорить о мотивации, то все люди любят платить деньги за то, что приносит пользу, либо за то, что приносит удовольствие. Если брать разработчиков, то пользу им приносит все то, что может помочь в решении их повседневных задач. Если компания, например, разрабатывает какие-то веб-приложения, то, возможно, стоит обратить внимание на изучение их популярных библиотек, которые используются в проектах, на изучение разработки BackEnd-части. Это то, что можно отнести к пользе, которую получит разработчик. Если говорить об удовольствии, то все разработчики любят говорить, что они знают все самые последние технологии, что они имели опыт с последними версиями: C#, JavaScript, C++ и т.д.  Поэтому мотивация может заключаться в том, чтобы проводить обучение, может, не совсем полезное для проекта, но зато - это новые технологии, и разработчик будет чувствовать себя частью передовых технологий. Также необходимо проводить обучение для поднятия общего уровня знаний специалистов в проекте. По сути, как узнать, что нужно разработчикам? Лучше всего на этот вопрос ответит не сам разработчик, а тимлид или человек, который занимается организацией всей команды. Потому что четко понятно, что у этих ребят не хватает опыта работы с таким-то языком, инструментом и необходимо подтянуть именно эти навыки. Можно сделать, например, общий опросник для всех разработчиков и узнать, что они хотят. Как показывает практика, это обычно разбросанные требования: хочу учить С#, хотя человек пишет на Java, или хочу учить Python, хотя в проекте он не будет вообще использоваться. Для того, чтобы обучение мотивировало разработчиков и было полезно для самой компании, то HR-специалисту нужно собрать информацию не только от конкретных разработчиков, а еще и уточнить, что действительно необходимо для реализации тех задач, которые стоят перед командой в целом. Чтобы команда смогла поставить действительно качественный продукт.   Как происходит процесс построения корпоративного тренинга? Чаще всего компания понимает, что ей не хватает каких-то знаний в определенных направлениях. По своему опыту, если возникает какая-то задача у HR-специалиста или у тимлида, что команду нужно подтянуть по знаниям, например, по JavaScript, то мы просто приезжаем от Учебного центра CyberBionic Systematics и предоставляем перечень тех курсов и материалов, которые уже существуют. Если компании необходимо подготовить, допустим, Frontend-разработчиков, то мы приезжаем с теми наработками, которые уже есть. Также предварительно готовим конкретное предложение, если от компании уже поступили рекомендации, что, например, нужно сделать больший акцент на объектно-ориентированное программирование, на библиотеку, на определенные инструменты. То есть, мы подготавливаем предложение таким образом, чтобы высветлить те проблемы, которые возникают перед разработчиками и дополнительно добавляем какие-то материалы, которые могут поспособствовать дальнейшему росту специалистов. Мы проводим встречу с компетентными лицами. Собираемся с тимлидерами, с senior-разработчиками, они высказывают свои пожелания, они корректируют эту программу, и мы берем время на доработку дополнительных материалов. У нас очень много опыта по работе с киевскими компаниями. Очень часто компания Terrasoft заказывала именно абсолютно новую, индивидуальную программу. Они смотрели на то, что у нас есть, но вносили корректировки, которые требовали разработки 30-40 часов, под свои проекты. Чтобы обучение было действительно качественным и эффективным, чтобы компания получила из этого выгоду, специалистам компании необходимо озвучить, какие проблемы есть и в каком направлении нужно учить команду. В большинстве случаев тимлид и senior-разработчик понимают, что у его 10-ти мидлов, джуниоров и других специалистов не хватает опыта в определенных заданиях. Обычно это знания выборочные и их нужно подтянуть, или их просто нет, тогда нужно донести до слушателей. Наша задача понять, чего не хватает для того, чтобы специалисты были действительно продуктивными, и их работа была результативная. Для этого нужно подготовить программу, которая принесет пользу компании и специалисты будут удовлетворены. Мы расскажем им, что нужно знать и как нужно работать. Задачи компании будут решатся, а рабочих проблем должно стать меньше после того, как тренинг успешно закончится.   Какие формы обучения наиболее подходят для IT-специалиста? Чтобы обучение было максимально эффективным, я думаю, его необходимо комбинировать. Использовать обучение вместе с тренером, когда он будет своим примером мотивировать разработчика, заставлять что-то новое учить и двигаться дальше. Также комбинировать обучение необходимо с добавлением онлайн-составляющих, дополнительной литературы. Если брать корпоративное обучение, то максимально эффективное будет очное и онлайн, когда приезжает тренер или обучает через скайп и подобные ресурсы. Непосредственно взаимодействуют все группы слушателей и дополнительно к этому добавляется обучение в видеоформате. Для большинства проектов не всегда есть возможность оторвать людей от производственного процесса, есть определенные часы, в которые тренеру можно пообщаться с коллективом, рассказать теоретическую часть, но не всегда у разработчиков есть возможность полностью переключиться на подобного рода обучение. Обучения, когда в течение 5 дней в неделю по 5 часов учат определенную технологию, я считаю не очень эффективным, потому что информации очень много, не хватает времени, чтобы её освоить и закрепить. Я считаю, что обучение должно быть постоянным, интенсивным, но при этом в меру, чтобы была возможность переварить саму информацию. Чтобы был максимальный эффект, необходимо комбинировать очное и онлайн-обучение, когда тренер рассказывает материал и добавлять видеоформат обучения. Конечно, в идеале было бы перевести все на видеоформат и сделать так, чтобы слушатели только смотрели видеоматериалы, но у многих часто возникают вопросы. Если брать, например, проект ITVDN, то корпоративное обучение подразумевает еще и консультации, то есть команда может взять себе набор видеоуроков. Создатели и авторы курсов ITVDN хорошо понимают, что именно и в какой последовательности учить и какой эффект будет максимально достигнут. Мы можем составить индивидуальную программу, сделать временные метки и консультировать команду уже по ходу обучения, чтобы они смотрели все в видеоформате и не отрывались от рабочего процесса, при этом мы будем проверять результаты тестирования и отвечать на возникшие вопросы в ходе обучения. Мы открыты для диалога с компаниями, которые хотят мотивировать своих разработчиков и организовывать для них обучение. Наша команда готова разрабатывать индивидуальные программы, создавать индивидуальный график и подход к каждой компании в отдельности. У каждой компании свои собственные бизнес-процессы, своя корпоративная культура и всех под одну гребенку поставить не выйдет, поэтому мы готовы свои процессы подстроить под график конкретной организации.   Как ты посоветуешь "расшаривать" знания, делиться опытом внутри команды? Я считаю, что лучшего всего организовывать мастер-классы, когда сама команда для себя что-то полезное рассказывает. В команде всегда есть разработчики, у которых больше опыта. Неплохо было бы организовать день мастер-классов, составить график, где каждый разработчик должен выступить в течение 10-20-ти минут, рассказать о чем-то новом, показать технологию, сделать минимальную презентацию и просто поделиться знаниями, которые он получил на последнем проекте или вычитал, например, в статье. Польза в этом всем в том, что все понимают, над чем они работают, с какими сталкиваются задачами и технологиями, поэтому такие мастер-классы могут быть максимально эффективными для команды. Если компания пишет, например, используя Angular, то все мастер-классы нужно заточить под Angular и культивировать освоение тех частей этой библиотеки, которые необходимы для работы в проекте. Тимлидер может составить список докладов, и каждый сможет их проводить, будет общая копилка тех тем, по которым разработчик может провести мастер-класс и сделать расписание – это будет наиболее эффективный способ поделиться знаниями в команде. Также как способ - экстремальное программирование, вместе работать с одной задачей. Кто-то один знает процесс и диктует, а второй набирает код. Экстремальное программирование никто не отменял, но не в каждом проекте оно может примениться, чтобы более опытный специалист смог передать свои знания.

Об авторе Юрий Думов работает архитектором программного обеспечения в SAP, имеет более 10 лет опыта в разработке веб и мобильных приложений. Прежде всего, давайте введем некоторые сокращения. Internationalization - достаточно длинное слово, поэтому предлагаю его заменить в нашем контексте на “intl”. Интернационализация в общем плане может быть разделена на следующие подпункты: Определение пользовательской локали Перевод UI-элементов, заголовков, подсказок и прочего Поддержка местных специфических сервисов, таких как даты, валюты и числа На заметку: в этой статье я заострю ваше внимание лишь на front-end части. Мы разработаем несложное универсальное React-приложение с полной поддержкой интернационализации. Для начала предлагаю воспользоваться моим репозиторием. Здесь у нас есть веб-сервер Express для серверного рендеринга, вебпак для построения клиентского JS, Babel для конвертации современного JavaScript в ES5. Также мы будем использовать npm-run, nodemon для запуска веб-сервера под средой разработчика и webpak-dev-server для ассетов. Нашей точкой входа в серверное приложение будет служить server.js. Здесь мы загружаем Babel и babel-polyfill для создания прочего серверного кода в современном стандарте JavaScript. В качестве бизнес-логики сервера мы используем src/server.jsx. Тут мы устанавливаем Express-сервер для прослушки порта 3001. Для рендеринга мы используем очень простой компонент components/App.jsx, который также является частью точки входа в универсальное приложение. Точкой входа в клиентский JS нам служит src/client.jsx. Тут мы фиксируем корневой компонент - component/App.jsx - для placeholder'а react-view в HTML-разметке, предоставляемой Express-сервером. Таким образом, сейчас мы склонируем репозиторий, запустим npm-install и выполним nodemon и webpack-dev-server одновременно в двух консолях. В первой консоли: И во второй: Наш веб-сервер должен быть доступен по localhost:3001. Откройте предпочитаемый вами браузер и убедитесь в этом сами! Итак, мы готовы начать. Определение пользовательской локали Существует два возможных решения этого вопроса. По какой-то причине большинство популярных веб-сайтов, включая Skype и NBA, используют гео-IP для определения местоположения пользователя, таким образом определяя его родной язык. Подобный подход не только является дорогим в плане реализации, но и еще не совсем точным. Сейчас очень много людей путешествует, по этой причине местоположение пользователя не является надежным ориентиром при выборе подходящего языка приложения. Вместо этого мы предпочтем второй способ решить данную проблему при помощи обработки на стороне сервера заголовка Accept-Language. Этот заголовок отправляется любым более-менее современным браузером.   -Language Этот заголовок предоставляет информацию о возможных вариантах языка, принятого в качестве ответа. Каждый язык обладает своим «приоритетом», показывая, как часто пользователь может его использовать. По умолчанию уровень «приоритетности» равен 1. К примеру, «Accept-Language: da, en-gb;q=0.8, en;q=0.7» означает «я предпочитаю датский, но могу также принять британский или другие виды английского».   (Также стоит упомянуть, что сей подход так же несовершенен. К примеру, пользователь может посетить ваш веб-сайт из интернет-кафе или публичного ПК. Лучше всего разработать виджет, при помощи которого пользователь на интуитивном уровне сможет поменять язык сайта.)   Реализация определения локали пользователя Вот пример кода веб-сервера Node.js. Мы используем пакет accept-language, что извлекает локали из http-заголовков и находит наиболее предпочтительные, исходя из поддерживаемых вашим веб-сайтом. Если таковые не были найдены, тогда сайт будет использовать свою дефолтную локаль.   Приступим к установке пакетов: После чего в src/server.jsx у нас будет следующее: Здесь мы импортируем accept-language и устанавливаем поддержку английских и русских локалей. Также мы реализовываем функцию detectLocale, что извлекает значение локали из куки. Если ни одна не была обнаружена, начинается обработка Accept-Language. Наконец, мы выбираем дефолтную локаль. После обработки запроса мы добавим заголовок Set-Cookie для обнаруженной локали в ответ. Это значение будет использовано для всех последующих запросов.   Перевод UI-элементов, заголовков, подсказок и прочего Здесь я собираюсь использовать React Intl-пакет. Это наиболее популярная и, так сказать, проверенная боем реализация интернационализации для React-приложений. Впрочем все библиотеки так или иначе строятся по одному принципу: они обеспечивают нас компонентами высшего порядка, что внедряют уже готовые функции интернационализации для обработки сообщений, дат, номеров, валют посредством специальных фич React.   Во-первых, мы должны установить провайдер интернационализации. Для этого мы немного изменим src/server.jsx и src/client.jsx. src/server.jsx:          здесь src/client.jsx: Так, теперь IntlProvider-дочерний компонент получит доступ к функциям интернационализации. Давайте добавим переведенный текст в наше приложение и клавишу для изменения локали. У нас есть два способа, как это можно сделать: через FormattedMessage или через formatMessage – функцию. Разница в том, что компонент будет обернут в span-тэг, что хорошо для текстовых данных, но не хорошо для значений HTML-атрибутов, таких как alt и title. Давайте опробуем и их!   Вот src/components/App.jsx: Отметьте, что атрибут id должен быть всегда уникальным для всего приложения в целом, так что было бы не лишним установить для себя некоторые правила именования сообщений. Я предпочитаю следовать формату «имяКомпонента.некийУникальныйИдентификатор». В качестве некой дефолтной локали будет использовано сообщение defaultMessage. Атрибут description предоставит некую информацию для переводчика.   Перезапустите nodemon и обновите страницу в браузере. Вы должны увидеть «Hello World». Но если вы открываете статью при помощи инструментов разработчика, вы увидите, что текст теперь внутри тэга span. В этом случае это не ошибка, но иногда мы предпочитаем просто получить текст, без никаких дополнительных тэгов. Для этого нам нужен прямой доступ к объекту интернационализации React Intl.   Давайте вернемся назад к src/components/App.jsx: Нам нужно написать гораздо больше кода, чем раньше. Во-первых, мы используем injectIntl, который «упаковывает» наш компонент приложения и внедряет intl-объект. Чтобы получить переведенное сообщение, нам нужно вызвать formatMessage и передать в качестве параметра message. Этот message должен иметь свой уникальный идентификатор и атрибуты defineMesasges из React Intl.   Лучшее, что есть в React Intl, так это его экосистема. Давайте добавим babel-plugin-react-intl к нашему приложению и построим словарь трансляции. Мы передадим этот словарь переводчикам, которым не нужно никаких задатков программирования для выполнения своей работы. .babelrc: Перезапустите nodemon, и вы увидите, что папка build/messages была успешно создана в корневой директории проекта, вместе с некоторыми другими папками и файлами внутри. Теперь нам необходимо собрать эти файлы в один JSON. Для этого вы можете использовать мой скрипт. Сохраните его как scripts/translate.js.   Теперь нам нужно добавить новый скрипт в package.json: Что же, попробуем! В конце вы должны увидеть файл en.json в build/lang. И все работает! Теперь пришло время для кое-чего поинтересней. На стороне сервера мы можем загрузить все переводы в память и, соответственно, выдавать их в зависимости от характера запроса. Однако на клиентской стороне этот подход неприемлем. Потому вместо этого мы будем один раз принимать json-файл со всеми переводами, а клиент автоматически определит, какой из текстов ему нужен.   Скопируем результирующий файл в public/assets. На заметку: если вы пользуетесь Windows, симлинки для вас недоступны. Таким образом, вам нужно будет вручную копировать команды каждый раз, как только вы будете перестраивать ваши переводы. public/assets/ru.json применим следующее: Теперь нам нужно повязать серверный и клиентский коды. Для сервера наш src/server.jsx должен выглядеть так: Здесь мы делаем следующее: Кэшируем сообщения и специфичный для данной локали JS для валют, DateTime, Number во время запуска приложения. Расширяем метод renderHTML так, что мы можем вставить специфичный для данной локали JS прямо в разметку. Предоставляем переведенные сообщения IntlProvider (все те сообщения теперь доступны в качестве дочерних компонентов). Что же касается стороны сервера, во-первых, нам нужно установить библиотеку для выполнения AJAX-запросов. Я предпочитаю использовать изоморфное обновление, так как, скорее всего, нам предстоит запрашивать данные из сторонних API, и изоморфное обновление очень хорошо с этим справляется. Вот src/client.jsx: Также мы должны затронуть src/server.jsx, чтобы Express предоставлял json с переводом на сторону клиента. Заметьте, что на продакшине вы, скорее всего, будете использовать что-то вроде nginx. После инициализации JavaScript, client.jsx возьмет локаль из куки и запросит JSON с переводом. Во всем остальном наше приложение будет работать, как и раньше. Пришло время проверить, как все будет работать в браузере. Откройте вкладку «Network» в панели разработчика и удостоверьтесь, что JSON с переводом был успешно получен нашим клиентом. Подведя итог, давайте добавим небольшой виджет для изменения локали в src/components/LocaleButton.jsx: И так же в src/components/App.jsx: Заметьте, как только пользователь меняет свою локаль, мы перезагружаем страницу, чтобы убедиться, что новый JSON-файл с переводом был успешно извлечен. Теперь же время протестировать! Окей, мы изучили, как определять локаль пользователя и как отображать переведенные сообщения. Перед тем, как двигаться в направлении заключительной части, давайте обсудим пару также немаловажных нюансов. Плюрализация и шаблоны В английском большинство слов могут принимать одну или две возможные формы: «одно яблоко», «много яблок». В других языках все намного сложнее. К примеру, русский имеет 4 различные формы. Надеемся, React сумеет справиться и с этим. Он также поддерживает шаблоны, так что вы можете предоставить переменные, которые могут быть подставлены в шаблон во время рендеринга. Вот как это работает. В src/components/App.jsx у нас есть: Тут мы определяем шаблон с переменной count. Мы напечатаем или «одно яблоко», если значение переменной равно 1, 21 и так далее, или «два яблока» в противном случае. Нам нужно передать все переменные в formatMessage. Давайте перестроим наш файл переводов и добавим русский перевод для теста. Вот наш public/assets/ru.json файл: Теперь все случаи предусмотрены! Поддержка местных специфических сервисов, таких как даты, валюты и числа Ваша информация будет представляться по-разному в зависимости от локали. К примеру, русская локаль нам покажет $500.00 и 12/10/2016.   Intl предоставляет React-компоненты для такого типа данных, которые автоматически обновляются каждые 10 секунд, если вы за это время не перезаписывали значения. это в src/components/App.jsx: Обновите браузер и проверьте страницу. Вам необходимо будет подождать 10 секунд, чтобы увидеть, как обновится FormattedRelative.   Круто, не правда ли? Что же, теперь мы можем столкнуться еще с одной проблемой – универсального рендеринга.   В среднем между формированием разметки и инициализацией JS проходит порядка 2-х секунд. Это значит, что все DateTime`сы, сгенерированные на странице, могут иметь разные значения на стороне клиента и сервера. Что, как следствие, разрушает универсальный рендеринг.   Вот src/server.jsx: вот src/client.jsx: Перезапустите nodemon и проблема почти исчезнет! Она может, правда, остаться в случае, если вы используете Date.now() вместо показаний, записанных в базе. Чтобы сделать пример более «жизненным», заменим в app.jsx Date.now() на последний таймштамп, что-то вроде 1480187019228.   (Впрочем, вы можете столкнутся с другой проблемой – когда сервер не в состоянии отрендерить DateTime в нормальном формате. Это потому, что 4 версия Node.js по умолчанию не поддерживала Intl.) Звучит слишком хорошо, чтобы быть правдой, не так ли? Мы как истинные фронт-енд разработчики всегда были на стороже того, что касается браузеров и платформ. React Intl использует нативный браузерный API для обработки форматов DateTime и Number. И, несмотря на тот факт, что подобная функциональность была представлена в 2012 году, до сих пор есть современные браузеры, которые ее все еще не поддерживают. Даже Safari поддерживает ее только частично. Вот таблица с детальной информацией: ​ Это значит, что если вы желаете покрыть большинство браузеров, которые не поддерживают Intl API на нативном уровне, polyfill для вас просто незаменим. Хвала Всевышнему, существует Intl.js. С одной стороны, кажется, вот оно – идеальное решение, но, как показывает мой опыт, всегда существуют свои недостатки. Во-первых, вам нужно добавить Js-bundle, что несколько ресурсоемко. Также для уменьшения размера вам нужно будет передавать ваш Intl.Js только для браузеров, у которых нет своей нативной поддержки. Конечно, все эти техники уже давным-давно известны, и существует великое множество статей, посвященных им. Но все равно, Intl.js – не абсолютное решение, так как все же представления DateTime и Number на стороне сервера и на стороне клиента могут несколько отличаться, что, разумеется, влечет за собой ошибки при серверном рендеринге.   Наконец, я пришел к своему собственному решению, которое хоть и имеет свои недостатки, но мои запросы в большинстве случаев оно устраивает. Я реализовал очень поверхностный polyfill, что имеет лишь небольшую часть из требуемой функциональности. В то время, как в большинстве случаев подобное решение непригодное, оно лишь добавляет лишние 2 КБ к размеру JS-файла, так что даже нет необходимости реализовывать динамическую загрузку кода для устаревших браузеров, что значительно упрощает решение в целом.   И в заключение Возможно, сейчас вас не покидает чувство, как будто здесь написано слишком сложное решение. Также, возможно, сейчас вы подумываете о том, чтобы реализовать все самим. Я бы не советовал этого делать. В конце концов, вы все равно придете к выводам, представленным в данной статье. Или, что хуже, зайдете в тупик одного решения и не сможете увидеть остальные. Вы можете подумать, что можно легко решить проблему с Intl API, используя вместо него Moment.js (я специально не рассматривал другие библиотеки, так как они либо неподдерживаемые, либо неиспользуемые). К счастью, я уже опробовал это, так что я могу сохранить вам много времени. Moment.js монолитен и очень тяжел, так что если для кого-то он и подойдет, то остальная масса пользователей будет неудовлетворенной результатом. Разработка собственного polyfill не звучит интригующе, так как вам наверняка придется выделить определенное время для борьбы с возникающими при этом багами. Подведя итог, могу лишь сказать, что не существует идеального решения касательно проблемы на данный момент: просто выберите то, что вам подойдет лучше всего.   Надеюсь, эта статья дала вам все, что нужно знать для создания интернационализируемого React front-end приложения. Теперь вы выучили, как определять локаль пользователя, сохранять ее в куки, писать виджет для изменения локали и многое другое! Также вы ознакомились с некоторыми возможными проблема и ловушками, в которые вы можете попасть в процессе написания приложения.   Удачи в разработке! Автор перевода: Евгений Лукашук Источник

Об авторе Сара Дрезнер - заслуженный спикер и senior разработчик в Microsoft, автор статьей о трюках и хитростях CSS. Нельзя просто так упустить все интриги, возросшие вокруг существующий JavaScript - фреймворков, но также не стоит забывать, что они явно не являются универсальными и каждый тип проекта требует что-то "свое". Возможно, вы не захотите устанавливать большое количество различных дополнений, чтобы просто реализовать небольшую абстракцию. Возможно, адаптация проекта под новые системы сборки, различные методы деплоя будет означать большое количество времени и усилий, которые вы будете не в состоянии включить в прайс клиенту. Возможно, вы не хотите писать в HTML JavaScript. Список может расти до бесконечности. Что многие люди могут не знать, так это то, что вы можете легко внедрить Vue.js в ваш проект точно так же, как вы внедряете jQuery. Не нужно ничего перестраивать. Vue достаточно гибкий - в том плане, что вы можете его использовать прямо в HTML. Итак, представим, что ваш код имеет следующий вид: Вы можете в буквальном смысле изменить скрипт-тег и продолжить использовать HTML & JS точно так же, как вы использовали его до этого. Вам не нужно ничего переписывать. Вам не нужно интегрировать веб-паки. И вам определенно не нужно устанавливать никаких криповых чудовищ. Вы можете заменить тэги и оставить разметку "как есть". Что радует, так это несказанная простота, гибкость и адаптируемость Vue.js, что вы можете увидеть на протяжении чтения данной статьи. Что же касательно размера, тут нас тоже ждет приятная особенность: всего лишь 86 КБ для версии 2.5.3 и 87 для более новой версии 3.2.1. Давайте рассмотрим некоторые наиболее распространенные примеры использования нового фреймворка и убедимся в его неоспоримых преимуществах. Перехват пользовательского ввода Наиболее распространенным примером использования JavaScript  является отлавливание введенной пользователем в веб-формы информации. В нашем примере для упрощения мы не будем рассматривать комплексные формы, но для понимания этого будет целиком достаточно. Чтобы отловить информацию, вводимую пользователем, мы можем сделать следующее: See the Pen 1 by Jeka Muzyka (@jeka-muzyka) on CodePen. See the Pen 2 by Jeka Muzyka (@jeka-muzyka) on CodePen. Я использую этот пример, потому что он наглядно демонстрирует некоторые сильные стороны Vue.js. Он реализует особенности react, что делает его очень чуствительным в плане изменений. Демонстрацию вы можете увидеть, когда попытаетесь ввести что-то. Как можно заметить, вся информация обновляется практически мгновенно. Вы также можете заметить это и в версии с JQuery - контролируя элементы DOM-дерева и работая с событиями, вызываемыми при изменении содержания его элементов. В версии Vue.js мы сохраняем состояние элемента. Если более детально, то мы привязываем к нашему конечному скрипту DOM-элемент напрямую. Особенность в том, что даже в случае изменения структуры DOM-дерева и HTML в целом, конкретный DOM-элемент будет надежно привязан к нашему Vue.js - событию. Де-факто, на вводе мы используем атрибут v-model, тем самым обозначая хранение информации этого поля в JavaScript. Однако это далеко не единственный способ хранения состояния. Потому двигаемся дальше. Хранение введенных данных в рамках индивидуального события Особенность работы Vue.js заключается в том, что нам не нужно думать об особенностях реализации конкретного DOM-события. По сути, мы уже знаем, что мы желаем "перехватить". Мы просто указываем событию, на который из элементов срабатывать. Тогда как с использованием JQuery мы жестко привязываемся к структуре DOM и прочим DOM-событиям. Увидеть разницу мы сможем в следующем примере: See the Pen new by Jeka Muzyka (@jeka-muzyka) on CodePen. See the Pen 4 by Jeka Muzyka (@jeka-muzyka) on CodePen. В этой версии JQuery был упрощен, так как нам не нужно было отлавливать события при каждом нажатии клавиши, но в то же время все остальные условия соблюдены. Наш код в jQuery также будет подобен этому: "Отловите элемент, просмотрите, что он делает, перехватывайте изменения, обрабатывайте полученные данные." Сравним: во Vue мы контролируем все изменения DOM-дерева. Мы привязываемся к конкретным элементам. По сути, мы имеем небольшую абстракцию под названием v-model.lazy. Vue тепер знает, что сохранять состояние данных до того, как были произведены первые изменения, нельзя. Отлично! Классы Следующая вещь, которую мы сейчас рассмотрим, является привязкой CSS-классов, так как наш всеми любимый и обожаемый Гугл сообщает, что это также наиболее популярный случай использования jQuery. See the Pen 5 by Jeka Muzyka (@jeka-muzyka) on CodePen. See the Pen 6 by Jeka Muzyka (@jeka-muzyka) on CodePen. Опять же, что мы здесь можем видеть, так это то, что в версии с jQuery мы храним состояние объекта в DOM-дереве. Элемент имеет свой класс, jQuery принимает решение на базе существующего класса, проверяющего привязку к DOM. В версии с Vue мы храним условие и применяем к нему стили в зависимости от состояния этого условия. Мы не обращаемся к DOM за этой информацией, мы храним ее сами. Мы храним active в данных, кнопка изменяет состояние условия и, в зависимости от условия, применяется к примеру .red. Даже состояния доступа, aria-pressed, сохраняются гораздо быстрее, так как у нас нет необходимости хранить все в vue-скрипте. Мы можем изменять состояние напрямую при помощи слова active. Если вы думали, что использование Vue породит большее количество кода, последние несколько примеров должны были заставить вас убедиться в обратном. Скрытие и отображение Другой общий случай использования jQuery является отображением и сокрытием элементов. jQuery всегда хорошо справлялся с этой задачей, потому давайте посмотрим, как все будет выглядеть со стороны Vue. See the Pen 7 by Jeka Muzyka (@jeka-muzyka) on CodePen. See the Pen 8 by Jeka Muzyka (@jeka-muzyka) on CodePen. Оба фреймворка успешно справляются с поставленной задачей, но все же и здесь есть свои причины, почему я отдаю предпочтение Vue.js. Vue обладает инструментом под названием Vue devtolls. Это не то же самое, что Chrome devtools, но когда я их использую, я получаю больше специфической информации, связанной непосредственно с Vue.js И в jQuery и в Vue элементы успешно скрываются и появляются вновь. Но что, если что-то пойдет не так? Что, если что-то в нашем коде работает не так, как это было задумано? В случае с jQuery для отладки мы бы скорее всего использовали console.log и были бы таковы. Это все, конечно, хорошо, но в случае с Vue он сам нам предоставит всю необходимую информацию о нем самом. На пикче ниже мы можем увидеть, как элемент скрывается\появляется и как изменяется его состояние в специальном окне. Если DOM по какой-то причине не будет работать так, как мы от него ожидаем, вся необходимая информация будет легко отображена во Vue. Что еще мне нравится, так это то, что v-if очень удобно принять в других случаях. Я могу использовать v-show, если вещь будет скрыватся и отображатся часто: v-if полностью "демонтирует" элемент, тогда как v-show просто изменит видимость. Это достаточно важно, так как позволяет улучшить производительность. Я легко могу установить целые каскады условий, в то время как повторить подобное с jQuery - слегка затруднительно. See the Pen 9 by Jeka Muzyka (@jeka-muzyka) on CodePen. See the Pen 10 by Jeka Muzyka (@jeka-muzyka) on CodePen. В этом примере значения с приставкой Vue реагируют на код достаточно натурально и с меньшим объемом кода. Однажды попробовав этот стиль, логику приложений, разработанных под Vue, использовать будет значительно проще. Передача формы Так уж исторически сложилось, что отправка формы посредством Ajax является наиболее "каноничным" примером использования jQuery. А потому мы просто обязаны рассмотреть альтернативу. На самом деле, Vue не обладает встроенными вещами навроде Ajax. Обычно вместо этого здесь используется Axious (js-библиотека для генерации http-запросов). Этот пример будет несколько более сложным, чем предыдущие. Мы собираемся произвести следующее: До начала ввода в форму клавиша будет серой. После чего она примет "активный" класс и станет голубой. Когда мы отправляем форму, страница не будет перезагружаться. Как только форма принята, мы отобразим ответ на странице. See the Pen 11 by Jeka Muzyka (@jeka-muzyka) on CodePen. Здесь за управление классом клавиши отвечают строки 2-10. Похоже на то, что мы делали ранее.  Мы передаем в параметр под названием событие форму и говорим event.preventDefault(), дабы запретить перезагрузку страницы. После чего мы собираем всю информацию с формы и отправляем через Ajax запрос (.done()). See the Pen 12 by Jeka Muzyka (@jeka-muzyka) on CodePen. В версии Vue мы биндим поля через v-model. Мы проверяем имена для связки с классом. Вместо передачи информации и загрузки страницы event.preventDefault(), нам всего лишь нужно написать @submit.prevent в нашем элементе формы. Для передачи запроса же мы используем Axious. Конечно, так же можно произвести и валидацию, отлавливание ошибок, тесты и так далее. Но для понимания логики работы с Vue, как мне кажется, достаточно и этих небольших примеров. И в заключение Нет ничего плохого в том, чтобы продолжать использовать jQuery. Цель этой статьи - всего лишь показать, что Vue так же хорош в качестве некой такой абстракции для небольших сайтов. Этот фреймворк оптимален в размерах, прост  в работе и освоении, достаточно тривиален и прекрасно интегрируется в HTML & JS без необходимости перестраивать приложение. Благодаря гибкости Vue передача кода на стадию билда и общая компонентная структура не являются чем-то сложным. На самом деле - это очень даже весело. Попробуйте сами! Вы можете скаффолдить весь Vue на уровне продакшена просто при помощи пары терминальных команд. Подобным образом вы можете работать с отдельными компонентами, не трогая HTML & JS. Вам не нужно менять конфигурацию вашего веб-пака, разве что вы не захотите сделать что-то специфическое. Vue хорош во всем, что касается адаптивности, так как вам не нужно ничего менять в вашей разметке, чтобы работать с новым, качественными фреймворком. Удачи в разработке! Автор перевода: Евгений Лукашук Источник

Коротко про мене Мене звати Зел, я розробник-фрілансер із Сінгапуру. У вільний від роботи час я люблю розбиратися в коді і принагідно публікувати у своєму блозі ті цікавості, які я виявив чи вивчив. Вступ Швидше за все вам уже доводилося чути про такий термін, як REST API, особливо якщо ви стикалися з необхідністю отримання даних з іншого джерела (такого як Twitter або GitHub). Але що ж все-таки це таке? Що ми можемо робити з цим і як ми можемо це використовувати? У цій статті ви дізнаєтеся все про REST API для того, щоб працювати з ними та читати пов'язану з ними документацію. Що ж таке REST API? Давайте уявимо, що ви намагаєтеся знайти фільми про Бетмена на YouTube. Ви відкриваєте сайт, вбиваєте у форму пошуку слово «Бетмен», тиснете «Окей» і бачите список фільмів про супергероя. Так само працює і WEB API. Ви шукаєте щось і отримуєте список результатів від ресурсу, до якого здійснюєте запит. Дослівно API розшифровується як Application Programming Interface. Це набір правил, що дозволяє програмам спілкуватися одна з одною. Розробник створює API на сервері та дозволяє клієнтам звертатися до нього. REST – це архітектурний підхід, що визначає, як API мають виглядати. Читається як "Representational State Transfer". Цьому набору правил і слідує розробник під час створення свого застосунку. Одне з цих правил каже, що при зверненні до певної адреси ви повинні отримувати певний набір даних (ресурс). Кожна адреса - маршрут, пакет даних - запит, у той час як результуючий ресурс – відповідь. Анатомія запиту Важливо розуміти структуру запиту: Маршрут відправки. Тип методу. Заголовки. Тіло (або дані). Маршрут – це адреса, за якою надсилається ваш запит. Його структура приблизно така: Root-endpoint - це точка прийому запиту на стороні сервера (API). Наприклад, кінцева точка GitHub - https://api.github.com. Шлях визначає ресурс, до якого здійснюється запит. Це щось на кшталт автовідповідача, який просить вас натиснути 1 для одного сервісу, 2 для іншого і так далі. Для розуміння того, які саме шляхи вам доступні, вам слід переглянути документацію. Наприклад, припустимо, ви хочете отримати список репозиторіїв для конкретного користувача на Git. Згідно з документацією, ви можете використати наступний шлях для цього: Вам слід підставити під пропуск ім'я користувача. Наприклад, щоб знайти список моїх репозиторіїв, ви можете використати маршрут: Остання частина маршруту – це параметри запиту. Технічно запити не є частиною REST-архітектури, але на практиці зараз все ґрунтується на них. Тож давайте поговоримо про них детальніше. Параметри запиту дозволяють використовувати у запиті набори пар «ключ-значення». Вони завжди починаються знаком питання. Кожна пара параметрів після чого розділяється амперсандом (щось подібне до цього): Як тільки ви намагаєтеся отримати список репозиторіїв для користувача, ви додаєте ці три опціональні параметри і після чого отримуєте наступний результат: Якщо ж ви бажаєте отримати список моїх недавно запушених репозиторіїв, вам слід ввести наступне: Отже, як же зрозуміти, що маршрути робочі? Що ж, настав час перевірити їх на практиці! Тестування за допомогою Curl Ви можете надіслати запит за допомогою будь-якої мови програмування. JavaScript може використовувати методи на кшталт Fetch API або JQuery`s Ajax Method. Рубі використовує інше. І так далі. У цій статті я використовуватиму таку утилітку, як Curl. Справа в тому, що вона вказана в офіційній документації для веб-сервісів. Якщо ви зрозумієте, як використовувати цю утиліту, ви зрозумієте, як працювати з API. Після чого ви можете робити запити будь-якою зручною для вас мовою. Перед тим, як продовжити, слід переконатися, що Curl встановлений на вашій машині. Якщо ж він не встановлений, саме час встановити. У такому разі ви отримаєте помилку "command not found". Для того щоб використовувати утиліту, необхідно ввести наступне (за прикладом): І як тільки ви підтверджуєте введення, ви отримуєте відповідь (на зразок цього): Щоб отримати список користувацьких репозиторіїв, вам слід змінити запит за тим же принципом, який був обговорений раніше. Наприклад, щоб отримати список моїх репозиторіїв, вам слід ввести наступне: Якщо ж ви бажаєте включити параметри запитів, переконайтеся, що ви їх екрануєте. Справа в тому, що без екранування знаки питання і рівності розцінюються системою як спецсимволи і виконання команди відбудеться з помилкою. Також спробуйте інші команди та зробіть запити! В результаті ви отримуєте схожі відповіді. JSON JSON – JavaScript Object Notation – загальний формат для надсилання та прийому даних за допомогою REST API. Відповідь, що відправляється Github, також міститься у форматі JSON. Зміст об'єкту цього формату приблизно наступний: Повертаємось до анатомії запиту. Ви вивчили, що запит складається із чотирьох частин: Маршрут відправки. Тип методу. Заголовки. Тіло (або дані). Тепер давайте спробуємо розібратися з рештою. Тип методу Метод позначає тип запиту, який здійснюється; де-факто він є специфікацією операції, яку повинен здійснити сервер. Усього існує п'ять типів запитів: GET POST PUT PATCH DELETE GET – використовується для отримання з боку серверу певного ресурсу. Якщо ви здійснюєте цей запит, сервер шукає інформацію та відправляє її вам назад. По суті, він здійснює операцію читання на сервері. Дефолтний тип запитів. POST – необхідний для створення певного ресурсу на сервері. Сервер створює в базі даних нову сутність та сповіщує вас, чи був процес створення успішним. По суті, це операція створення. PUT та PATCH – використовуються для оновлення певної інформації на сервері. У такому разі сервер просто змінює інформацію існуючих сутностей у базі даних та повідомляє про успіх виконання операції. DELETE – як і випливає з назви, видаляє вказану сутність із бази чи сигналізує про помилку, якщо такої сутності в базі не було. Сам же API дозволяє вказати, який метод має бути використаний у певних контекстних ситуаціях. GET запит у цьому випадку необхідний, щоб одержати список всіх репозиторіїв зазначеного користувача. Також можна використовувати curl: Спробуйте надіслати цей запит. Як відповідь ви отримаєте вимогу про аутентифікацію. Заголовки Заголовки використовуються для надання інформації як клієнту, так і серверу. Взагалі, їх можна використовувати для багато чого; наприклад, та сама автентифікація та авторизація. На офіційній сторінці MDN можна знайти список доступних заголовків. Заголовки являють собою пари ключів-значень. Приклад: Також приклад із використанням curl: (Примітка: заголовок Content-Type у випадку Github для роботи не є обов'язковим. Це всього лише приклад використання заголовка в запиті, нічого більше). Для перегляду надісланих заголовком даних можна використовувати наступне: Тут зірочка відноситься до додаткової інформації, наданої за допомогою curl. > відноситься до заголовків запиту, а <, відповідно, - до заголовків відповіді. Щоб надіслати інформацію з curl, використовуйте наступне: Для відправки множинних полів ми можемо використати декілька подібних конструкцій: Також, якщо необхідно, ви можете розбити ваш запит на декілька ліній для забезпечення більшої читабельності: Якщо ви знаєте, як розгорнути сервер, ви можете створити власний API та протестувати свої запити. Якщо ж ні, обов'язково спробуйте. Існує безліч інформації, присвяченої цьому. Якщо ж бажання розгортати свій сервер немає, спробуйте безкоштовну опцію Request bin. Після чого ви отримаєте адресу, яку спокійно зможете тестувати. Переконайтеся, що ви створюєте власний request bin, якщо ви хочете протестувати саме ваш запит. Зважайте на те, що дефолтний час існування request bin – 48 годин. Тому ті приклади адрес, які я тут наводжу, на момент прочитання статті давно застаріли. Тепер спробуйте надіслати деяку інформацію, після чого оновіть свою сторінку. Якщо все пройде успішно, ви побачите наступне: За замовчуванням curl відправляє дані так, ніби вони були відправлені за допомогою полів форм. Якщо ви бажаєте надіслати дані через JSON, ваш Content-Type повинен дорівнювати application\json, внаслідок чого вам необхідно відформатувати дані у вигляді JSON-об'єкту. По суті, це все, що вам необхідно знати про структуру запиту. Тепер давайте згадаємо про аутентифікацію. Що ж це таке і навіщо вона потрібна? Аутентифікація Ви б не дозволили нікому чужому отримати доступ до вашого банківського рахунку без спеціального дозволу, чи не так? За таким же принципом розробники не дозволяють неавторизованим користувачам робити на сервері все, що їм заманеться. Оскільки POST, PUT, PATCH, DELETE запити змінюють базу даних, розробники повинні завжди бути на варті неавторизованого доступу до них. Проте іноді GET запити також вимагають аутентифікації (наприклад, коли ви хочете переглянути стан вашого банківського рахунку). У випадку з вебом існує два способи представитися системі: Через нік і пароль (базова автентифікація) Через секретний токен Секретний токен дозволяє представити вас системі через соцмережі на кшталт Github, Google, Twitter і так далі. Тут же я розгляну лише базову автентифікацію. Для виконання базової аутентифікації ви можете використовувати наступне: Спробуйте залогінитися під свій профіль за запитом, вказаним вище. Як тільки ви успішно увійдете у свій профіль, ви побачите відповідь "problems parsing JSON". Чому? Все просто: системі ви представилися, але - от біда - нічого корисного їй не надали. Усі типи запитів потребують певної інформації. Тепер же давайте поговоримо про статус-коди та можливі помилки. Статус-коди та можливі помилки Деякі з повідомлень, наведених вище, якраз і належать до кодів помилок. Логічно, що вони з'являються лише тоді, коли щось іде не зовсім так, як було заплановано. Що ж до статусу кодів, вони дозволяють вам пізнати успіх (або невдачу) під час виконання певного запиту. Бувають статус-коди від 100 до 500+. Загалом їх можна поділити на такі групи: 200+: запит успішний 300+: запит перенаправлений на інший маршрут 400+: помилка на стороні клієнта 500+: помилка на стороні сервера Ви можете відлагодити статус відповіді за допомогою –v або –verbose. Наприклад, я спробував отримати доступ до певного ресурсу без авторизації. Відповідно, я спіймав помилку: У випадку ж, коли запит невірний через помилку в самій інформації, що передається, ви отримуєте статус-код 400: Версії API Час від часу розробники оновлюють свої API. Іноді оновлення можуть бути такими сильними, що розробник бажає здійснити реліз нової версії. У такому випадку, якщо ваш застосунок ламається, це відбувається через те, що ви писали код з урахуванням старого компонента, тоді як новий дещо відрізняється в плані реалізації. Запросити поточну версію API можна двома шляхами. Через маршурт Через заголовок Наприклад Твіттер використовує перший спосіб. На момент написання версія Twitter API була 1.1. Водночас GitHub використовує інший спосіб: На закінчення У цій статті ми розглянули, що таке REST API і як його можна використовувати спільно з curl. Крім того, ви також вивчили, як залогінитись за допомогою запиту і що таке статус-код. Я щиро сподіваюся, що ця стаття дозволила вам підвищити свій рівень загальних і не дуже знань щодо такого важливого аспекту веб-розробки. Буду радий будь-яким вашим коментарям тут. Автор перекладу: Євген Лукашук Джерело Ще більше матеріалів на цю тему: ASP.NET Core Web API. Практичний курс ASP.NET WEB API 2 REST API в Node.js  JAX-RS Client API. Asynchronous REST Створення API на PHP та JavaScirpt

В свое время я работал и продолжаю работать сейчас разработчиком. Начал в качестве веб-программиста в 2004 году, перешел на полный стек в 2009 году, начал разработку для iOS в 2013. Я начал свой путь программиста с прочтения трех книг: одна была про HTML, другая – про CSS и третья, соответственно, об SQL. Прочие знания я получил из Google, Stack Overflow и блогов. Вообще, Интернет – прекрасная штука. Каждый день я прочитывал по 5 или больше тематических статьей. И, что самое главное, все эти знания были бесплатны. В основном мои знания о программировании были получены из университета и опыта работы. Как-то так. Действительно, получается, что большая часть из того, что вы изучаете о программировании, были получено в основном во время решения определенных практических задач. То, что меня также интересует – это чтение различных специализированных книг. Увы, но размеры списков по типу «Обязательных к прочтению для разработчиков» выходят далеко за рамки адекватных. Ситуация со сжатым списком из этого списка также ненамного лучшая… Каждая из книг хороша по-своему, но и целой жизни будет мало, чтобы прочитать все это. Лично меня это всегда несколько сбивало с толку, так как выбрать первую книгу для изучения становится весьма проблематично. Потому я и решил немного покопаться в списках и создать один «универсальный» список, в котором будут включены книги, общие для всех рассмотренных списков. Конечно, прочтение всех этих книг не сделает из вас профессионального программиста, но использование того, что было выучено из книг на практике – сделает. Лично я для себя решил выработать привычку прочитывать по крайней мере одну книгу в два месяца. Полный список содержит 139 книг. Все книги, которые вы увидите в этом списке, находятся на вершине популярности рассмотренных списков. В этом списке вы не найдете книгу о том, как стать Java-разработчиком, но вы можете увидеть книги, которые используют язык Java для приведения практических примеров, рассматриваемых тем. Вы сможете найти книгу, направленную на один конкретный язык программирования, но которая также пригодится и для разработчиков на других языках. Также я включил здесь книги, не связанные с разработкой непосредственно, но которые в то же время считаются неплохими для развития особого «программного» мышления. Короче говоря, без лишних слов – я рад представить: Список лучшей литературы для разработчиков 7 упоминаний: Паттерны проектирования: Элементы повторного использования программного обеспечения «Классическая книга, прочтение которой ознакомит читателя с различными паттернами программного проектирования, а также раскроет некоторые секреты наиболее популярных из них.» Джон Сонмец «Еще одно произведение классики, содержащее в себе огромную коллекцию различных паттернов программирования.» Лик Бун Код: Скрытый язык аппаратного и программного обеспечения «Должна быть в закладках у каждого, кто так или иначе связан с программной индустрией, не важно при этом – программист ли он али нет.» Вуди Леонхард «После прочтения этой книги вы поймете, что на самом деле выполняет ваш код и как на самом деле этот код исполняет процессор. Это одновременно и весело, и полезно.» Джон Сонмерц 8 появлений: Эффективная работа с правильным кодом «Я обожаю эту книгу, так как рано или поздно в один прекрасный момент программисту придётся заниматься поддержкой и разработкой уже существующих комплексных систем.» Джейсон Роял «Если вы принимаете участие над работой с большим объемным кодом более пяти лет, эта книга, вероятно, станет вашей новой Библией. Прочтите это и примите в свои сердца.» Джон Сонмерц Люди: Продуктивные проекты и команды «Эта книга оказала на меня наибольшее влияние в свое время. Пожалуй, я могу сравнить ее с эффектом от прочтения Манифеста Анти-Дилберта.» Джоел Сполски «Если вы желаете носить гордое звание тим лидера на практике, нежели на словах – эта книга определенно для вас.» Джеф Атвуд 9 упоминаний: Паттерны разработки корпоративных приложений «Книга очень полезна при разработке массивных приложений, так как она предлагает детальное объяснение ситуаций, когда нужно использовать определенный программный паттерн (а когда наоборот - нет). Даже не могу назвать примерное количеств раз, сколько мне приходилось обращается к данной книге.» Род Хилтон «Обеспечивает читателя каталогом качественных проверенных корпоративных паттернов и ситуаций, советует, когда эти самые паттерны стоит использовать.» Иан Джойс 11 упоминаний: Вступление в алгоритмы «Пожалуй, это лучшая книга для понимания и использования алгоритмов (которые де-факто являются основным инструментом разработчика программного обеспечения).» Вуди Леонхард 12 упоминаний: Чистый код: Пособник мастера программного обеспечения «Если вы пожелаете прочитать книгу, связанную с программированием, определенно – вам стоит обратить свое внимание на эту.» Роберт Грайнер «Это еще одна книга, которой удалось полностью изменить стилистику написания моего кода. Я могу ясно разделить свою жизнь на период до прочтения книги и после.» Джон Сонмерц Рефакторинг: Улучшение дизайна существующего кода «Книга, строго рекомендуемая к прочтению для каждого, кто желает улучшить качество кода.» Деепак Карантх «Обязательна к прочтению каждому, кто так или иначе принимает участие в работе с объектно-ориентированными языками программирования.» Дэниель Рид 14 упоминаний: Мифический человеко-месяц, или Как создаются программные системы «Это классика, но недавно исправленная и дополненная. В высшей степени поразительно то, как она тесно связана с разработкой программного обеспечения. Если вы принимаете участие в программировании, определенно эта книга – обязательна к прочтению.» Джейсон Роел «Бесспорно, единственная классика, посвященная программированию. Позор всякому, кто еще не прочитал ее.» Джеффри Атвуд 15. упоминаний: Прагматичный программист: От новичка к мастеру «Насколько революционна эта книга? Пожалуй, достаточно для того, чтобы развернуть целую издательскую кампанию. Если вы все еще не прочитали ее – это, бесспорно, большое упущение с вашей стороны.» Род Хилтон «Эта книга не только изменит ваш код: она изменит вас как программиста. Наполненная практическими советами по улучшению вас и вашего кода, бесспорно, является отличным приобретением для каждого, кто хочет стать лучшим в сфере разработки программного обеспечения.» Деепак Карант 16 упоминаний: Идеальный код: Практическое пособие по программной архитектуре «Сделайте для себя приятное. Пусть это будет первой книгой, которую вы прочитаете – и первой книгой, которую вы посоветуете другим.» Джеффри Атвуд «Эта книга потрясла меня больше всего. Определенно, после ее прочтения то, как я писал код, и то, что я думал о программировании в целом, претерпело серьезные изменения.» Джон Сонмец   Полный список содержит в себе 139 книг. При желании на языке оригинала его можно рассмотреть здесь. Автор перевода: Евгений Лукашук Оригинал статьи

Добро пожаловать в наш небольшой сборник советов от ведущих разработчиков на платформе Node.JS! Цель сей статьи – обобщить все те знания, которые были в свое время опубликованы в различных обучающих постах или журналах. Автор статьи – Йони Голдберг, независимый разработчик и консультант Node.JS. Итак, начнем! 1) Мониторинг Что это: мониторинг – это такая интересная игра в «найти баг быстрее, чем это сделают твои пользователи». И, помимо прочего, эта игра обладает беспрецедентной важностью. Современный рынок переполнен всеми видами предложений - на любой вкус. Учитывайте: вы должны строго следовать заданной концепции, не переполняя ее различными «доп. фичами». Подберите для себя такое решение, которое удовлетворяет всем требованиям. В противном случае - провал. Разочарованные клиенты. Все просто.   2) «Умное логгирование» - Ваш друг Что это: логи, как правило, очень быстро превращаются в свалку утверждений и записей всех видов и типов. Однако при должном подходе, логи являют собой образец чистоты, легко дающие понять всю необходимую информацию, связанную с программой. Планируйте ведение логов с самого начала: как они будут собираться, храниться и анализироваться. Убедитесь, что желаемая информация (такая, как частота возникновения ошибок и прочее) в любой момент может быть легко извлечена. В противном случае: вы окончите бесконечными копаниями в нечитабельных логах и, в конце концов, потратите уйму времени на «костыли», дабы понять хоть что-то из написанного.   3) Сваливайте все возможные задачи на обратный прокси Что это: увы, но Node.JS ужасен, когда речь заходит о выполнении ресурсоемких задач на центральном процессоре (такие, как g-zip упаковка, SSL-терминация и прочее). Используйте вместо этого промежуточные middleware-сервисы, такие как nginx, HAproxy или облачные. В противном случае: Ваша невинная однопоточная операция займет процессор на длительное время. Как следствие, ваше устройство будет уделять больше времени различным промежуточным задачам, нежели непосредственно Node.JS-приложению. Не буду говорить о производительности.   4) Блокируйте зависимости Что это: код должен быть идентичен для всех сред. Однако, на удивление, можно обнаружить, что NPM творит с зависимостями что-то неимоверное – как только Вы попытаетесь установить пакет в различных средах, программа пытается использовать последнюю версию, характерную для конкретной среды, что, безусловно, вносит свои особенности. Дабы избежать этого, используйте файлы конфигурации. npmrc. Они настраивают NPM таким образом, чтобы тот сохранял текущую версию пакета, не последнюю. Как вариант Вы можете использовать “shrinkwrap”-опцию, так как NPM5 блокирует зависимости по умолчанию. В противном случае: во время тщательного теста QA пропустят версию, которая в продукции будет вести себя неожиданным для разработчика образом. Даже хуже, разные серверы одновременно в том же кластере будут исполнять разный код.   5) Выбирайте правильные инструменты: экономьте время Что это: процесс должен выполняться и перезапускаться в случае ошибок. Возможно, в обычной ситуации в качестве рестартера может сгодиться и что-то наподобие PM2, но в современном мире, где правит балом Докер и его приспешники, все подобные инструменты должны быть подобраны особенно тщательно. В противном случае: использование десятков приложений с сотнями своих инструментов в конце концов приведет к хаосу.   6) Убедитесь, что вы используете только лучшие практики отлавливания багов Что это: как правило, анализ ошибок – наиболее затратная по времени и устрашающая процедура в поддержании стабильности Node.JS-среды. В основном, причина этому – однопоточная модель приложений и отсутствие выработанной стратегии по отношению к ошибкам в многопоточной среде. Быстрых решений не существует, Вы должны в полной мере осознать и приручить это багнутое чудовище.   7) Используйте все ядра процессора Что это: в своей стандартной ипостаси приложения Node.JS используют только одно ядро процессора, в то время как остальные в задаче никакого участия не принимают. Ответственность за утилизацию всех ядер лежит только на Вас. К примеру, для небольших и средних приложений Вы можете использовать Node Cluster или PM2. Для более полновесных программ обратите внимание на репликацию процесса при помощи Docker-кластера (такие, как K8S, ECS) или деплоймент-скрипты на базе инициализации Linux (system – как вариант). В противном случае: Ваше приложение, скорее всего, будет использовать только 25 процентов доступных вычислительных ресурсов (!) или даже меньше. Заметьте, типичный сервер минимум 4-х ядерный, наивный деплой обычного NodeJS использует лишь одно (даже если Вы используете PaaS сервисы наподобие AWS beanstalk)!   8) Разумно планируйте диагностику Что это: работайте с системной информацией как с количеством используемой памяти или REPL и специальных защищенных API. Хотя полагаться на стандартные инструменты и надежней, некоторую ценную информацию и некоторые операции лучше извлекать и производить напрямую в коде. В противном случае: в один прекрасный момент Вы обнаружите, что тратите очень много информации на деплой – поставляя код в продукцию просто затем, чтобы получить некоторую информацию для диагностики.   9) Используйте APM-программы Что это: программы мониторинга вроде APM, чтобы активно оценивать кодовую базу. Посему и их действия могут выходить за рамки действий простых программ мониторинга. К примеру: некоторые APM подсвечивают проблемные транзакции, которые могут вызвать падения производительности на стороне клиента и предполагают причину подобных проблем. В противном случае: Вы можете провести тонны времени на анализ производительности и поиски проблемных мест. Вероятно, Вы так никогда и не будете уверенными, что именно замедляет работу Вашего приложения больше всего и как приложение будет вести себя в «реальном мире».   10) Завершенный код – завершенный продукт Что это: «только идеальный код может быть выпущен в продукцию». Запомните это с самого первого дня разработки. Возможно, это и звучит как что-то из репертуара законченного перфекциониста, но, поверьте, результат того стоит. В противном случае: IT-сообщество вряд ли оценит и сохранит для потомков плохо написанную систему.   11) Обращайте внимание на защиту Что это: Node.JS включает в себя некоторые уникальные защитные механизмы. Понятно и без слов, что более «защищенная» система требует больше времени на ее анализ. В противном случае: что может быть хуже, чем брешь в защите, когда продукт уже в производстве? Просто банальная проблема, которую Вы забыли исправить.   12) Отслеживайте и контролируйте память Что это: Node.JS достаточно неоднозначно работает с памятью: движок v8 обладает ограничением в виде 1.4 ГБ, и были известны случаи, когда код был излишне «памятозатратным». Потому и контроль над использованием памяти – вопрос отнюдь не тривиальный. В небольших приложениях Вы можете настраивать работу с памятью, время от времени используя команды оболочки. Однако в проектах больших масштабов позаботьтесь о выводе состояния памяти в  надежную систему мониторинга. В противном случае: вы обнаружите ежедневную «утечку» памяти в несколько сотен мегабайт, как это произошло с Walmart.   13) Разделяйте клиентскую и серверную часть Что это: для фронт-енд части используйте такие middleware компоненты, как nginx, S3, CDN и прочие. Выполнение подобных задач на Node.JS-сервере очень плохо сказывается на его производительности. Причина этому: обработка великого множества статических файлов в однопотоковой модели. В противном случае: Ваш единственный Node.JS-поток будет занят обработкой сотен html/изображений/angular/react-файлов вместо того, чтобы заняться непосредственно обработкой динамического контента. Или, другими словами, того, для чего и была разработана технология Node.JS.   14) Храните данные вне сервера Что это: сохраняйте любую информацию – будь то пользовательские сессии, кэш, загруженные файлы – на внешнем накопителе. Представляйте, как будто Ваш сервер будет регулярно «падать». Используйте «безсерверную» платформу (например, AWS Lambda). В противном случае: «падение» конкретного сервера в результате приведет не только к утилизации нерабочей машины, но и к падению производительности самого приложения. Более того, зависимость от конкретного сервера значительно уменьшит гибкость всей системы.   15) Используйте инструменты с автоопределением уязвимостей Что это: даже такие проверенные временем зависимости, как Express и другие, имеют бреши, которые время от времени могут ставить всю систему под угрозу. Однако подобное можно легко обойти, если использовать различные бесплатные или коммерческие продукты, которые постоянно проверяются на предмет уязвимостей и могут быть мгновенно исправлены в случае необходимости. В противном случае: держать код в чистоте и без уязвимостей в случае неиспользования соответствующих инструментов затребует постоянного отслеживания новостных сводок и обновлений. Немного напрягает.   16) Присваивайте каждой записи лога свой TransactionId Что это: присваивайте уникальный идентификатор каждой записи в логе. Подобный подход в значительной мере упростит работу и поиск ошибок. К сожалению, из-за асинхронной природы Node.JS реализовать подобное – задача отнюдь не тривиальная. В противном случае: Поиск производственных ошибок будет достаточно длительным. Как следствие, Вы закопаетесь в логе ко всем чертям.   17) NODE_ENV = production Что это: устанавливайте переменной окружения NODE_ENV значение production или development. Это нужно для того, чтобы указать NPM, включить ли оптимизацию или нет – так как многие подобные сервисы обладают опцией автоопределения состояния среды. В противном случае: игнорирование этого нюанса может сильно замедлить производительность. К примеру, если проигнорировать NODE_ENV, используя Express для серверного рендеринга, производительность упадет в три раза!   18) Развертывайте приложение быстро Что это: исследователи отмечают, что команды, которые проводят большее количество Node.JS-размещений, имеют меньший риск столкнуться с целым рядом проблем. Быстрые и автоматизированные размещения, не требующие рискованных ручных этапов и сервисов, в значительной мере ускоряют процесс размещения. Возможно, Вам стоит обратить свое внимание на Docker в комбинации с CI-инструментами. В противном случае: длительное размещение -> падения производительности и человеческие ошибки -> неуверенность команды -> меньшее количество размещений и, как следствие, потенциальных фич.   19) Помещайте NPM-версию в каждое размещение Что это: с каждым новым релизом указывайте в package.json-версию текущего NPM. Это внесет ясность в работе с приложением. Сей фактор важен, так как, к примеру, в среде MicroService некоторые сервисы могут обращать внимание на версию Вашего NPM. Вы можете использовать команду “npm version”, которая укажет версию автоматически. В противном случае: достаточно часто разработчики пытаются исправить баг, часто в конце обнаруживая, что они ищут его не в той версии, в которой стоило бы.   20) Следите за актуальной информацией Традиционное: отслеживайте последние обновления Node.JSб NPM и прочих технологий, с которыми Вы работаете. До новых встреч! Автор перевода: Евгений Лукашук Источник

10 отменных советов как стать лучшим Node.JS разработчиком 2018 года от автора Азата Мардана. Эта статья содержит в себе собранный и тщательно отфильтрованный опыт писателей и спикеров технологии всего Веб-сообщества. Заметка: первоначально заголовком статьи должно было быть «Лучшие практики Node.JS от Гуру Технологии». Эта статья охватывает не «новые» и «лучшие» практики 2017-2018 года, а тщательно выверенные и проверенные временем и практикой паттерны, которые стопроцентно приведут к успеху. И хотя многие из проверенных практик Вам определенно пригодятся в 2018, 2019 и даже более поздних годах, статья не включает в себя такие новшества, как async/await и прочее. Почему? Потому что эти фичи не включены в состав, собственно говоря, кода Node.JS-ядра или кода таких популярных проектов как npm, Express и прочие. Полноценно заниматься разработкой на Node.JS я начал в 2012 году, когда присоединился к Storify. С тех пор я никогда не жалел о принятом решении и не ощущал, как будто я многое потерял, закинув Python, Ruby, Java или PHP – языки, с которыми я работал на протяжении предыдущего десятилетия. Работа в компании Storify для мня оказалась достаточно интенсивной. В отличии от большинства компаний, все приложения Storify работают исключительно на JavaScript. Как вы понимаете, большинство компаний, особенно такие крупные как PayPal, Walmart или Capital One, используют Node.JS только для конкретных определенных задач. Как правило, это gateway API. Однако, с точки зрения программиста, ничего не может быть лучше, чем работа и погружение с головой в одну определенную технологию. Краткая сводка: Избегайте нагромождения – пытайтесь разбивать свой код на столько мелких составных частей, насколько это вообще возможно. И даже больше. Используйте асинхронный подход – избегайте синхронное программирование словно чумы. Избегайте блокировки потоков – помещайте ВСЕ требуемые утверждения в начало файла, ибо они синхронные и, следовательно, будут блокировать программу. Require должен быть закеширован – считайте, это такая фича в Вашем коде. Или баг. Как Вам угодно. Всегда проверяйте свой код – ошибки – это не вышивание, которое можно выбросить в любом момент. Никогда не упускайте обнаруженные ошибки! Используйте try…catch только в синхронном потоке – try…catch бесполезен в асинхронном коде. Кроме того, v8 никогда не оптимизирует try…catch-код. Возвращайте значения или используйте if…else – просто на всякий случай: возвращайте значения что бы остановить выполнение участка кода. Обращайте внимание на события ошибок – почти все Node.JS-классы или объекты реализуют паттерн-наблюдатель и производят события-ошибки. Не стоит пропускать их. Познайте свой npm – устанавливайте модули с ключами –S или –D вместо –save или –save-dev. Используйте текущие версии в package.json – при работе с npm он по-тупому просто добавляет верхнюю скобочку по умолчанию при использовании вместе с ключом –S. Дабы избежать этого, просто вручную блокируйте версии. Никогда не доверяйте semver в своих приложениях, но доверьтесь ему в модулях с открытым исходным кодом. Бонус – используйте разные зависимости. Помещайте то, что требует проект только в процессе разработки в devDependencies. После этого используйте npm i –production. Чем больше ненужных зависимостей используется, тем больше риск возникновения уязвимостей.   Давайте разберем некоторые из этих пунктов поподробнее: Избегайте нагромождения Взгляните на некоторые модули, написанные Исааком З. Шлейтером, создателем npm. К примеру, use-strict включает «строгий» режим написания JavaScript-модульного кода. Включается эта опция всего лишь в три строчки: Но почему-же все-таки стоит избегать нагромождения кода? Одна известная фраза американского воздушного флота гласит: «все должно быть просто до идиотизма». И на это существуют свои причины. Человеческий разум не может держать в памяти больше чем от 5 до 7 вещей одновременно. Это просто как факт. Разбивая код на небольшие составные части, Вы и другие разработчики легко сможете разобраться в нем и понять, для чего он предназначен. Так же упрощается процесс тестирования. Вот пример:   Или еще: Уверен, большинство из Вас отдадут предпочтение второму примеру, когда имена переменных сразу же делают понятной их суть. Конечно, в процессе написания кода Вы можете думать, что Вы понимаете, как он работает и так. Возможно, Вам даже захочется продемонстрировать свою смекалку и сообразительность, объединив несколько методов вместе в одну строку. Пожалуйста, пишите так, как если бы Вы были более неопытны. Как если бы Вы не смотрели в код на протяжении 6 месяцев, или очень устали и, кроме того, еще и выпили. Если Вы пишете код на пике своей ментальной активности, Вам будет труднее понимать его позже, не говоря уже о Ваших коллегах, которые даже не знакомы с ходом Ваших мыслей. Держать все в относительной простоте единственно верный метод – особенно в рамках Node.JS-технологии, где используется асинхронный подход. Другими словами, преимущества от использования подхода малых частей значительно более перевешивают недостатки. Помимо прочего, они позволяют значительно быстрее исправить различные ошибки, которые могут возникнуть по разным причинам в процессе работы с Node.JS-приложением.   Используйте асинхронный подход Синхронный код мало где используется в нынешнем Node.JS. Как правило, он находит свое применение в написании CLI-команд или скриптов, не связанных с веб-приложениями. Что же касательно веб-разработки, Node.JS программисты предпочитают использовать асинхронный подход, так как это позволяет избежать блокировки потоков. К примеру, синхронный код будет приемлем, если мы строит скрипт для работы с базой данных, не системы для обработки параллельных/конкурентных задач: Но, в случае веб-приложения, лучше использовать следующее: Отличительная особенность состоит в том, пишите ли вы долго исполняемый конкурентный код или небольшой скрипт с малым временем жизни. А вообще, лучше запомните одно хорошее правило: всегда пишите асинхронный код в Node.JS.   Избегайте блокировки require S обладает простой системой загрузки модулей, которая использует общий формат CommonJS. Самый простой способ подключить модули, разбросанные по отдельным файлам – использовать встроенную функцию require. В отличии о AMD/requirejs, Node/CommonJS синхронна. По сути, функция работает согласно следующему принципу: Вы импортируете то, что было экспортировано в виде модуля или файла. О чем большинство разработчиков даже не догадывается, так это о том, что require кэшируемая. Потому, до тех пор, пока нет заметных изменений зарезервированного имени файла (и, в случае использования npm-модулей, их нет), код модуля будет выполнен и подгружен в переменную только единожды (для обработки). Подобная методика позитивно сказывается на оптимизации. Однако, даже с кэширование, лучше сначала попробуйте обойтись без require. Попробуйте использовать axios-модули. Путь /connect в свою очередь будет медленнее чем требуется, ибо импорт модулей происходит после генерации запроса: Гораздо лучше будет загрузить модули тогда, когда сервер еще даже не определен, не в маршруте: Require должен быть закэширован Хотя я и упоминал о том, что require может быть закэширован, но что так же интересно, так это то, что мы можем поместить код вне module.exports. К примеру: Зная, что некоторые участки кода могут быть запущены только один раз, подобная реализация окажется более чем полезной.   Всегда проверяйте свой код Node.JS – это Вам не Java. В Java Вы выкидываете исключения потому как в большинстве случаев Ваше Java-приложение не должно продолжать работать в случае ошибки. В Java для этого Вы просто используете try…catch. В случае Node.JS история обстоит несколько по-иному. Так как технология выполняется в асинхронном режиме, контекст ошибки всегда будет отделен от любого перехватчика (такого как try…catch) в случае возникновения самой ошибки. Этот код в Node.JS будет просто-напросто бесполезен: Но! Привычный try…catch все еще может быть использован в синхронном режиме. Вот более действенный рефакторинг предыдущего участка кода: Если мы не можем обернуть request-вызов в блок try…catch, ошибка будет не перехвачена. Однако, это легко решается при помощи callback-аргумента error. Кроме того, Вам нужно всегда вручную отлавливать error в каждом и каждом callback`е. Проверяйте наличие ошибки (и убедитесь, что она не равна null) и затем, или демонстрируйте содержание ошибки пользователю или клиенту и потому логируйте ее, или отправляйте ее обратно в место вызова при помощи error-callback`а. В качестве небольшого фокуса Вы можете использовать библиотеку okay. Применяйте ее как наведено ниже что бы обойти ручной проверки на ошибки: Возвращайте значения или используйте if…else .JS – параллельный. Эта особенность может привести к багам, если не отнестись к ней с должной осторожностью. Что бы обезопасить себя, останавливайте выполнение участка кода при помощи ключевого слова return: Избегайте бессмысленной работы (и ошибок) из-за неостановленного вовремя исполнения: Просто убедитесь, что return всегда будет стоять на страже целесообразности работы Вашего кода.   Обращайте внимание на события ошибок Почти все классы/объекты Node.JS реализую паттерн-наблюдатель, который порождает событие-ошибку. Это прекрасная возможность для разработчика отловить особо подлые ошибки и придушить их до того, как они устроят хаос. В качестве полезной привычки было бы неплохо создавать программы-прослушиватели событий-ошибок при помощи использования .on(): Познайте свой npm Многие Node.JS и front-end событийные разработчики знают, что –save (для npm install) не только установит модуль, но так же и создаст запись в package.json с упоминанием текущей версии модуля. Для аналогичных целей существует и –save-dev, опция для модулей, которые нужны только во время разработки. Но знаете ли Вы, что вместо этого можно спокойно использовать –S и –D? Теперь да. И пока Вы в режиме установки модулей, удаляйте символ ^, который будут порождать команды –S и –D. Эти значки могут быть особенно опасными, так как они позволят npm автоматически обновить модуль к последней незначительной версии (вторая цифра в семантике версирования). К примеру, с версии 6.1.0 до версии 6.2.0. Команда NPM полагается на semver, но Вы не должны. Я хочу сказать, что они используют авто обновления к промежуточным версиям модулей с открытым исходным кодом, так как они полагают, что никаких радикальных изменений в этих самых промежуточных версиях не будет. Мой вам совет: не стоит слишком в это верить. Более того, используйте npm shrinkwrap. Команда создаст новый файл с текущими версиями зависимостей зависимостей. И в заключение В этом посте мы охватили много всего: от работы с callback'ами до работы с асинхронными потоками, проверки на ошибки и снятия блокировки зависимостей. Надеюсь, Вы нашли для себя что-то новое и познавательное здесь. Немного об авторе Азат является техническим консультантом и менеджером в Capital One. JavaScript/Node.js-эксперт, автор различных онлайн-курсов. Издатель более чем 12 книг, посвященных теме, включающие такие хиты продаж как Full Stack JavaScript, React Quickly, Practical Node.JS и Pro Express.js и другие. В свое свободное время Азат читает о технике на Webapplog.com, проводит конференции и работает над продуктами с открытым исходным кодом. До того, как стать экспертом Node.JS, работал в федеральных правительственных агентствах США, принимал участие в небольших старт-апах и больших корпорациях, имея дело с такими технологиями, как Java, SQL, PHP, Ruby и прочие. Азат обожает все, что связано с технологиями и финансами, так же увлекается инновационными способами обучения и просвещения людей. Автор перевода: Евгений Лукашук Источник

Так как 2017 год совсем недавно остался позади, наша команда решила сделать небольшой новогодний подарок в виде разбора лучших сред автоматического тестирования, обладающих, помимо прочего, открытым исходным кодом. 1. Robot Framework Robot Framework – это фреймворк для приемного тестирования (Acceptance Testing) и, помимо прочего, так называемого ATDD (Acceptance Test-Driven Development). Среда написана на языке Python, но также может быть развернута в рамках Jython (Java) и IronPython (.NET). По сей причине считается кроссплатформенной, ибо поддерживает Windows, Linux и MacOS соответственно. Достоинства: Упрощает автоматическое тестирование благодаря использованию подхода keyword-driven тестирования, в значительной мере помогая тестерам в создании читабельных, легко производимых тестов.  Простота в использовании «тестового синтаксиса». Имеет в наличии отменную среду, включающую в себя богатый набор различных инструментов и библиотек, выполненных в виде отдельных проектов. Огромное количество различных API делает систему очень гибкой. Хотя и не в виде встроенной функции, однако Robot Framework позволяет проводить параллельные тесты при использовании библиотеки pabot или Selenium Grid. Недостатки: Трудно настроить структуру html-отчетов. Примечание: эта среда будет очень полезной, если Вы нацеливаетесь на Keyword-Driven тестирование – и обширная база библиотек и расширений вряд ли заставит Вас в этом усомниться. Однако, чтобы добавить новые ключевые слова (RF test library API) базовые познания Java/Python/C программирования обязательны. 2. JUnit JUnit – это среда для проведения юнит-тестов для приложений, написанных на языке Java. Достоинства: Тесты пишутся при помощи чистейшего Java – одного из лидирующих языков программирования современности. Поддерживает TTD. Позволяет создать свой собственный пакет для юнит-тестирования. Прекрасно интегрируется в различные инструменты разработчика (к примеру – Maven) или среды разработки (к примеру, IntelliJ). Благодаря достаточно высокой популярности поиск документации не составляет труда. Недостатки: Если необходимо использовать возможности mock-объектов, пользователь вынужден прибегать к помощи сторонних библиотек (Mockito или другие). Чтение тестов у людей без технического образования может вызвать затруднения, так как, к примеру, имена методов в JUnit ограничены условностями языка Java. Примечание: для тех разработчиков, которые желают писать юнит-тесты для собственных Java-приложений JUnit, пожалуй, лучшее из того, что можно бы пожелать. Однако, в случае если речь идет о функциональном тестировании программ, написанных на других языках, вероятно, Вам стоит выбрать другую среду. 3. Spock Spock – это среда тестирования и спецификации для приложений, написанных на языках Java или Groovy. За основу взята среда JUnit. Достоинства: Позволяет создавать читабельные тесты с поддержкой чисто английских предложений, без необходимости следовать ограничениям языков программирования. Предоставляет информативный контекст возникнувшей проблемы. Плюс, дает легко понять, что необходимо сделать, дабы исправить обнаруженный недостаток. Имеет встроенную поддержку mock и stab объектов. Поддерживает DDT (Data-Driven Tests). Недостатки: Требует базовых знаний языка программирования Groovy. Примечание: идеально подойдет, если Ваше приложение базируется на JVM, плюс, Вы нацеливаетесь на BDD автоматическое тестирование с DSL. 4. NUnit NUnit – среда для юнит-тестирования языков .NET виртуальной машины. Имевшей однажды огромное влияние JUnit, среда NUnit была полностью написана на C#. Помимо прочего, в арсенале так же имеется целый спектр новых возможностей, позволяющих использовать все преимущества языков .NET. Достоинства: Быстрая инициализация и выполнение теста. Использует методы типа Assert с поддержкой аннотаций. Позволяет проводить параллельное тестирование. Поддерживает TDD. Недостатки: Так как использует только языки .NET стандарта, не является кроссплатформенным. Интеграция в среду Visual Studio не представляется возможной. Использование NUnit означает больше расходов на сопровождение проекта. Примечание: прекрасный фреймворк юнит-тестирования для C# с открытым исходным кодом, долгой историей и проверенной репутацией. Однако, в случае, если вы уже активно работаете с .NET языками, обратите свое внимание на MSTest. 5. TestNG TestNG – сервис автоматического тестирования для Java. По сути, это те же JUnit и NUnit, но с улучшениями и новым функционалом (ибо NG читается как «новое поколение» - Next Generation). Среда была разработка для покрытия всех видов тестирования, которые только могут понадобится. А именно: юнит-тестирование, функциональное тестирование, тестирование интеграции и прочее. Достоинства: Прост во внедрении в проект. Позволяет разработчику писать гибкие и всеобъемлющие тесты. Поддерживает DDT. Простые в понимании аннотации. Простота в группировании тестовых кейсов. Позволяет создавать параллельные тесты. Недостатки: Так как поддерживает только Java, Вы должны иметь хотя бы базовые познания этого языка. Установка и калибровка среды тестирования занимает время. Примечание: если вы работаете с Java, ищите инструмент для мульти задачного тестирования и можете уделить некоторое время на установку программы – TestNG определенно для Вас. 6. Jasmine Jasmine – среда для юнит-тестирования JavaScript. Так же известен как Behavior Driven Development (BDD) подход JavaScript тестирования. Идеально подходит для веб-сайтов, проектов Node.js и вообще для всего, где JavaScript может найти свое применение. В основном используется в связке с AngularJS. Достоинства: Кроме JavaScript, так же может быть применен по отношению к Python или Ruby. Чрезвычайно полезен, если Вам нужен один сервис тестирования как для клиентской разработки, так и для серверной. Поддерживается множеством CI (Codeship, Travic и прочее). Имеет встроенный Assert-синтаксис. Недостатки: В большинстве сценариях требует прогонщика тестов (такого как Karma). В случае с асинхронным тестированием возникают трудности. Примечание: Jasmine может оказаться прекрасным решением, если Вы нуждаетесь в унифицированном (клиент-серверном) сервисе юнит-тестирования. 7. Mocha Mocha – это еще один сервис JavaScript юнит-тестирования с занятным для русскоязычного сектора названием и отнюдь не банальным функционалом. Используется на NodeJs, в основном часто применяется в связке с ReactJS. Достоинства: Обладает встроенным тестовым прогонщиком. Поддерживает асинхронное тестирование. Позволяет большую гибкость, так как Вы спокойно можете использовать любую Assert-библиотеку (Chai, expect.js, Must.js прочие), которая будет отвечать Вашим требованиям (как замена стандартной NodeJs функции «assert»). Недостатки: Относительно новый сервис (появился в 2012 году), что означает он в активном развитии и некоторые аспекты технологии могут быть не до конца задокументированными. Предоставляет только базовую структуру тестов, плюс требует дополнительную ручную установку и конфигурацию (для кого-то может быть плюсом). Примечание: если Вы ищите независимую среду юнит-тестирования для JavaScript, Mocha – Ваше все! А какую среду автоматического тестирования используете Вы? Что хорошего и что не очень Вы могли бы о ней сказать? Пожалуйста, приобщайтесь к дискуссии в комментариях! 😊 Автор перевода: Евгений Лукашук Оригинал статьи

Все мы знаем простую формулу: быстрый сайт = счастливые пользователи, высокая оценка Google-статистики и увеличение количества переходов. Возможно, Вам и кажется, что Ваш сайт работает настолько быстро, насколько ему позволяет быть быстрым WordPress – Вы же видели те списки лучших практик настройки сервера, улучшения производительности кода и так далее – но всё же, разве это предел? Используя динамические базы данных сервисов типа WordPress, в конечном итоге перед Вами предстанет проблема: запросы к базе замедляют работу сайта. В рамках этого поста я постараюсь научить Вас определять проблемные места, понимать их причину и предложу некоторые быстрые решения и другие программные подходы для ускорения работы. В качестве примера мы будем использовать действующие примеры работы с базой, замеченные на одном из сайтов.   Идентификация Первый шаг на пути повышения производительности - это обнаружение проблемных SQL-запросов. И на сцену выходит Query Monitor – по-настоящему незаменимый плагин для мониторинга работы запросов. Особенность его в том, что плагин показывает детальную информацию о каждом запросе, позволяя к тому же отфильтровать их, исходя из порождающего участка кода (включается подсветка дублированных запросов). Если же по какой-то причине Вы не желаете устанавливать отладочный плагин, вы можете в качестве опции включить MySQL Slow Query Log, логирующий все запросы, требующее длительное время для выполнения. К тому же конфигурация и настройка места логирования относительно проста. Так как это серверное дополнение, падение производительности будет заметно в меньшей мере, чем если бы вместе с отладочным плагином непосредственно на сайте. Однако по мере отсутствия необходимости, MySQL Slow Query Log стоит отключать.   Понимание Как только вы находите затратный по времени запрос, который было бы неплохо улучшить, встает следующий вопрос: почему он работает медленно? К примеру, во время разработки одного сайта был обнаружен запрос, работающий целых 8 секунд! Для поддержки магазина плагинов мы использовали WooCommerce и кастомизированную версию WooCommerce Software Subscriptions плагина. Задача приведенного выше запроса была получить все подписки пользователя, оперируя его идентификационным номером. WooCommerce обладает своеобразной комплексной моделью данных, при использовании которой наблюдалось следующее: хотя  запрос и хранится как пользовательские пост-типы, идентификатор пользователя хранится в пост-мета данных, а не в post_author, как должно было бы быть. Также было найдено несколько связок с пользовательскими таблицами, созданными плагином. Итак, как же нам уберечь себя от подобных ошибок?   MySQL – Ваш друг MySQL обладает весьма полезным выражением DESCRIBE, которое используется для вывода информации о структуре таблицы (такой, как столбцы, типы данных, дефолты). К примеру, если Вы выполните команду DESCRIBE wp_postmeta, Вы увидите следующий результат: Это, конечно, хорошо, но, возможно, Вы уже знали об этом. Но знали ли Вы, что DESCRIBE также может быть использован в качестве префикса для SELECT, INSERT, UPDATE, REPLACE и DELETE? Широкой общественности это так же известно, как синоним EXPLAIN, который дает нам детальную информацию, как именно та или иная команда будет выполнена. Вот результат для нашего проблемного запроса: На первый взгляд, понять это не слишком-то просто. Однако при более детальной расшифровке задача упрощается. Наиболее важной колонкой считается type, так как она описывает связь между таблицами. Если вы замечаете слово ALL, это значит, что MySQL читает всю таблицу с диска, нагружая центральный процессор. Сие также известно под термином «полное сканирование таблицы» - позже мы вернемся к этому. Колонка row также хороший индикатор того, что нужно, собственно говоря, MySQL сделать. Эта колонка наглядно демонстрирует, сколько рядов было прочитано, дабы найти результат. Ключевое слово EXPLAIN также дает более полную информацию, полезную для дальнейшей оптимизации запросов. К примеру, таблица pm2 (wp_postmeta) говорит нам о том, что мы используем Using filesort, так как нам нужно отсортировать результаты по возрастанию (ORDER BY).   Визуальное изучение Здесь стоит упомянуть о таком полезном инструменте, как MySQL Workbench. Так как для баз данных, работающих на версии MySQL 5.6 и выше, результаты EXPLAIN формируются в виде JSON, MySQL Workbench конвертирует JSON в визуальное представление. Утилита автоматически обращает Ваше внимание на проблемные запросы. На картинке мы ясно можем видеть, что wp_woocommerce_software_licences вызывает негодование.   Решение Упомянутая часть запроса проводит полное сканирование таблицы, чего Вам, собственно говоря, по мере возможности стоит избегать. К тому же тут используется неиндексированная колонка order_id в качестве ссылки между таблицами wp_woocommerce_software_licences и wp_posts. Подобная ситуация – общая причина большинства «медленных» запросов. Которая, однако, решается просто.   Индексы Order-id - достаточно важная часть идентификационной информации. Потому, если мы строим запрос подобным образом, мы должны иметь при себе индекс колонки. В противном случае MySQL в буквальном смысле просканирует ВСЕ рядки таблицы, пока не найдет нужный. Давайте добавим индекс и проверим, что из этого получится:   Невероятно, но нам удалось урезать порядка 5 секунд выполнения запроса!   Знайте свой запрос Проверяйте запрос – команда за командой, подзапрос за подзапросом. Не делает ли он того, чего нам не нужно? Можем ли мы что-то оптимизировать? В этом случае, ограничивая пост-типы shop_order, мы связываем таблицы лицензий с таблицами постов при помощи order_id. Повышая интеграцию данных, подобным образом мы убеждаемся, что используются только корректные порядки записей. Однако на самом деле это только внешняя часть запроса. Довольно опасно иметь строку software license в таблице, владеющей связанным с порядком WooCommerce order_id в пост-таблицах. Причина этому – связка с PHP-кодом плагина. Давайте удалим зависимость и посмотрим на результат: Конечно, это не очень много, но теперь запрос работает до 3 секунд вместо 8!   Кэшируйте все, что только можно! Если на Вашем сервере не установлен MySQL query caching, тогда пора установить его. Это позволит MySQL вести запись всех исполняемых команд – совместно с их результатом. Кэш же, в свою очередь, не «устаревает», так как MySQL обновляет кэш при изменении таблиц. Query Monitor обнаруживает, что наш запрос запускается 4 раза на одной странице. И, хотя query caching – полезная штука, дублирующие запросы должны быть удалены. Статическое кэширование в PHP – это достаточно простое и эффективное решение проблемы. По сути, Вы просто перехватываете результат чтения из базы и заносите его в статическое свойство класса. Когда будет вызван определенный подзапрос, вы просто используете уже загруженную информацию из статического свойства: Кэш имеет такое понятие, как время жизни запроса. Если же Вам необходимо иметь постоянную информацию из кэша, тогда, возможно, Вам стоит воспользоваться постоянным Object Cache`ом. Однако в этом случае Ваш код должен сам описывать работу с кэшем.   Отказывайтесь от шаблонного мышления! Помимо этих, существует великое множество других техник по улучшению производительности запросов, которые потребуют операции посложнее, чем просто правка запроса или дописывание индекса. Одна из наиболее медленных операций нашего запроса – это необходимость связывать покупателя с таблицей товаров, причем для каждого покупателя. А что, если просто один раз связать все, что нам нужно, и не заморачиваться этим в дальнейшем, просто загружая из таблицы всю информацию, связанную с покупателем? Мы можем создать таблицу, которая будет содержать в себе информацию о лицензии, вместе с идентификаторами пользователей и товаров для всех лицензий. При необходимости нам нужно будет только дать запрос для одного пользователя. Для этого Вам предстоит пересобрать таблицу при помощи MySQL triggers на базе INSERT/UPDATE/DELETE. Однако подобная операция заметно увеличит производительность системы в целом. Подобным образом, в случае если количество связей замедляет выполнение запросов, возможно, Вам стоит разбить запрос в два или больше предложений и исполнять их раздельно при помощи PHP. После чего просто собрать и отфильтровать полученную информацию внутри кода. Что-то подобное реализовано в Laravel при помощи eager loading в Eloquent. WordPress иногда может замедлять запросы на wp_posts таблице, в случае если у Вас хранится много информации и разных пользовательских пост-типов. Если Вы считаете, что пост-типы замедляют запросы, возможно, Вам стоит задуматься об использовании кастомных таблиц.   Подведем итоги При помощи подобных нехитрых приемов оптимизации запросов нам удалось снизить время работы запроса с 8 до примерно 2 секунд. К тому же было снижено количество вызовов запрос с 4 до 1. Искренне надеемся, что сей гайд будет полезным для работы с запросами. Внешне оптимизация может казаться чем-то устрашающим, но как только Вы попробуете это сделать, Ваши маленькие победы развеют подобные суждения. Автор перевода: Евгений Лукашук Источник