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

Эволюция модульного JavaScript

Яндекс corporate blog Website development *JavaScript *


Скорее всего, когда Брендан Айк проектировал JavaScript, он не представлял, как эволюционирует его проект спустя двадцать лет. На данный момент вышло уже шесть основных спецификаций языка, и работа над его улучшением до сих пор продолжается.

Не будем лукавить: JavaScript никогда не был идеальным языком программирования. Одним из слабых мест в JS была модульность, а точнее её отсутствие. Действительно, зачем в скриптовом языке, который анимирует падающие на странице снежинки и валидирует форму, заботиться об изоляции кода и зависимостях? Ведь всё может прекрасно жить и общаться между собой в одной глобальной области — window.

С течением времени JavaScript трансформировался в язык общего назначения, так его начали использовать для построения сложных приложений в различных средах (браузер, сервер). При этом нельзя было положиться на старые подходы взаимодействия компонентов программы через глобальную область: с ростом объёма кода приложение становилось очень хрупким. Как результат для упрощения процесса разработки создавались различные реализации модульности.

Эта статья появилась в результате общения с участниками TC39 и разработчиками фреймворков, а также чтения исходных кодов, блогов и книг. Мы рассмотрим следующие подходы/форматы: Namespace, Module, Detached Dependency Definitions, Sandbox, Dependency Injection, CommonJS, AMD, UMD, Labeled Modules, YModules и ES2015 Modules. Кроме того, мы восстановим исторический контекст их появления и развития.
Читать дальше →
Total votes 71: ↑68 and ↓3 +65
Views 37K
Comments 34

Dojo 2

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

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

Модуль вкладок на es6/es2015 без jQuery и прочих зависимостей

JavaScript *HTML *
Sandbox

Предисловие


Какое-то время назад я стал постепенно отказываться от jQuery в пользу нативного javascript. Это связано с тем, что поддержка старых браузеров перестала быть приоритетной и на первое место вышла скорость загрузки страницы. Я не смог найти минималистичный модуль вкладок с простой html разметкой – поэтому решил написать свой.

Демо, Исходный код на Github

HTML разметка


<div class="tabs">
	<div class="tabs__toggle tabs__toggle_active">Вкладка 1</div>
	<div class="tabs__toggle">Вкладка 2</div>
	<div class="tabs__tab">
		Содержимое первой вкладки
	</div>
	<div class="tabs__tab">
		Содержимое второй вкладки
	</div>
</div>

Если на одной странице нужно разместить несколько групп вкладок нужно просто разделить их в разные блоки '.tabs'. Расположение внутренних блоков влияет только на порядок их вывода. Вкладке по умолчанию следует добавить класс 'tabs__toggle_active'.
Читать дальше →
Total votes 23: ↑16 and ↓7 +9
Views 13K
Comments 13

Тонкости модульной системы ECMAScript 2015 (ES6)

JavaScript *Programming *Node.JS *
Уже около полугода я пишу на ES6 (который в итоге назвали ES-2015) и ES7, с использованием бабеля в качестве транслятора. Писать мне приходилось в основном серверную часть, соответственно, использование модулей было само собой разумеющимся: до ES6 — с помощью модульной системы самой ноды, а теперь — с помощью стандартизированной семантики самого языка. И мне захотелось написать статью, в которой расписать тонкости, плюсы, подводные камни и необычности новообретенной модульной системы языка: отчасти — чтобы другим было проще, отчасти — чтобы разобраться во всём окончательно самому.

Я разберу, что такое модуль, как происходит экспорт сущностей, как происходит импорт сущностей, чем система модулей ES6 отличается от системы модулей в NodeJS.
Итак, начнем.
Total votes 39: ↑39 and ↓0 +39
Views 106K
Comments 38

Упрощение асинхронного кода на JavaScript с внедрением асинхронных функций из ES2016

Microsoft corporate blog JavaScript *Microsoft Edge
Translation
Хотя мы еще продолжаем работу над внедрением поддержки ES6/2015, команда Chackra также смотрит за пределы ES2016 и, в частности, на асинхронные функции. Мы рады объявить об экспериментальной поддержке async-функций в Microsoft Edge, начиная со сборки Microsoft Edge (EdgeHTML 13.10547).


Читать дальше →
Total votes 26: ↑21 and ↓5 +16
Views 19K
Comments 18

Обзор ES6 в 350 пунктах. Часть вторая

Plarium corporate blog Website development *JavaScript *Programming *Game development *
Translation
Моя серия заметок ES6 in Depth, состоящая из 24 записей, описывает большинство синтаксических изменений и нововведений в ES6. В этой публикации я подведу итог всего изложенного в предыдущих статьях, чтобы дать возможность посмотреть еще раз на всё вместе.


Читать дальше →
Total votes 22: ↑19 and ↓3 +16
Views 19K
Comments 7

Обзор возможностей современного JavaScript

Website development *JavaScript *Programming *
JavaScript, наверное, самый известный мультипарадигменный язык, в котором очень много неочевидных особенностей. Но тем не менее любим ли мы его или ругаем, факт остается фактом — это основной язык, на котором работает современный web.

