JavaScript *

С момента выхода стандарта ECMAScript 2015 (его ещё называют ES6) JavaScript серьёзно изменился и улучшился. Это очень хорошая новость для всех JS-разработчиков. Более того, теперь новая версия ECMAScript выходит каждый год. Возможно, вы не обратили особого внимания на то, что появилось в самой свежей версии стандарта, который был выпущен в июне 2019 года. Автор заметки, перевод которой мы сегодня публикуем, хочет в двух словах рассказать о новшествах JavaScript, и о том, чего можно ждать в следующей версии стандарта ECMAScript.



Здесь будут упомянуты возможности, предложения которых находятся на третьем этапе согласования (Stage 3). Это значит, что они, скорее всего, появятся в следующей версии стандарта ECMAScript, но с абсолютной достоверностью этого утверждать нельзя. Вот репозиторий, в котором можно найти сведения о предложениях, находящихся на разных этапах согласования.

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

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

Готовый код проекта доступен на GitHub
Demo

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

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

Взгляните на следующий фрагмент кода:

Для создания интерфейсов React рекомендует использовать композицию и библиотеки по управлению состоянием (state management libraries) для построения иерархий компонентов. Однако при сложных паттернах композиции появляются проблемы:

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

Для большинства разработчиков проблема может быть неочевидна, и они перекидывают ее на уровень управления состоянием. Это обсуждается и в документации React:

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

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

Введение в функциональное программирование

Функциональное программирование(ФП) — способ организации кода через написание набора функций.

EcmaScript, являясь мультипарадигменным языком программирования, реализует наряду с прочими и функциональную парадигму. Это означает, что функции в ES являются данными и могут быть переданы в функции, возвращены из функций и могут сами принимать функции. Т.е. функции в ES являются функциями первого класса.

Отсюда следуют следующие определения:

Функциональный агрумент(Functional argument, фунарг) — аргумент, значением которого является функция.

Функция высшего порядка(ФВП, higher-order-funtion, hof) — функция, которая принимает функции в качестве аргументов.

Функции с функциональным значением(Function valued functions) — функция, которая возвращает функцию.

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

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

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

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

Итак, начнём.

Лексическое окружение (LexicalEnvironment, ЛО, LE)

Официальная спецификация ES6 определяет этот термин как:

Lexical Environment — это тип спецификации, используемый для разрешения имён идентификаторов при поиске конкретных переменных и функций на основе лексической структуры вложенности кода ECMAScript. Лексическая окружение (Lexical Environment) состоит из записи среды и, возможно, нулевой ссылки на внешнюю Лексическую среду.

Разберёмся подробнее.

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

Технически ЛО представляет собой объект с двумя свойствами:

• запись окружения (именно тут хранятся все объявления)
• ссылка на ЛО порождающего контекста.

Друзья, это становится доброй традицией. Мы не встречались почти 11 месяцев – прошлая наша встреча была накануне Нового года и у самого Кремля. А в этом году Node.js исполнилось 10 лет, а это значит время провести юбилейный 10-й митап Msocow Node.js Meetup!

В то время, как наш чат в Telegram ( t.me/nodejs_ru ), посвященный разработке на Node.js уже перерос 5 000 (пять тысяч!) участников, всё больше компаний, как международных, так и российских, продолжают успешно разрабатывать решения на базе Node.js, наращивать экспертизу на production-проектах.

Крупные корпорации, банки, финансовые сервисы, e-Commerce, клиентские сервисы – все здесь. Масштаб и спектр задач, которые успешно решаются с помощью Node.js продолжает расти, а новые вызовы продолжают подогревать нам не только мозги!
Эта встреча станет ещё более интересной и на этот раз пройдет при сильной поддержки от команды Leroy Merlin, известной своими развитыми архитектурными практиками и решениями в Node.js.

Совсем недавно вышла уже счастливая 13-я версия, а 12-я “улетела” в LTS. Что это значит? Поговорим при встрече.;) А заодно обсудим, что произошло у каждого из нас за год – у кого-какие успехи, боли, челленджи, а затем копнем проблему создания единой архитектуры приложения, способы её решения, посмотрим на проблемы изолированных площадок и hot-reloading модулей в Node.js.

КОГДА: 20 ноября 2019, 19:00
ГДЕ: Москва, Шаболовка, в офисе компании Leroy Merlin.

Программа

Сегодня широкое распространение имеют следующие подходы для описания взаимодействия браузера и сервера, такие как OpenApi & GraphQL.

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

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

Привет, Хаброжители! Хотите сделать отличный подарок ребёнку, желающему научиться программировать, или научить взрослого, далёкого от мира кодов? Тогда книга-героиня нашего поста Вам подойдет. Эта книга научит писать код веб-игр на языках HTML и JavaScript и даже поможет читателю написать несколько увлекательных игр. Под катом — отрывок из книги.

Nicolò Ribaudo — один из ключевых разработчиков Babel, приглашённый эксперт TC39 и при этом ещё и студент-математик.

