Pull to refresh

Маскирование числовых значений с использованием autoNumeric и Knockout

JavaScript *
В общем передо мной встала задача — переписать один из контролов, построенный на репиттере и сделать его легче, отзывчивее для клиента. При этом решил использовать knockout. Внутри для отображения цифровых данных использовались DevExpress'овские текстовые поля, они очень удобны и служили исправно, но тут встал вопрос, а как же при замене на обычные текстовые поля, я смогу добавить маску.

Подробности далее ...
Total votes 5: ↑5 and ↓0 +5
Views 6.8K
Comments 0

Обзор JS-фреймворков. Путешествие через джунгли JavaScript MVC. Ч. 1

Ajax *Website development *JavaScript *
Translation
(от 27 июля 2012)
При написании нативного веб-приложения легко начать чувствовать себя богом, способным работать просто с библиотекой работы с DOM (такой как jQuery) и горсткой сервисных плагинов. Вскоре возникает проблема в виде груды вложенных возвратных функций jQuery и разбросанных DOM-элементов без всякой структуры вместо приложения.

Короче, мы застреваем в спагетти-коде. К счастью, есть современные JS-фреймворки (библиотеки, задающие, кроме функций, правила организации кода --прим. перев.), помогающие поддерживать структуру и организованность в проекте, облегчающие ремонтопригодность в будущем.

■ Что такое MVC или, лучше сказать, MV*?


Эти современные библиотеки дают разработчикам простой путь к организации кода, используя вариации паттерна проектирования, известного как MVC (Model-View-Controller). MVC разделяет задачи в приложении на 3 части:
Читать дальше →
Total votes 58: ↑56 and ↓2 +54
Views 112K
Comments 23

Обзор JS-фреймворков. Путешествие через джунгли JavaScript MVC. Ч. 2

Ajax *Website development *JavaScript *
Translation
(Окончание перевода статьи Эдди Османи о сравнении и выборе библиотеки для проекта со значительной ролью JS на клиенте.)
Содержание первой части:

■ Что такое MVC или, лучше сказать, MV*?
■ Когда нам нужен MV*-фреймворк JS?
■ Где же мы будем нуждаться в MV*, а где нет?
■ Проблема выбора: слишком много вариантов?
■ TodoMVC: общее приложение для обучения и сравнения
■ Предложенные нами критерии выбора фреймворка
■ Dojo и усложнение фреймворков на JavaScript
■ Коллекция TodoMVC (фреймворки, на которых сделаны реализации тестового приложения Todo)
Читать дальше →
Total votes 87: ↑78 and ↓9 +69
Views 124K
Comments 18

Отслеживание изменений в свойствах Js объекта с использованием dirtyFlag из пакета KoLite

Website development *JavaScript *
Recovery mode

Для отслеживания изменений, в объекте ViewModel, может помочь dirtyFlag, входящий в состав библиотеки KoLite, которая в свою очередь расширяет возможности knockout, добавляя новые возможности:

  • dirtyFlag — предназначен для отслеживания изменений как в отдельных, так и в совокупности свойств ViewModel
  • asyncCommand — предназначается для выполнения асинхронных команд
  • activity — предназначена для индикации активности. Используется совместно с asyncCommand


Читать дальше →
Total votes 8: ↑7 and ↓1 +6
Views 3K
Comments 3

Пишем сложное приложение на knockoutjs

Website development *JavaScript *
Tutorial
Есть такая библиотека knockout.js. Она отличается от прочих хорошим туториалом для начинающих и кучей понятных рабочих примеров. Еще там стройная MVVM модель, декларативные связи и так далее.

Короче, если вы, как и я, поиграли с этой библиотекой, понаписали красивых формочек, и вам это понравилось, то все это дело захотелось применить на реальном проекте. И тут проблема — в реальном проекте формочек больше чем одна. А раз такие инструменты, то хочется single web page application и никак иначе. А делать один контроллер и все темплейты заверстывать на одну страницу тоже тупо и тормозно.

