Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

271,25
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Введение в Marionette.js Behaviors

Время на прочтение3 мин
Охват и читатели17K
image

В этом посте вы узнаете о новой фиче Marionette.js — Behaviors.

Очень часто в различных элементах интерфейса у нас встречаются похожие элементы управления (например кнопка «Удалить» может быть и у категорий, и у записей, и в списке зарегистрированных пользователей… да везде), и каждый раз приходится описывать обработчик этой кнопки в каждом View, причем везде одинаково.
Но это уже называется дублирование кода, и не приветствуется в большинстве общества. Поэтому разработчики Marionette.js предоставили нам такую замечательную фичу как Behaviors.

Behaviors предоставляет интерфейс для изолирования описаний взаимодействия DOM с пользователем в отдельные логические куски кода. Behavior может быть применено к любому View любое количество раз.

В этой статье рассмотрим самый тривиальный пример — кнопка «Удалить».
Читать дальше →

Организация вебсокетного взаимодействия с приложением Spring

Время на прочтение12 мин
Охват и читатели12K
Скажу сразу, что стандартная реализация такого взаимодействия — существует.

Однако, поскольку эта статья — продолжение темы «Простой вызов удалённых сервисных методов в одностраничных приложениях», здесь будет приведена альтернативная схема взаимодействия, необходимая для замены ajax на вебсокеты, в контексте подхода (jrspc), описанного в вышеупомянутой теме.

В первой статье — был описан механизм вызова сервисных методов, с использованием ajax.

В этой статье — описано, как можно реализовать данный механизм, с заменой ajax на вебсокеты, не меняя код бизнес-логики приложения.

Такая замена даёт более быстрое соединение(тесты в конце), экономию серверной памяти, и добавляет возможность вызывать методы клиента с сервера.

Для демонстрации, написано небольшое чат-приложение, с исходным кодом на гитхабе.
на примере разбора которого, я попытаюсь объяснить, как реализованы клиентская и серверная части такого взаимодействия.
Приложение работает на сервере tomcat 7.042.
Поддерживает https и wss (сертификат неподтверждённый), и не ведёт логов на сервере.
разобраться

Несколько интересностей и полезностей для веб-разработчика #16

Время на прочтение5 мин
Охват и читатели31K
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

PourOver


image
Библиотека для реально быстрой фильтрации и сортировки огромных коллекций, где речь идет о сотне тысяч элементов. PourOver построен на идеально простых запросах, которые могут произвольно формироваться друг с другом. Вы сможете объединять, скрещивать и разделять запросы. PourOver будет помнить как были построены ваши запросы и по-умному обновлять их, если появятся новые элементы или будут изменены старые. Работает на IE7+, Firefox 4+, Safari 5+, Opera 9+, Chrome 1+.

Стоит также заметить, что это проект от New York Times, на корпоративном Гитхабе которого есть еще популярный backbone.stickit плагин для датабиндинга и Tamper — serialization protocol for categorical data. В последнее время гики из западных СМИ прямо раскочегарились — вот недавно я писал про классные проекты от The Guardian и Financial Times.

Читать дальше →

Kenju форк Kendo UI Web (GPL3)

Время на прочтение2 мин
Охват и читатели19K
Несколько дней назад произошло одно важное событие в развитии JS фреймворка Kendo UI от компании Telerik. Они выпустили OpenSource версию продукта, под лицензией Apache v2 — Kendo UI Core. На деле же всё оказалось не так просто и однозначно.

Ранее вся библиотека Kendo UI выпускалась под лицензией GPL v3, что не разрешало использовать её бесплатно в коммерческих продуктах, для коммерческих приложений на основе этой библиотеки была разработана Kendo UI commercial license. Но для OpenSource же эта библиотека была настоящим подарком. Конечно же есть и другие аналогичные библиотеки и у них огромное количество своих поклонников. Плюсами Kendo можно считать:
1) Полная поддержка JQuery
2) Большое количество виджетов, что позволяет обойтись одной JS библиотекой (не считая jquery) в большинстве случаев
3) Качественные и приятные темы оформления
4) Отличная поддержка Twitter Bootstrap. Для kendo даже есть своя тема оформления bootstrap, для одновременной работы с CSS фреймворком.

Читать дальше →

И снова Dripstat

Время на прочтение3 мин
Охват и читатели6K
Достал из черновиков, чтобы поделиться с друзьями, пост довольно старый, можно не обращать внимания

Этот пост навеян вот этим постом: тыц.

Прочитал я его и подумал, неужели подобным образом автоматизируются браузерные процессы?
Кликер — это как-то слишком прямолинейно, и не подобают труъ программерам подобные автоматизации.
По моему это слишком, заставлять браузер обрабатывать клики по одному, когда у нас в руках полный исходный код приложения.
image
Читать дальше →

15 шаблонизаторов для фронтенд-разработки

Время на прочтение4 мин
Охват и читатели188K

