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

Babel и handlebars, пора бы и подружить

Разработка веб-сайтов *Python *JavaScript *
Из песочницы
Думаю многим известен такой пакет как Babel, либо PyBabel.
Отличный пакет для локализации, который базируются на gettext, как и все остальное ( по крайней мере мне известное) в современном мире.

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

Должен заранее оговориться, что у меня не было никакого ограничения в выборе технологий.
У нас в конечном счете для билда статики используется полный набор — ruby(compass), node(coffee,grunt,requirejs), python(бэкенд и основа всего и вся), шелл скрипты, в общем ограничения нет никакого.
Читать дальше →
Всего голосов 4: ↑4 и ↓0 +4
Просмотры 5K
Комментарии 0

Рецепт i18n. Основа — Babel, json с кофе и грант с hbs на свой вкус

Разработка веб-сайтов *Python *JavaScript *
Tutorial
В своем предыдущем посте я писал о том зачем и почему нужно было сделать pybabel-hbs, экстрактор строк gettext из шаблонов handlebars.

Чуть позже появилась необходимость извлекать так же из json.
Так появился pybabel-json.
pip install pybabel-json либо на github

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

Этот пост о том, как же в целом выглядит полный набор для локализации, от и до, что делать с данными из БД, либо из другого не совсем статичного места.
От и до включает в себя:
(должен заметить — что ни один пункт не является обязательным, все это достаточно легко подключается к любому приложению только частично и по необходимости)

— Babel. Набор утилит для локализации приложений.
— Grunt. Менеджер задач(task-ов),
— coffeescript. В представлении не нуждается, весь клиенстский код написан на coffee, и из него тоже нужно извлекать строки.
— handlebars — темплейты
— json — хранилища строк
— Jed. gettext клиент для js
— po2json. Утилита для перевода .po файлов в .json формат поддерживаемый Jed-ом

А дальше будет много текста
Всего голосов 16: ↑16 и ↓0 +16
Просмотры 6.2K
Комментарии 5

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

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

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

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

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

React на ES6+

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

React boilerplate — Rocket React

Разработка веб-сайтов *Node.JS *ReactJS *
Из песочницы
image

Хочу представить вашему вниманию boilerplate (skeleton) на базе React.js + Backbone для быстрого старта разработки приложения любой сложности. Эта связка помогла нашей команде в срок сделать сложное приложение с минимальным количеством проблем а простота позволила быстро подключать новых разработчиков в процесс.
Читать дальше →
Всего голосов 24: ↑20 и ↓4 +16
Просмотры 18K
Комментарии 23

Использование ES6 в AngularJs 1.x со сборкой Browserify+Babel

Разработка веб-сайтов *JavaScript *Angular *
Из песочницы
В статье рассмотрим как написать на ES6 составляющие части AngularJs приложения, затем собрать с помощью Browserify и Babel на основе небольшого приложения, которое вы можете скачать с github и поиграться.
Читать дальше →
Всего голосов 12: ↑10 и ↓2 +8
Просмотры 28K
Комментарии 4

(Архив) Matreshka.js ECMAScript.next boilerplate

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *
Tutorial
Пост устарел, SystemJS — не панацея, он обладает множеством проблем со сборкой (лично я отрепортил о массе багов), Gulp можно заменить на NPM Scripts. Используйте Webpack.

Дисклеймер: этот пост может показаться неинтересным для продвинутых JavaScript разработчиков. Он ориентирован на новичков, желающих освоить ECMAScript 2015+.

С появлением частичной поддержки ECMAScript 2015 в Chrome 45 и NodeJS 4, мы, веб разработчики, вступили в новую эпоху отрасли, которая нам приносит не только «хлеб с маслом», но и доставляет массу удовольствия. К сожалению, новый JavaScript не поддерживается всеми браузерами. Разработчику на помощь приходит Babel, который компилирует новый JavaScript в старомодный и поддерживаемый всеми браузерами (даже древними). На самом деле компиляторов ECMAScript.next в ECMAScript 5 больше чем один: Traceur, ES6 Transpiler и другие. Но Babel (бывший 6to5) является самым популярным и самым быстроразвивающимся компилятором, на сегодня.

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