Под катом приведу основу своего сложного приложения. Само оно совсем не сложное, но модульное и допускает расширения, а темплейты и модели подгружаются динамически. Идея была подсмотрена в этой презентации — http://www.knockmeout.net/2012/08/thatconference-2012-session.html, код презентации выложен на github — https://github.com/rniemeyer/SamplePresentation — на базе этого кода будем писать свой.
Читать дальше →
Total votes 43: ↑38 and ↓5 +33
Views 46K
Comments 21

Видеозапись доклада «Вся соль одностраничных приложений» с 404fest

Ostrovok.ru corporate blog JavaScript *
Федя Шумов и Арсений Заречнев, фронт-енд разработчики из команды Островка, рассказали о
«Всей соли одностраничных приложений» на 404fest в Самаре.

Содержание доклада:


Читать дальше →
Total votes 41: ↑29 and ↓12 +17
Views 18K
Comments 10

Применение, советы и особенности knockout.js

Website development *JavaScript *
О библиотеке knockout.js на хабре написано не так много, но кое что есть (и конечно же есть официальный туториал и другие материалы на оф. сайте и хороший ресурс на англ. языке knockmeout.net, статьи которого смогу перевести, если будет спрос). Данная статья возможно перерастёт в цикл статей по javascript и нокауту, если нло не похитит меня.

Изначально готовил материал для людей, уже знакомых с нокаутом и mvvm, но в комментариях к другим статьям меня попросили рассказать как готовить нокаут для чайников. Предполагаю, что вы уже прочитали предыдущие статьи о нокауте на хабре. Поехали!
Читать дальше →
Total votes 37: ↑37 and ↓0 +37
Views 64K
Comments 27

Knockoutjs. «Растим» дерево

Website development *JavaScript *
Tutorial

Судя по частоте появления статей, KnockoutJS набирает популярность на Хабре. Внесу и я свою лепту. Хочу осветить тему нестандартных для HTML элементов управления и «дерева» в частности. Под деревом здесь понимается аналог элемента управления TreeView. Статья подразумевает, что читатель уже знаком с KnockoutJS на базовом уровне. Публикация может рассматриваться, как пособие для изучения KnockoutJS. С другой стороны, надеюсь, и опытные пользователи KnockoutJS смогут почерпнуть для себя что-то новое.
Читать дальше →
Total votes 11: ↑9 and ↓2 +7
Views 15K
Comments 7

Как с помощью технологий Azure повысить явку на выборы президента США

True Engineering corporate blog Microsoft Azure

Одним из самых захватывающих опытов в истории EastBanc Technologies стала совместная с Microsoft и Bing работа над проектом Polling Place Locator — облачным Azure-приложением, которое 6 ноября 2012 года помогло 6 миллионам американцев найти свои избирательные участки. В этот день произошло два исторических события — 1) президентом Соединенных Штатов Америки во второй раз стал Барак Обама; 2) наше приложение выдержало колоссальную нагрузку в 1,5 млн уникальных визитов и 6 млн API-запросов за один день, в течение которого Polling Place Locator показывался на каждой странице американского сегмента Facebook, на mashable.com и на сайтах нескольких кандидатов в президенты.

Газета Los Angeles Times назвала Polling Place Locator «возможно, самым полезным инструментом поиска избирательных участков», а телеканал CNN рассказал о приложении в прайм-тайм.

Историю о том, как EastBanc Technologies внес свою лепту в развитие американской демократии, читайте далее! Под хабракатом мы рассказываем о технической реализации приложения, применении Windows Azure в высоконагруженных приложениях и о том, как приложение работало, и как мы сделали так, чтоб отпустило пожалуйста что ничего не упало даже в пиковые нагрузки.

Читать дальше →
Total votes 28: ↑18 and ↓10 +8
Views 4.5K
Comments 6

Почему мы перешли на Marionette.js

Website development *JavaScript *
Sandbox
Если глянуть на историю развития десктоп приложений, видно, что она начиналась с мощных серверов, которые могли слать экраны текста тонким клиентам. Тонкие клиенты давали команду, которую обрабатывал сервер и потом слал новый экран обратно клиенту.

