Трафарет как инструмент дизайн-системы.
Вступление
Если вы дизайнер продукта, то наверняка слышали о дизайн-системах. Это важный аспект в вашей сфере. Некоторые разработчики интерфейсов уже знают, что такое дизайн-системы, и, вероятно, их используют. Мы все видели, как такие компании, как Google, Uber, Airbnb говорили о системах дизайна, и часто задавались вопросом, о чем, черт возьми, идет такая суета.
Дизайн-система - это группа / набор компонентов, построенных с использованием строгих рекомендаций и четких стандартов. Согласно [Stencil Js] (https://stenciljs.com/docs/what-is-design-system), система дизайна (отныне DS) состоит из компонентов пользовательского интерфейса и четко определенного визуального стиля, выпущенного как как реализации кода, так и артефакты дизайна. Когда его внедряют все продуктовые команды, появляется более сплоченный клиентский опыт. Давайте разберемся с этим.
В составе команды дизайнеров компании вы садитесь за стол, чтобы обсудить дизайн вашего следующего продукта. Вы быстро понимаете, что ваш следующий продукт не будет иметь такой же визуальной привлекательности, как ваш предыдущий, а ваш предыдущий продукт совсем не похож на ваш первый. Проблема здесь в том, что ваш дизайн непоследователен. Мобильная команда создает нечто совершенно отличное от веб-команды. Здесь в игру вступает дизайн-система. Очень важно иметь четкое руководство о том, как должны выглядеть ваши цифровые продукты. Вот почему:
- Экономит время
Когда вы уже внедрили DS, вы избавляетесь от времени, необходимого для разработки проектов и макетов продуктов. Когда у вас уже есть на что ссылаться, все движется быстро.
2. Беглый дизайн.
Человеческий мозг автоматически чувствует себя комфортно в знакомой обстановке. Возьмем, к примеру, логотип. Когда человек видит логотип, с которым он знаком, он сразу же узнает объект, связанный с ним. То же, что и материальный дизайн или бутстрап Google. Точно так же, если у вас есть согласованный дизайн ваших продуктов, пользователи могут сразу же понять их.
3. Техническое обслуживание
Конструкцию продукта легко поддерживать, поскольку компоненты имеют модульную конструкцию и могут использоваться повторно. Вам просто нужно обновить компонент, и вам не придется погружаться в свой беспорядочный код javascript. * Мы все время от времени пишем беспорядочный код *.
И это только верхушка метафорического айсберга. Я тебя уже подсел? Вот как можно реализовать DS.
- Оцените свой текущий дизайн.
Взгляните на свой текущий дизайн и решите, что вы хотите сохранить, а от чего отказаться. Добавьте все, чего еще не хватает.
2. Реализуйте язык дизайна / руководство.
Это включает в себя цвет, шрифты и типографику, интервалы и поля, формы и т. Д. Например, закругленные углы, какой-то уникальный шрифт, поля 5 пикселей, желтый цвет? Реализуйте это.
3. Определитесь с выкройкой.
У вас уже есть то, что вы хотели бы сохранить, и язык дизайна. Теперь договоритесь о шаблоне: кнопки призыва к действию, активные и неактивные элементы, расположение элементов, размер шрифта и т. Д.
4. Задокументируйте свои компоненты.
Ваш DS будет использовать широкий круг людей, поэтому убедитесь, что документация проста и понятна.
Пора избавиться от зануды. Давайте перейдем к хорошему.
Трафарет JS
Это инструмент, созданный командой [Ionic] (https://ionicframework.com/), чтобы помочь им создавать веб-компоненты для Ionic Framework внутри компании. В конце концов они осознали потенциал Stencil и сделали его открытым для публики. Это инструмент для создания веб-компонентов или даже целых веб-приложений. В сочетании с Ionic 4, который теперь является универсальным (работает с любым фреймворком javascript или вообще без фреймворка, благодаря stencil js), вы можете создать полностью оптимизированное прогрессивное веб-приложение. В этом посте я не буду вдаваться в подробности о веб-компонентах, но именно для этого создан Stencil. Я использую Stencil с первых дней бета-тестирования, и буквально вчера, 6 июня 2019 года, они выпустили первый трафарет 🎊🎉🎆. Подробнее об этом читайте в их блоге https://blog.ionicframework.com/.
Предпосылки
- Базовые знания машинописного текста
- Узел Js
- NPM 6 или выше
Давайте начнем.
Запустите свой терминал 💻 и запустите:
npm init stencil
Вам будет предложено выбрать тип проекта и назвать его.
Я хочу сделать простой веб-компонент. Выберите это и дайте ему имя. Я назвал свой ds-tutorial. cd в ваш проект.
cd ds-tutorial
Здесь много файлов и папок, так что давайте посмотрим, что важно.
- src - это ваш рабочий каталог, здесь находится ваше приложение, и именно здесь вы будете писать большую часть, если не весь код.
- src / components - здесь будут находиться ваши компоненты. Там уже есть компонент по умолчанию.
- src / index.html - это HTML-файл записи вашего приложения. Откройте его, и вы обнаружите, что используется упомянутый выше компонент по умолчанию.
- package.json - определяет ваши зависимости и некоторую другую полезную информацию, используемую поставщиками пакетов и трафаретом.
- stencil.config.ts - содержит конфигурацию для вашего проекта трафарета. Вы можете добавлять сервис-воркеров, плагины, создавать документы и многое другое. Об этом подробнее здесь"
Остальное должно быть вам знакомо. Stencil использует TSX, который набирается JSX. JSX - это расширение синтаксиса для javascript, распространенное в React. Это не должно вас пугать. Пользоваться им довольно просто. Это позволяет нам писать наш HTML внутри файлов javascript.
Откройте свой проект в текстовом редакторе. Visual Studio Code имеет отличную подсветку синтаксиса и инструменты. Перейдите к src/components/my-component/my-component.tsx и измените код на
import { Component, Prop, h } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
/**
* Your name
*/
@Prop() name: string;
render() {
return <div>Hello, World! I'm {this.name }</div>;
}
}
Здесь что-то происходит. Если вы использовали angular до того, как познакомились с декораторами.
@Component({ tag: 'my-component', styleUrl: 'my-component.css', shadow: true })
Этот декоратор предоставляет метаданные о нашем компоненте компилятору Stencil. Я не буду вдаваться в подробности, но вы можете изучить декораторы.
- `tag` определяет HTML-тег вашего веб-компонента.
- styleUrl определяет путь к вашей таблице стилей.
- shadow определяет, будет ли ваш компонент использовать встроенную инкапсуляцию shadow-dom или нет.
Внутри вашего класса есть еще один декоратор
@Prop() name: string;
Этот декоратор определяет свойства, которые должны быть переданы нашему компоненту. Думайте об этих свойствах как об атрибутах. Есть масса других декораторов, о которых вы можете прочитать здесь.
Наконец-то есть функция рендеринга. Эта функция выводит дерево компонентов, которые будут отображены на экране.
render() {
return <div>Hello, World! I'm {this.name }</div>;
}
Сохраните этот файл и откройте src/index.html.Сразу после открывающего тега body вы найдете свой компонент. Убедитесь, что тег соответствует тегу в вашем my-component.tsx
<my-component name="Your Name"></my-component>
Помните свойство name, как обычный атрибут, верно 😃? Сохраните этот файл и вернитесь к своей консоли. Убедитесь, что вы находитесь в корневом каталоге проекта, и запустите:
npm start
Теперь посмотрите, как происходит волшебство. Попробуйте изменить значение атрибута name в index.htmlи сохраните. Смотрите, что происходит. Изменения будут отражены немедленно. И это безумно быстро. Теперь добавьте стиль к src/components/my-component/my-component.css и смотрите. Поиграйте с этими тремя файлами. Когда вы закончите, перейдите в консоль и запустите:
npm run build
Это создает ваши компоненты для производства и сохраняет их в папке dist. Вы можете изменить это в stencil.config.ts. Теперь вы можете опубликовать это в NPM или в другом месте. Добавьте еще несколько компонентов в папку компонентов, и вы получите коллекцию веб-компонентов, систему дизайна 😀. Stencil обрабатывает все сложные вещи на заднем плане, поэтому вы можете сосредоточиться на простых вещах.
Завершение
Вы всегда можете посетить веб-сайт трафаретов, чтобы узнать о более сложных концепциях и способах использования. Это было просто для того, чтобы вы начали работу со Stencil. С помощью трафарета вы можете сделать гораздо больше. Я не охватил даже четверти того, на что способен трафарет. Попробуйте, дайте волю своему воображению.