Решение — Matreshka.js ECMAScript.next boilerplate. Этот репозиторий убивает двух зайцев одним выстрелом: он содержит настроенный Gulp, SystemJS, а так же пример простых модулей, использующих Матрешку.

<habracut /|>

Репозиторий сделан для всех, не только для пользователей Матрешки. Если вы не желаете использовать этот фрефмворк, просто не импортируйте его и удалите сответствующие файлы из /src/lib/.

Пример максимально упрощен для того, чтоб новичек сосредоточился на реализации, исключительно, JavaScript кода. CSS препроцессор, browserify, jspm и другие вещи не включены, а библиотеки, которые вы желаете подключить, можно копировать напрямую в папку /src/lib/.

Что мы будем использовать?


  • Gulp — «запускатель задач».
  • SystemJS — универсальный загрузчик модулей (AMD, CJS, ES6).
  • Babel — компилятор JavaScript нового поколения в старый.
  • Matreshka — фреймворк, использующийся по умолчанию.

Читать дальше →
Всего голосов 17: ↑16 и ↓1 +15
Просмотры 7.2K
Комментарии 12

Релиз TypeScript 1.6: не только React

Разработка веб-сайтов *JavaScript *TypeScript *
Компания Microsoft активно выпускает новые версии TypeScript. Товарищи разработчики объявили о выпуске бета версии TS версии 1.6 аж второго сентября. А уже 16 сентября был выпущен релиз. Скоростные ребята. Но при этом релиз как-то прошел незамеченным (не для всех, но все же). На Хабре как-то не было упоминаний (я не нашел). А посему немного информации по улучшениям.

Одна из мощных фич этой версии заключается в нативной поддержке синтаксиса React/JSX. Но это не все. Вот перечень некоторых нововведений:

  • Генераторы ES6
  • Локальные типы
  • Алиасы на генерик типы
  • Классовые выражения (анонимные классы)
  • Поддержка JSX
  • Абстрактные классы и методы
  • Новый флаг –init
  • Новая секция “exclude” в конфигурационном файле tsconfig.json

Рассмотрим наиболее интересные из них. Го под кат, если интересно.
Читать дальше →
Всего голосов 32: ↑27 и ↓5 +22
Просмотры 17K
Комментарии 13

Разбираем декораторы ES2016

JavaScript *
Из песочницы


Многие из нас, наверное, уже устали от этой шумихи вокруг последних стандартов ECMAScript. ES6, ES7 ECMAScript Harmony… Кажется, что у каждого свое мнение на счет того, как правильно называть JS. Но даже несмотря на весь этот хайп, то что сейчас происходит с JavaScript — это самое замечательное, что происходило с ним за последние лет 5 минимум. Язык живет, развивается, комьюнити постоянно предлагает новые возможности и синтаксические конструкции. Одной из таких новых конструкций, безусловно заслуживающих внимания, являются декораторы. Занявшись поисками материалов по этой теме, я понял, что в русскоязычном интернете практически ничего нет о декораторах. В то же время Addy Osmani еще в июле 2015 представил прекрасную статью Exploring ES2016 Decorators на Medium. В связи с этим, я хотел бы представить вашему вниманию перевод этой статьи на русский язык и разместить его здесь.
Читать дальше →
Всего голосов 19: ↑16 и ↓3 +13
Просмотры 90K
Комментарии 20

Как ESLint реагирует на ситуацию с удалением пакетов из NPM

JavaScript *Node.JS *
После того, как произошла ситуация с удалением пакетов из NPM, которая затронула огромное количество пользователей пакетов babel, jscs и многих других (об этом можно почитать здесь: «A discussion about the breaking of the Internet»), многие разработчики Open Source начали рассуждать о будущем NPM и экосистемы JS в целом.

Мнения разделились:


