JavaScript *

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

Спасибо всем, кто уже принял участие в нашем конкурсе по программированию! Приём решений ещё не окончен, но мы решили протестировать те решения, которые нам уже прислали, и опубликовать промежуточные результаты. Пока что мы получили 11 решений от 10 уникальных участников. Мы надеемся получить ещё много решений, поэтому итоговые результаты могут сильно отличаться от этих. Если нам пришлют достаточно много новых решений, проведём ещё одно промежуточное тестирование.

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

---

Тема: Можешь объяснить мне эту одну строчку кода?

Текст: Считай меня тупым, но… я не понимаю её и буду благодарен, если растолкуешь подробно. Это трассировщик лучей в 128 символах. Мне кажется, он восхитительный.

<pre id=p><script>n=setInterval("for(n+=7,i=k,P='p.\\n';i-=1/k;P+=P[i%2?(i%2*j-j+n/k^j)&1:2])j=k/i;p.innerHTML=P",k=64)</script>

---

Эта строчка JavaScript отрисует анимацию, которая показана на изображении под катом. В браузере она запускается здесь. Скрипт написан автором www.p01.org, где вы можете найти эту и много других классных демок.

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

Поддержка внешних инспекций кода

Если Вы используете встроенные в TeamCity инспекции кода на базе ReSharper или IntelliJ IDEA, или пользуетесь инспекциями SonarQube, теперь Вы сможете извлечь из них дополнительную пользу. Upsource 2017.2 умеет показывать результаты такого анализа в своем UI, наряду с результатами встроенных инспекций. Рецензирование кода становится немного проще, если сразу видно, какие новые потенциальные проблемы привнесло именно это изменение.

Однажды отдыхая в диване, я вспомнил мимолетный замечательный ролик из своего детства, который назывался WAT. И там была такая штука как bare words, которая показывалась на примере Ruby.


«Голые слова» (barewords) — это слова без кавычек, которые вы можете использовать в качестве строк.

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

В общем-то, тема новшеств в EcmaScript постоянно на слуху. Это далеко не случайно, так как новые стандарты, с некоторых пор, выходят ежегодно. Стандарт ES6 появился в 2015-м, ES7 — в 2016-м. Но вряд ли кто сразу вспомнит, когда вышел ES5, так как случилось это в 2009-м году, до эпохи бурного роста и развития JavaScript. Пожалуй, каждый JS-разработчик наблюдает за развитием языка. Сегодня пришло время поговорить о том, что принёс нам ES8.



Если вы не ищете лёгких путей — можете сразу перейти к веб-версии или к PDF-варианту нового стандарта. Кроме того, полезные сведения о возможностях ES8 можно найти на сайте MDN, материалы которого использовались и при подготовке этого обзора. Тех же, кто хочет быстро ознакомиться с основными нововведениями ES8 и взглянуть на примеры кода, приглашаем под кат.

В апреле состоялась конференция для разработчиков мобильных приложений Mobius. На мероприятии Программу «Единая фронтальная система» представляли лидеры команды мобильной разработки Дмитрий Евстратов и Даниил Калинцев (Отдел развития платформы ЕФС АО СберТех) с рассказом о масштабируемом VIP архитектурном дизайне для компонентов с использованием React Native.
Для тех, кому интересна мобильная разработка Программы ЕФС, кто не присутствовал или не успел пообщаться с ребятами на конференции, мы подготовили короткое интервью. В комментариях к нему вы можете задать вопрос спикерам напрямую.
 

 

Новые фичи восьмой редакции EcmaScript.



EcmaScript 8 или EcmaScript 2017 был официально выпущен комитетом TC39 в конце июня. Кажется, мы много говорили о EcmaScript в прошлом году и это было не просто так. На данный момент стандартом является выпуск новой спецификации раз в год. ES6 был опубликован в 2015, а ES7 в 2016, но кто-нибудь помнит, когда вышел ES5? Это было в 2009 году, до волшебного взлета JavaScript.

Разбор запросов GraphQL от простого к сложному — queries и mutations, аргументы, переменные, вложенные схемы, подписки. С примерами и кодом схемы.

Мы уже рассказывали об основах работы с async/await в Node.js, и о том, как использование этого нового механизма позволяет сделать код лучше. Сегодня поговорим о том, как создавать, используя async/await, RESTful API, взаимодействующие с базой данных Firebase. Особое внимание обратим на то, как писать красивый, удобный и понятный асинхронный код. Можете прямо сейчас попрощаться с адом коллбэков.

Нетрудно догадаться, что большинство разработчиков сейчас используют какие-либо фреймворки для разработки приложений. Они помогают нам структурировать сложные приложения и экономят время. Каждый день можно наблюдать большое количество обсуждений, какой фреймворк лучше, какой нужно учить, и тому подобное. Так что, в этот раз я поделюсь своим опытом и отвечу на вопрос: «Почему я перешел на Cycle.js с React?».

React, возможно, самый популярный frontend-фреймворк (на момент 2017) с огромным сообществом. Я большой фанат этого фреймворка и он мне помог изменить взгляд на веб-приложения и их разработку. Некоторые любят его, а кто-то считает, что он не так хорош.

Большинство использует React без мысли о том, что есть лучший инструмент или способ разработки веб-приложений. Это дало мне толчок попробовать Cycle.js, как новый реактивный фреймворк, который становится все более и более популярным изо дня в день.

