16 November 2015

Moff.js и модулированный Bootstrap

Website developmentCSSJavaScriptClient optimizationDevelopment of mobile applications
Moff.js and Bootstrap

В предыдущей статье я писал о том, как фреймворк Moff.js может облегчить создание Mobile First страницы без использования CSS фреймворка.

Но на сегодняшний день большенство проектов используют какие либо CSS фреймворки и одним из таких фреймворков является Bootstrap. Смело можно утверждать, что Bootstrap является самым популярным Mobile First фреймворком.

Cамым большим недостатоком этого фреймворка является его размер. Даже минифицированная версия весит 154.9KB и это только CSS и JS файлы.

Зачастую разработчикам нужна только часть функционала, но подключают они весь фреймворк целиком. И поэтому пользователям мобильных устройств приходится загружать большой объем лишнего трафика. Решением этой проблемы было разделение фреймворка на группы из часто и не часто используемых модулей, которые удобно использовать в Mobile First подходе. Каждая из этих групп была вынесена в виде отдельного модуля в Moff.

Все модули разбиты на три категории:
  • Main
  • Components
  • JavaScripts


В категории Main находятся следующие модули:
  • Buttons – Отвечающий за стилизацию кнопок
  • Core – Содержащий в себе все базовые стили
  • Forms – Отвечающий за формы
  • Glyphicons – Стили иконок glyphicons
  • Grid – Система сетки
  • Tables – Таблицы
  • Typography – Типографика


Категория Components содержит все Bootstrap компоненты: Alerts, Badges, Breadcrumbs, Button groups, Dropdown и тд.
Категория JavaScripts содержит все JS модули Bootstrap: Affix, Alert, Button, Carousel и тд.
Подробный список модулей можете прочитать на странице Moff.

Способы использования модулей


Mодуль Core является базовым и подключается на все станицы как основная зависимость для всех остальных модулей.
<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/main/core.css">

Он состоит из следующих Bootstrap Sass модулей.
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/print';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/component-animations';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/close';

Остальные модули можно подключить двумя способами.

AMD (Asynchronous module definition)


Moff.amd.register({
	id: 'grid',
	depend: {
		js: ['bower_components/moff/dist/bootstrap/javascripts/button.js'],
		css: [
			'bower_components/moff/dist/bootstrap/main/grid.css',
			'bower_components/moff/dist/bootstrap/components/pagination.css',
		]
	},
	file: {
		js: ['modules/listing.js'],
		css: ['modules/listing.css']
	},
	loadOnScreen: ['md', 'lg'],
	onWindowLoad: false
});

После регистрации модуля нужно его загрузить, что бы начать использовать. Загрузить его можно двумя способами:

с помощью AMD
Moff.amd.include('grid');

или использовав Data Events
<a href="listing.html" data-load-target="#grid-target" data-load-module="grid">Show listing</a>
<div id="grid-target"></div>


HTML


<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/main/core.css">
<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/main/grid.css">
<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/main/typography.css">


У обоих подходов есть недостаток. Это большое количетво времени на HTTP соединение из-за множества файлов. Но эта проблема первой загрузки, в дальнейшем файлы загрузятся из кэша. Решением может быть объединение файлов. В данный момент это можно сделать вручную, но в дальнейшем планируется создать CLI для Moff, который будет решать подобные задачи.

P.S. Модульная версия Bootstrap в Moff помогает загрузить только необходимые части фреймворка для облегчения объема страницы.
Tags:javascriptmoffmobile firstbootstrap
Hubs: Website development CSS JavaScript Client optimization Development of mobile applications
+6
8.7k 66
Comments 12