1. Чудо или растрата?
Я часто думаю над таким вопросом, вселенная такая большая, а жизнь такая маленькая, это чудо, что каждый из нас может появиться в этом мире. Если каждый день мы делаем что-то повторяющееся, не делаем ничего сложного, не делаем ничего, что нарушает рутину, и не делает что-то, что указывает путь, не будет ли дарованное нам чудо великой тратой?
2. Один лист закрывает глаза горы Тай
Информация, которой они подвергаются, очень легко влияет на познание людей и принятие решений. Мир огромен, а индустрия обширна, но те, кто говорит о фронтенд-индустрии, — лишь малая ее часть.
У этих людей, имеющих право голоса, большой опыт работы на заводе, команда из нескольких человек, фреймворк верхнего уровня и системная инженерия.
Однако на самом деле во всей отрасли у большинства компаний есть только 1 или 2 разработчика интерфейса, и проекты разработки интерфейса большинства компаний очень просты.Многие компании делают проекты для государственных органов, и даже должны быть совместимы с Браузеры IE8.
Так что в большей или меньшей степени компании вводятся в заблуждение так называемыми популярными и популярными моделями техники. Остается один бардак за другим.
Эти кажущиеся групповыми мысли на самом деле являются лишь мыслями некоторых групп высшего уровня. В книге «Толпа» говорится, что как только человек интегрируется в группу, его личностные изменения уничтожаются, и групповое мышление начинает доминировать.
У нас должна быть собственная личность и собственная настойчивость. Но, к сожалению, большинству людей не хватает твердого эго, и они подавлены толпой.
На самом деле, многие люди надеются, что они смогут попрощаться с повторяющимися делами каждый день, делать сложные вещи, делать то, что нарушает рутину, и делать то, что ведет вперед!
Однако в реальном мире они неосознанно замыкаются в узкой повседневной работе, следуют групповому сознанию ради идентичности и безопасности и плывут по течению. Стать отребьем, посредственным человеком.
Поэтому самое главное — как сохранить твердую самость в бурной и шумной среде, сохранить свою личность и характеристики и не поддаваться влиянию группы, чтобы изменить свое поведение и суждения.
Как я себя держу?
Для меня это держаться подальше от всякого рода искушений под руководством философской мысли.
Следующая фраза очень хороша!
«Если философская мысль может жить тысячи лет, она должна быть истиной, проверенной тысячами людей!»
Нам нужно только научиться мудрости, переданной древними на протяжении тысячелетий, чтобы познать нашу работу и жизнь, и мы, естественно, сможем пройти через взлеты и падения жизни, через сложный и хаотичный мир, и достичь другая сторона, которую мы хотим.
А я убежденный даосский идеолог.
Два самых основных пункта даосской мысли: «прослеживание до источника» и «управление бездействием».
Будь то дела, будь то жизнь, жизнь или работа, а также техническое обучение и познание, я следую этой идее на практике.
Например:
Диета: легкая, в погоне за оригинальным вкусом ингредиентов, а не за стимуляцией приправами;
Обучение: подумайте о природе технологии, изучите базовый API и обратите внимание на детали.
Технологии: против больших и полных, против чрезмерной упаковки, погони, простоты, оригинальности и гибкости.
React, Vue и так называемая инженерная проблема
Вернемся к самой теме: у React, Vue и так называемой инженерии, которой в настоящее время уделяется больше внимания, есть свои проблемы. Есть два основных аспекта:
-
Мое собственное восприятие - это восприятие всей индустрии
Не знаю, слышали ли вы историю о лодочнике и его детях.
В холодный день лодочник вышел грести и взял с собой детей. Лодочник сильно греб, и ему стало очень жарко, поэтому он снял пальто и надел только одну рубашку. Он вбежал в каюту и сказал своему ребенку: «Слишком жарко, дай я сниму куртку для тебя!» Он снял куртку ребенка и позволил ему надеть только одну куртку. Лодочник прокатился еще раз, обливаясь потом от жары, и просто снял единственную рубашку, которая была на нем. "О, слишком жарко! Слишком жарко!" Он снова вошел в каюту, снимая с ребенка одежду. Как энергично греб лодочник, тело его дымилось и потело. И все же его бедное дитя замерзло в кабине.
React, Vue и так называемый инжиниринг — тоже одна проблема: потребности тех, кто наверху, считаются потребностями всей индустрии, а люди внизу уже давно перед ними трепещут.
-
Длинную реку истории переплыть невозможно, да и сами практики существенно не улучшились
На протяжении всей долгой истории естественной истории эти сложные и высокоуровневые высшие существа всегда уничтожались волнами, только простая жизнь выживала на протяжении сотен миллионов лет истории. Такие мирские истины применимы и к технике: чем проще и фундаментальнее технология, тем сильнее ее жизненная сила и тем больше она может пересечь длинную реку истории.
Реагируйте, Vue, эти вещи верхнего уровня, через 5 лет упадок неизбежен.
Еще одна проблема - "ловушка таланта". Красота - это своего рода талант, и это тоже ловушка. Она приносит много удобства. Если игнорировать внутреннюю заботу и рост, вероятность будущего счастья не так высока, как это красоты; быть хорошим — это тоже своего рода талант, который часто может принести много преимуществ, но это также приведет к пренебрежению культивированием технологий и осознания, и конечным достижением будет именно так; точно так же React и Vue действительно привносят удобство в разработку, жертвуя производительностью в обмен на удобство разработки, но это также приводит к игнорированию изучения основ и деталей технологии.По прошествии времени эти фреймворки перестают быть популярными, и вы обнаружите, что ваш конкурентоспособности больше нет.
Это проблема текущей отрасли. Конечно, если есть проблема, это также означает возможность. Вы можете сделать что-то полезное и ценное для отрасли.
Ключ как это сделать? Лучше всего не только удовлетворить собственные потребности в росте, но и привнести что-то новое в отрасль!
Давайте присоединимся к поддержке и созданию темы LuLu UI Pure вместе!
3. Чистая тема LuLu UI
Тема LuLu UI Pure является последней разработкой библиотеки компонентов пользовательского интерфейса LuLu.Он наследует последовательную концепцию дизайна системы компонентов пользовательского интерфейса LuLu, следует даосской идее о «отслеживании до источника» и «управлении бездействием» и разработан на основе Родной JavaScript. Он мягкий, гибкий и гибкий. Бесплатная новая тема.
Прежде чем представить тему LuLu UI Pure, давайте сначала разберемся с концепцией дизайна пользовательского интерфейса LuLu.
В-четвертых, концепция дизайна пользовательского интерфейса LuLu.
Пользовательский интерфейс LuLu имеет две основные концепции дизайна, а именно:
- разработка для дизайна
- Разработка на основе HTML
Концепция дизайна: разработка, ориентированная на дизайн
Задайте всем вопрос, какая из трех ролей «дизайнер», «дизайнер интерфейса» и «разработчик интерфейса» больше подходит для разработки UI-компонентов?
Ответ — «интерфейсный дизайн», потому что он включает в себя как чувствительность пользовательского интерфейса, так и разработку кода.
Тем не менее, текущая ситуация в отрасли не такова.Контроль интерфейса JS в Китае, как правило, слабый.Хотя существует чувствительность дизайна, но навыки кодирования очень слабые.Поэтому окончательные компоненты пользовательского интерфейса реализуются ролью фронтенд-разработки.
Тем не менее, разрабатывать компоненты пользовательского интерфейса в такой роли, как разработка интерфейса, проблематично, я резюмировал следующие 3 проблемы:
- Накопление HTML/CSS слабое, а реализация многословная;
- Продвигайте JS как длинный, избегайте короткого HTML, копайте огромную дыру;
- Слишком глубоко проникает сознание абстракции и инкапсуляции;
Давайте посмотрим на них один за другим.
Прежде всего, наращивание HTML и CSS, рассмотрим на примере:
Реализация раскрывающейся сборки AutoComplete библиотеки компонентов пользовательского интерфейса,<input>Слой обернут вокруг текстового поля<div>вкладки, настройкиpositionдляrelative，, то контейнер основного списка автозаполнения находится в этом пакете<div>внутри, абсолютно расположен на<div>,пройти черезleft/topЗначение связано с размером текстового поля.
Это плохой дизайн.
Небольшая скрытая опасность заключается в том, что из-за изменения глубины иерархии DOM очень вероятно, что соседний селектор родитель-потомок не сработает. Сверхбольшая скрытая опасность заключается в том, что внешний слойoverflow:hiddenЭто урежет отображение раскрывающегося списка, что является очень простой сценой.
На самом деле, есть лучшие реализации без обертывания слоя<div>, просто следуйте непосредственно за полем ввода, оно адаптивно, не влияет на уровень и не будет зависеть от внешнего слоя.overflow:hiddenвлияние.
Но front-end разработка не должна знать, что есть такая реализация, потому что слабое накопление CSS и HTML.
Во-вторых, поскольку HTML/CSS не очень скользкий, а JS скользкий, написанные компоненты тяжеловесны на JS и легки на HTML, что приводит к появлению тяжеловесного кода компонентов, такого как имитационная реализация радиокнопки Каркас компонента.
Видно, что шаблон использует JS API, все состояния радиокнопок все используют JS API, и все это JS.Тогда этот компонент с именем iRadio имеет более 600 строк кода JS.Я сотрем его, более 600 строк, извините, я тупой, какова ценность этих 600+ строк кода JS?
Хотя этот компонент тоже можно использовать и функция в порядке, но... забудьте, успокойтесь....
И последнее, но не менее важное:Слишком глубоко проникает сознание абстракции и инкапсуляции.
Многие разработчики не поймут, что чем лучше абстракция компонентов, чем лучше инкапсуляция, тем лучше качество?
Это неправильное восприятие! Если мы разрабатываем фреймворк JavaScript на чистом языке, он действительно требует высокой степени абстракции и инкапсуляции. Но то, что мы разрабатываем здесь, — это компоненты пользовательского интерфейса, компоненты пользовательского интерфейса, посмотрите хорошо, это компоненты пользовательского интерфейса, со словом «пользовательский интерфейс», не чистый язык, а компоненты, которые имеют дело с видением и опытом.
Давайте посмотрим на некоторые замечания наших предшественников:
Логику пользовательского интерфейса трудно абстрагировать, а если абстрагировать, это означает смерть.
Это замечания Юбо. Несложно понять, что если компонент уверен, что UI-слой идеально абстрагирован и инкапсулирован, это показывает, что этот компонент уже сильно ограничил производительность UI-слоя. Нет никаких сомнений в том, что некоторые вещи противоречивы сами по себе: проектирование требует согласованности, однако производительность пользовательского интерфейса требует индивидуализации, а они по своей сути противоречивы и непримиримы.
Это ограничение многих фронтенд-разработчиков, которые не осознают существенной разницы между инфраструктурой пользовательского интерфейса и логикой и все еще стремятся к повторному использованию всего сайта, хорошей инкапсуляции и богатому API.
Одним словом: UI-фреймворки тщетно пытаются охватить все сценарии, если вы хотите быть большим и всеобъемлющим, это тупик.
Знаменитое высказывание Стива Джобса:
не в соответствии с вредными привычками пользователей к дизайну, а также не в соответствии с дизайном мышления программистов!
Китайское значение означает «Не проектируйте в соответствии с плохими привычками пользователей и не проектируйте в соответствии с мышлением программистов!»
Поскольку мышление программиста - это проектирование, систематизация и удобная разработка, такое мышление подходит для разработки внутренних продуктов, создания внутренних продуктов, функция является наиболее важной, пользовательский интерфейс очень вторичен, и его можно увидеть в прошлом.
Однако для внешних продуктов для C мышление программиста очень проблематично.
Задайте всем вопрос, для С продуктов что важнее, опыт и качество продукта или удобство разработчиков?
Да, очевидно, опыт и качество продукта важнее!
В это время мышление программиста повлияет на качество продукта, потому что продукт с очевидным темпераментом и атмосферой высокого класса, индивидуальный пользовательский интерфейс и дизайн неизбежны.
Конечно, фактическая разработка и разработка будут пытаться достичь конечного эффекта в соответствии с потребностями продукта и дизайна, но способ реализации состоит в том, чтобы дважды инкапсулировать исходные большие и глупые компоненты.
Боже, компоненты и так очень большие, и их надо переупаковывать.В итоге компоненты станут очень громоздкими, и они не смогут охватить все сценарии проектирования.В конце концов, от дизайнера требуется корректировка дизайна под адаптацию к текущие фиксированные функции компонента. Боже, поставь телегу впереди лошади, как может внешняя разработка продукта продолжать делать дизайн продукта посредственным из-за плохого дизайна компонентов!
Пользовательский интерфейс LuLu отличается от других, он основан на продуктах C и реализует концепцию разработки, ориентированную на дизайн, поэтому окончательная форма отличается от традиционных компонентов пользовательского интерфейса, в том числе:
De-API, модули с низким уровнем связи, плоские слои и соответствующее резервирование;
Без концепции версии ядро продолжает выполнять итерации вперед;
- Укорененные в проекте, любые изменения пользовательского интерфейса изменяют сам компонент, включая JS;
1. Отсутствие концепции версии
Традиционные компоненты пользовательского интерфейса имеют такие концепции, как версия 1.0 и версия 2.0, а пользовательский интерфейс LuLu — нет. Пользовательский интерфейс LuLu — это ядро, и он развивается сам по себе. У него есть только концепция темы и нет версии.
Когда проект необходимо использовать, он напрямую копируется в проект и интегрируется со всем проектом. С этого момента он не имеет ничего общего с пользовательским интерфейсом LuLu. Он принимает режим инкубации цыпленка и может быть самостоятельным, как только он из оболочки.
Схема выглядит следующим образом:
Поскольку уровень пользовательского интерфейса является изменчивым и неконтролируемым, когда наш пользовательский интерфейс необходимо настроить в соответствии с фактическим дизайном проекта, пожалуйста,Непосредственно изменяйте код CSS и JS пользовательского интерфейса LuLu в проекте.!
2. Укоренен в проекте
Модификация компонентов пользовательского интерфейса должна быть укоренена в проекте, а не в сбросе или вторичной инкапсуляции.Это очень важно.Мы являемся структурой пользовательского интерфейса, следуем проекту и компонентам, ориентированным на дизайн, а не компонентам, ограничивающим дизайн. Поскольку мы напрямую изменяем исходный код в пользовательском интерфейсе LuLu, любой дизайн можно контролировать.
Изменить исходный компонент? Многие находят это невероятным. Каждый должен изменить свое мнение.Если внешние продукты должны быть выдающегося качества, необходима индивидуальная обработка.Как и платье, сшитое на заказ, оно не должно быть сделано вручную ремесленниками. Это отличается от разработки проекта в середине и за кулисами! Схема выглядит следующим образом (вы можете сравнить схему вторичного пакета выше):
То же самое и с настройкой, разница заключается во вторичной инкапсуляции, а другая - в исходном преобразовании.Поскольку принята исходная стратегия преобразования, наши компоненты пользовательского интерфейса не должны быть большими и полными, и они не будут становиться все более раздутыми из-за различных Сохраняйте простоту и последовательность. , это преимущество пользовательского интерфейса LuLu и путь к долговечности.
Многие переживают, что модификацию JS нельзя контролировать, по нашему практическому опыту в десятках проектов, в большинстве сценариев настраивать JS не нужно, так что не беспокойтесь.
Концепция дизайна: на основе разработки HTML
Идея разработки на основе HTML соответствует происхождению даосизма и правилу бездействия.
Давайте сначала посмотрим на демо под LuLu UI:Демо-версия на основе собственных компонентов пользовательского интерфейса HTML
Вначале это форма пользовательского интерфейса браузера.Как показано на рисунке ниже, подсказки в заголовке, выбор даты, проверка формы и т. д. — все это грубый собственный пользовательский интерфейс. В этот момент мы нажимаем кнопку отправки, и в это время будут загружены CSS и JS пользовательского интерфейса LuLu.В результате произошло что-то волшебное, и пользовательский интерфейс изменился на внешний вид пользовательского интерфейса LuLu, и он стал Прекрасный.
Слева — собственное поведение HTML, а справа — эффект, реализованный пользовательским интерфейсом LuLu.
Что еще более удивительно, так это то, что мы представили лишь немного CSS и JS компонентов пользовательского интерфейса LULU и не коснулись предыдущего бизнес-JS, однако прежние интерактивные функции совершенно не пострадали. Следующий GIF:
Это концепция разработки на основе HTML, основанная на нативном HTML, с упором на производительность пользовательского интерфейса, чтобы компоненты пользовательского интерфейса возвращались к своей сущности или своей роли — пользовательскому интерфейсу!
Дополнительные преимущества разработки на основе HTML
Семантика, доступность, SEO и т.д.;
Стоимость обучения низкая, а API основан на стандартных спецификациях;
Разделение внешнего интерфейса — сосредоточьтесь на самих элементах управления HTML, а не на компонентах;
В-четвертых, снова поговорим о теме Pure пользовательского интерфейса LuLu.
Пользовательский интерфейс LuLu в настоящее время имеет четыре основные темы:
- современный: IE7+, зависит от jQuery, 2015 года рождения, не требует поддержки
- пик: IE8+, зависит от jQuery, ПК, 2016 г. рождения, с открытым исходным кодом
- чистый: IE9+, собственный JS, поддержка мобильных устройств, 2019 года, открытый исходный код
- руководство: Chrome+, нативный JS, мобильная поддержка, собственная разработка…
Среди них тема Pure является основной силой текущей библиотеки компонентов пользовательского интерфейса LuLu с открытым исходным кодом.По сравнению с предыдущей темой прогресс таков:
- Нативная разработка JS, повышение производительности;
- Поддержка внедрения компонентов проекта Vue и React, а также дальнейшее расширение сценариев приложений;
- Поддержка обнаружения атрибутов, уровень пользовательского интерфейса автоматически обновляется, и вы можете больше сосредоточиться на бизнес-логике;
- Полные векторные ресурсы, 0 внешних ссылок на ресурсы и значительно улучшена производительность загрузки;
- Улучшена доступность чтения с клавиатуры и экрана;
- Основываясь на прошлом опыте, оптимизируйте большую часть внутренней логики, чтобы упростить использование API;
- API и языковой стиль полностью унифицированы, что больше подходит для изучения новичками;
- Обновление документа, более стандартизированное и более подробное;
Текущий этап темы Pure
Тема LuLu UI Pure в настоящее время имеет открытый исходный код:GitHub.com/read-share/lulu…
Официальный адрес:l-ui.com
Хоть тема Pure с открытым исходным кодом, хоть и стоит на плечах темы Peak, хоть и прошла несколько раундов системного тестирования, должно быть много несовершенств.Так называемая практика может принести истинные знания, надеюсь больше людей сможет Присоединяйтесь Примите участие в создании темы LuLu UI Pure, что является первоначальным замыслом написания этой статьи.
Есть много способов принять участие, вы можете показать свою любовь звездой, вы можете попробовать это в проекте и сообщить о проблемах, с которыми вы столкнулись, вы можете напрямую участвовать во внутренней логике реализации построения и оптимизации кода и т. д.
Вселенная такая большая, а жизнь такая маленькая Подумайте о ценности и смысле жизни Это огромное чудо или огромная трата? Должны ли мы:
- Делайте что-то, что следует вашему сердцу и отличается от других;
- Сделайте что-то значимое для команды и индустрии;
- Вместе и LuLU UI, сквозь сутолоку стремительного, стоящего на пути в будущее;
Так что давай, участвуй в создании пользовательского интерфейса LuLu, реализуй себя, создавай ценность и выигрывай будущее!
Наконец, я хотел бы поблагодарить следующих друзей за их вклад в создание темы LuLu UI Pure, в произвольном порядке: nanaSun, ziven27, lennonover, wiia, popeyesailorman, 5ibinbin, littleLionGuoQing, peter006qi, HSDPA-wen, ShineaSYR, xiaoxiao78.