Ну а команды крупных Open Source пакетов, на которые свалилось огромное количество тикетов в github, всерьез задумались о том, как не допустить такой ситуации в будущем. Особенно пострадали те проекты, которые часто используются в CI, так как именно пользователи CI в первую очередь заметили проблемы с отсутствующими зависимостями. Одним из таких проектов является ESLint, имеющий порядка 70 тысяч установок в день, большинство из которых приходится на CI-сборки.
Читать дальше →
Всего голосов 21: ↑19 и ↓2 +17
Просмотры 13K
Комментарии 21

NPM запретил отзывать без разрешения open-source модули старше 24 часов

Разработка веб-сайтов *Open source *JavaScript *Node.JS *
Пакетный менеджер NPM на прошлой неделе стал причиной сумятицы в связи с исчезновением маленького модуля left-pad, на который были установлены зависимости в Node, React, Babel и тысячах других пакетов. Чтобы не допустить такого в будущем, сейчас администрация NPM внесла изменения в правила. По новым правилам, автоматический отзыв модуля возможен только в течение 24 часов после публикации на сервере NPM. После этого времени отзыв допускается только с разрешения администрации.
Читать дальше →
Всего голосов 32: ↑27 и ↓5 +22
Просмотры 26K
Комментарии 164

Начало перевода «legacy» Angular JS проекта на Angular 1.5 Components / ES6 и TypeScript

Разработка веб-сайтов *JavaScript *Angular *TypeScript *
Tutorial
В статье я хотел поделиться уже работающим в продакшене вариантом начала постепенной миграции «legacy» Angular JS проекта на все хорошее, что дал нам Angular 1.5 и связку ES6/TypeScript.

Итак дано: стандартный проект, разработка которого началась еще на бородатом Angular 1.2 (человеком, далеким от мира фронтенда), представленный в более или менее стандартном виде — отдельно по директориям сгруппированы модули с роутами, сервисы, директивы и невероятно жирные контроллеры, функционал из которых потихоньку выделяестся в отдельные директивы. Адский поток фич к реализации, полное отсутствие моделей, доступ к объектам и их модификации — как бог на душу положит.

Также в проекте уже присутствует более или менее налаженный и прописанный процесс сборки/минификации и деплоя всего этого добра при помощи gulp, CI и прочее.

Задача — не уйти в себя на поддержке проекта в таком виде, в каком он есть, начать писать хороший, поддерживаемый код, научиться чему-то новому.
Читать дальше →
Всего голосов 18: ↑15 и ↓3 +12
Просмотры 13K
Комментарии 11

It’s the future

JavaScript *
Перевод

Этот пост просто шутка и не пытается выставить инструменты, упомянутые здесь, в дурном свете. Я использую их постоянно, они великолепны, и я рекомендую их использовать. По мотивам It's the future @ CircleCI Blog


— Эй, я бы хотел научиться писать крутые веб-приложения. Слышал, у тебя есть опыт.


— Да, я как раз занимаюсь фронтендом, юзаю пару тулз.


— Круто. Я щас делаю простое приложение — обычный TODO-лист, используя HTML, CSS и JavaScript, и планирую заюзать JQuery. Это норм?


— Не-не-не. Это олдскул. Джиквери мёртв — никто не использует его теперь! Тебе нужен React. Это будущее.


— Окей, лады. А что это?


Читать дальше →
Всего голосов 178: ↑167 и ↓11 +156
Просмотры 84K
Комментарии 287

React.js: собираем с нуля изоморфное / универсальное приложение. Часть 1: собираем стек

JavaScript *Node.JS *ReactJS *
Из песочницы
Tutorial
image

Лицо моей жены, когда она вычитывала эту статью


Я решил написать цикл статей, который и сам был бы счастлив найти где-то полгода назад. Он будет интересен в первую очередь тем, кто хотел бы начать разрабатывать классные приложения на React.js, но не знает, как подступиться к зоопарку разных технологий и инструментов, которые необходимо знать для полноценной front-end разработки в наши дни.


Я хочу с нуля реализовать, пожалуй, наиболее востребованный сценарий: у нас есть серверная часть, которая предоставляет REST API. Часть его методов требует, чтобы пользователь веб-приложения был авторизован.

