Материал, перевод которого мы сегодня публикуем, подготовили Матиас Байненс и Бенедикт Мейрер. Они занимаются работой над JS-движком V8 в Google. Эта статья посвящена некоторым базовым механизмам, которые характерны не только для V8, но и для других движков. Знакомство с внутренним устройством подобных механизмов позволяет тем, кто занимается JavaScript-разработкой, лучше ориентироваться в вопросах производительности кода. В частности, здесь речь пойдёт об особенностях работы конвейеров оптимизации движков, и о том, как осуществляется ускорение доступа к свойствам прототипов объектов.

Привет, Хабр!

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

Смотрите видео и слайды, а за расшифровкой — добро пожаловать под кат.

Сегодня в нашей виртуальной студии один из самых известных дотнетчиков — Джеффри Рихтер.

В данный момент он — Partner Software Architect в Microsoft, работающий по направлению Distributed Cloud Apps & Storage. Иначе говоря, человек, который знает об Azure Storage всё.

F.A.Q.

Слишком много текста. О чём это всё? Чтобы вам было веселей читать, для этой статьи мы придумали более интересную вёрстку. Слева будут говорящие головы, а справа — текст. Если вам уныло листать до интересующей части, то в оглавлении есть анкерные ссылки. В ролях: Евгений phillennium Трифонов (нетехнические вопросы) Советы разработчикам по созданию компании Комбинирование разных видов деятельности Что читать, что изучать, как писать Олег olegchir Чирухин (технические вопросы) Зачем Рихтер изучает JS, Golang и Python Стоит ли продолжать писать на C++ Эволюция и будущее разработки на платформе Windows, .NET и вообще Захватит ли JavaScript мир, нужна ли типобезопасность Немного о пользе облачных провайдеров Что лучше иметь — личный самолет или личный вертолёт Как всё успевать Почему эта статья попала в хаб JavaScript? Только для тех, кому интересно мнение архитектора Azure относительно JS и его позиция в холиваре о типобезопасности. Этот холивар перетекает у нас из интервью в интервью, и конца ему не видно. Почему эта статья попала в хаб С++? Изначально Рихтер писал книги про C++. Только для тех, кому интересно мнение архитектора Azure относительно будущего и применимости C++

Джефф стал известен еще в начале 90-х, когда написал книгу о том, как программировать Windows 3.1. Его книга «Programming Applications for Microsoft Windows» стала классикой, позже выпускалась как «Windows via C/C++» и выдержала несколько изданий.

С появлением .NET он написал «CLR via C#» — тоже получилась классика, тоже несколько изданий. В то время он был одним из основателей компании Wintellect и, формально не будучи частью Microsoft, оказался более свободен в оценках. Чем и заработал репутацию крупного независимого эксперта по Windows. Это человек-легенда уровня Чарльза Петцольда и Дона Бокса.

Если вы — JavaScript-разработчик или хотите им стать, это значит, что вам нужно разбираться во внутренних механизмах выполнения JS-кода. В частности, понимание того, что такое контекст выполнения и стек вызовов, совершенно необходимо для освоения других концепций JavaScript, таких, как поднятие переменных, области видимости, замыкания. Материал, перевод которого мы сегодня публикуем, посвящён контексту выполнения и стеку вызовов в JavaScript.

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

Я очень не люблю тех, кто полагается на хрупкий JavaScript для client-side, в то время как есть куча других альтернатив. Точно так же я не стану надеяться лишь на один сервис такси, когда еду в аэропорт на суперважный рейс. Если есть другие возможности — почему бы ими не воспользоваться?

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



Материал подготовлен на основе доклада Николая Рыжикова на весенней конференции HolyJS 2018 Piter.

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

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

FYI: На следующей неделе дайджеста не будет в связи с отпуском.

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

// ВНИМАНИЕ: Плохой пример!
function popup(msg: string): string {
    return "<p class=\"popup\">" + msg + "</p>";
}

или такой:

// ВНИМАНИЕ: Плохой пример!
function getName(login: string): string {
    return "SELECT name FROM users WHERE login = \"" + login + "\"";
}

С тех пор мы научились использовать более безопасные подходы.

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

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

Введение

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

Привет, Хабр! Представляю вашему вниманию перевод статьи «What to do when “this” loses context» автора Cristi Salcescu.

Лучший способ избежать потери контекста this – не использовать this. Однако, это не всегда возможно. Например, мы работаем с чужим кодом или библиотекой, которые используют this.

Литерал объекта, функция-конструктор, конструктор объектов класса в системе прототипов. Псевдопараметр this используется в системе прототипирования для того, чтобы дать доступ к свойствам объекта.