Nicolò выступит завтра на HolyJS 2019 Moscow. И в преддверии этого участники программного комитета HolyJS Евгений Кот (bunopus) и Дмитрий Махнёв (DmitryMakhnev) поговорили с ним о разработке Babel, задачах приглашённого эксперта, учёбе, предстоящем докладе на HolyJS… и о том, как при всём при этом можно умудряться высыпаться.

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

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

Статья будет интересна людям, которым близка тема IoT и они уже что-то делали в этой сфере. Важным замечанием будет то, что платформа должна заинтересовать (внезапно) JavaScript разработчиков, т.к. именно этот язык выбран как основа платформы. Конечно, и С/С++ разработчикам тоже будет что почитать.

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

Передать нужный код для каждого браузера – непростая задача.

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



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

Среди инструментов для разработчиков доминирует паттерн module/nomodule декларативной загрузки современного или legacy-кода, который предоставляет браузерам источники и позволяет решать, какие из них использовать:

<script type="module" src="/modern.js"></script>  
<script nomodule src="/legacy.js"></script> 

К сожалению, не всё так просто. Показанный выше подход на основе HTML инициирует перезагрузку скриптов в Edge и Safari.

Привет, Хабр! Представляю вашему вниманию перевод статьи «JavaScript Async/Await and Promises: Explained like you’re five years old» автора Jack Pordi.

Каждый, кто считает себя JavaScript-разработчиком, в какой-то момент должен был столкнуться с callback-функциями, промисами или, с недавних пор, с синтаксисом async/await. Если вы пробыли в игре достаточно долго, вы, вероятно, застали времена, когда вложенные callback-функции были единственным способом достижения асинхронности в JavaScript.

Когда я начал изучать и писать на JavaScript, уже существовало миллиард руководств и туториалов, объясняющих, как добиться асинхронности в JavaScript. Тем не менее, многие из них просто объясняли, как преобразовать callback-функции в промисы или промисы в async/await. Для многих этого, вероятно, более чем достаточно, чтобы они «поладили» с ними и начали использовать их в своем коде.

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

Эта статья — попытка свести воедино имеющиеся на текущий момент средства и выяснить, возможно ли создавать production ready приложения на React без предварительной компиляции сборщиками типа Webpack, или по крайней мере свести такую компиляцию к минимуму.

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

Возможность использовать ECMAScript modules (<script type="module"/> с импортами вида import Foo from './foo'; и import('./Foo')) прямо в браузере давно не новость, это хорошо поддерживаемы функционал: https://caniuse.com/#feat=es6-module.

Но в реальности мы импортируем не только свои модули, но и библиотеки. Есть отличная статья на эту тему: https://salomvary.com/es6-modules-in-browsers.html. И другая не менее хорошая статья достойная упоминания https://github.com/stken2050/esm-bundlerless.

Среди прочих важных вещей из этих статей, эти пункты наиболее важны для создания React приложения:

• Поддержка package specifier imports (или import maps): когда мы пишем import React from 'react' на самом деле мы должны импортировать что-то подобное https://cdn.com/react/react.production.js
• Поддержка UMD: React до сих пор распространяется как UMD и на данный момент авторы все еще не пришли к согласию как распространять библиотеку в виде модуля
• JSX
• Импорт CSS

Давайте пройдем по всем пунктам по очереди.

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

За полным списком новых полезных инструментов, статей и докладов можно обратиться в мой телеграм канал @OpensourceFindings (по ссылке зеркало, если не открывается оригинал).

В сегодняшнем выпуске.
Технологии внутри: Rust, Swift, TypeScript, JavaScript, Go, Scala, Python.
Тематика: веб и мобильная разработка, визуализация данных, инструменты разработчика, документация.

Прошлый выпуск.

Сегодня стриминг-платформы на пике популярности, так как миллионы талантливых людей регулярно делятся своими знаниями – читай, используют стриминг на всю катушку. Так как этот рынок растет, то существует и масса приложений, которые могут стримить видео в реальном времени, используя камеру смартфона или ноутбука. Возможно, вы тоже хотите внедрить в ваше приложение такую функциональность; если так, то спешим обрадовать – теперь Voximplant позволяет прокидывать видеозвонки по RTMP в любой CDN, который поддерживает этот протокол.

Эта функциональность стала возможна благодаря новому модулю Voxengine – StreamingAgent. Под катом вас ждут 5 шагов по настройке этой интеграции, добро пожаловать!

6 ноября, то есть уже завтра, начнется конференция DotNext 2019 Moscow. Это два дня докладов для .NET-разработчиков: хардкор, низкоуровневые подробности, максимальный перформанс, best practices, архитектура и так далее.

А сразу следом за ней, 8 и 9 ноября, состоится конференция HolyJS 2019 Moscow. Это два дня бесконечного фронтендерского веселья.

Из тридцатки докладов на каждой из конференций вы сможете совершенно бесплатно посмотреть на YouTube доклады первого дня, проводящиеся в первом зале — 6 штук. В той же онлайн-трансляции будут интервью между докладами.

За ссылками и подробностями ныряйте под кат.

Продолжаем серию проектов для тренировки.

• 9 проектов для оттачивания Front-End мастерства
• Шесть задачек для Front-End разработчика
• Занимательная практика для разработчика
• 8 учебных проектов
• Еще список проектов, на чем потренироваться