Rails состоит из функций, которые на данный момент не предоставляет ни одна другая среда в области веб-разработки. С каждым выпуском его набор функций становится все сильнее и сильнее. Будь то интеграция поддержки потоковой передачи в базовую платформу, или кэширование в Russian Doll, или простота управления зависимостями с помощью Bundler, Rails всегда зарекомендовала себя как первопроходец во внедрении новых и появляющихся концепций в веб-разработке.
Rails построен на Ruby, и можно с уверенностью сказать, что Rails — это все о Ruby, а Ruby — о гемах. Код Ruby в основном состоит из гемов, что эквивалентно библиотекам с точки зрения других языков. Rails — это самоцвет Ruby. Gems обеспечивают чистый и элегантный способ организации связанного кода. Создание и разделение связанного кода в правильных гемах — это первый шаг к достижению модульности в ваших кодовых базах.
В этом посте мы создадим драгоценный камень с нуля. Драгоценный камень, который мы создаем, основан на плагине jQuery. Вы можете быть удивлены: зачем создавать гем для плагина jQuery, если мы можем просто взять его исходный код и начать его использовать? Причина в Rails. Rails предоставляет разработчикам способ делать вещи систематическим образом, и это является частью красоты, которая отделяет его от других структур. Разрабатывая гем, нам больше не придется просить разработчика вручную писать код JavaScript. Вместо этого наш гем будет делать правильные вещи автоматически, тем самым экономя время разработчика.
Плагин jQuery для нашего драгоценного камня называется image_zoomer . Этот плагин обеспечивает эффект масштабирования для изображений, не требуя дополнительных изображений. В репозитории GitHub есть демоверсия, поэтому вы можете получить представление о том, что он делает. Наша цель состоит в том, чтобы обеспечить систематический, «рельсовый» способ, так что разработчики просто должны установить наш гем, и все готово. Все настройки, необходимые плагину, будут обработаны нашим гемом. Если вы не хотите проходить все этапы и хотите прыгнуть до конца, посетите репозиторий image_zoomer_rb . Для остальных из вас давайте начнем.
Драгоценный Скелет
Во-первых, установите последнюю версию Ruby, которая является 2.1.2 на момент написания этой статьи. Кроме того, установите последнюю версию Rails, чтобы мы могли протестировать гем во время его сборки.
Bundler позволяет довольно просто не только устанавливать и управлять зависимостями, но и создавать базовый скелет драгоценного камня. Используйте следующую команду:
bundle gem name_of_gem
Назвать драгоценный камень в Ruby несложно, но вы должны делать это сознательно. Есть некоторые официальные рекомендации, которые должен прочитать каждый автор драгоценных камней, прежде чем называть их драгоценными камнями. Наш гем будет называться image_zoomer поэтому он соотносится с плагином jQuery. Теперь создайте скелет драгоценного камня:
bundle gem image_zoomer
Вывод вышеуказанной команды будет выглядеть примерно так:
create image_zoomer/Gemfile create image_zoomer/Rakefile create image_zoomer/LICENSE.txt create image_zoomer/README.md create image_zoomer/.gitignore create image_zoomer/image_zoomer.gemspec create image_zoomer/lib/image_zoomer.rb create image_zoomer/lib/image_zoomer/version.rb Initializing git repo in /Users/imran/Desktop/work/gem_creation/sitepoint/image_zoomer
image_zoomer.gemspec — это файл, который содержит метаинформацию о нашем геме заранее определенным способом. Проверьте это справочное руководство для получения подробной информации о каждой доступной недвижимости. Bundler заполнил этот файл значениями по умолчанию, которые могут быть обновлены при необходимости. Этот файл также используется для определения зависимостей гемов. Бандлер заполнил его bundler и rake . Поскольку наш гем зависит только от Rails и плагина jQuery, не нужно ничего включать.
Идите вперед и измените другие поля, такие как authors и email , чтобы мир знал, кто создал этот драгоценный камень.
Gemfile используется Bundler для установки и управления нашими зависимостями, о которых вы, вероятно, уже знали. Однако я только что сказал, что image_zoomer.gemspec используется для управления нашими гем-зависимостями. Bundler сделал что-то умное здесь.
Открыв Gemfile , вы заметите, что есть вызов gemspec . Gemfile автоматически ссылается на файл image_zoomer.gemspec, и, следовательно, Bundler будет управлять зависимостями, как определено в gemspec.
Rakefile содержит грабли, связанные с созданием, установкой и распространением гемов .
LICENSE.txt содержит лицензию MIT, автоматически сгенерированную для нас. Вы можете заменить его выбранной схемой лицензирования, чтобы указать разрешения и ограничения, которые вы накладываете на пользователей драгоценного камня.
README.md содержит информацию об установке и использовании. Он заполнен структурой по умолчанию, определенной Bundler. Каждый автор драгоценных камней должен обновить его в соответствии со своими требованиями.
.gitignore используется Git для игнорирования файлов.
lib / image_zoomer / является предпочтительным и общепринятым способом определения классов и модулей Ruby, необходимых для работы нашего гема. Вы увидите этот шаблон в каждом драгоценном камне Ruby.
lib / image_zoomer.rb — это базовый файл гема , обычно используемый для определения базового модуля и требующий модулей и классов, определенных в lib / image_zoomer / . Поскольку наш гем называется image_zoomer , для нас автоматически создается модуль ImageZoomer .
lib / image_zoomer / version.rb содержит версию нашего гема. Это первая итерация нашего драгоценного камня, поэтому 0.0.1 кажется абсолютно нормальным.
Создать образец приложения
Мы создали базовый скелет для нашего драгоценного камня. Лучше всего начать тестирование с помощью фиктивного приложения Rails, чтобы заранее обнаружить ошибки. Чтобы создать пример приложения Rails, введите (ПРИМЕЧАНИЕ. Сделайте это ВНЕ из своего каталога gem):
rails new image_zoomer_app
Создайте контроллер и просмотрите, в результате чего появится место для тестирования вещей, предлагаемых нашим драгоценным камнем.
rails generate controller site index
Это создаст site контроллера с index метода. Routes.rb также будет автоматически обновляться. Включите наш драгоценный камень в это приложение Rails. Откройте Gemfile и введите:
gem 'image_zoomer', '0.0.1', path: '/Users/imran/Desktop/work/gem_creation/sitepoint/image_zoomer/'
Bundler предоставляет простой способ включить местные драгоценные камни. Мы указали имя нашего драгоценного камня, версию и абсолютный путь. Ваш путь будет другим, конечно. Вы можете пропустить версию, но лучше оставить ее там, потому что без нее локальные файлы .gem могут создавать проблемы.
Откройте файл app / views / site / index.html.erb , удалите автоматически созданный контент и вставьте следующий код.
<%= ImageZoomer::VERSION %>
Запустите сервер и посетите http: // localhost: 3000 / site / index . Вы увидите 0.0.1 на странице. Здорово!. Мы только что создали небольшой драгоценный камень и использовали его в приложении Rails. Вы, должно быть, чувствуете себя выполненным, но путешествие только началось :-).
Включить JavaScript-ресурсы
Поскольку мы создаем гем для плагина jQuery, гем совершенно бесполезен без файла для указанного плагина jQuery. Создайте каталог с именем app / assets / javascripts в корневом каталоге гема. Перейдите на страницу GitHub плагина image_zoomer, клонируйте или загрузите репозиторий, возьмите image_zoomer.js и поместите его в новый каталог app / assets / javascripts .
Благодаря основной команде Rails, включить JavaScript и другие ресурсы довольно просто. Просто создайте файл с именем engine.rb в каталоге lib / image_zoomer и вставьте следующий код:
module ImageZoomer class Engine < Rails::Engine end end
Согласно Rails, для включения ресурсов из gem / engine в приложение Rails::Engine должен существовать класс Engine называемый подклассом из Rails::Engine . Рельсы позаботятся обо всем остальном.
Вернитесь в фиктивное приложение Rails и откройте app / assets / javascripts / application.js . Добавьте следующую строку:
//= require image_zoomer
Это будет включать плагин jQuery в ресурсы нашего Rails-приложения. Перезагрузите сервер, обновите страницу, и вы получите ошибку. К сожалению !. Это не то, что мы ожидали. Есть image_zoomer ошибка о том, что Rails Asset Pipeline не может найти image_zoomer . Мы что-то пропустили? Да у нас есть. Помните, мы создали файл engine.rb в нашем геме несколько минут назад, но мы забыли об этом. Без необходимости код внутри этого файла никогда не будет выполняться. Откройте lib / image_zoomer.rb в геме и вставьте следующую строку после первого оператора require .
require "image_zoomer/engine"
Это будет включать все активы в приложении / assets / так же, как мы включаем активы из нашего приложения Rails. Перезагрузите веб-сервер и обновите браузер. На этот раз вы не увидите ошибок. Также щелкните правой кнопкой мыши в любом месте браузера и выберите view source . Вы увидите тег script ссылающийся на image_zoomer.js .
Мы использовали только один файл JavaScript из нашего драгоценного камня. Если бы были другие файлы JavaScript, мы должны были бы упомянуть каждый app / assets / javascripts / application.js . Тебе не кажется, что это немного странно? Да, это так. Не волнуйся, есть лучший способ.
Sprockets (жемчужина за Rails Asset Pipeline) имеет директиву для включения всех файлов в каталог. Создайте файл image_zoomer_main.js в app / assets / javascripts в нашем геме и вставьте следующий код:
//= require_tree .
Это говорит о том, что Asset Pipeline рекурсивно запрашивает все файлы во всех подкаталогах указанного пути. Точка (‘.’) Означает текущий путь, поэтому все файлы с текущим путем будут включены в конвейер активов. Теперь откройте app / assets / javascripts / application.js в вашем приложении Rails и замените //= require image_zoomer на:
//= require image_zoomer_main
Перезапустите веб-сервер, обновите браузер и снова просмотрите источник страницы. Заметьте, что оба JavaScript-файла из гема есть в ответе. Это здорово, так как теперь нам не нужно беспокоиться об управлении каждым файлом JavaScript в отдельности.
Интеграция jQuery плагин
С активами JavaScript, включенными в наш гем, пришло время стать реальностью, интегрировав плагин jQuery с приложением Rails. image_zoomer на GitHub довольно просто. Давайте включим это в нашу жемчужину. Мы не будем вносить никаких изменений в image_zoomer.js , потому что будущие обновления могут стать трудными для управления. Вместо этого давайте создадим отдельный файл для хранения кода для инициализации плагина.
Но сначала добавьте изображение на нашу веб-страницу. Откройте app / views / site / index.html.erb и замените все на:
<%= image_tag("test.jpg"); %>
Вы можете заменить test.jpg именем любого test.jpg (разумного размера, то есть достаточно большого для увеличения) изображения. Обязательно поместите его в каталог app / assets / images в нашем приложении Rails. Обновите ваш браузер, и вы увидите изображение. При наведении курсора на изображение на данный момент не наблюдается никакого эффекта масштабирования.
Создайте файл image_zoomer_initializer.js в app / assets / javascripts в нашем каталоге с помощью:
$(function() { $(".image_zoomer").each(function() { $(this).image_zoomer(); }); });
Мы использовали .image_zoomer CSS .image_zoomer качестве базового селектора, поэтому любое изображение с CSS-классом image_zoomer получит эффект масштабирования, предоставляемый image_zoomer . Откройте app / views / site / index.html.erb и обновите код, чтобы он выглядел следующим образом:
<%= image_tag("test.jpg", :class => "image_zoomer"); %>
Мы применяем класс CSS к изображению и имеем инициализирующий код в image_zoomer_initializer.js .
Давайте посмотрим на это в действии. Обновите ваш браузер, и если все настроено нормально, вы увидите увеличение изображения в действии.
Основы завершены
Мы реализовали систематический способ применения эффектов масштабирования к изображениям в приложениях Rails. Вместо того, чтобы просить пользователей вручную загрузить определенные ресурсы и т. Д., Им просто нужно установить наш гем, обновить app / assets / javascripts / application.js и добавить CSS-класс image_zoomer к изображениям, которые мы хотим получить эффект масштабирования.
Вы должны чувствовать себя хорошо, потому что вы только что узнали, как автоматизировать вещи, создавая драгоценный камень.
В следующей статье все будет немного сложнее:
- Как создать собственный помощник для нашего драгоценного камня
- Как предоставить настройки по умолчанию, необходимые плагину jQuery
- Как дать пользователям возможность переопределять настройки по умолчанию с помощью инициализаторов Rails
- Как решить проблемы с кэшированием активов
- Как связать и выпустить драгоценный камень