Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Дайджест свежих материалов из мира фронтенда за последнюю неделю №490 (18 — 24 октября 2021)

Разработка веб-сайтов *CSS *JavaScript *HTML *
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →
Всего голосов 19: ↑19 и ↓0 +19
Просмотры 4.3K
Комментарии 1

Часто задаваемые вопросы про asm.js

JavaScript *
Перевод
asm.js — необыкновенно оптимизируемое, низкоуровневое подмножество JavaScript. asmjs.org

asm.js — новый язык?


Нет, это просто подмножество JavaScript. Программа на asm.js одинаково поведёт себя и в существующих движках JavaScript, и в движке с предварительной (ahead-of-time, AOT) компиляцией, способном распознавать и оптимизировать asm.js; различаться будет её скорость, разумеется!

Какой выигрыш в производительности можно ожидать от asm.js?


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

Как я могу следить за ходом реализации?


Мозилла работает над первой реализацией оптимизирующего компилятора asm.js для SpiderMonkey. В вики Фонда Мозиллы также опубликован план разработки дальнейших выпусков и оптимизаций. Если авторы других движков JavaScript опубликуют собственные планы реализации компиляторов asm.js, мы их здесь упомянем.

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


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

То обстоятельство, что asm.js — это JavaScript, не обернётся ли непредсказуемым выполнением кода?


Предварительная (ahead-of-time, AOT) компиляция asm.js может генерировать код, выполнение которого весьма предсказуемо, потому что валидный код asm.js ограничен крайне небольшим подмножеством JavaScript, состоящим только из строго типизированных целых чисел, чисел с плавающей точкою, арифметических операций, вызовов функций и обращения к куче.

Почему бы тогда не NaCl или PNaCl вместо этого? Вы просто упорствуете насчёт JavaScript?


Принципиальным достоинством asm.js по сравнению с новыми технологиями вроде NaCl и PNaCl является то, что asm.js работает сегодня: существующие движки JavaScript ужé неплохо оптимизируют код, написанный в таком стиле. Что означает, что разработчики могут выпускать код на asm.js сегодня, а со временем его работа будет ускоряться. Другою важною пользою является заметно бóльшая простота реализации, для которой потребуется совсем немного дополнительных механизмов поверх существующих движков JavaScript — и не понадобится слой совместимости API.

Читать дальше →
Всего голосов 42: ↑24 и ↓18 +6
Просмотры 41K
Комментарии 21

Путь JavaScript модуля

Разработка веб-сайтов *JavaScript *


На момент написания этой статьи в JavaScript еще не существовало официальной модульной системы и все эмулировали модули как могли.

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

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

Дело в том, что раньше не думали, что на JavaScript можно делать огромные проекты, а не просто «пропатчить DOM», поэтому о модулях не думали. Да и вообще не думали о будущем. И тут Внезапно будущее нагрянуло! Все вроде-бы уже есть, а модули в JavaScript, мягко говоря, запаздывают. Поэтому разработчикам приходится крутиться и выдумывать какие-то эмуляторы модульности.

Думаю многие из вас читали прекрасную статью Addy Osmani Writing Modular JavaScript With AMD, CommonJS & ES Harmony, которая стала одной из глав его книги Learning JavaScript Design Patterns в этой статье рассказывается про «современные» JavaScript модули или же читали достаточно старую статью JavaScript Module Pattern: In-Depth 2010 года про «старые» модули.

Я не буду переводить эти статьи и не буду делать из них солянку. В своей статья я хочу рассказать о моем модульном пути. О том как я проделал путь от «старых» модулей к «новым» и что использую сейчас и почему.
Читать дальше →
Всего голосов 188: ↑185 и ↓3 +182
Просмотры 117K
Комментарии 71

Autopolyfiller — Precise polyfills

Разработка веб-сайтов *JavaScript *

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

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

Есть целый ряд способов исправить эту ситуацию:

lodash и underscore


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

_.chain([1, 2, 3, 4])
.map(function (item) {
    return item * item;
})
.filter(function (item) {
    return item < 9;
})
.value();

Читать дальше →
Всего голосов 45: ↑44 и ↓1 +43
Просмотры 13K
Комментарии 5

Ecmascript 6 — что можно использовать уже сейчас

JavaScript *


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

Как известно, стандарт Ecmascript 6 собираются опубликовать в июне 2015. Но так как многое уже имплементировано в современный браузерах, почему-бы не начать использовать это прямо сейчас?
Поскольку jsFiddle и аналоги ES6 не поддерживают, буду использовать es6fiddle для примеров. К сожалению, не все в нем можно показать из-за багов. При отсутствии ссылок на es6fiddle рекомендую копировать сниппеты кода в консоль современного браузера и выполнять их — для наглядности. Рекомендую крайний стабильный Firefox (версия 33 на момент написания статьи) — там все работает «из коробки».

Читать дальше →
Всего голосов 67: ↑48 и ↓19 +29
Просмотры 60K
Комментарии 39

Меняем CoffeeScript на ES6

Разработка веб-сайтов *JavaScript *
Из песочницы
Спешу предположить, что вы наслышаны о ES6 и, возможно, успели попробовать её. Тогда вам наверняка покажется интересной заметка о некоторых фичах спецификации, опубликованная Блейком Уильямсом в блоге Thoughtbots. Я же, с позволения автора, публикую перевод.

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

ES6 сегодня


Вы можете начать писать на ES6 прямо сейчас, используя транслятор в ES5 6to5. 6to5 поддерживает достаточно много инструментов сборки, в их числе: Broccoli, Grunt, Gulp и Sprockets. У меня всё прекрасно работало со sprockets-es6, а 4.x Sprockets будут поддерживать 6to5 из коробки. Также вы можете попробовать ES6 прямо в браузере в 6to5 REPL.
Читать дальше →
Всего голосов 32: ↑28 и ↓4 +24
Просмотры 32K
Комментарии 69

Ещё один пост о сборке front-end проекта

Разработка веб-сайтов *CSS *JavaScript *HTML *
Tutorial
Js app starter

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

Что умеет делать сборщик:
  • Собирать front-end проект для development & production окружений.
  • Собирать по несколько js/css бандлов на проект.
  • Использовать стиль CommonJS модулей в браузере.
  • Использовать ES6-синтаксис.
  • Спрайты, картинки и многое другое.

Читать дальше →
Всего голосов 24: ↑22 и ↓2 +20
Просмотры 78K
Комментарии 12

ECMAScript 6

Разработка веб-сайтов *JavaScript *Node.JS *
Перевод
Границы моего языка олицетворяют границы моего мира.
— Людвиг Витгенштейн

Последние несколько месяцев я пишу только ECMAScript 6 код, воспользовавшись трансформацией [1] в поддерживаемые в настоящее время версии JavaScript.
Читать дальше
Всего голосов 39: ↑36 и ↓3 +33
Просмотры 128K
Комментарии 34

Анонс альфа-версии TypeScript 1.5

Блог компании Microsoft Разработка веб-сайтов *JavaScript *TypeScript *
Перевод
Сегондя мы анонсируем альфа-версию TypeScript 1.5, первую превью-версию предстоящего релиза TS1.5. Эта версия дает возможность познакомиться со многими новыми возможностями, которые мы планируем включить в финальный релиз.



Три ключевые новые вещи, которые мы добавляем в инструменты TypeScript: более богатый опыт работы с ES6, декораторы и новый плагин для Sublime Text.

Вы можете попробовать альфа-версию сегодня, установив новый компилятор через npm.
Подробности под хабракатом
Всего голосов 29: ↑25 и ↓4 +21
Просмотры 13K
Комментарии 28

Exploring JavaScript Symbols. Symbol — новый тип данных в JavaScript

JavaScript *Node.JS *
Tutorial
Это первая часть про символы и их использование в JavaScript.

Новая спецификация ECMAScript (ES6) вводит дополнительный тип данных — символ (symbol). Он пополнит список уже доступных примитивных типов (string, number, boolean, null, undefined). Интересной особенностью символа по сравнению с остальными примитивными типами является то, что он единственный тип у которого нет литерала.

Для чего же нужен был дополнительный тип данных?

