Статьи

Кирпич Мозиллой

Май 8, 2018

Несколько месяцев назад я написал пост, который, возможно, был немного перегружен: «Будущее Интернета» . Я не отрицаю, что название было немного сенсационным, но, честно говоря, я был взволнован тем, что увидел, и действительно думаю, что мы наблюдаем тектонический сдвиг в веб-разработке. Сегодняшнее сообщение в блоге не так уж и потрясающе, но я думаю, что это чертовски круто.

Примерно неделю назад Mozilla объявила о выпуске Brick . Brick — это набор компонентов, основанный на стандарте W3C для веб-компонентов . По сути, это способ создания собственных HTML-тегов и их вывода на клиент. Любой, кто когда-либо загружал библиотеку пользовательского интерфейса, знает, что в этом есть острая необходимость. Вообразите разработчика, у которого нет хорошего опыта JavaScript. Вместо того, чтобы изучать что-то вроде пользовательского интерфейса jQuery для добавления вкладок в свое приложение, они могут просто включить библиотеку и использовать теги для записи своего HTML. Мы еще не совсем там, но это приближается.

Кирпичная библиотека Mozilla — отличный тому пример. Их библиотека содержит виджеты для:

  • Панели инструментов, кнопки и группы приложений
  • Выбор календаря и даты
  • Палубы и флипбоксы
  • Базовый макет контейнера
  • Слайдер
  • Управление вкладками (очевидно)
  • И более

Некоторые из них действуют как полифиллы. Так, например, Firefox еще не поддерживает тип ввода = дата. (* вздох *) Итак, если вы используете их указатель даты в Firefox, вы увидите:

Принимая во внимание, что тот же код в Chrome ничего не делает, поскольку он изначально поддерживается:

Виджеты пользовательского интерфейса хороши, но сейчас меня интересуют колоды. Возьмите следующий код:

<x-deck>

  <x-card>
    Card One
  </x-card>

  <x-card>
    Card Two
  </x-card>
  
  <x-card>
    Card Three
  </x-card>

</x-deck>

Brick создает единый вид карт, так что первый (по умолчанию, и вы можете настроить это) виден. Затем он предоставляет простой JavaScript API для переключения между ними. Я сразу подумал: «Это может быть отличным способом создания одностраничного приложения для PhoneGap» (на самом деле, я сейчас работаю над ним).

Я сделал простую демонстрацию, которая демонстрирует это. Это не красиво, но вините меня, а не Мозиллу.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
	<title></title>
	<meta name="description" content="" />
	<meta name="viewport" content="width=device-width" />
	<link rel="stylesheet" href="brick/brick-1.0beta5.css"/>
	<script src="brick/brick-1.0beta5.js"></script>	
	<style>
	x-layout > x-appbar > header, x-layout > footer{
		padding: 0;
		background-color: orange;
		color: white;
		font-weight: bold;
		text-align: center;
	}

	html, body{
		height: 100%;
	}
	</style>
</head>
<body>

	<x-layout>

		<x-appbar>
			<div><a href="" id="homeLink" title="Home">=</a></div>
			<header>My App</header>
		</x-appbar>

		<section>
			
			<x-deck id="mainDeck">

				<x-card>
					
					<ul>
						<li><a href="1" class="deckLink">Page One</a></li>
						<li><a href="2" class="deckLink">Page Two</a></li>
						<li><a href="3" class="deckLink">Page Three</a></li>
					</ul>
					
				</x-card>
				
				<x-card>
					
					<h1>Page One</h1>
					
				</x-card>
				
				<x-card>
					<h1>Page Two</h1>
				</x-card>

				<x-card>
					<h1>Page Three</h1>
				</x-card>

			</x-deck>
		</section>
	
		<footer>
			Copyright 2013 by Raymond Camden
		</footer>
		
	</x-layout>
	
	
<script>

document.addEventListener('DOMComponentsLoaded', function(){
	console.log('domCom loaded');

	var deck = document.querySelector("#mainDeck");

	var homeLink = document.querySelector("#homeLink");
	homeLink.addEventListener("click", function(e) {
		e.preventDefault();
		deck.shuffleTo(0);
	});
	
	var navLinks = document.querySelectorAll(".deckLink");
	for(var i=0,len=navLinks.length; i<len; i++) {
		navLinks[i].addEventListener("click", function(e) {
			e.preventDefault();
			var target = e.currentTarget.href.split("/").pop();
			deck.shuffleTo(target);
		});
	}
			
});	
</script>
	
</body>
</html>

«Приложение» (хорошо, оно не так уж и сложно) оборачивается тегом x-layout. У меня есть панель приложений для верхнего и нижнего колонтитула в нижней части. Внутри это моя основная колода с 4 картами. Первая карта похожа на базовую домашнюю страницу. У меня есть простое меню с тремя ссылками. Как я уже сказал, Brick предоставляет базовый API для загрузки карт в колоду, но мне нужно написать немного JavaScript, чтобы справиться с этим автоматически. Я не уверен, что я сделал это самый простой способ сделать это, но это сработало. Я просто добавил класс к своим ссылкам и создал обработчик событий, который бы собирал эти события кликов. Затем я использую значение href, чтобы определить, какую карту загрузить (индексы карт основаны на 0). Я сделал нечто подобное для домашней ссылки. Если вы посмотрите на пример для панели теговвы можете видеть, что в Mozilla есть более автоматизированный способ сделать это, поэтому то, что я сделал, возможно, еще проще (или будет в будущем).

Вы можете запустить мое демо здесь, если хотите: http://www.raymondcamden.com/demos/2013/aug/23/test4.html

Я определенно призываю вас проверить это. С тех пор как я впервые поиграл с ним, у них было три обновления, так что это активный проект. И, честно говоря, это интересно писать. Я копаю это.

PS Быстрое редактирование после того, как я опубликовал: я не думаю, что их сайт говорит об этом, но вы можете следить за проектом Mozilla Brick в Twitter: https://twitter.com/mozbrick

35
Share: