Все мои стартапы, консалтинговые концерты и даже корпоративные рабочие места имели много неприятностей со строительством пользовательского интерфейса. Я решил что-то сделать с этим.
Может быть, вы хотите сделать интерактивную презентацию данных для вашего блога. Или, может быть, вы хотите опубликовать небольшое веб-приложение (MVP), чтобы проверить эту идею, о которой вы думали о прошлом году. Или просто хочу поделиться чем-то с миром. Или создайте калькулятор использования для вашего запуска SaaS. Если вы не преданный разработчик пользовательского интерфейса, удачи!
Даже онлайн-курсы, кажется, согласны – стать экспертом по реагированию за 3 месяца. Узнать угловой в 6 месяцев. Что случилось со старым добром и документом .getelementbyId, что мы знали и любили?
Но я просто хочу прохладный интерфейс для моей Arduino …
Кроме того, библиотеки JavaScript не работают из коробки с этими новыми технологиями. Вам нужны адаптеры и обходные пути. 20 лет веб-разработки с открытым исходным кодом, вниз по сток.
Ранее в прошлом году я столкнулся с библиотекой компонентов, которая использует ванильный JavaScript, CSS и HTML (с некоторым шаблоном). Я нашел это освежающе простым, с 15-минутной кривой обучения и очень легким –svelte JS https://svelte.dev/ Отказ
Чтобы поддержать другие породы разработчиков, публикуйте передний конец для своих проектов хобби/домашних животных, я портировал очень популярную конструкцию пользовательского комплекта для SVELTE. Ниже приведен конечный результат, и как это использовать.
Чтобы дать вам вкус, а не писать это:
-
Item 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Item 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.
-
Item 3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.
Вы можете написать только это:
Компонент чистый HTML, с некоторым шаблоном. А построение проекта позволяет вам чистый HTML, который вы можете развернуть в любом месте, который вы хотели бы (можно статически подавать). Это также позволяет легко создавать и потреблять микросервисы. И это также позволяет легко встроить код на странице WordPress.
В этом случае может показаться, что это не так много, но, как только вы доберетесь до более сложных структур, это действительно окупается. Например, посмотрите на демо здесь ( http://getuikit-element.surge.sh/):
Вы можете увидеть 3 элемента, с аналогичной структурой – заголовком, компонентом из UIKIT и код для создания его. В то время как очень простая документация приложение, бы быстро было бы неожиданно копировать и вставлять HTML вокруг. Вот как использовать этот конкретный компонент:
ПрезентацияComponent использует динамический компонент - ответственный с оказанием кода.
Передача свойств и изменений имущества также очень простой - как удерживает центральный магазин данных в памяти, но это за пределами объема этой статьи.
До следующего раза, вот репо для комплекта UI: https://github.com/dashboardhero/uikit
Пожалуйста, дайте мне знать, какие удивительные вещи вы собираетесь построить - и если есть какой-либо другой способ, которым я могу помочь.
Счастливое кодирование!
Оригинал: "https://dev.to/dashboardhero/ui-development-is-insane-1da8"