В JavaScript нет возможности объявить свойство объекта как приватное. Чтобы скрыть данные можно использовать замыкания, но тогда все свойства нужно объявлять в конструкторе (так как нет возможности объявить их в прототипе), к тому же они будут создаваться для каждого экземпляра, что увеличит размер используемой памяти. ECMAScript 5 предоставил возможность указать enumerable: false для свойства, что позволяет скрыть свойство от перечисления в for-in и его не будет видно в Object.keys, но для этого нужно объявлять его через конструкцию Object.defineProperty.
Читать дальше →
Всего голосов 46: ↑42 и ↓4 +38
Просмотры 30K
Комментарии 61

Exploring JavaScript Symbols. Использование символов

JavaScript *Node.JS *
Tutorial
Это вторая статья из серии про символы и их использование в JavaScript. Предыдущая часть: «Symbol — новый тип данных в JavaScript».

С появлением символов объект Object был расширен одним методом, который позволяет получить все символы объекта:

	var role = Symbol('role');
	var score = Symbol('score');
	var id = 100;
	var name = 'Moderator';

	var user = { id: id, name: name };

	user[role] = 'admin';
	user[score] = 50000;

	Object.getOwnPropertySymbols( user ); // [Symbol(role), Symbol(score)]

Наличие этого метода лишает нас возможности создавать по-настоящему приватные свойства.
Читать дальше →
Всего голосов 20: ↑20 и ↓0 +20
Просмотры 12K
Комментарии 5

ES6 в деталях: введение

Разработка веб-сайтов *JavaScript *
Перевод
ES6 в деталях
Добро пожаловать в серию «ES6 в деталях»! В этой еженедельной серии статей мы будем изучать ECMAScript 6 — новую готовящуюся к выходу спецификацию языка JavaScript. ES6 имеет множество новых возможностей, которые делают JS мощнее и выразительнее, и каждую неделю мы будем рассматривать эти возможности. Но прежде чем мы приступим, неплохо бы поговорить о том, чем является ES6 и что от него ожидать.
Читать дальше →
Всего голосов 17: ↑12 и ↓5 +7
Просмотры 118K
Комментарии 28

Простой пример использования ES6 уже сегодня

Разработка веб-сайтов *JavaScript *
Recovery mode
Tutorial
Всех поздравляю с майскими праздниками. Сегодня хочу поделиться опытом использования ECMAScript 6(ES6). Мотивацией для написания статьи было отсутствие полного поэтапного руководства по использованию ES6, а точнее системы модулей с помощью транспилятора Babel. Кому интересно — добро пожаловать!
Читать дальше →
Всего голосов 30: ↑10 и ↓20 -10
Просмотры 22K
Комментарии 42

ES6 и за его пределами. Глава 1: ES? Настоящее и Будущее

Разработка веб-сайтов *JavaScript *
Перевод


Хочу уделить внимание книге, которую написал Kyle Simpson — «ES6 и за его пределами» (англ. «ES6 & Beyond»). Конечно, вклад внес не только он, а множество замечательных контрибьюторов. Благодарности.
На данный момент имеет статус — завершенный черновик.

Оглавление:
  • Глава 1: ES? Настоящее & Будущее
  • Глава 2: Синтаксис
  • Глава 3: Организация
  • Глава 4: Асинхронное управление потоком
  • Глава 5: Коллекции
  • Глава 6: API Дополнения
  • Глава 7: Мета программирование
  • Глава 8: За пределами ES6

Перед тем как начать читать эту книгу, я полагаю, что вы уже обладаете твердым знанием JavaScript вплоть до самого популярного стандарта (на момент написание этой книги), который обычно называют ES5 (технически это ES5.1). Здесь мы будем говорить о предстоящем стандарте ES6 и попытаемся понять дальнейшее развитие JS.
Читать дальше →
Всего голосов 27: ↑23 и ↓4 +19
Просмотры 34K
Комментарии 8

ES6 и за его пределами. Глава 2: Синтаксис. Часть 1

Разработка веб-сайтов *JavaScript *
Перевод


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

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

