Padrino для frontend разработчика

в 19:32, , рубрики: coffee script, haml, ruby, scss, sinatra, Веб-разработка, верстка, верстка html писем, метки: , , , , , ,

Видимо, только второй пост на хабре с участием Padrino за 2 года ;)

Padrino для frontend разработчика

Используйте HAML для генерации HTML

Padrino для frontend разработчика

Используйте SASS для генерации CSS

Padrino для frontend разработчика

Используйте Coffee Script для генерации JS

Padrino для frontend разработчика

Скачайте шаблонное приложение, установите инструментарий и начните разработку немедленно.

10 минут и все работает даже под Windows.

Приложение основано на ruby web-фреймворке Padrino и работа с ним потребует от рядового верстальщика не больше мозговых усилий, чем при использовании простейших PHP вставок.

Есть кое-что и для верстки HTML писем с использованием HAML.

В конце поста ответ на самый важный вопрос: почему не Sinatra или Rails, а именно Padrino.

Установка под Windows

Установите руби с помощью инсталлятора с сайта http://rubyinstaller.org/

Во время установки желательно установить флажки напротив пунктов Install with Add Ruby executables to your PATH и Associate .rb and .rbw files

Скачайте ZIP архив со страницы проекта https://github.com/the-teacher/the_template и распакуйте его. Используйте git clone, если вы в теме.

Откройте командную строку Windows и установите bundler, набрав команду

gem install bundler --no-ri --no-rdoc

Перейдите с помощью консоли в каталог скаченного проекта

Выполните команду bundle, которая позволит установить все требуемые пакеты для приложения

bundle

Запустите веб-сервер командой

padrino start -p 3000

Откройте приложение в своем браузере

localhost:3000

Начните изучать HAML, SASS, Coffee Script немедленно!

Установка под *NIX

Только что вы прочитали установку под Windows. Думаю, что установка под *nix не требует пояснений.

Как начать использовать HAML

По аналогии, создайте новое действие в файле контроллера appapp.rb. Например, назовем действие new_action

get '/new_action' do
  haml :new_action
end

Создайте новый HAML файл appviewsnew_action.haml

Верстайте, наблюдая за изменениями по адресу localhost:3000/new_action

Как начать использовать SASS

Создайте новый SASS файл publicstylesheetsscssNEW_SASS_FILE.scss

Подключите SASS файл в Макет приложения appviewslayoutslayout.haml

= stylesheet_link_tag 'reset'
= stylesheet_link_tag 'headers'
= stylesheet_link_tag 'custom'

= stylesheet_link_tag 'NEW_SASS_FILE'

Результирующий файл доступен по адресу localhost:3000/stylesheets/NEW_SASS_FILE.css

Как начать использовать Coffee Script

Создайте новый Coffee Script файл publicjavascriptscoffeeNEW_COFFEE_SCRIPT_FILE.coffee

Подключите Coffee Script файл в макет приложения appviewslayoutslayout.haml

= javascript_include_tag 'jquery'
= javascript_include_tag 'jquery-ui'
= javascript_include_tag 'application'

= javascript_include_tag 'NEW_COFFEE_SCRIPT_FILE'

Результирующий файл доступен по адресу localhost:3000/javascripts/NEW_COFFEE_SCRIPT_FILE.js

Верстка HTML письма с помощью HAML

Мне жаль, но прикрепление файлов в windows дает сбой. Видимо, причина кроется где-то в геме mail. Увы, у меня пока не было времени, что бы решить эту проблему. Прикрепление файлов пока актуально полько для *nix пользователей

Настройте параметры соединения с почтовым сервисом в файле app/app.rb

  set :delivery_method, :smtp => {
    :address => "smtp.gmail.com",
    :port => 587,
    :user_name => 'my.markup.template@gmail.com',
    :password => 'qwerty',
    :authentication => :plain,
    :enable_starttls_auto => true
  }

Заготовка верстки письма на основе HAML находится в файле app/mailers/letter.haml

Доступ к просмотру письма можно получить по адресу localhost:3000/mail/letter

Если потребуется, в файле app/app.rb в before фильтре перед отправкой письма сформируйте список вложенных в письмо файлов. Файлы будут прикреплены к письму, а в качестве cid файлов будет поставлено их имя.

  before '/mail/send' do
    @@ img_path = "#{Padrino.root}/public/images/"
    @@ attachments = [
      'sinatra.png'
    ]
  end

Используйте специальный хелпер для автоматического формирования cid для картинок в HTML письме

При обычном просмотре передаем хелперу false и получаем обычный img тег

email_image 'sinatra.png', {}, false

img src='/images/sinatra.png'

При отправке письма передаем хелперу true и он подставляет вместо пути к файлу cid прикрепленного файла (фактически имя файла)

email_image 'sinatra.png', {}, true

img src='cid:sinatra.png'

Отправить письмо можно перейдя по адресу localhost:3000/mail/send. После отправки вы будите переброшены на localhost:3000/mail/letter. Кстати, можно в шаблоне письма сделать кнопку отправки, для упрощения процесса.

Почему Padrino?

Этот шаблон приложения создан в учебных целях, что бы показать знакомым верстальщикам и разработчикам, как начать использовать HAML, SASS, Coffee Script в ежедневной практике.

Главной моей целью было формирование кросс-платформенного, легкого в освоении окружения.

Rails — слишком монструозный для новичка.
Sinatra — имеет проблемы перезагрузки кода в девелопмент режиме под windows.

Padrino, основанный на Sinatra, не имеет проблем с девелопмент режимом, обладает рядом rails-like хелперов, легок в установке, изучении и использовании.

Очень надеюсь, что кому-то моя поделка будет полезной.

Возможно, встретимся на devconf 2012.

Шаблон приложения для изучения HAML, SASS, Coffee Script

Автор: zayko

* - обязательные к заполнению поля