Архив

Archive for the ‘JavaScript’ Category

Вышел Bundle Transformer 1.6.2 или что изменилось за полгода?

Логотип Bundle Transformer

Bundle Transformer – это разработанное мной модульное расширение для Microsoft ASP.NET Web Optimization Framework (другие названия: ASP.NET Bundling and Minification, System.Web.Optimization, Microsoft.Web.Optimization и ASP.NET Optimization – Bundling). В апреле этого года я уже делал подробный обзор возможностей Bundle Transformer, но за это время данный продукт очень сильно изменился. Поэтому я решил написать данный обзор и рассказать об основных изменениях, которые произошли в Bundle Transformer за прошедшие полгода.

Тег «Далее»

Добавляем Bundling and Minification на сайт ASP.NET Web Pages (Перевод)

Представляю вашему вниманию перевод статьи Рика Андерсона (Rick Anderson) «Adding Web Optimization to a Web Pages Site».

При добавлении ASP.NET Bundling and Minification (далее B/M) на сайт ASP.NET Web Pages мы следуем тому же рецепту, что и в ASP.NET MVC и Web Forms:

  1. Объявляем и регистрируем Bundle`ы;
  2. Используем Bundle`ы в коде наших представлений.

Данная статья описывает базовые принципы использования B/M на сайте ASP.NET Web Pages. Для получения общей и более подробной информацией о B/M смотрите мой учебник по Bundling and Minification. Вы также можете прочитать об использовании B/M c ASP.NET MVC — здесь, и c ASP.NET Web Forms — здесь.

Тег «Далее»

Добавляем Bundling and Minification в приложение ASP.NET Web Forms (Перевод)

Представляю вашему вниманию перевод статьи Рика Андерсона (Rick Anderson) «Adding Bundling and Minification to Web Forms».

Мой учебник по Bundling and Minification обеспечивает хорошее введение в возможности и основные преимущества ASP.NET Bundling and Minification (далее B/M). Вы должны прочитать это руководство, чтобы ознакомиться с основными возможностями данного продукта. В отличие, от моего руководства по B/M, которое посвящено использованию B/M в ASP.NET MVC, эта статья будет посвящена использованию B/M в связке с ASP.NET Web Forms.

Тег «Далее»

Клиентская оптимизация в ASP.NET MVC 3. Менеджеры ресурсов

Первоначально данная статья была опубликована в февральском номере журнала MSDeveloper.RU.

Содержание

  1. Сжатие JS- и CSS-файлов
  2. Менеджеры ресурсов

В предыдущей статье мы научились производить минимизацию JS- и CSS-файлов в Visual Studio.

В данной статье мы рассмотрим другие аспекты клиентской оптимизации, связанные с JS- и CSS-файлами и решаемые с помощью менеджеров ресурсов (asset managers). Перечислим рекомендации команды Exceptional Performance, которые можно реализовать с помощью менеджеров ресурсов:

  1. Выносите JavaScript и CSS во внешние файлы
  2. Размещайте таблицы стилей в начале страницы
  3. Размещайте скрипты в конце страницы
  4. Используйте CDN
  5. Уберите повторяющиеся скрипты
  6. Уменьшите количество HTTP-запросов (с помощью объединения JS- и CSS-файлов)
  7. Добавьте HTTP-заголовок Expires или Cache-Control
  8. Сжимайте содержимое с помощью GZIP
  9. Настройте ETag

На основе перечисленных выше рекомендаций сформулируем требования, которым должен соответствовать менеджер ресурсов:

  1. Регистрировать ресурсы (файлы) в шаблонах (мастер-страницах) и представлениях
  2. Предотвращать дублирование ресурсов
  3. Выбирать нужные версии ресурсов в зависимости от режима работы веб-приложения (отладка или релиз)
  4. Задавать URL ресурса, размещенного на CDN, в качестве альтернативного пути к ресурсу
  5. Объединять код ресурсов в один файл
  6. Минимизировать ресурсы «на лету» (в нашем случае необязательное требование)
  7. HTTP-хэндлер, с помощью которого выводятся обработанные ресурсы, должен добавлять HTTP-заголовок Expires или Cache-Control
  8. HTTP-хэндлер должен сжимать ресурсы с помощью GZIP/Deflate
  9. HTTP-хэндлер должен поддерживать ETag

Тег «Далее»

Клиентская оптимизация в ASP.NET MVC 3. Сжатие JS- и CSS-файлов

Первоначально данная статья была опубликована в январском номере журнала MSDeveloper.RU.

Содержание

  1. Сжатие JS- и CSS-файлов
  2. Менеджеры ресурсов

В своей предыдущей статье «Облегчаем работу с JS- и CSS-кодом в Visual Studio» я уже говорил о том, что практически в любом современном веб-приложении среднего размера содержатся десятки JavaScript- и CSS-файлов. В прошлый раз я рассказал, как облегчить работу с кодом, который расположен в этих файлах. Рассмотрим эту проблему под другим углом: большой объем кода внутри этих файлов, к которому мы еще добавили регионы, теги reference и другие документирующие комментарии, приводит к увеличению времени загрузки веб-страниц и увеличивает объем трафика, который проходит от сервера к браузеру пользователя. Если время ожидания загрузки веб-страницы будет слишком долгим, то пользователь сайта начнет себя чувствовать некомфортно и может покинуть сайт. Кроме того, проблемы могут возникнуть и у владельца сайта, если исходящий с сайта трафик превысит заранее оговоренный с хостинговой компанией объем.

