babel

  • ХабрахабрФото Минифицируем приватные поля в TypeScript. Доклад Яндекса

    Минифицируем приватные поля в TypeScript. Доклад Яндекса

    Меня зовут Лёша Гусев, я работаю в команде разработки видеоплеера Яндекса. Если вы когда-нибудь смотрели фильмы или трансляции на сервисах Яндекса, то использовали именно наш плеер. Я сделал небольшую оптимизацию размера бандла — минификацию приватных полей. В докладе на Я.Субботнике я рассказал об использовании Babel-плагинов, трансформеров TypeScript и о том, насколько в итоге уменьшился размер продакшен-сборки проекта. [embedded content] Конспект…

    Читать далее »
  • ХабрахабрФото [Перевод] Пишем babel плагин, пошаговое руководство

    [Перевод] Пишем babel плагин, пошаговое руководство

    Сегодня я поделюсь с вами пошаговым руководством как написать свой babel плагин. Вы сможете использовать эти знания для автоматизации правок, рефакторинга или кодогенерации. Что такое babel? Babel это JavaScript компилятор, который в основном используют для конвертации кода на ECMAScript 2015+ в обратно совместимый с текущими и более старыми браузерами или окружениями. Babel использует систему плагинов для преобразования кода, поэтому кто…

    Читать далее »
  • ХабрахабрФото [Перевод] JavaScript tree shaking, like a pro

    [Перевод] JavaScript tree shaking, like a pro

    Это перевод статьи об оптимизации и уменьшении размера бандла приложения. Она хороша тем, что тут описаны best practices, советы, которых стоит придерживаться, чтобы тришейкинг работал и выкидывал неиспользуемый код из сборки. Она будет полезной многим, потому что сейчас все используют системы сборки, в которых «из коробки» есть тришейкинг. Но чтобы он работал правильно, нужно придерживаться принципов, описанных ниже. Тришейкинг становится…

    Читать далее »
  • СофтФото [Перевод] Опрос по инструментам фронтенда 2019 — результаты

    [Перевод] Опрос по инструментам фронтенда 2019 — результаты

    TL;DR. В большинстве категорий теперь выделяются явные лидеры — несколько лет назад такого не было. Это помогает накоплению знаний. Поэтому Навыки владения инструментами в среднем становятся глубже у разработчиков всех уровней. Как всегда, огромная благодарность всем, кто нашёл время заполнить опросник. В этом году 3005 разработчиков ответили на 27 вопросов, охватывающих широкий спектр инструментов и методологий фронтенд-разработки. Со своей стороны,…

    Читать далее »
  • ХабрахабрФото [Перевод] Создание собственных синтаксических конструкций для JavaScript с использованием Babel. Часть 2

    [Перевод] Создание собственных синтаксических конструкций для JavaScript с использованием Babel. Часть 2

    Сегодня мы публикуем вторую часть перевода материала о расширении синтаксиса JavaScript с использованием Babel. → Головокружительная первая часть Как работает парсинг Парсер получает список токенов от системы токенизации кода и, по одному рассматривая токены, строит AST. Для того чтобы принять решение о том, как именно использовать токены, и понять, какой токен можно ожидать следующим, парсер обращается к спецификации грамматики языка.…

    Читать далее »
  • ХабрахабрФото [Перевод] Создание собственных синтаксических конструкций для JavaScript с использованием Babel. Часть 1

    [Перевод] Создание собственных синтаксических конструкций для JavaScript с использованием Babel. Часть 1

    Сегодня мы публикуем первую часть перевода материала, который посвящён созданию собственных синтаксических конструкций для JavaScript с использованием Babel. Обзор Для начала давайте взглянем на то, чего мы добьёмся, добравшись до конца этого материала: // конструкция '@@' оснащает функцию `foo` возможностями каррирования function @@ foo(a, b, c) { return a + b + c; } console.log(foo(1, 2)(3)); // 6 Мы собираемся…

    Читать далее »
  • ХабрахабрФото [Перевод] Зачем современную веб-разработку так усложнили? Часть 1

    [Перевод] Зачем современную веб-разработку так усложнили? Часть 1

    Современная фронтенд-разработка оставляет полярные впечатления: одни её любят, другие презирают. Я большой поклонник современной веб-разработки, хотя мне она напоминает некую «магию», со своими плюсами и минусами: Когда вы поймете, как использовать волшебные инструменты (babel! бандлеры! вотчеры! и так далее!), ваш рабочий процесс становится быстрым, мощным и восхитительным Если вы не понимаете волшебные инструменты, всё ужасно запутанно …и попытки освоить магию…

    Читать далее »
  • ХабрахабрФото [Из песочницы] Ускоряем сборку веб-приложения с webpack

    [Из песочницы] Ускоряем сборку веб-приложения с webpack

    Это совершенно неприемлемо. По мере того как ваше приложение развивается и растёт, увеличивается и время его сборки — от нескольких минут при пересборке в development-режиме до десятков минут при «холодной» production-сборке. Мы, разработчики, не любим переключать контекст в ожидании готовности бандла и хотим получать фидбек от приложения как можно раньше — в идеале за то время, пока переключаемся с IDE…

    Читать далее »
  • ХабрахабрФото Метапрограммирование в JavaScript и TypeScript

    Метапрограммирование в JavaScript и TypeScript

    Пролог В основном я буду писать об использовании тех или иных техник в JavaScript либо в TypeScriptЭта первая (и надеюсь не последняя) статья из серии. Хочу представить на Ваш суд ряд мини статеек, в которых будут описаны приемы и основы метапрограммирования. Так что же такое метапрограммирование: It means that a program can be designed to read, generate, analyze or transform…

    Читать далее »
  • ХабрахабрФото Собираем бандл мечты с помощью Webpack

    Собираем бандл мечты с помощью Webpack

    JS-приложения, сайты и другие ресурсы становятся сложнее и инструменты сборки — это реальность веб-разработки. Бандлеры помогают упаковывать, компилировать и организовывать библиотеки. Один из мощных и гибких инструментов с открытым исходным кодом, который можно идеально настроить для сборки клиентского приложения — Webpack. RU внедрил Webpack в несколько больших проектов, на которых до этого была своя кастомная сборка, и контрибьютил с ним несколько проектов. Максим Соснов (crazymax11) — Frontend Lead в N1. Максим знает, как с Webpack собрать…

    Читать далее »


Кнопка «Наверх»