Дэвид Хэррон, автор материала, перевод которого мы публикуем сегодня, задался следующим вопросом: «Должен ли человек, работавший более 10 лет в Sun Microsystems, в команде Java SE, до последнего вздоха думать лишь о байт-коде Java и создавать экземпляры абстрактных интерфейсов?». Он задавал этот вопрос применительно к себе, и для него платформа Node.js, после Java, оказалась подобна глотку свежего воздуха. Дэвид говорит, что когда он был уволен из Sun в январе 2009 года (прямо перед поглощением этой компании Oracle), он узнал о Node.js. Эта технология его зацепила. Что значит «зацепила»? С 2010-го года он много писал о программировании для Node.js. А именно, написал несколько книг, в том числе — «Node.js Web Development», четвёртое издание которой вышло в этом году. Он подготовил множество небольших материалов о Node.js, опубликованных в интернете. Фактически, он уделил очень много времени и сил, рассказывая о платформе Node.js и о возможностях JavaScript. Почему того, кто раньше занимался исключительно Java, так увлекли Node.js и JavaScript?

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

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

Введение

За время работы на React.js мне часто приходилось сталкиваться с обработкой форм. Через мои руки прошли Redux-Form, React-Redux-Form, но ни одна из библиотек не удовлетворила меня в полной мере. Мне не нравилось, что состояние формы хранится в reducer, а каждое событие проходит через action creator. Также, согласно мнению Дана Абрамова, «состояние формы по своей сути является эфемерным и локальным, поэтому отслеживать его в Redux (или любой библиотеке Flux) не нужно».

Замечу, что в React-Redux-Form есть компонент LocalForm, который позволяет работать без redux, но на мой взгляд, пропадает смысл устанавливать библиотеку размером 21,9kB и использовать её менее чем на половину.

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

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

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

Речь пойдёт о расширении FastProxy.
Ни в коем случае не ставьте его в чистом виде в хроме.

Что нужно, чтобы построить экосистему небанковских сервисов, да и вообще любую подобную экосистему? Мастер-система хранения и обработки данных, а также API. В этом посте мы разберем две версии созданного нами API — первую и удачную — и подробно остановимся на том, в чем их важные отличия друг от друга.

В последнее время микросервисные архитектуры пользуются определённой популярностью. От того, как взаимодействуют микросервисы, может зависеть производительность и масштабируемость решений, основанных на них. Это взаимодействие может быть синхронным или асинхронным. В материале, перевод которого мы представляем вашему вниманию сегодня, рассматриваются синхронные методы взаимодействия микросервисов. А именно, речь пойдёт об исследовании двух технологий: HTTP/1.1 и gRPC. Первая технология представлена стандартными HTTP-вызовами. Вторая основана на использовании высокопроизводительного RPC-фреймворка от Google. Автор материала предлагает взглянуть на код, необходимый для реализации взаимодействия микросервисов с использованием HTTP/1.1 и gRPC, провести замеры производительности, и выбрать технологию, которая позволяет организовать обмен данными между микросервисами наилучшим образом.

Привет, друзья!

Итак, разработчики Реакта решили сделать нашу работу с их либой более линейной, направить, так сказать, нас нерадивых на путь наименьшего шанса ошибиться и написать плохой код, что, на мой взгляд, является нашим неотъемлемым правом и способом совершенствоваться и изобретать. Речь идет о всеми любимых методах componentWillReceiveProps и других из той же серии, их больше не будет, но нам дадут альтернативу в виде статического метода getDerivedStateFromProps. Лично мне он напоминает темную комнату, где лежат вещи, и их нужно найти, но ничего не видно.

Разработчики в своих ответах на гневные комментарии пользователей Реакта пишут мол: Ну не дадим мы вам prevProps, это невозможно, придумайте что-нибудь, prevProps нет, ну вы держитесь там, просто кешируйте их в состоянии, в общем предлагают нам сделать небольшой костылек в нашем новом хорошем коде. Это все конечно несложно, можно понять и простить, но вот меня раздосадовал тот факт, что теперь у меня нет контекста this, комнату мою замуровали, из нее ничего не видно, даже соседей не слышно, вот и решил я написать для себя штуку, которая скроет в себе все костыли и мой код будет с виду хоть и странным, но бескостыльным (а бескостыльным ли?).

В общем, мне нужно внедрить prevProps в состояние компонента, еще хочется чтобы все выглядело как обычно, а также невозможно прожить без волшебного this в статическом getDerivedStateFromProps (вот дурак!). Два дня мучений и самосовершенствования и все готово, я родил мышь.

Данная статья рассчитана на человека, делающего свои первые робкие шаги на тернистой тропе изучения JavaScript. Несмотря на то, что на дворе 2018 год, я использую синтаксис ES5, дабы статья была понятной юным падаванам, проходящим курс «JavaScript, уровень 1» на HTML Academy.

Одной из особенностей, отличающих JS от многих других языков программирования, является то, что в этом языке функция — «объект первого класса». Или, говоря по-русски, функция — это значение. Такое же, как число, строка или объект. Мы можем записать функцию в переменную, можем положить её в массив или в свойство объекта. Мы даже можем сложить две функции. На самом деле, ничего осмысленного из этого не получится, но как факт — мы можем!

function hello(){};
function world(){};
console.log(hello + world);
// кто знает, что получится, тому печеньку
// кто не знает, пусть попробует в консоли

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

Привет, Хабр! представляю вашему вниманию перевод статьи «Mastering Vuex — Zero to Hero» автора Sanath Kumar.

Официальная документация Vuex определяет его как паттерн управления состоянием + библиотека для приложений Vue.js. Но что это значит? Что такое паттерн управления состоянием?

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