Обратите внимание: На момент написание данной книги, большинство новых возможностей ES6 уже были имплементированы как популярными браузерами(Firefox, Chrome и т.п.), так и множеством интересных окружений. Но к сожалению не все браузеры или же окружения могут работать с ES6. Как мы говорили в прошлой главе — транспилинг это наше все. С помощью данного подхода вы можете запустить любой из приведенных в этой книге примеров. Для этого в нашем распоряжении есть ряд инструментов — ES6Fiddle (http://www.es6fiddle.net/) отличная и простая в использовании площадка, для того, чтобы попробовать ES6 и REPL для Babel (http://babeljs.io/repl/).
Читать дальше →
Всего голосов 22: ↑22 и ↓0 +22
Просмотры 29K
Комментарии 23

Новые возможности io.js, которые Вы возможно не используете

JavaScript *Node.JS *
Перевод
Оригинал: New io.js Features You May Not Be Using

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

Если Вы не следили за развитием io.js, ничего страшного — в данной статье мы вкратце представим основные возможности платформы. Рассматривать их мы будет по мере выхода, то есть от старых к новым. Где это будет нужным, дадим ссылки на соответствующую документацию (на английском языке). Описывая каждую новую функциональность, будем указывать ее первую версию. Код написан с использованием стандартных функций ES6, которые доступны в io.js. Итак, начнем…
Читать дальше →
Всего голосов 19: ↑17 и ↓2 +15
Просмотры 11K
Комментарии 7

Разработка на ES6 для браузеров

Разработка веб-сайтов *JavaScript *Браузеры
Доброго времени суток.



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

Представляю вашему вниманию github.com/DavidKlassen/es6-browser-boilerplate.

В основу шаблона лег github.com/babel/babel-library-boilerplate, но gulpfile.js был основательно почищен и упрощен. Многие зависимости я убрал и оставил возможности, которые необходимы для разработки приложений для браузеров.

Основные цели, которые я преследовал:


  • Шаблон должен быть хорошей стартовой точкой для разработки SPA и third party SDK.
  • Минималистичность и расширяемость.
  • Весь код, то есть и само приложение и тесты можно писать на ES6.

А теперь подробнее
Всего голосов 26: ↑21 и ↓5 +16
Просмотры 23K
Комментарии 41

React на ES6+

Разработка веб-сайтов *JavaScript *ReactJS *
Перевод
Это перевод поста Steven Luscher опубликованного в блоге Babel. Steven работает в Facebook над Relay – JavaScript фрэймворком для создания приложений с использованием React и GraphQL.
За этот год, в процессе реорганизации Instagram Web, мы насладились использованием ряда особенностей ES6+, при написании нашх React компонентов. Позвольте мне остановиться на тех моментах, когда новые возможности языка могут повлиять на то как вы пишите React приложения, и сделают этот процесс легче и веселее, чем когда-либо.
Читать дальше →
Всего голосов 21: ↑19 и ↓2 +17
Просмотры 70K
Комментарии 15

Dojo 2

Разработка веб-сайтов *JavaScript *
Перевод
Dojo 2 уточняет и расширяет оригинальные интерфейсы Dojo, удаляя устаревшие функции и согласовывая терминологию в соответствии с дополнениями, внесенными в ECMAScript с момента первоначального выпуска Dojo в 2004 году. Цель Dojo 2 это поддержка только ECMAScript 5+. Так, особенности, которые были в Dojo 1 и которые стали частью спецификация ECMAScript, были удалены из фреймворка.

Dojo 2 написан на TypeScript. Это позволяет пользователям Dojo воспользоваться преимуществами дополнительной статической типизации и позволяет Dojo быть опубликованным в AMD, CommonJS и ES6 формате модулей для использования с нативными модульными системами в любом современном окружении.
image
Читать дальше →
Всего голосов 18: ↑15 и ↓3 +12
Просмотры 12K
Комментарии 15

Введение в JavaScript итераторы на ES6

Разработка веб-сайтов *JavaScript *Программирование *
Перевод
В EcmaScript 2015 (также известном как ES6) представлена совершенно новая концепция итераторов, которая позволяет задать последовательности (ограниченные и другие) на уровне языка.

Давайте поговорим об этом детальнее. Все мы хорошо знакомы с оператором цикла for, а многие даже знают его менее популярного брата for-in. Последний можно использовать, чтобы помочь нам объяснить базовые принципы работы с итераторами.
for (var key in table) {
  console.log(key + ' = ' + table[key]);
}

С оператором цикла for-in есть много проблем, но самая большая, пожалуй, состоит в том, что он не дает никаких гарантий последовательности. Попытаемся решить эту проблему с помощью итераторов. Больше информации под катом!
Читать дальше →
Всего голосов 20: ↑20 и ↓0 +20
Просмотры 32K
Комментарии 2