Когда вы думаете о Синатре и Бурбоне, веб-разработка, возможно, не первое, что приходит на ум. (Это, конечно, не первое, что предлагает Google, и я не первый, кто это замечает .) Но когда я начинаю проект веб-приложения, Синатра и Бурбон идут вместе, как будто вы поняли идею.
Ранние решения
Выбор основы для серверной веб-разработки является одним из наиболее важных ранних решений, независимо от того, подходите ли вы к нему с внутреннего или внешнего интерфейса. Для многих разработчиков Ruby в течение многих лет очевидным выбором был Rails с его огромным сообществом и всесторонним удобством «соглашения над конфигурацией». Но в последнее время Sinatra стала средой, вдохновляющей самых универсальных имитаторов, таких как Express для Node и Laravel для PHP .
Точно так же во внешнем интерфейсе было несколько популярных платформ, таких как Zurb Foundation или Twitter Bootstrap, которые предлагают обрабатывать все ваши проблемы переднего плана, пока вы следуете их соглашениям. Но для людей, которым нужно самое гибкое и легковесное решение, есть несколько решений, которые были бы такими же ненавязчивыми и в то же время всеобъемлющими, как и комплект Thoughtbot: Bourbon , Neat , Bitters и Refills .
Стек, с которого я хотел бы начать, когда запускаю новый проект в наши дни, представляет собой комбинацию этих двух мощных и скромных пакетов. Единственная сложность — заставить их хорошо играть вместе. Но как только вы решите эту проблему, вам не будет конца с этой комбинацией.
Преимущество Синатры
Sinatra — более простой и легкий способ структурирования веб-приложений, чем Rails. Среди преимуществ Sinatra — простота и незавершенный подход к развитию. Если вы предпочитаете структурировать все приложение как одну страницу кода Ruby, вы можете сделать это. И именно эта очевидная простота побудила некоторых людей игнорировать Синатру в пользу ее более всеобъемлющего кузена, Rails. Но когда вы захотите перерасти в более сложную организацию кода, Синатра будет рядом с вами.
Фреймворки в целом предназначены для того, чтобы быстро и безболезненно вывести проект из головы и выйти в мир. Но когда вы начинаете понимать суть публикации и поддержки вашего веб-приложения, вы можете начать бить себя носом по поводу ограничений ранних решений, которые вы сделали. Обычно не стоит пытаться предсказать слишком далеко заранее, куда придет ваш уникальный продукт, когда он найдет свой рынок.
С такой высокопрофессиональной средой, как Rails, вы можете найти свою работу за вас, если решите, что хотите вносить изменения, которые изначально не поддерживаются тем, как Rails структурирует свой код. Хотя с годами Rails стал лучше относиться к гибкости, как только вы приобретете всеобъемлющую среду, которая попытается сделать все для вас, любое отклонение, которое вы сделаете в соответствии с вашими конкретными потребностями, рискует усложнить удобство, которое в первую очередь привлекло вас к этой среде.
С другой стороны, простота Sinatra побуждает вас разрабатывать API-интерфейсы вашего приложения так, как вы хотите, используя гемы и другие инструменты Ruby, которые соответствуют вашим целям. Поскольку Sinatra не пытается творить чудеса за кулисами, приложение, которое вы разрабатываете с помощью Sinatra, является более прозрачным и более универсальным в руках разработчика с ее собственным мнением.
Бурбон Преимущество
Как и Sinatra, Bourbon использует подход, который позволяет разработчику переднего плана выбирать части и части, наиболее подходящие для конкретного приложения, и оставляя необязательные элементы позади. Основываясь на популярном языке расширения Sass от Hampton Catlin для написания предварительно скомпилированных CSS, Bourbon предлагает все: от удобных микшинов, системы сетки и типографского форматирования до базовых вариантов дизайна и растущей библиотеки стандартных виджетов и компонентов. И круто то, что все это необязательно.
Работая над интерфейсом, вопросы совместимости между браузерами, вычислительной мощности на стороне клиента и задержки, зависящей от сети, имеют решающее значение для оптимизации взаимодействия с пользователем. В то время как всесторонние платформы пытаются вынести многие решения из рук разработчика, часто это происходит за счет того, что на простом сайте приходится больше, чем нужно. Это может привести к раздутым загрузкам, перегруженным серверам и медленному рисованию или обновлению страницы, когда это наиболее важно.
Используя подход Bourbon, вы можете сосредоточить свои оптимизации на тех областях, где они наиболее важны для вашего приложения. Осознанно выбирая и выбирая каждый компонент, у вас есть возможность самостоятельно решить, хотите ли вы, чтобы каждая страница на вашем сайте содержала CSS и JavasScript, необходимые только для компонентов, которые отображаются на пути, который когда-либо посещали менее десяти процентов посетителей. видеть.
Заставить их хорошо играть вместе
После того, как вы решили использовать бережный подход к своему веб-приложению, при интеграции Sinatra и Bourbon нужно помнить лишь несколько хитрых моментов.
Один из способов, которым Sinatra добавляет ценность вашему процессу разработки, заключается в получении контроля над вашим конвейером активов и маршрутизацией. Это простая формула, но это не совсем то, что Бурбон ожидает из коробки. Тем не менее, нетрудно заставить Sinatra обслуживать ваш сайт Бурбон.
Мне нравится использовать такую структуру кода для моих приложений Sinatra, что позволяет легко поддерживать мой код Sass и Bourbon в актуальном состоянии во время моей работы, а также делает развертывание на хостинг-сайте, таком как Heroku, очень удобным:
views\ sass\ base\ ... bourbon\ ... neat\ ... main.scss normalize.scss layout.haml index.haml Gemfile app.rb config.ru Первое, что нужно сделать, это включить необходимые гемы Ruby в ваш Gemfile, а затем запустить bundle install чтобы загрузить их и сделать доступными для вашего приложения. Вот мой стартовый Gemfile:
Gemfile
source 'https://rubygems.org' gem 'sinatra' gem 'haml' gem 'sass', ">=3.3.0" # dev gem 'shotgun'
Вы можете видеть, что я указал версию Sass больше, чем 3.3.0, для правильной поддержки библиотек Бурбона. Я также включил гемы для HAML, моего любимого сокращения для написания HTML-шаблонов, а также Sinatra. В разделе среды разработки мне также нравится иметь Shotgun, который поддерживает мгновенную перезагрузку моего приложения Sinatra всякий раз, когда я изменяю любой из файлов.
Я config.ru файл config.ru чтобы сделать запуск и развертывание стойки более удобным. Вот основы, которые входят в этот файл:
config.ru
require 'sass/plugin/rack' require './app' use Sass::Plugin::Rack run Sinatra::Application
Благодаря этому мой сервер будет знать, как интегрировать стойку с Sass, а также где находится мое приложение, чтобы его можно было запустить. Это должно работать с хостинг-сервисами, которые также поддерживают Rack и Passenger.
Следующим шагом является создание app.rb файла Ruby app.rb для настройки Sinatra и app.rb где найти мои макеты и шаблоны:
app.rb
require 'sinatra' require 'haml' require 'sass' configure do set :scss, {:style => :compressed, :debug_info => false} end get '/css/:name.css' do |name| content_type :css scss "sass/#{name}".to_sym, :layout => false end get '/' do @product = "Short Description of Product" haml :index, :layout => :default_layout end
Команды require загружают гемы, а блок configure просто говорит Sass, как мне нравится писать и выводить свой CSS. В первом блоке get есть небольшая хитрость, просто чтобы Синатра знал, как преобразовать файлы в моем каталоге Sass в символы и интерпретировать их как CSS. Последний блок get создает переменную экземпляра для передачи моему первому шаблону и сообщает Sinatra обработать шаблон с помощью HAML, используя макет по умолчанию.
Поэтому все, что мне сейчас нужно, это шаблоны и макеты в моем каталоге views/ :
просмотров / index.haml
%h1= @product
просмотров / default_layout.haml
!!! %html %head %title Sinatra App %link{:rel => 'stylesheet', :type => 'text/css', :href => 'css/main.css'} %body %section = yield
И основной файл main.scss в моем каталоге main.scss для импорта всех файлов Bourbon, которые я мог бы использовать, наряду с Normalize , сторонним сбросом, рекомендованным Thoughtbot:
просмотров / дерзость / main.scss
@import "normalize"; @import "bourbon/bourbon"; @import "base/base"; @import "neat/neat";
Выполнение команды shotgun запускает ваш локальный сервер по адресу http: // localhost: 9393, и переход по этому URL в вашем браузере должен показать вам простую страницу с минимальным CSS.
Но вся мощь Бурбона есть, прямо над вашим приложением Синатры. Чтобы продемонстрировать интеграцию Bourbon, я могу включить один из более простых Bourbon Refills, компонент Hero, в мой файл index.haml :
просмотров / index.haml
.hero .hero-inner %a.hero-logo{:href => "} %img{:src => "https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png", :alt=>"Logo Image"} .hero-copy %h1= @product %p A few reasons why this product is worth using, who it's for, and why they need it. %button Learn More
И добавьте связанный Sass в новый файл hero.scss :
просмотров / дерзость / hero.scss
.hero { $hero-background-top: #7F99BE; $hero-background-bottom: #20392B; $hero-color: white; $gradient-angle: 10deg; $hero-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png'; @include background(url($hero-image), linear-gradient($gradient-angle, $hero-background-bottom, $hero-background-top), no-repeat $hero-background-top scroll); background-repeat: no-repeat; background-position: top; background-size: cover; padding-bottom: 4em; .hero-logo img { height: 3em; margin-bottom: 2.5em; } .hero-inner { @include outer-container; @include clearfix; padding: 3em; margin: auto; text-align: center; color: $hero-color; a { color: $hero-color; &:hover { color: darken($hero-color, 20%); } } .hero-copy { text-align: center; h1 { font-size: 1.6em; margin-bottom: .5em; @include media($large-screen) { font-size: 1.8em; } } p { font-family: $serif; margin: auto; margin-bottom: 3em; font-weight: 200; line-height: 1.4em; @include media($large-screen) { font-size: 1.1em; max-width: 40%; } } } } }
Не забудьте обновить файл main.scss чтобы он требовал новый файл Sass:
просмотров / дерзость / main.scss
@import "normalize"; @import "bourbon/bourbon"; @import "base/base"; @import "neat/neat"; @import "hero";
Когда вы изменяете эти файлы и перезагружаете браузер, вы должны увидеть свою страницу с отформатированным изображением героя и основным контентом, используя все удобства Bourbon. И когда вы проверите свой CSS-файл, вы увидите, что только биты Бурбона, которые были необходимы для этого компонента, были фактически скомпилированы и включены.
Сделай это по-своему
Бурбон и Синатра чувствуют себя как идеально подобранные декорации. И то, и другое позволяет вам разрабатывать ваше веб-приложение по-своему, предоставляя вам столько поддержки, сколько вам может понадобиться. Хотите включить JQuery ? Хотите добавить немного Angular ? Предпочитаете использовать Backbone или какой-либо другой? Эта комбинация — отличный способ начать, и вы не пожалеете о своем развитии.
Для начала я включил код Sinatra и Bourbon, который я использую в качестве примера для своих собственных веб-приложений на GitHub, чтобы вы могли клонировать и поиграть с ними. Веселиться!