Число JS-библиотек ни в коей мере не уменьшается; наоборот, оно растёт с каждым днём. Когда мы доходим до приложений JS, лучшим выбором оказываются шаблоны, чем полноценные библиотеки, потому что это приводит к более чистому базовому коду и лучшему процессу работы с ними.

Не так давно я писал, что вы могли бы попробовать написать свою библиотеку, когда придёт время. Шаблонизаторы же требуют несколько больших навыков и понимания языка, с которым вы работаете, поэтому лучше полагаться на любой шаблонизатор из имеющихся в списке ниже.
ICanHaz,Hogan,Handlebars,Mustache,Transp-cy,doT,Walrus,Chibi,templayed,ECT,Pithy,T,Nunjuck,Jade,Dust

В новой сборке COLT 2.0 (beta 6) появился расширенный автокомплит для Angular.js проектов — внутри {{}} для Sublime Text (2 и 3)

Время на прочтение1 мин
Охват и читатели3.7K


Раньше автокомлит работал только в JS — в запущенном приложении COLT находил нужный объект и смотрел его структуру. Теперь внутри {{}} и атрибутах директив в списке автокомплита появился выбор всех поля и методов из текущего $scope.
Читать дальше →

Визуальный контроль потока исполнения JavaScript с помощью COLT

Время на прочтение1 мин
Охват и читатели3.3K


Счетики функций COLT — как пользоваться. В чем профит.

При запуске сессии разработки с помощью COLT, каждая функция JavaScript снабжается специальным кодом, который позволяет вести статистику по потоку исполнения. Одно из полезных возможностей — прямо в коде видеть сколько раз была выполнена та или иная функция — видеть счетчики функций.

О счетчиках лучше показывать, а не писать, поэтому предлагаем вам видео обзор:
Читать дальше →

(Архив) Matreshka.js v0.1

Время на прочтение9 мин
Охват и читатели10K
Статья устарела. См. актуальную историю версий.


(Все предыдущие статьи обновлены до актуального состояния)
Репозиторий

Сайт (там же и документация)

Matreshka LogoВсем привет. Прошло 5 месяцев после последней публикации серии статей о Матрешке. С тех пор исправлен небольшой ряд найденных ошибок, появилось несколько удобных фич, в том числе и под влияниев ваших комментариев, проект обрел спонсора в лице Shooju, получил логотип и нормальный, не-бутстраповский сайт.

Читать дальше →

MMO на WebRTC

Время на прочтение5 мин
Охват и читатели30K
image

Каждый программист, написавший свое MMORPG очень быстро сталкивается с одной распространенной проблемой. Наиболее прохоженый путь для организации сети в клиент-серверных играх — это звезда, где центральный узел является сервером, а листы — это клиенты.

image

Такая организация имеет свои неоспоримые достоинства, например синхронизация игровых состояний клиентов на сервере, простота в реализации и почти фиксированные задержки до пользователя. Там где есть плюсы, обычно обитают и минусы — это ограниченная пропускная способность сервера и довольно большие задержки, если клиент находится далеко от вашего сервера. Как с ними бороться подробно написано в блоге 0fps.net и есть возможность эти проблемы довольно эффективно решать оставаясь в любимой «звездочке» — купить больше серверов, но что делать если вы студент вы ограничены в финансах и горизонтальное/вертикальное масштабирование для вас не вариант?
Как же быть?

Давать обещания – это ювелирное искусство

Время на прочтение11 мин
Охват и читатели8.7K
Статья написана для ювелиров, которым в силу роста популярности бижутерии пришлось оставить свою работу и заняться другим делом немного смежным с их предыдущим.
Читать дальше →

Скрещиваем WebWorker и Promise

Время на прочтение2 мин
Охват и читатели6.1K
Если уж есть необходимость скрещивать WebWorker с XMLHttpRequest, то пора бы скрестить его с любой функцией, а заодно разобраться с обещаниями ES6.

Цель — научиться делать вот так:
new PromiseWorker(array => array.sort()).Invoke([3,2,1]).then(result => console.log(result));
(Здесь и далее используются arrow functions для краткости)

Читать дальше →

Скрещиваем WebWorker и XMLHttpRequest

Время на прочтение3 мин
Охват и читатели7.5K
WebWorker+XMLHttpRequest

HTML5 уже никого не удивляет, но у многих новичков возникает много вопросов. Особенно вопросы связаные с параллельными потоками, а именно с WebWorker. Дальнейшее повествование требует знания JS и HTML — я не буду разжевывать основы html и js.
Сегодня мы рассмотрим как обернуть в WebWorker обычный XMLHttpRequest.
Читать дальше →

Ближайшие события

Как использовать Handlebars

Время на прочтение2 мин
Охват и читатели64K
В настоящее время веб-сайты все больше используют JavaScript для создания динамических интерфейсов обновляя данные и манипулируя DOM деревом. Если использовать шаблонизатор, реализующий шаблон View/Controller, код становится чище, его легче модифицировать.
Читать дальше →

Делегирование событий в AngularJS. Попытка разобраться