С течением времени, оборудование стало дешевле и мы пришли к текущей модели, когда клиент делает значительную часть работы, а общается с сервером только для того, чтобы получить информацию, сохранить информацию или дать команду, которая должна быть запущена в защищенном, контролируемом окружении.
Читать дальше →
Total votes 52: ↑49 and ↓3 +46
Views 39K
Comments 47

Warp9 — еще одна реактивная js библиотека. На этот раз компонуемая и без утечек

Website development *JavaScript *Functional Programming *
Статья устарела, актуальную информацию ищите на сайте Warp9'а



Существует множество реактивных и около-реактивных библиотек для создания графического интерфейса на js: Angular, Knockout, React, RxJS… Спрашивается, зачем писать еще одну. Оказывается, во всех них, помимо фатального недостатка, есть еще несколько.

Под катом анализ существующих библиотек и краткое описание warp9.
Total votes 33: ↑32 and ↓1 +31
Views 18K
Comments 41

Планирование автопутешествий на базе google maps api

Open source *JavaScript *Google API *
Недавно написал одно приложение для собственного удобства, и сначала не хотел о нем рассказывать. Потом подумал, что оно может пригодиться кому-то еще. По сути это сервис для планирования автомобильных маршрутов, собранный из готовых компонентов google maps api. Это — клон Google Maps Engine, однако без досадных ограничений последнего. Бесплатный, опенсурсный, чистый фронтэнд без сервера, код выложен на github.

Демо
Читать дальше →
Total votes 28: ↑25 and ↓3 +22
Views 23K
Comments 17

Linq-подобный синтаксис для knockout

JavaScript *.NET *
Прошел год с тех пор, как наша команда разрабатывает web portal используя паттерн MVVM и фреймворк Knockout в частности. Понемногу копился опыт, появлялись различные решения, хорошие и плохие практики, и вот, так сказать, назрело. Для linq-синтаксиса в javascript уже существует библиотека linq.js, и долгое время мы думали, затянуть ли ее к нам в проект. И даже примеры использования вкупе с knockout в интернетах есть.
Идея же, которая меня постигла, была в том, чтобы создание computed инкапсулировать внутрь Linq-методов.
Для сравнения, код из fiddle:
    this.filteredItems = ko.computed(function() {
        var term = this.searchTerm();
        
        return this.items.where(function(item) { 
            return item.name.indexOf(term) > -1; 
        });
    }, this);

и код, который хотелось бы писать вместо этого:
    this.filteredItems = this.items
        .Where(function(item) { return item.name.indexOf(this.searchTerm()) > -1; });

Читать дальше →
Total votes 21: ↑17 and ↓4 +13
Views 4.7K
Comments 9

WebMarkupMin: Минимизация представлений KnockoutJS и AngularJS

Website development *.NET *Visual Studio *
Логотипы WebMarkupMin, KnockoutJS и AngularJS
Начиная с версия 0.9.0 в WebMarkupMin поддерживается минимизация представлений KnockoutJS (далее просто Knockout) и AngularJS (далее просто Angular). Многие из вас могут задать вопрос: «Почему Knockout и Angular, а не Mustache или Underscore?». Этот выбор был сделан по следующим причинам:
  1. Шаблоны на основе DOM. Шаблонизаторы, встроенные в Knockout и Angular, базируются на DOM-шаблонах (DOM-based templates), а не на строковых шаблонах (string-based templates) как Mustache и Underscore. Код таких шаблонов не содержит программных вставок (например, {{…}} или <%…%>) за пределами текстового содержимого элементов (тегов) и значений атрибутов, что позволяет минимизировать его как обычный HTML.
  2. Популярность среди .NET-разработчиков. Knockout изначально создавался для .NET-разработчиков, чтобы позволить им перенести свой опыт разработки MVVM-приложений из WPF и Silverlight в обычный веб. Что же касается Angular, то он вообще не нуждается в представлении и его популярность среди веб-разработчиков в целом бьет все возможные рекорды. Помимо этого популярности этих библиотек среди .NET-разработчиков способствовало огромное количество статей евангелиста Microsoft Джона Папы.
  3. Высокая эффективность сжатия выражений привязки. Выражения привязки в Knockout и Angular фактически являются простым JavaScript-кодом или объектами в формате JSON, которые можно сжать JS-минимизатором.

