Я подумал, раз сайт менеджера пакетов NuGet начал наполняться пакетами, то пора бы начать выбирать особо ценные пакеты. Такие пакеты, которые действительно делают полезные вещи, но могут быть пропущены разработчиками. Я собираюсь выискивать такие пакеты среди самых полезных проектов с открытым исходным кодом. Я собираюсь разбираться в том, как собраны эти пакеты, есть ли в них что-то особенно интересное в плане их применения на практике.
Начнем с того, что фреймворк Sprite and Image Optimization был обновлен до версии Preview 3. Этот фреймворк – пример того, что Microsoft может планировать для ASP.NET в будущем и вместе с тем, того, что вы можете попробовать использовать уже сегодня. И этот фреймворк стал еще проще, поскольку появился в NuGet.
Эти два пакета хорошо устроены. На самом деле, есть три пакета, два из которых зависят от базового пакета Core.Эти пакеты представляют собой API для автоматической генерации CSS-спрайтов и встраиваемых изображений (data:image;base64). Этот API доступен и работает как для проектов WebForms так и для ASP.NET MVC и WebPages. Это очень полезно в случае, когда вы создаете свою собственную библиотеку на основе API спрайтов, которая должна работать во всех трех типах проектов. Проект Sprite and Image Optimization публикуется с открытым исходным кодом, который доступен по этой ссылке.
Идея спрайтов состоит в том, чтобы избавится от сотен затратных HTTP-запросов к мелким картинкам, представленных у вас на сайте и вместо этого объединить все мелкие изображения в одну большую картинку, которую запрашивать единственным запросом. После чего отображать нужное изображение на странице с помощью CSS и единственной большой картинки. Однако, обычно, организация всего процесса создания спрайтов и работы с ними на страницах – это хлопотное дело.
Вам недостаточно создать объединенную картинку, к ней вам необходимо создать еще и CSS-файл с относительными координатами всех мелких изображений входящих в одно большое изображение.
Кроме того, вы можете захотеть использовать функцию встраивания содержимого изображений с помощью возможностей браузеров работать с base-64-кодированием и внедрением изображений в разметку.
Создатели фреймворка включили в пакет полезный readme-файл, который можно найти в папке App_Sprites, которая создается при установке пакета. Ниже представлен текст этого файла, он приятен уже тем, что содержит действительно все, что вам нужно знать о работе фреймворка. Вы удивитесь тому, как мало пакетов следуют подобной практике. Запомните, пользователь вашего nuget-пакета либо уже в Visual Studio либо где-то рядом с ней, а так как NuGet существует для того, чтобы перестать заниматься поиском инструментов, то сделайте так, что и ваш пользователь перестал искать вещи подобные описанию readme.
Итак. Я запустил Visual Studio и создал новый проект ASP.NET WebForms. Помните, вы можете использовать NuGet из командной строки, из GUI в Visual Studio или из Visual Studio с помощью командного окна PowerShell.
Я кликнул правой кнопкой по папку References в окне проектов (Solution Explorer) и выбрал пункт “Add Library Package Reference” для того, чтобы добавить пакет из NuGet. В окне списка пакетов доступных онлайн я задал поиск со словом “sprite”. И установил пакет AspNetSprites-WebFormsControl.
Теперь я просто разместил несколько базовых мелких изображений в папке App_Sprites. Вот они в окне Explorer:
Далее я просто запустил приложение. Посмотрите теперь на содержимое той же папки. Заметили новый файл sprite0.png? (конечно, вы можете переопределить это название). Обратите внимание, что новый файл-спрайт объединяет все маленькие изображения.
Кроме того, тут же расположены css-файлы с новыми классами, которые пригодятся вам для доступа к изображениям. Круто!
Однако, в WebForms мне даже не придется думать об этих файлах. Вспомните, что суть WebForms кроется в элементах управления. Я могу просто добавить элемент управления и WebForms сам обработает тэг IMG так как это требуется:
И на выходе мы будем иметь следующую разметку для максимальной совместимости:
Здорово!
Теперь, я сделаю все те же шаги что и раньше, но установлю пакет AspNetSprites-MvcAndRazorHelper в свое ASP.NET MVC приложение.
В случае с MVC-проектом я добавляю ссылки на CSS-файлы самостоятельно в <head> моего _Layout.cshtml:
Sprite.ImportStylesheet("~/App_Sprites/")
А затем я использую хелпер для вставки изображения там, где мне нужно:
Sprite.Image("~/App_Sprites/video.png")
И это работает точно так же, как и в случае с WebForms, только по традиционному для MVC пути. И снова хочется добавить, что этот nuget-пакет – прекрасный пример одной библиотеки доступной сразу для WebForms, MVC и WebPages.
Sprite and Image Optimization Preview 3
Начнем с того, что фреймворк Sprite and Image Optimization был обновлен до версии Preview 3. Этот фреймворк – пример того, что Microsoft может планировать для ASP.NET в будущем и вместе с тем, того, что вы можете попробовать использовать уже сегодня. И этот фреймворк стал еще проще, поскольку появился в NuGet.
Эти два пакета хорошо устроены. На самом деле, есть три пакета, два из которых зависят от базового пакета Core.Эти пакеты представляют собой API для автоматической генерации CSS-спрайтов и встраиваемых изображений (data:image;base64). Этот API доступен и работает как для проектов WebForms так и для ASP.NET MVC и WebPages. Это очень полезно в случае, когда вы создаете свою собственную библиотеку на основе API спрайтов, которая должна работать во всех трех типах проектов. Проект Sprite and Image Optimization публикуется с открытым исходным кодом, который доступен по этой ссылке.
Идея спрайтов состоит в том, чтобы избавится от сотен затратных HTTP-запросов к мелким картинкам, представленных у вас на сайте и вместо этого объединить все мелкие изображения в одну большую картинку, которую запрашивать единственным запросом. После чего отображать нужное изображение на странице с помощью CSS и единственной большой картинки. Однако, обычно, организация всего процесса создания спрайтов и работы с ними на страницах – это хлопотное дело.
Вам недостаточно создать объединенную картинку, к ней вам необходимо создать еще и CSS-файл с относительными координатами всех мелких изображений входящих в одно большое изображение.
Кроме того, вы можете захотеть использовать функцию встраивания содержимого изображений с помощью возможностей браузеров работать с base-64-кодированием и внедрением изображений в разметку.
Спрайты в ASP.NET WebForms
Создатели фреймворка включили в пакет полезный readme-файл, который можно найти в папке App_Sprites, которая создается при установке пакета. Ниже представлен текст этого файла, он приятен уже тем, что содержит действительно все, что вам нужно знать о работе фреймворка. Вы удивитесь тому, как мало пакетов следуют подобной практике. Запомните, пользователь вашего nuget-пакета либо уже в Visual Studio либо где-то рядом с ней, а так как NuGet существует для того, чтобы перестать заниматься поиском инструментов, то сделайте так, что и ваш пользователь перестал искать вещи подобные описанию readme.
For detailed information on ASP.NET Sprites and the Image Optimization Framework, go to aspnet.codeplex.com/releases/view/61896
QUICK START:
1) Add your images to the «App_Sprites» directory.
2) Depending on your application type:
****************************
*** ASP.NET Web Forms 4 ****
****************************
<asp:ImageSprite ID=«Sprite1» runat=«server» ImageUrl="~/App_Sprites/YOUR_IMAGE.jpg" />
**********************************
*** ASP.NET MVC 3 (ASPX Views) ***
**********************************
<%: Sprite.ImportStylesheet("~/App_Sprites/") %>
<%: Sprite.Image("~/App_Sprites/YOUR_IMAGE.jpg") %>
********************************************************
*** ASP.NET MVC 3 (Razor Views) or ASP.NET Web Pages ***
********************************************************
Sprite.ImportStylesheet("~/App_Sprites/")
Sprite.Image("~/App_Sprites/YOUR_IMAGE.jpg")
Итак. Я запустил Visual Studio и создал новый проект ASP.NET WebForms. Помните, вы можете использовать NuGet из командной строки, из GUI в Visual Studio или из Visual Studio с помощью командного окна PowerShell.
Я кликнул правой кнопкой по папку References в окне проектов (Solution Explorer) и выбрал пункт “Add Library Package Reference” для того, чтобы добавить пакет из NuGet. В окне списка пакетов доступных онлайн я задал поиск со словом “sprite”. И установил пакет AspNetSprites-WebFormsControl.
Теперь я просто разместил несколько базовых мелких изображений в папке App_Sprites. Вот они в окне Explorer:
Далее я просто запустил приложение. Посмотрите теперь на содержимое той же папки. Заметили новый файл sprite0.png? (конечно, вы можете переопределить это название). Обратите внимание, что новый файл-спрайт объединяет все маленькие изображения.
Кроме того, тут же расположены css-файлы с новыми классами, которые пригодятся вам для доступа к изображениям. Круто!
Однако, в WebForms мне даже не придется думать об этих файлах. Вспомните, что суть WebForms кроется в элементах управления. Я могу просто добавить элемент управления и WebForms сам обработает тэг IMG так как это требуется:
И на выходе мы будем иметь следующую разметку для максимальной совместимости:
Здорово!
Спрайты в ASP.NET MVC (в качестве хелпера Razor)
Теперь, я сделаю все те же шаги что и раньше, но установлю пакет AspNetSprites-MvcAndRazorHelper в свое ASP.NET MVC приложение.
В случае с MVC-проектом я добавляю ссылки на CSS-файлы самостоятельно в <head> моего _Layout.cshtml:
Sprite.ImportStylesheet("~/App_Sprites/")
А затем я использую хелпер для вставки изображения там, где мне нужно:
Sprite.Image("~/App_Sprites/video.png")
И это работает точно так же, как и в случае с WebForms, только по традиционному для MVC пути. И снова хочется добавить, что этот nuget-пакет – прекрасный пример одной библиотеки доступной сразу для WebForms, MVC и WebPages.