В ушедшем году, вышел стандарт ECMAScript 2015 (неформально ES6), который сильно изменил, то к чему мы привыкли. Появилась масса новых возможностей, которые по сути представляют собой современное надмножество языка, пытающегося решить существующие проблемы. Class, let, const, стрелочные функции… разработчик, который ранее не видел код, написанный на ES6, не сразу догадается, что перед ним, по сути, старый добрый JS.

Есть масса прекрасных статей, посвященных современному стандарту. В этом же посте я хочу показать, что нам может предложить современный JS, когда необходимо решить насущную задачу. Например, поздравить всех c Новым Годом.
Читать дальше →
Total votes 56: ↑36 and ↓20 +16
Views 63K
Comments 67

Собираем простое MariontteJS+ES6 приложение с помощью Brunch

JavaScript *
Здравствуйте. Я хотел бы рассказать как с помощью Brunch можно собрать MariontteJS+ES6 приложение.



Сегодня уже 2016-й год и способов собирать приложения очень много. Ниже я предлагаю рассмотреть Brunch
Читать далее
Total votes 8: ↑6 and ↓2 +4
Views 7.4K
Comments 5

Про использование React с элементом canvas

JavaScript *HTML *Canvas *ReactJS *
Есть такой замечательный фреймворк React, который позволяет работать с огромным и мутабельным DOM в красивом иммутабельном функциональном стиле. Это действительно круто.

Но я бы хотел рассказать про опыт использования React, который позволяет работать с мутабельной абстракцией над "иммутабельным" canvas элементом. Звучит странно, но работает отлично.

Мотивация


Я использую элемент <canvas> очень часто. Я сделал несколько достаточно сложных веб-приложений, в которых canvas — это основной элемент представления данных. Использовать canvas без всяких фреймворков и библиотек может быть действительно сложно в крупных приложениях. Поэтому я начал часто использовать фреймворки. Сейчас я поддерживаю фреймворк Konva (есть обзорная статья https://habrahabr.ru/post/250897/).

Konva помогает очень сильно, но хочется большего. Так же я начал использовать React в своих приложениях, и он мне действительно нравится. И я подумал, как же я могу использовать React для рисования графики на canvas?

React + canvas

Читать дальше →
Total votes 25: ↑22 and ↓3 +19
Views 43K
Comments 11

Прямая трансляция конференции Make Web, Not War из Монреаля — 5 февраля, пятница, в 17:00 (Москва)

Microsoft corporate blog Website development *JavaScript *HTML *
Make Web, Not War: Live from Montreal

Всем привет! Сегодня в Монреале (Канада) наши коллеги проводят конференцию "Make Web, Not War: Live from Montreal", посвященную современным веб-стандартам, открытым решениями и открытым данным.

Начало трансляции в 17:00 по Москве. Запасайтесь попкорном и присоединяйтесь к погружению в веб-технологии.

Программа конференции
Total votes 12: ↑11 and ↓1 +10
Views 2.9K
Comments 0

Эмодзи?! Нет, не слышал

Badoo corporate blog Website development *JavaScript *
image В нашу жизнь уже давно вошли эмодзи. И в социальных сетях, и во всевозможных мессенджерах мы используем их не задумываясь, выражая свои эмоции всего одним символом. Но для кроссплатформенного приложения отправка и отображение эмодзи — непростая задача. Проблема заключается в том, что отправленные эмодзи с мобильных приложений не всегда отображаются корректно на веб-сайтах.

Последние версии iOS и Android имеют поддержку более 1200 символов эмодзи, но «десктопный» рынок не может похвастаться такими успехами. Мы же в Badoo хотим и делаем все, чтобы пользователям было комфортно общаться на всех платформах, не имея никаких ограничений в переписке.
Далее я расскажу, каким способом мы добились 100% поддержки эмодзи для веба.
Читать дальше →
Total votes 37: ↑34 and ↓3 +31
Views 33K
Comments 32

Использование стандарта ES2015 в рамках библиотеки Backbone.js

JavaScript *Programming *
Sandbox

В то время, как ребята из команд, работающих над Angular, React, мягко, но уверенно пересаживают разработчиков на ES2015, я хотел бы немного рассказать о возможностях использования нового стандарта спецификации с библиотекой Backbone.js. На сегодня основной подход к использованию ES2016 в браузерах один и не зависит от используемого фреймворка/библиотеки. И заключается он в следующем: пишем код на ES2015 и с помощью транспайлера (напр., Babel) получаем код (который и выполняется в браузере) на предыдущем стандарте ES5.


Но как модули, классы и прочие "фишки" из ES2015 использовать в рамках сущностей библиотеки Backbone.js? Об этом речь пойдет под катом.

Читать дальше →
Total votes 20: ↑18 and ↓2 +16
Views 14K
Comments 98

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

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

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

Будущее с Proxy

JavaScript *Angular *ReactJS *
image

Мы, программисты — мечтатели. Идем на поводу у хайпа, мечтая о новой серебряной пуле, которая решит все наши проблемы. А также, мы любим писать новые велосипеды, тем самым не решая проблемы, а создавая новые. Давайте в этой статье немного помечтаем об архитектуре, разрабатывая «Псевдо-новый» велосипед.
Читать дальше →
Total votes 10: ↑8 and ↓2 +6
Views 8.4K
Comments 4