Читать дальше →
Total votes 14: ↑12 and ↓2 +10
Views 7.1K
Comments 4

Sqimitive.js — Frontend Primitive или «Backbone без фантиков»

Website development *JavaScript *jQuery *
Уже довольно давно большинство сайтов перестало быть набором HTML/PHP/CSS/JS-файлов, которые достаточно просто загрузить на сервер. Bower, Grunt, Component.js, AMD, Require.js, CoffeeScript, Clojure, Composer, npm, LESS и ещё 100500 инструментов — всё это сегодня применяется для сборки проектов, обновления компонентов, загрузки зависимостей, сжатия кода, компиляции из одного JavaScript в другой, подтасовки карт, прополки огорода и даже готовки яичницы.

Многих людей это вдохновляет. Да что там — 95% моих знакомых в один голос твердят, как подключив всего пару-тройку библиотек с особой, уличной магией можно забабахать сайт на over-9000 зелёных австралийских долларов — и всего за один вечер, с перерывом на кофе и бублики.

А я — странный человек. Не люблю смешения языков, технологий, библиотек. Angular, Knockout, React — они все хороши, но каждая — по-своему сложна. А ведь есть и «гибриды», где сходится сразу несколько миров — как Ember и Knockout.Bootstrap. Вдобавок, многие построены на jQuery — впрочем, к ней даже у меня претензий нет; наверное, таким и должен был быть JavaScript.

Как бы то ни было, реальность беззастенчиво входит в контакт с мечтами и расставляет точки над «i». Мне так же приходится писать на «new & popular» — а когда пишешь, душа томится и просится создать очередной велосипед… а ей разве откажешь? Она ведь как дитя малое.

Велосипед был создан. Велосипед без фантиков. Такой же простой, как автомат Калашникова, и многогранный, как швейцарский нож, где вместо наследования — события, вместо моделей, коллекций и представлений — один класс, с неограниченной вложенностью и полной свободой действий, почти в два раза меньший Backbone.js, использующий Underscore.js и, необязательно, jQuery/Zepto.

Добро пожаловать в Sqimitive.
Zen Book: введение в нирвану
Total votes 54: ↑49 and ↓5 +44
Views 18K
Comments 33

Мысли вслух о разработке javascript-приложений на примере небольшого Line Of Business фреймворка

True Engineering corporate blog JavaScript *
Tutorial
Привет, Хабр!

Не так давно мы сами себе поставили задачу — построить SPA-приложение. Сложное, большое, быстрое, с поддержкой множества устройств, без утечек памяти. К тому же, постоянно развивающееся, чтобы его было легко поддерживать. В общем, как мы и любим — всё и сразу.

Тема SPA-приложений и javascript-приложений в целом не нова, но нам не удалось найти даже на платных ресурсах основательных руководств по разработке приложений. Они являются скорее рассказом о той или иной MV*-библиотеке, чем примером для подражания. При этом не рассматриваются примеры разбиения по слоям, построения иерархий наследования и тонкостей наследования в javascript и т.д.

Мы попробуем зайти с другой стороны и описать, скорее, ход мыслей при разработке (с кодом и ссылками), чем какой-то конкретный инструмент. Начать мы вынуждены с уровня hello world, чтобы задать одну стартовую точку для читателей и писателя. Но уже со второго раздела повествование резко ускорится.

Мы считаем, что данная статья будет полезна:

  1. Front-end разработчикам, у которых уже есть небольшой опыт, но хочется вырасти.
  2. Back-end разработчикам, которым в какой-то момент пришлось начать заниматься js-разработкой и которые чувствуют некую неуверенность при работе с javascript.
  3. Верстальщикам, которые начали заниматься js-разработкой и хотели бы прокачать свои навыки.



