Год назад знакомые попросили сделать меня сайт с динамическим контентом. Тогда о Web я знал чуть больше чем ничего, но попробовать было интересно.
Под катом впечатления заядлого С++ программиста от мира Web, собственные велосипеды, необычные решения, возмущения по поводу и без. Все эмоции вынесены в спойлеры, дабы не нагружать статью.
Надеюсь будет интересно Web разработчикам посмотреть на потуги С++ника, ну а С++ разработчикам узнать для себя что-то новое.
На «Хабре» всё чаще и чаще появляются статьи про разработку фронтенда на JavaScript. Рассматриваются тяжёлые библиотеки от Google и Facebook, не прекращаются холивары на тему какой фреймворк лучше использовать. Но не задумывались ли вы, что все эти фреймворки невозможны или абсолютно нелепы на других языках программирования? По моему субъективному мнению, это всё от того, что во главе угла DOM модель — HTML-тег, а не компонент. Но вернёмся к JavaScript.
Читать полностью »
React.js позволяет очень эффективно и быстро работать с DOM-ом, активно развивается и с каждым днем набирает все больше популярности. Недавно открыл для себя концепцию реактивного программирования, в частности, не менее популярную библиотеку Rx.js. Данная библиотека выводит на новый уровень работу с событиями и асинхронным кодом, которого в UI логике javascript приложений предостаточно. Пришла идея объединить мощь данных библиотек в одно целое и посмотреть что из этого выйдет. В этой статье вы узнаете о том как удалось подружить Rx.js и React.js.
Читать полностью »
Если вы когда-нибудь сталкивались с задачей ресайза картинок в браузере, то вы наверное знаете, что это очень просто. В любом современном браузере есть такой элемент, как канва. На него можно нанести изображение, задав желаемые размеры. Пять строчек кода и картинка готова:
function resize(img, w, h) {
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
canvas.getContext('2d').drawImage(img, 0, 0, w, h);
return canvas;
}
Потом с помощью этой же канвы картинку можно сохранить в JPEG и, например, отправить на сервер. В чем же тут подвох? А дело в качестве получившегося изображения. Если вы поставите рядом такую канву и обычный элемент <img>, в который загружена эта же картинка (исходник, 4 Мб), то вы увидите разницу.
The Rolling Scopes — минское сообщество фронтенд/javascript разработчиков. Мы занимаемся проведением митапов, воркшопов и Q&A сессий. А в этом году доросли до уровня, не побоюсь сказать этого слова, международной конференции. Наше 20-е мероприятие получилось помасштабнее остальных. В связи с этим непременно хочется поделиться деталями проведения, атмосферой и, конечно же, материалами.
Читать полностью »
Есть такой язык программирования, который называется C#. И есть очень много разработчиков, которым он очень нравится. А ещё есть такой язык программирования, который называется JavaScript. Как-то так сложилось, что он нравится далеко не всем C#-разработчикам. А теперь представьте ситуацию: есть заядлый C#-разработчик. Он очень любит C#, все-все проекты на нём пишет. Но судьба распорядилась так, что ему понадобилось написать клиентское веб-приложение. Знаете, такое, чтобы пользователю не нужно было себе ничего скачивать и устанавливать, чтобы он мог просто открыть любой браузер в любой операционной системе на любом устройстве — а приложение уже там. И вот тут у нашего лирического героя возникла проблема: вроде бы JavaScript идеально подходит для этой задачи, но вот писать на нём отчего-то на нём не очень хочется. К счастью, в современном мире существует много языков, которые транслируются в JavaScript (всякие TypeScript, CoffeScript и тысячи других). Но наш разработчик оказался очень упрямым: он упорно не хочет изменять своему любимому C# с «вражескими» технологиями.
К счастью для него, счастливое будущее уже практически наступило. Есть такой проект, который называется DuoCode. Он умеет транслировать C#-код в JavaScript. Пока он в состоянии beta, но у него уже весьма неплохо получается: поддерживаются нововведения C# 6.0, Generic-типы, Reflection, структуры и LINQ, а отлаживать итоговый JavaScript можно на исходном C#. Давайте посмотрим внимательнее, что же представляет из себя продукт.
Команда «npm install» в менеджере пакетов npm чаще всего употребляется для локальной установки зависимостей некоторого модуля, совершаемой в его подкаталоге «/node_modules».
Однако возможен и запуск этой команды с ключом «-g» (от слóва «global»). Он обеспечивает установку указанного ей пакета в некоторое глобальное (то есть общее для всей системы) место. Кроме того, в PATH (для последующего запуска из любого желаемого каталога) оказывается прописанною та команда, которая была указана в свойстве «"bin"» в файле package.json у установленного пакета.
Таким общим местом, согласно документации, под Windows служит подкаталог «/node_modules» в каталоге установки Node. В остальных же системах таким общим местом чаще всего оказывается каталог «/usr/local/lib/node_modules» (тогда как Node там устанавливается в каталог «/usr/local/bin»).
Обыкновенно этот подход употребляется для глобальной установки различных утилит, предназначенных для употребления из командной строки. Вот некоторые примеры:
Однако на CLI (на командной строке) свет клином не сошёлся — и читателям Хабрахабра должно уж вполне быть известно, что приложение на языке JavaScript, употребляющее API Node.js, можно снабдить и GUI (графическим интерфейсом пользователя), сочинённым на языках HTML и CSS. Для этого придётся и запускать такое приложение вместо Node на том движке, который до прошлого года назывался node-webkit, а в нынешнем (2015) году оказался 14 января переименованным в nw.js.
Ваши GUI-приложения также могут глобально быть установлены в системе из npm-пакета при помощи npm. Давайте поговорим об этом.
Для тех, кто статью читать не захочет, сразу репозиторий на github.
А остальных под катом ждёт бессвязная и бессмысленная история о том, как я дошёл до жизни такой, при помощи node-webkit, написал приложение, которого джва года ждал.Читать полностью »
В прошлой статье мы упоминали, что:
В настоящее время существует большое количество библиотек, поддерживающих протокол OData, и каждый день появляются новые. В частности, с OData работают такие JavaScript библиотеки, как Kendo UI, DevExtreme Web, Syncfusion HTML5 controls, Infragistics HTML5 controls, OpenUI5, Wijmo, JayData, Breeze.js, datajs, ODataJS, angular-odata, и т.д.
Многие из этих библиотек существенно упрощают разработку сложных приложений благодаря стандарту OData. Например, достаточно грид контролу указать URL к серверу OData и все остальное он сделает сам: пэйджинг, сортировку, добавление- модификацию-удаление записей, фильтрацию данных, группировку и т.д.
Мы подготовили примеры того, как гриды работают с OData.
Основные запросы грида к серверу:
Рассмотрим детальнее основные запросы на примере
Читать полностью »
Я люблю, когда мои приложения бегут со скоростью 60 fps, даже на мобильных устройствах. А еще я люблю сохранять состояние моего приложения, например, открытые окошки или введенный текст в localstorage и метаданных пользователя (если он зарегистрирован), чтобы, закрыв его, работу с ним можно было бы продолжить позже с того же места, в том числе и на другом устройстве.
Это все прекрасно, вот только сегодня я столкнулся с одной проблемой. Дело в том, что есть у меня одно боковое меню, offcanvas, и его состояние (открыто/закрыто) я тоже бы хотел сохранить в браузере и учетной записи пользователя. Вот только запись в localstorage и AJAX реквест на обновление в БД асинхронны и они все время норовят запускаться прямо во время сложной анимации, крадя у меня пару-другую фреймов, что особенно заметно на мобильных устройствах. Очевидно, мне бы хотелось, чтобы данные сохранялись после того, как анимация завершится, а не в критичный момент моего приложения, но как?
Читать полностью »
