Фронтенд-архитектор звучит как должность очень высокого уровня. В глазах большинства программистов архитекторы обычно занимаются бэкенд-разработкой, и они родились на Java или C++. Они часто владеют этими восемнадцатью боевыми искусствами и могут решить проблемы, которые появляются в бизнесе различные проблемы. Кажется, архитектор никогда не имел отношения к фронтенду, так ли это на самом деле?Прочитав эту статью, вы вдруг просветлеете.
Смысл передней части:
Прежде всего, давайте сначала поговорим об этой работе, о значении фронтенда. Внешний интерфейс является производным от пользовательского интерфейса, и он первым связывается с пользователем, а также первым измеряет качество продукта проекта.
Что такое передний конец
С самой ранней системы DOS в то время не существовало понятия front-end, и большинство программных интерфейсов отображали консольные команды холодными черно-белыми символами, поэтому не только пользователи, но и огромное количество программ медленно работали. не удовлетворен статус-кво, и разработал набор графического интерфейса пользователя, чтобы сделать некоторые функции более удобными для работы. Тогда интерфейс назывался GUI (Graphical User Interface). Концепция мультитерминала не выделена, и большинство из них основано на нативном интерфейсе, разработанном операционной системой.
Изображение выше из классического программного обеспечения системы DOS.DOS Navigator
С развитием Интернета, рождением браузера первого поколения Netscape (браузер Netscape) и появлением последующих браузеров серии IE слово «серфинг в Интернете» постепенно вошло в жизнь большинства пользователей. До сих пор популярен браузер Chrome, а также множество браузеров в Китае. Язык JavaScript, который в основном обслуживает браузеры и реализует различные спецэффекты, открыл первую волну весны.Картинка выше оттудаБраузер Netscape
До сих пор передняя часть постепенно разделялась на:
Веб-интерфейс (HTML+CSS+JavaScript), клиентский интерфейс (Android и iOS).
Или инженер по рефакторингу веб-страниц, инженер JS, UI / UX, вырез и т. Д.
Итак, в конечном счете, все это для внешнего интерфейса.Сказав так много, в чем ценность внешнего интерфейса?
Где ценность фронтенда?
- Реализовать интерфейсное взаимодействие.
- Улучшить пользовательский опыт.
Первый момент - задание в интерфейсе, которая является основным отличием между функцией и задней частью, а причина существования переднего положения. Само собой разумеется, второй момент - это то, что если передний конец все хорошо, оно выгодно для пользовательского опыта. Если цель и ценность бэкэнда отражены в высокой производительности, высокой доступности, масштабируемости и безопасности услуг. Тогда значение интерфейса отражена в словом «пользователю».
Таким образом, как квалифицированная фронтенд-разработка, цель заключается в том, чтобы пользователи чувствовали себя комфортно (круто), поэтому, чтобы полностью отразить вашу ценность, вам необходимо шаг за шагом выполнить следующие шаги:
- В соответствии с логикой и требованиями продукта завершите отображение пользовательского интерфейса передней страницы соответствующего бизнеса и взаимодействуйте с пользователем.
- Напишите код с высокой ремонтопригодностью, уменьшите количество ошибок и обеспечьте хорошее взаимодействие с пользователем.
- При выполнении функции иметь возможность ознакомиться с существующим бизнесом, предложить области для устойчивого улучшения и провести оптимизацию.
После прочтения вышеуказанных статей, кажется ли это знакомым, очень ли это похоже на JD объявления о вакансии. На самом деле, да, как предприятие, наем разработчика интерфейса должен быть в состоянии принести пользу предприятию, что само по себе является отражением вашей ценности.
Однако то, что я хочу сказать, вы действительно понимаете три, казалось бы, простое содержание. Первый и второй элементы являются вариантом осуществления ваших технических способностей. Эта часть полностью зависима от вашего технического накопления. Затем третий элемент является вариантом осуществления вашей основной ключевой инициативы. Эта часть может использоваться во многих местах, нового человека и Работа разрыв между опытными людьми может быть отражена здесь, и мы поговорим об этом позже.
Тем не менее, я все еще хочу сказать, что это простое завершение трех шагов, то вы можете объяснить, что вы квалифицированные предельные разработки, что все еще является определенным расстоянием от архитекторов.
Действительно ли важно отражение ценности внешнего интерфейса?
Что ж, мы узнали ценность интерфейса выше, и разработчики интерфейса все еще усердно работают, чтобы отразить свою собственную ценность, но это сбивает с толку, интерфейс ценен, но действительно ли важна эта ценность?
по сравнению с непередовыми технологиями
Для зрелого продуктового бизнеса внешний интерфейс часто представляет собой очень тонкий слой, и большинство функций, предоставляемых вам этим слоем, — это отображение пользовательского интерфейса страницы и взаимодействие с пользователем. Хотя внешний интерфейс — это первый проход между продуктом и пользователем, это всего лишь первый проход, а позади может быть более дюжины проходов. Например, те, кто занимается внутренней логикой, базовой базой данных, сетевой безопасностью, эксплуатацией и обслуживанием, анализом больших данных или соответствующий персонал популярного машинного обучения. Каждый родственный модуль имеет свою независимую техническую систему, которую можно назвать незаменимой. Следовательно, по сравнению с технологиями вне этих интерфейсов, интерфейс не так уж и «надо». Другими словами, внешний интерфейс действительно ценен, но с глобальной точки зрения ценность, создаваемая внешним интерфейсом, не является основной ценностью.
Важность для продуктового бизнеса
Теперь, чтобы привести практический пример, для front-end разработки, в некоторых интернет-компаниях первой линии, таких как BAT и т. д., эти компании придают большое значение front-end разработке, имеют свои собственные бизнес-линии продуктов, и весь фронт- конечная технология имеет хорошую атмосферу и может использовать передовые технологии для постоянного улучшения пользовательского опыта продукта. Но для некоторых других малых и средних компаний или предприятий (я полагаю, что не все из вас из BAT) техническое содержание многих интерфейсных разработок не очень велико, особенно для некоторых предприятий ToB основные функции исходят от back-end, от оптимизации базы данных. Или для некоторых более известных функциональных продуктов ИИ основная конкурентоспособность этих продуктов может даже исходить от аппаратного обеспечения и алгоритмов. Большинство ролей, которые играет внешний интерфейс, — это отображение пользовательского интерфейса, визуализация данных и так далее. И много работы повторяется, а некоторые даже могут выполняться бэкенд-разработчиками неполный рабочий день. Таким образом, для важности бизнеса внешний интерфейс может отражать его ценность по-прежнему очень ограничена.
Конечно, я так много сказал здесь, чтобы не донести до всех сообщение: передняя часть не хороша, поторопитесь и смените профессию, такого рода мышление, конечно, нам еще есть, что я хочу сказать здесь все время держать всех в ощущении кризиса, только это чувство кризиса является движущей силой для нас, чтобы продолжать углубленные исследования и продвижение технологий, а также продолжать развиваться и двигаться вперед.
Передовые передовые технологии:
Прежде чем стать архитектором, нужно иметь достаточный технический резерв, который может не ограничиваться фронтенд-технологиями. Конечно, здесь я сначала расскажу о том, как необходимо развивать некоторые интерфейсные технологии.
оптимизация производительности
Коллеги, которые работали на крупных фабриках, должны знать, что оптимизация производительности — это ступенька, потому что если вы хотите измерить, действительно ли опытна фронтенд-разработка, оптимизация производительности — это водораздел, и связанные с ней процессы в основном включают:
- Во-первых, как определить проблему.
- После обнаружения проблемы, как проанализировать причину.
- После того, как причина найдена, принимается решение.
- После решения, был ли улучшен реальный пользовательский опыт.
Из этих проблем могут быть выведены различные проблемы, достойные дальнейшего изучения, и из них могут быть обнаружены некоторые методологические проблемы, поэтому оптимизация производительности является очень важным моментом.Конечно, мы не будем здесь говорить о конкретных оптимизациях.Рекомендуется прочитать«Оптимизация производительности мобильного Интернета от начального до продвинутого уровня»Эта статья.
понимание структуры
Если вы хотите быть архитектором, вы не можете просто остановиться на уровне использования API структуры.
Для трех самых популярных интерфейсных фреймворков, Vue, React и Angular, необходимо освоить их базовое использование, но это и самое простое.Сейчас в Интернете есть различные курсы, которые могут сделать только что закончившего стажера. может легко начать работу и достичь способности делать проекты. Итак, почему запрос может сделать стажер, почему я должен выбрать вас?
Таким образом, овладение принципами фреймворка, понимание содержащихся в нем идей и вывод из одного случая — это ключ к расширению разрыва с большинством фронтенд-программистов.Вот несколько примеров Vue, чтобы увидеть, действительно ли вы овладеваете им.
- Двусторонняя привязка в Vue, просто
Object.defineProperty()Какой? - Как реализована зависимость данных Vue?
- В чем принципиальная разница между VUE COMPUTED и WATCH?
- Как работает Keep-Alive?
С таким же успехом вы можете попытаться понять основные моменты этих вопросов и попытаться найти ответ в исходном коде. Понимая исходный код, полезно понимать саму структуру, что полезно для улучшения способности решать проблемы и снижения вероятности ошибок.
Погрузитесь в мир Node.js
Node.js — это мощный инструмент, который позволяет фронтенд-инженерам получать доступ к серверной логике, а также дает нам законную причину захватывать серверные задания, но здесь Node.js не относится к разработке серверной части. логика одна. Например, в текущей системе разработки интерфейса веб-пакеты, парцеллы, vue-cli и т. д., играющие важную роль, или Electron, который теперь позволяет разрабатывать программы для настольных компьютеров на JavaScript, неотделимы от Node.js. Вот некоторые из них, например, вы можете попробовать продвигаться по этим пунктам:
- В отличие от JavaScript на стороне браузера, бэкенд Node.js напрямую обращается к серверу, чтобы найти и проанализировать утечки памяти.
- Попробуйте написать несколько плагинов для веб-пакетов.
Холст и WebGL
WebGL — это графическая спецификация Web3D на основе OpenGL и набор API-интерфейсов JavaScript. Проще говоря, его можно рассматривать как 3D-версию Canvas.Конечно, некоторые люди могут чувствовать себя немного предвзято, когда речь заходит об этом направлении. Действительно, для большинства интерфейсных разработок использование технологий и алгоритмов обработки 3D, связанных с WebGL, не требует освоения сложных алгоритмов или математических знаний, а требует только изучения three.js. Но на основе Canvas или WebGL мы можем найти решения для некоторых конкретных проблем. Также вот несколько примеров:
- Реализуйте бизнес-требования скретч-карты или стены с граффити.
- Сжимайте и обрезайте изображения при загрузке.
- Когда дело доходит до реализации кадровой анимации, используйте CSS3 и выбор Canvas.
Приведенные выше сценарии аналогичны тем, когда вы получаете эти требования, если вы вообще не знаете Canvas или WebGL, вы можете никогда не подумать, что эти технические решения могут решить эти проблемы, поэтому это не означает, насколько хорошо вы понимаете Canvas или WebGL, Но как архитектору вам необходимо обладать некоторой технической широтой, чтобы расширить свой стек технологий и улучшить способность решать проблемы.
Путь к архитектору:
Говоря это, кажется, доходит до точки. Основные продвинутые знания необходимы для вашей продвижения, чтобы стать старшим интерфейсом, но это не ядро вашей способности стать архитектором. Как говорится, как долго есть специальность, прежде всего, вы должны быть опытными в одном. Повышение предельных знаний - это прорыв для архитекторов, поэтому вам нужно сначала понимать одну вещь: в то время как овладение интерфейсными технологиями, вам также необходимо изучить навыки, отличные от технологии интерфейса. Вы можете видеть только больше, если вы думаете за пределы фронта. Поэтому, если вы хотите пойти от начального старшего архитектора, посмотрите на контент ниже.
трансграничный
Если вы умеете писать только front-end страницы, то какими бы совершенными ни были ваши навыки, вас можно назвать только мастером HTML. Настоящие архитекторы должны иметь трансграничные возможности.По мере непрерывного совершенствования технологий будет все меньше и меньше случаев обновления технической архитектуры при смене работы. Новые изменения на архитектурном уровне будут происходить из-за спонтанного переопределения содержания работы и обязанностей поста, что является границей, упомянутой здесь. Так что дело не в том, что вы занимаетесь фронтенд-разработкой, вы не можете делать что-то вне фронтенда, вы должны пытаться мыслить и решать проблемы вне границ.
Второе открытие страницы является важным показателем для измерения оптимизации внешнего интерфейса. Мы используем эту точку оптимизации, чтобы суммировать, какие аспекты пересекаются:
- Чтобы повысить скорость, начните с рендеринга на стороне сервера и используйте Node.js для пересечения серверной части.
- Чтобы улучшить время запуска страницы H5 в мобильном Интернете, начните с веб-просмотра и используйте навыки iOS и Android для пересечения клиента.
Опыт взаимодействия с пользователем также является важным показателем для измерения оптимизации внешнего интерфейса.Мы используем эту точку оптимизации, чтобы обобщить аспекты, из которых следует пересечь:
- Чтобы улучшить взаимодействие с пользователем, попробуйте на стороне клиента веб-страницу на основе React Native или Weex, вы также можете перейти на сторону клиента.
- Улучшите эффекты анимации страницы, напишите высокопроизводительную анимацию внешнего интерфейса и перейдите к дизайну движения пользовательского интерфейса.
Разумная трансграничность может позволить архитекторам иметь глубокое понимание бизнеса в целом и предлагать нестандартные решения для различных проблем.
первые последователи
Технология постоянно развивается. Как архитектор, очень важно постоянно изучать новые технологии. Ранние последователи здесь означают поддержание определенного энтузиазма в отношении технологий, а не просто удовлетворение статус-кво. Грубо говоря, мы должны продолжать учиться .
- Если вы привыкли разрабатывать страницы с помощью jQuery, попробуйте Vue и React.
- Я давно пишу код на ES5, и неплохо выучить ES6.
- Побалуйте себя страницей разработки HTML, CSS, JavaScript, возможно, захотите изучить Flutter.
- Чтобы создать высокопроизводительное веб-приложение, попробуйте Service Worker.
- Активировано по протоколу HTTP, обновите spdy и HTTP2, попробуйте HTTP3.
- Попробуйте новый язык программирования: WebAssembly.
- Знайте сервисы, но знаете ли вы микрофронтенды.
Навыки раннего внедрения, перечисленные выше, могут быть запущены с точки зрения внешнего интерфейса для постоянного углубления, и сохранение любопытства к каждой новой технологии имеет важное значение для архитектора.
Инструменты и конструкция платформы
Программистов, которые могут только писать код, можно назвать только фермерами кода.
Когда технология достигает определенной высоты, способность иметь возможность еще раз поднять бизнес, постепенно станет меньше, чем мы могли бы выпрыгнуть из самой технологии, окружающих инструментов для улучшения бизнес-платформы для обслуживания таких же деловых услуг. Как архитектор, у этого возможности.
Когда дело доходит до инструментальных платформ, вы можете быстро подключиться к некоторым инструментам в вашей команде. Здесь мы в основном обсуждаем с вами идеи, которые наша система инструментов должна использовать для планирования и проверки, а также рассмотрим моменты, которые мы можем улучшить.
Для простоты приведем несколько примеров инструментальных платформ:
- Для разработки и отладки вам потребуются некоторые инструменты для повышения эффективности разработки, такие как Fiddler, который обычно используется в мобильном Интернете, или небольшой программный симулятор.
- Для тестирования производительности вам потребуются некоторые инструменты, которые могут выполнять стресс-тестирование и онлайн-регрессионное тестирование после выпуска, например Tencent wetest.
- Для статистического анализа каждому бизнесу нужны инструменты, которые могут предоставить персоналу продукта для наблюдения за данными.Конечно, из-за конфиденциальности данных каждая команда обычно имеет внутренние инструменты и аналогичные внешние инструменты, такие как Google Analytics.
Видно, что инструментальная платформа в основном построена вокруг каждого ключевого узла в нашем процессе исследований и разработок.В совокупности мы можем назвать это инжинирингом. Инжиниринг — очень популярная концепция в последние годы, а также очень четкое направление разработки интерфейса для интерфейса.По сути, процесс улучшения инструментальной платформы — это процесс продвижения проектирования архитектуры.
Как архитектор, вы должны иметь острое обоняние, чтобы понимать эти узлы. И в нужное время может быть создана инструментальная платформа, которая может улучшить бизнес.При столкновении с повторяющимися проблемами подумайте, следует ли разработать автоматизированную инструментальную платформу для их решения.Это улучшение бизнеса за пределами кода.Решение.
Процесс и нормализация
Для архитектора очень важно сформулировать и стандартизировать процесс. Не стоит недооценивать силу спецификаций, которые могут значительно повысить эффективность разработки.По-настоящему отличная спецификация не будет ограничивать пользователей, но может помочь им быстро обнаружить проблемы и повысить эффективность. Характеристики здесь можно резюмировать следующим образом:
- Спецификация структуры: для структуры кода проекта, независимо от внешнего и внутреннего интерфейса, очень необходимы разумное разделение на уровни и компоненты.
- Спецификации кодирования: основная проверка кода здесь — это проверка кода, лучше всего использовать некоторые автоматизированные инструменты при регулярном выполнении проверки кода.
- Спецификация процесса: этапы обзора проекта, разработки, тестирования и выпуска должны быть ограничены процессами, которые должны быть сформулированы в соответствии с реальной ситуацией в вашей собственной команде.
- Реализация спецификации: самая важная вещь для спецификации состоит в том, чтобы реализовать реализацию. Когда спецификация сформулирована, необходимо рассмотреть вопрос о том, действительно ли он реализуется время от времени. Это должно быть основным принципом, что каждый член команда придерживается.
Методология
Так называемая методология может быть более абстрактной, когда просто сказано. Методология здесь в основном относится к выполнению небольшого требования или осуществлению крупного проекта. В конкретном процессе реализации должны быть определенные методы и навыки. Я считаю, что у каждого есть видел видео "Под куполом", которое является сильным методологическим проявлением. На самом деле, грубо говоря, в делах должна быть рутина, вот пример оптимизации производительности. При оптимизации производительности, как мы можем доказать, что оптимизация эффективна, мы можем использовать «правило сэндвича» (название, которое он сделал):
- Перед оптимизацией нам нужно найти статус-кво проблемы, и должны быть данные, подтверждающие статус до оптимизации. Так что учитесь собирать данные.
- После того, как у нас есть данные, нам нужно найти причину проблемы и применить ее на практике при анализе данных. На этом этапе необходимо зафиксировать конкретный принцип оптимизации.
- После оптимизации мы должны найти способы проверки, а в процессе проверки нам также необходимо собрать данные.
На данный момент у нас есть данные до оптимизации, принцип оптимизации и данные после оптимизации. Путем сравнения данных мы можем легко доказать, что наша оптимизация эффективна, и мы можем сделать очень красивое резюме.Как архитектор, это хорошая престижная сцена.
Мы можем его разложить, и вышеперечисленные три шага можно повторить еще раз, то есть первую оптимизацию, мы добились эффекта, но после дальнейших исследований мы также можем оптимизировать снова, каждая оптимизация подкреплена данными, это Методология оптимизации производительности.
сознание безопасности
Зачем тут отдельно выносить безопасность, ведь для бизнеса безопасность это первый элемент, так же как и страна, безопасность и стабильность это предпосылка развития всего, раз в бизнесе есть проблема с безопасностью, то может быть потерянным в одно мгновение. , стоимость очень тяжелая. Поэтому, как архитектор, мы должны обеспечить стабильность бизнеса.Можно резюмировать следующие моменты:
- Решительно скажите «нет» низкоуровневым проблемам безопасности кода, таким как xss и csrf во внешнем интерфейсе.
- Для крупномасштабных операционных действий необходимо учитывать устойчивость к стихийным бедствиям и резервное копирование.Например, когда набор планов подготовлен, должны быть необязательные планы резервного копирования.
- Попробуйте использовать инструменты для решения и предотвращения проблем с безопасностью.Например, крупные предприятия, такие как BAT, имеют механизм гарантийного уровня на уровне эксплуатации и обслуживания и кода, такой как система дверного бога Tencent.
работа в команде
Нет идеального человека, но есть идеальная команда.
Даже как архитектор, я считаю, что он не всегда борется в одиночку.Отличный продуктовый бизнес всегда рождается в команде, поэтому очень важно постоянно поддерживать связь с членами команды.Эти коммуникации не ограничиваются ежедневными текстовыми сообщениями или встречи или даже частные тимбилдинги, все могут понять друг друга. Таким образом, цель командной работы состоит в том, чтобы позволить каждому в команде четко определить свои обязанности и максимизировать их ценность.Архитектор обязан поддерживать эти отношения сотрудничества. И признание вас также дается вам членами команды.Только поддерживая хорошую атмосферу, можно убедить членов команды.
Наконец, подытоживая, некоторые недоразумения относительно фронтенд-архитекторов:
- Архитекторы — это не то же самое, что инженеры полного стека.
- Архитекторы никогда не должны полностью отказываться от кода, но и не должны постоянно писать код.
- Архитекторы должны выпрыгивать из самой технологии, смотреть на бизнес с глобальной точки зрения, находить и решать проблемы.
- Архитектура любого проекта не сформулирована изначально или неизменна, она должна постоянно повторяться и развиваться, а архитектор обязан обеспечивать новаторство архитектуры.
Наконец, я надеюсь, что все фронтенд-коллеги смогут преодолеть трудности и спокойно идти по пути становления архитектором!
Добро пожаловать в новую книгу:«Практика разработки мобильных веб-приложений HTML5 + Vue.js»