Время на прочтение2 мин
Охват и читатели15K
Евгений Гришковец, спектакль 'Как я съел собаку'Гришковец как бы говорит нам «А давайте разберемся»

В комментариях к статье мною был задан вопрос о делегировании в AngularJS в контексте того, что привычный многим императивный способ назначения обработчика для группы элементов аля

$('ul').on('click', 'li', function(){ // обработчик ....

не совсем приемлем в декларативном AngularJS. Собственно, последовал совет использовать свою директиву, решающую проблему делегирования. На самом деле, на ум мне ничего толкового не пришло, и я решил погуглить, наткнулся на такой вариант: создаем директиву, которую необходимо установить на родительский для группы нужных нам элементов узел, который регистрирует слушателя.
Вот демо.
А вот 2 интересующие нас части кода:
html
<ul bn-delegate="li a | selectFriend( friend )">
 
        <li ng-repeat="friend in friends">
 
            <!-- Delegate target. -->
            <a href="#">{{ friend.name }}</a>
            <!-- Delegate target. -->
 
        </li>
 
    </ul>


//js
                    element.on(
                        "click.bnDelegate",
                        selector,
                        function( event ) {
 
                            // Prevent the default behavior - this is
                            // not a "real" link.
                            event.preventDefault();
 
                            // Find the scope most local to the target
                            // of the click event.
                            var localScope = $( event.target ).scope();
 
                            // Invoke the expression in the local scope
                            // context to make sure we adhere to the
                            // proper scope chain prototypal inheritance.
                            localScope.$apply(
                                function() {
 
                                    expressionHandler( localScope );
 
                                }
                            );
 
                        }
                    );


Но подождите. В зависимостях получается jQuery (можно обойтись без него, но тем не менее), но это пол беды. В дебрях директивы все тот же императивный подход. Собственно, в этот момент я решил опубликовать пост, с попыткой разобраться в подходах к делегированию в Angular, в комментарии призываются все, кому есть что сказать по этому поводу.
Читать дальше →

Введение в D3

Время на прочтение6 мин
Охват и читатели142K

D3.js (или просто D3) это JavaScript-библиотека для обработки и визуализации данных. Она предоставляет удобные утилиты для обработки и загрузки массивов данных и создания DOM-элементов. Эта заметка описывает работу с основными методами библиотеки, она подойдёт для изучения основ библиотеки и погружения в её логику и возможности.

Для понимания статьи пригодятся знания JS, HTML и CSS.

Читать дальше →

Игровой сервер за один день на Node.js + Socket.io

Время на прочтение3 мин
Охват и читатели46K
В конце рабочего дня в пятницу, обдумывая текущую задачу, в воспаленном мозгу неожиданно возникла мысль — а не попробовать ли мне написать свой игровой сервер?

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

Но по-видимому, заноза прочно засела в голове, поэтому проснувшись в субботу я принялся творить.
Читать дальше →

Готовим IndexedDB

Время на прочтение7 мин
Охват и читатели90K


На Хабре уже рассказывали про IndexedDB — стандарт хранения больших структурированных данных на клиенте. Но это было давно и API сильно изменился. Несмотря на это в поиске статья всплывает одной из первых и вводит в заблуждение многих, кто начинает пытатся работать с этой технологией. Поэтому я решил написать новую статью с информацией об актуальном API.
Читать дальше →

Организация js кода для джуниоров

Время на прочтение4 мин
Охват и читатели73K
С недавних пор я стал работать в сфере web разработки, и еще нахожусь в стадии падавана. Однако недавно я открыл для себя способ организации клиентского javascript кода, который может быть легко интегрирован в любой существующий проект и который легко освоить.

Этот подход называют «Модульный javascript», и под катом мы научимся его применять.

image
Читать дальше →

Стилизация элементов форм и попытка обойти подводные камни

Время на прочтение3 мин
Охват и читатели6.5K
Приветствую читатели, стилизованные элементы формы на сайтах сейчас прочно вошли в реалии современного дизайна и кто бы что не говорил, во многих случаях смотрятся они действительно приятно.
Многие из вас уже обзавелись плагинчиками типа chosen и прочим добром, некоторые из них весьма качественно написаны. В этой статье я не буду рассказывать про очередной плагин, а лишь хочу обратить ваше внимание на один из способов расширения возможностей плагина, возможно кому-то он поможет.
Я являюсь сторонником того, чтобы подключая плагины для стилизации форм, мы должны продолжать работать с элементами форм в нативном стиле и никак не зависеть от плагина стилизации. Я практически ни у одного (можно сказать ни у одного) плагина не видел корректную обработку изменения поведения элементов при изменении атрибутов DOM элементов, а именно — обработку изменения атрибута disabled (min, max, maxlength), всегда надо было учитывать апи плагины, верстку элемента и тд, а это неудобно если вы в будущем захотите поменять плагин или верстку. Как вариант — подумать заранее и для всего сделать обертки и работать с ними как с внутренним апи. Но есть и альтернативный путь.
Читать дальше →