В данной серии статей я хочу рассказать о клиентской оптимизации веб-приложений, написанных на ASP.NET MVC 3. Клиентская оптимизация – это комплекс мер по увеличению скорости загрузки клиентской части веб-страницы (HTML, CSS, JavaScript и графика). Понятие клиентская оптимизация известно давно, но впервые о ней серьезно заговорили в конце 2007 года после публикации статьи «13 простых правил для ускорения вашего веб-сайта» («Thirteen Simple Rules for Speeding Up Your Web Site»), написанной командой Exceptional Performance (Исключительная производительность) компании Yahoo!. За прошедшие четыре года 13 простых правил превратились в 35 практических рекомендаций, с которыми можно ознакомиться в статье «Best Practices for Speeding Up Your Web Site».

В данной статье мы рассмотрим и применим на практике только одну рекомендацию команды Exceptional Performance – минимизацию JS- и CSS-кода.

Тег «Далее»

Kendo UI – UI-фреймворк для разработки веб-приложений от Telerik

Логотип Kendo UIНедавно я узнал, что компания Telerik разработала свою собственную JavaScript-библиотеку для создания веб-приложений с богатым пользовательским интерфейсом под названием Kendo UI. Kendo UI – это полностью клиентская библиотека элементов управления, которую можно поставить в один ряд со следующими UI-фреймворками: jQuery UI, Ext JS и Yahoo! UI Library. Данная библиотека основана на jQuery и поддерживает современные веб-стандарты (HTML5, CSS3 и SVG). Если сравнивать Kendo UI c jQuery UI, то она является более производительной и легковесной.

Тег «Далее»

Рубрики:JavaScript Метки: , , , ,

Облегчаем работу с JS- и CSS-кодом в Visual Studio

С появлением AJAX и веб-приложений подобных Gmail значительная часть логики и пользовательского интерфейса приложения стала реализовываться на JavaScript. Популярность семантической HTML-верстки способствовала тому, что роль CSS в создании пользовательского интерфейса веб-приложений серьезно возросла. В настоящее время, практически любое веб-приложение среднего размера содержит десятки JS- и CSS-файлов, в коде которых со временем становится трудно ориентироваться.

Уже в Visual Studio 2008 были внесены кардинальные изменения в редакторы JavaScript- и CSS-кода, направленные на увеличение продуктивности работы веб-разработчика. В данной статье я расскажу о способах, с помощью которых можно сделать работу в этих редакторах еще более продуктивной.

Тег «Далее»

Реализация шаблонов (паттернов) проектирования Observer и Mediator на JavaScript

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

Для реализации данного механизма можно использовать шаблоны (паттерны) проектирования «Наблюдатель» (Observer) и «Посредник» (Mediator). В Техногрете студии Артемия Лебедева есть хорошая статья «Слабое связывание компонентов в JavaScript. Произвольные события», в которой приводится пример реализации данных шаблонов проектирования на JavaScript.

Рубрики:JavaScript Метки: ,

Приемы объектно-ориентированного программирования на JavaScript

Рекомендую всем разработчикам, которые начинают разрабатывать JS-компоненты и AJAX-приложения, ознакомиться со следующей статьей «JavaScript: Создание усовершенствованных веб-приложений с помощью объектно-ориентированных приемов» из MSDN Magazine. Статья хоть и старая (май 2007 года), но в ней хорошо описаны основные приемы объектно-ориентированного программирования на JavaScript: функции-классы, функции-конструкторы, использование прототипов для реализации наследования, создание статических свойств и методов, замыкания, имитация закрытых (приватных) полей, имитация пространств имен и др.

Рубрики:JavaScript Метки:

Появилась бесплатная мини-книга по реализации основных шаблонов (паттернов) проектирования на JavaScript и jQuery

Обложка книги Essential JavaScript And jQuery Design PatternsАдди Османи выложил в своем блоге бесплатную мини-книгу — Essential JavaScript and jQuery Design Patterns.
В первой части книги рассматривается общая информация о шаблонах (паттернах) проектирования, понятие анти-паттерн и три основные категории шаблонов (порождающие, структурные и шаблоны поведения).
Во второй части книги приведены примеры реализации на чистом JavaScript следующих шаблонов: Constructor (Конструктор), Singleton (Одиночка), Module (Модуль), Revealing Module (Открытый модуль), Prototype (Прототип), Façade (Фасад), Factory (Фабрика) и Decorator (Декоратор). Также применительно к JavaScript рассматривается концепция DRY (аббревиатура от Don’t Repeat Yourself, что в переводе на русский означает — Не Повторяйтесь).
В третьей части книги рассматривается библиотека jQuery, как пример реализации основных шаблонов проектирования: Lazy Initialization (Отложенная (ленивая) инициализация), Composite (Компоновщик), Wrapper (Оболочка), Façade (Фасад), Observer (Наблюдатель), Iterator (Итератор), Strategy (Стратегия), Proxy (Заместитель), Builder (Строитель), Prototype (Прототип) и Flyweight (Приспособленец).

Рубрики:JavaScript Метки: , , ,