И в этой статье я хочу объяснить:

1. Что такое реактивное программирование
2. Как работает Cycle.js
3. И почему он, на мой взгляд, лучше React

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

Недавно решил разобраться с vue.js. Лучший способ изучить технологию — что-нибудь на ней написать. С этой целью был переписан мой старый планировщик маршрутов, и получился вот такой проект. Код получился достаточно большим для того, чтобы столкнуться с задачей масштабирования.

В этой статье приведу ряд приемов, которые, на мой взгляд, помогут в разработке любого крупного проекта. Этот материал для вас, если вы уже написали свой todo лист на vue.js+vuex, но еще не зарылись в крупное велосипедостроение.

В конце июня сего года Микеал Роджерс (он участвовал в работе Node.js Foundation со дня основания этой организации, а теперь покидает проект) дал интервью thenewstack.io. Тогда он сказал, что платформа Node.js обойдёт Java в течение года. Тут надо уточнить, что речь идёт о том, что число программистов, которые пишут для Node.js, превзойдёт число тех, кто пишет на Java.

Ресурс builtinnode.com, через неделю после публикации интервью, подготовил материал, автор которого, задавшись вопросом: «Действительно ли Node.js обойдёт Java?», проанализировал ситуацию. Представляем вашему вниманию перевод интервью и аналитической статьи и предлагаем поразмыслить о перспективах Node.js и Java.

В этом году JavaScript обошел PHP в рейтинге TIOBE. Важно это или нет? Наверное, не очень. Более важно то, что язык продолжает активно расти и развиваться, несмотря на то, что кому-то вектор развития может не нравиться.

Вообще, делать HolyJS всегда приятно. Пока в мире Java мы уже на протяжении четырех конференций (два Joker и две JPoint) ждем релиза новой версии, JS продолжает обрастать новыми фичами и хайповыми фреймворками, да так быстро, что наш программный комитет с трудом поспевает. Хорошо, что программа конференции строится не столько вокруг хайповых продуктов, сколько вокруг вещей, полезных в жизни, а их выходит существенно меньше.



Прошедшая в этом году HolyJS в Питере разрослась до полутысячи участников и двух дней, а о том, что будет с HolyJS 2017 Moscow, которая пройдет 10-11 декабря в Radisson Славянская, читайте под катом.

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

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

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

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

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

Некоторые функции выполняются так быстро, что их многократный вызов, хотя и создаёт нагрузку на систему, проблемой не является. Некоторые же весьма «тяжелы», каждое обращение к таким функциям ведёт к серьёзным затратам вычислительных ресурсов. Если траты оправданы, вычисления оптимизированы, то деваться особо некуда. Но как быть, если при повторных вызовах, функция иногда (или, возможно, довольно часто) выполняет те же самые вычисления, которые выполнялись при её предыдущих вызовах? Можно ли этим воспользоваться для повышения производительности?

Месяц назад на Hacker News в топ вышел пост про сервис AnyRoom: простенький бэкенд на Go, который позволяет создавать телефонные конференции. Рейтинг больше ста, обсуждения в комментах, Исходный код на github, подписки по 50 долларов в месяц — в общем, всё как у взрослых. После первого удивления «неужели это кому-то нужно?!?» я немного погуглил «голосовая конференция без регистраций и sms недорого», подивился дороговизне приложений и понял что таки да, нужно. А на Voximplant такую штуку можно собрать за полчаса и десяток строк JavaScript-кода. Кто хочет создать стартап и попиариться на Hacker News? Под катом рассказываю, как.

Представьте, что у вас есть хранилище данных с REST-интерфейсом. Пусть в нем хранится информация о книгах и вы хотите вывести список всех книг. Можно сделать метод «books», который будет возвращать нам список книг. Но при отображении списка обычно есть паджинация или ленивая подгрузка данных, а еще пользовать хочет фильтровать и сортировать данные. Когда мы добавляем поддержку мобильных устройств у нас появляется еще потребность как-то ограничить объем получаемых данных не передавая часть полей. Всю эту информацию должен уметь понимать почти любой метод получения списка объектов, т.к. списки отображаются с помощью специального виджета. И тут нам на помощь приходит Resource Query Language.

Resource Query Language (RQL) — это язык запросов, разработанный для использования в URI при работе с объекто-подобными структурами данных. С помощью RQL клиент может запрашивать у сервера список объектов соответствующих определенным правилам, т.е., по сути, это синтаксис, который описывает как запрашивать данные. Например, запрос выбирающий все книги авторства Перумова может быть записан как eq(author,Перумов) или в обычном формате URL: author=Перумов.

→ ArrayBuffer и SharedArrayBuffer в JavaScript, часть 1: краткий курс по управлению памятью
→ ArrayBuffer и SharedArrayBuffer в JavaScript, часть 2: знакомство с новыми объектами языка
→ ArrayBuffer и SharedArrayBuffer в JavaScript, часть 3: гонки потоков и Atomics

В прошлый раз, рассматривая SharedArrayBuffer, мы говорили о том, что работа с этим объектом может привести к состоянию гонки потоков. Это усложняет разработку, поэтому мы ожидаем, что этим средством будут пользоваться создатели библиотек, имеющие опыт в многопоточном программировании. Они смогут применить новые низкоуровневые API для создания высокоуровневых инструментов, с которыми будут работать обычные программисты, не касаясь ни SharedArrayBuffer, ни Atomics.