Pull to refresh
  • by relevance
  • by date
  • by rating

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

Website developmentPythonJavaScript
Sandbox
Думаю многим известен такой пакет как Babel, либо PyBabel.
Отличный пакет для локализации, который базируются на gettext, как и все остальное ( по крайней мере мне известное) в современном мире.

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

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

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

Website developmentPythonJavaScript
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-ом

А дальше будет много текста
Total votes 16: ↑16 and ↓0+16
Views6.1K
Comments 5

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

Website developmentCSSJavaScriptHTML
Tutorial
Js app starter

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

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

Читать дальше →
Total votes 24: ↑22 and ↓2+20
Views78K
Comments 12

React на ES6+

Website developmentJavaScriptReactJS
Translation
Это перевод поста Steven Luscher опубликованного в блоге Babel. Steven работает в Facebook над Relay – JavaScript фрэймворком для создания приложений с использованием React и GraphQL.
За этот год, в процессе реорганизации Instagram Web, мы насладились использованием ряда особенностей ES6+, при написании нашх React компонентов. Позвольте мне остановиться на тех моментах, когда новые возможности языка могут повлиять на то как вы пишите React приложения, и сделают этот процесс легче и веселее, чем когда-либо.
Читать дальше →
Total votes 21: ↑19 and ↓2+17
Views70K
Comments 15

React boilerplate — Rocket React

Website developmentNode.JSReactJS
Sandbox
image

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

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

Website developmentJavaScriptAngular
Sandbox
В статье рассмотрим как написать на ES6 составляющие части AngularJs приложения, затем собрать с помощью Browserify и Babel на основе небольшого приложения, которое вы можете скачать с github и поиграться.
Читать дальше →
Total votes 12: ↑10 and ↓2+8
Views28K
Comments 4

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

Matreshka.js corporate blogWebsite developmentJavaScript
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 — фреймворк, использующийся по умолчанию.

Читать дальше →
Total votes 17: ↑16 and ↓1+15
Views7.2K
Comments 12

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

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

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

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

Рассмотрим наиболее интересные из них. Го под кат, если интересно.
Читать дальше →
Total votes 32: ↑27 and ↓5+22
Views17K
Comments 13

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

JavaScript
Sandbox


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

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

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

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


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

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

Website developmentOpen sourceJavaScriptNode.JS
Пакетный менеджер NPM на прошлой неделе стал причиной сумятицы в связи с исчезновением маленького модуля left-pad, на который были установлены зависимости в Node, React, Babel и тысячах других пакетов. Чтобы не допустить такого в будущем, сейчас администрация NPM внесла изменения в правила. По новым правилам, автоматический отзыв модуля возможен только в течение 24 часов после публикации на сервере NPM. После этого времени отзыв допускается только с разрешения администрации.
Читать дальше →
Total votes 32: ↑27 and ↓5+22
Views26K
Comments 164

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

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

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

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

Задача — не уйти в себя на поддержке проекта в таком виде, в каком он есть, начать писать хороший, поддерживаемый код, научиться чему-то новому.
Читать дальше →
Total votes 18: ↑15 and ↓3+12
Views13K
Comments 11

It’s the future

JavaScript
Translation

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


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


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


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


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


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


Читать дальше →
Total votes 178: ↑167 and ↓11+156
Views84K
Comments 287

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

JavaScriptNode.JSReactJS
Sandbox
Tutorial
image

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


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


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

Читать дальше →
Total votes 51: ↑46 and ↓5+41
Views186K
Comments 78

Дорогой JavaScript,

JavaScriptProgramming
Translation
Мне хочется рассказать тебе о проблеме в нашем сообществе.

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

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

Но боюсь, это не всё, с чем я сталкивался.
Открыть письмо
Total votes 83: ↑71 and ↓12+59
Views33K
Comments 78

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

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

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

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

Website developmentJavaScriptNode.JSWeb services testing
image

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

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

О том как протестировать то что в общем может быть untestable пойдет речь далее.
Читать дальше →
Total votes 17: ↑16 and ↓1+15
Views5.9K
Comments 11

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

Website developmentOpen sourceJavaScriptNode.JSTypeScript

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


Runtyper warning example

Читать дальше →
Total votes 41: ↑37 and ↓4+33
Views6.4K
Comments 30

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

Website developmentJavaScriptReactJS


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

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

Туту.ру corporate blogWebsite developmentJavaScriptProgrammingBrowsers
Translation
Бандлеры и компайлеры против нативных модулей

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