Каждые несколько месяцев в Твиттере проводится саммит с открытым исходным кодом для обсуждения используемых ими инструментов. Так как я оказался рядом с Сан-Франциско, я с удовольствием посетил их последний #ossummit, чтобы узнать о Bootstrap 2.0 . Ниже приведены мои записи с прошлой ночи.
95% инфраструктуры Twitter работает на основе открытого исходного кода. Они надеются внести свой вклад в открытый исходный код, проводя 2-3 саммита в год. Без открытого исходного кода не было бы Twitter. Вы можете найти кучу материалов с открытым исходным кодом Twitter на twitter.github.com . Они также большие поклонники Apache и принимают участие в самых разных проектах.
Bootstrap
Bootstrap разработан двумя основными парнями: @mdo и @fat . Марк (@mdo) был дизайнером в Twitter уже 2 года. Он начал работать в отделе доходов с рекламой, но последние 4 месяца работал над редизайном. Занимался HTML и CSS около 11 лет. Он использовал Блокнот на Windows для создания своего сайта GeoCities.
boot · strap: простой и гибкий HTML, CSS и JavaScript для популярных компонентов пользовательского интерфейса и взаимодействий.
Работа над Bootstrap началась около 1,5 лет назад. Внутренние инструменты не получили должного внимания, в котором они нуждались. Они поняли, что есть много людей, которые хотят хорошо выглядящих интерфейсов и взаимодействий. Он стал Twitter Blueprint и в основном использовался внутри компании. Джейкоб (@fat) начал работать вскоре после первого выпуска и решил добавить немного JavaScript поверх него. Первоначально JavaScript для Bootstrap был «Внутренний инструментарий Twitter» или «TIT» и был построен на Moo Tools. Джейкоб был как «мы должны с открытым исходным кодом это, это будет огромным!» (он был прав).
Версия 1.0 поддерживала Chrome, Safari и Firefox (все в Твиттере были на Mac). 1.3 добавлена кросс-браузерная поддержка и плагины JavaScript.
Теперь есть Bootstrap 2 (только что выпущен!). Они переписали всю документацию и компоненты и удалили устаревший код.
Итак, что нового? Самая большая вещь — документы. Раньше были живые примеры, теперь показывает живые примеры и почему вы будете что-то делать, а также дополнительные опции. «Верхняя панель» была переименована в «навигационная панель», но она все еще имеет все остроту. Он реагирует на CSS медиа-запросы для небольших устройств, планшетов, небольших настольных компьютеров и больших настольных компьютеров. Это означает, что макет разбивается в определенных точках и укладывает элементы, чтобы поместиться на меньших экранах.
CSS: умные настройки по умолчанию, лучшие классы. В 1.4 все формы были сложены. Теперь они могут течь горизонтально. Таблицы теперь имеют пространство имен, поэтому стили Bootstrap применяются не ко всем таблицам. Доступны следующие классы таблицы, формы и навигации:
// Tables
.table { ... }
.table-striped { ... }
.table-bordered { ... }
.table-condensed { ... }
// Forms
.form-inline { ... }
.form-search { ... }
.form-horizontal { ... }
// Nav
.nav { ... }
.nav-tabs { ... }
.nav-pills { ... }
Цели с 2.0 — последовательность, упрощение и стили будущего. В 1.4 кнопки использовали «btn primary», и это вызывало проблемы, если вы хотели иметь «основной» класс в вашем проекте. В 2.0 кнопки и все элементы имеют пространство имен, чтобы избежать коллизий (теперь это .btn-primary).
После того, как Марк закончил говорить о дизайне Bootstrap, Джейкоб (@fat) начал говорить о JavaScript Bootstrap. Джейкоб работает в команде разработчиков платформы в Твиттере и утверждает, что он сделал много ошибок с 1.x. Однако, благодаря семантическому версионированию, 2.0 — это новая версия, и он должен начать все сначала!
Самым большим изменением в 2.0 является использование атрибутов данных (они же data- *). Они использовали их в 1.x, но не до полного потенциала того, кем они могут быть и должны быть. Первый класс API для Bootstrap JavaScript — это атрибуты данных (или HTML), а не JavaScript.
С 1.x вы можете добавить привязку для закрытия модальных сообщений и оповещений.
// 1.x closing modal/alerts <a class="close" href="#">×</a>
Однако, если вы поместите свои оповещения в свои модалы, вы закроете их все, когда, скорее всего, захотите закрыть только одно. 2.0 использует атрибут «data-dismiss».
<a class="close" data-dismiss="model">×</a>
Это позволяет вам нацеливать то, что вы хотите закрыть (модальные или оповещения и т. Д.). Вы точно знаете, что произойдет, просто прочитав код. Другим примером является атрибут «href» якоря. Вместо использования «href» теперь вы можете использовать «data-target».
// 1.x href = target <a href="#myModal" data-toggle="modal">Launch</a> // 2.x data-target = target <a data-target=".fat" data-toggle="modal">Launch</a>
Если вы предпочитаете отключить API атрибутов данных или его часть, вы можете сделать это с помощью следующего:
// Turn off all data-api
$('body').off('.data-api')
// Turn off alert data-api
$('body).off('.alert.data-api')
JavaScript API 2.0 имеет то же самое, но лучше. Вы можете отключить data-api и делать все с помощью JavaScript. Они копировали пользовательский интерфейс jQuery разными способами (по умолчанию, конструкторы и т. Д.). JavaScript Bootstrap имеет 12 плагинов. Новые включают развал, карусель и typeahead.
Настройка — новая вкладка, которая позволяет настраивать и загружать Bootstrap. По сути, это альтернатива настройке файлов .less и позволяет выбирать компоненты, выбирать подключаемые модули jQuery, настраивать переменные (цвета, размеры шрифтов, фоны) и загружать.
Что нас ждет в будущем? Интернационализация, повышение отзывчивости, больше новых функций и исправлений ошибок.
После того как Марк и Джейкоб выступили, они вместе поговорили о Сообществе и о том, как это здорово. Даже если вы не занимаетесь написанием CSS и JavaScript, они упомянули, что все еще хотят услышать от вас. Чтобы привести пример отличного вклада сообщества, один парень открыл 50 выпусков за последние 2 дня.
Кто-то в аудитории спросил, почему они использовали LESS вместо SASS. Джейкоб сказал, что главная причина, по которой они используют LESS, в том, что они хорошие друзья с парнем, который его изобрел ( Алексис ). SASS превращает CSS в язык программирования, но они хотели сохранить доступность CSS, что делает LESS. Там нет планов сделать официальный порт SASS, но есть разговоры о том, чтобы сделать один. Одно из преимуществ текущего LESS-компилятора состоит в том, что они переписали его, чтобы улучшить вывод, чтобы он был намного более читабельным.
НАСА
После того, как Марк и Джейкоб закончили, у нас был 5-минутный перерыв, чтобы взять пиво и закуски. Затем Шон Херрон ( @seanherron ) (он же NASA Bro) рассказал о начальной загрузке в НАСА. На самом деле он мало говорил о Bootstrap, за исключением того, что они использовали его для code.NASA . Он рассказал о НАСА и о том, как оно играет ключевую роль в движении к открытым данным, открытым источникам и открытым стандартам в нашем федеральном правительстве. Он упомянул, как data.NASA был запущен в августе прошлого года и что они помогли разработать OpenStack . Наконец, он упомянул open.NASA , который представляет собой совместный подход к открытой, прямой и прозрачной коммуникации о нашей космической программе.
Hogan.js
Далее Роб Сайр ( @sayrer ) рассказал о Hogan.js . Роб был в Твиттере несколько месяцев, до этого он писал JavaScript в других местах. Hogan.js — это компилятор для шаблонов усов .
Почему усы? Потому что это похоже на HTML и легко редактируется. Вы можете макетировать данные, так как файлы JSON и программисты не требуются.
В Twitter дизайнеры могут делать CSS и усы, не подключаясь к бэкэнду. Имеет поддержку нескольких языков в Ruby, Java и JavaScript. Однако при компиляции шаблонов на стороне клиента возникают проблемы с производительностью, особенно в IE7 на Windows XP с 4 вирусами.
Поэтому у них было несколько вариантов: работать над mustache.js или использовать Dust.js или Handlebars.js. Компиляторы очень хороши для Dust.js и Handlebars.js, но они огромны. Парсер руля — 4000 строк. Весь файл Hogan.js составляет 500 строк. Они решили, что они слишком велики для отправки браузеру своих пользователей, поэтому решили написать лучший компилятор для Mustache.
Основные особенности Hogan.js:
- Компилировать на сервере
- Parser API
- Производительность
Производительность намного лучше с Hogan.js, чем Mustache.js. На IE7 — Хоган в 5 раз быстрее, чем Усы. На iPhone это примерно то же самое (и браузер iPhone быстрее, чем IE7 на приличном компьютере). В современных браузерах (Chrome 17, Safari 5 и Firefox 10) это более чем в 10 раз быстрее.
В настоящее время Hogan.js используется в Твиттере для встраивания в твиты, процесса сборки Bootstrap, а вскоре и в Twitter.com.
Прошло некоторое время с тех пор, как я взволнован проектом с открытым исходным кодом. Bootstrap очень помог мне в последнее время, в моей Play More! мобильное приложение, в некоторых клиентских проектах, и я нахожусь в процессе обновления пользовательского интерфейса AppFuse для его использования . Мне нравится, как вы можете добавить класс или два к элементу, и внезапно они выглядят красиво. Основная проблема с Bootstrap на данный момент заключается в том, что многие приложения Bootstrap выглядят одинаково. Говорят о добавлении тем в будущих выпусках, чтобы облегчить эту проблему. В то же время, есть много, чтобы порадоваться с 2.0.
Спасибо Twitter за организацию этого мероприятия и благодарность Марку и Джейкобу (и сообществу!) За такой фантастический проект.
От http://raibledesigns.com/rd/entry/twitter_s_open_source_summit