Чтиво получилось весьма объемистым, но надеемся, что настолько же полезным.
Читать дальше →
Total votes 7: ↑6 and ↓1 +5
Views 19K
Comments 8

Какой JavaScript Framework используете вы? Опрос среди JS-разработчиков

JavaScript *
Совершенно случайно наткнулся на аналогичный опрос за июль 2008 года.

Результаты улыбнули:

image

Интересно было бы посмотреть на статистику использования современных фреймворков.
(* Это не призыв к холивару в комментариях с выяснением «чей фреймворк лучше?»)
Total votes 26: ↑14 and ↓12 +2
Views 11K
Comments 21

Еще один способ приготовления одностраничных приложений

Targetix corporate blog Website development *JavaScript *
Авторы статьи: Борис Солдовский SoldovskijBB, Шевцов Сергей s_shevtsov.

Приветствуем всех, кто читает этот пост! Мы — команда front-end разработчиков Targetix. В этой статье расскажем вам о том, как устроена клиентская часть сервиса Hybrid — веб-интерфейса для взаимодействия с нашим TradingDesk и DSP.

Картинка для привлечения внимания

Введение


Еще до начала работы над Hybrid, когда формировался наш отдел по разработке клиентских приложений и обсуждались возможные варианты реализации этих самых приложений, под влиянием трендов выбор пал на одностраничные приложения, привлекшие тем, что при таком подходе нет необходимости постоянно грузить один и тот же контент, можно быстро манипулировать отображением страницы и при желании организовать офлайн работу. К тому же минимальная зависимость от групп разработки back-end. Со временем этот подход обрел форму и используется для многих наших веб-интерфейсов.

Каркас наших приложений основан на AMD-модулях, которые позволяют ограничивать область видимости, многократно использовать код и делают его структурированным. Например, у нас есть модуль станицы и модуль какого-нибудь popup-окна, а в модуле popup-окна используется какой-нибудь widget-модуль. При этом модуль popup-окна может быть использован на нескольких страницах. В этом и подобных случаях удобно использовать AMD-модули, а в их подключении и управлении зависимостями нам помогает библиотека RequireJS.

Для отображения данных используется Knockout.js — библиотека, которая реализует mvvm-патерн и позволяет динамически менять страницы благодаря шаблонизатору и наблюдаемым переменным.
Читать дальше →
Total votes 20: ↑17 and ↓3 +14
Views 21K
Comments 2

Портал на службе бухгалтерии или автоматизация авансовых отчетов

True Engineering corporate blog SharePoint .NET *
Всем привет! Сегодня мы решили поделиться результатами небольшого, но важного проекта, как это часто бывает очень простые с первого взгляда вещи решают сложные задачи, которые дают существенную эффективность в повседневной жизни.

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

Итак, представим средних размеров организацию, которая разбросана по территории нашей большой страны, а именно такие компании выбирают SharePoint в качестве корпоративного портала. Самый обычный сотрудник собирается поехать в командировку и вот тут начинается самое интересное: заполни заявку, согласуй у руководителя, передай в службу персонала, получи аванс на расходы, съезди в командировку, заполни отчет, сдай его в бухгалтерию.
Читать дальше →
Total votes 12: ↑10 and ↓2 +8
Views 12K
Comments 6

Бесшовная миграция монолитного фронтенда для критически важного бизнес-продукта

Development Management *Product Management *

Некоторое время назад появилась задача обновить монолит фронтенда большой высоконагруженной системы, работающей 24/7 – перевести с устаревшего фреймворка Knockout на современный React. Задача возникла, когда старая архитектура перестала соответствовать требованиям бизнеса. Команде поставили задачу реализовать новые функции, но в существующей архитектуре сделать это оказалось практически невозможно.  Хотим поделиться своим опытом, как сделать такой проект проще.

Читать далее
Total votes 1: ↑1 and ↓0 +1
Views 1K
Comments 0