Читать дальше →
Всего голосов 51: ↑46 и ↓5 +41
Просмотры 186K
Комментарии 78

Дорогой JavaScript,

JavaScript *Программирование *
Перевод
Мне хочется рассказать тебе о проблеме в нашем сообществе.

Я участвовал во множестве открытых проектов, таких как Babel, Flow, Yarn, Lerna, и других. Как разработчик, мне посчастливилось стать частью самых лучших времён сообщества, равно как и худших.

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

Но боюсь, это не всё, с чем я сталкивался.
Открыть письмо
Всего голосов 83: ↑71 и ↓12 +59
Просмотры 33K
Комментарии 78

Lebab это как Babel, только наоборот

JavaScript *Node.JS *
Все мы любим вкусности, которые получили с ЕS6. Это были крохотные, но удивительные возможности, такие как поддержка классов, стрелочные функции, константы и т.д.

Современные браузеры поддерживают большинство этих синтаксических улучшений, однако для поддержки устаревших браузеров приходится использовать Babel. Хотя бывают ситуации, когда можно не волноваться о поддержке старых браузеров и начать жить.
Читать дальше →
Всего голосов 34: ↑33 и ↓1 +32
Просмотры 13K
Комментарии 15

Тестирование untestable JS c помощью Babel и snarejs

Разработка веб-сайтов *JavaScript *Node.JS *Тестирование веб-сервисов *
image

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

В последнее время появилось огромное количество фреймворков которые решают задачи тестирования: jest, mocha, sinon, chai, jasmine, список можно продолжать долго, но даже имея такую свободу выбора инструментов для написания тестов остаются кейсы которые сложно протестировать.

О том как протестировать то что в общем может быть untestable пойдет речь далее.
Читать дальше →
Всего голосов 17: ↑16 и ↓1 +15
Просмотры 5.9K
Комментарии 11

Runtyper — инструмент для проверки типов при выполнении JavaScript кода

Разработка веб-сайтов *Open source *JavaScript *Node.JS *TypeScript *

Runtyper — это плагин для Babel, выполняющий проверку типов прямо во время выполнения JavaScript кода. Он обнаруживает некорректные операции, например строгое сравнение строки и числа, и бросает предупреждение в консоль. Это позволяет вам находить ошибки типизации на ранней стадии, при этом не требует дополнительных аннотаций кода.


Runtyper warning example

Читать дальше →
Всего голосов 41: ↑37 и ↓4 +33
Просмотры 6.4K
Комментарии 30

Введение в React и Redux для бекенд-разработчиков

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


Если вы как я долгое время считали, что JavaScript – это такой «игрушечный» язык на котором пишут анимашки для менюшек и падающие снежинки на форумах под новый год, а потом очнулись в 2016 году с мыслями WTF: react, flux redux, webpack, babel,… не отчаивайтесь. Вы не одиноки. Материалов по современному фронтенду в сети много, даже слишком много. Под катом еще одно альтернативное мнение о том, каково это учить JavaScript в 2016 году.
Стань модным
Всего голосов 45: ↑33 и ↓12 +21
Просмотры 54K
Комментарии 182

Нативные ECMAScript модули — первый обзор

Блог компании Туту.ру Разработка веб-сайтов *JavaScript *Программирование *Браузеры
Перевод
Бандлеры и компайлеры против нативных модулей

В этой статье хочу поделиться переводом статьи о нативных ECMAScript модулях, которые все больше и больше обсуждаются среди фронтендеров. Javascript ранее никогда не поддерживал нативно работу с модулями, и нам, фронтендерам, всегда приходилось использовать дополнительные инструменты для работы с модулями. Но вы только представьте, что в скором времени не нужно будет использовать Webpack для создания бандлов модулей. Представьте мир, в котором браузер будет собирать все за вас. Подробнее об этих перспективах я и хочу рассказать.
Читать дальше →
Всего голосов 31: ↑30 и ↓1 +29
Просмотры 27K
Комментарии 8