Front-end 101: Обучение интерфейсу студентов, которые не знакомы с интерфейсом

Введение

Иногда мне нужно выйти на фронт нового одноклассника, и я не знаю, как начать? Давайте сначала поделимся этой графикой!

Эта статья адаптирована из Волшебного брата как «Leame Network Sear Erse Training Camp», сделанные входные переговоры. Этот семинар для студентов колледжа, содержание относительно младшего, мастера, пожалуйста, дрейфующий ~

Привет всем, сегодняшний обмен в основном разделен на следующие три части.

Так как на компьютерном факультете еще не создан специальный курс по веб-интерфейсным технологиям, у каждого студента разный уровень понимания фронтенда, сегодняшняя лекция познакомит с «фронтендом» самым простым способом, чтобы помочь вы строите базовую концепцию.

Что такое передняя часть?

Прежде чем ответить на этот вопрос, я подумал о вопросе интервью:

Что произойдет дальше, когда мы введем URL-адрес в браузере и нажмем Enter?

Давайте кратко рассмотрим весь процесс «веб-презентации».

Например, вот пользователь, которому нужен доступ кabc.comэтот URL. Вообще говоря, когда пользователь вводит доменное имя, он запрашивает ресурс HTML. Когда он завершит разрешение доменного имени, его браузерabc.comВеб-сервер, на который указывает это доменное имя, делает запрос.

Иногда веб-сервер может напрямую возвращать запрос пользователя, иногда веб-серверу необходимо запросить у базы данных некоторые данные, прежде чем вернуть результат обработки пользователю.

Когда браузер пользователя получает HTML-ресурс, возвращенный сервером, он начинает анализировать и отображать содержимое HTML.

Вообще говоря, HTML-страницы требуют ресурсов CSS для описания стиля страницы. Например, браузер обнаружил ссылку CSS при разборе HTML.abc.com/a.css, он запросит ресурс.

HTML-страницам часто также необходимо загружать внешние ресурсы JS, такие какabc.com/a.js, браузер также запросит этот ресурс у сервера.

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

Давайте посмотрим на эту блок-схему.Мы можем провести вертикальную линию посередине, чтобы разделить ее на две части: левую и правую.

Мы обнаружим, что действия в левой части этой строки происходят на стороне браузера, которую мы называем «внешняя часть», а в правой части — на стороне сервера, которую мы называем «внутренняя часть». («Внешний интерфейс» называется «интерфейсным интерфейсом», потому что он ближе к пользователю.)

Все прошли курсы, связанные с бэкенд-разработкой, и должны быть знакомы с бэкенд-частью. Возникает вопрос: каковы ограничения бэкенда в описанном выше процессе?

Как только сервер предоставляет ресурс браузеру, он теряет свое влияние на контент.
Сервер не может знать, что пользователь делает в браузере, и не может взаимодействовать с пользователем.

Это означает, что только в следующий раз, когда пользователь запрашивает ресурс с сервера, у сервера есть шанс снова решить, что видит пользователь. Итак, когда пользователь снова запрашивает ресурсы у бэкенда?

Первый случай — «навигационное действие». Например, пользователь обновляет страницу, щелкает ссылку, щелкает в браузере вперед/назад и т. д.

Второй случай — когда пользователь отправляет форму. Формы — один из самых традиционных способов взаимодействия со страницами.При отправке формы браузер сделает новый запрос к серверу — это означает, что браузер перейдет на новый адрес, а сервер отобразит результат обработки. формы на новой странице.

Также есть частный случай, то есть когда сервер возвращает браузеру HTML-ресурсы, он вставляет в страницу специальный тег, и браузер автоматически обновит текущую страницу или перейдет на другие страницы, увидев этот тег через определенное время. Это эквивалентно серверу, заставляющему пользователя сделать запрос еще раз. Вполне возможно, что такое поведение перехода по страницам, которое не обусловлено намерением пользователя, не нравится, поэтому оно обычно не используется.

На традиционных веб-страницах достаточно упомянутых выше режимов взаимодействия между пользователем и сервером. Однако с непрерывным развитием форм веб-страниц пользователи выдвигают более высокие требования к работе веб-страницы.Во многих случаях веб-страница представляет собой не просто статический документ, а скорее приложение, и пользователи могут взаимодействовать с ним в любое время. время. В это время отражается стоимость переднего конца.

Внешний интерфейс может контролировать содержимое страницы в период с момента, когда пользователь остается на текущей странице, до момента, когда делается новый запрос.
Когда пользователь остается на текущей странице, внешний интерфейс имеет возможность взаимодействовать с пользователем. Поскольку внешний JS может отслеживать различные действия пользователя в браузере (такие как щелчки мышью, ввод с клавиатуры, прокрутка страниц и т. д.), внешний интерфейс может давать соответствующую обратную связь по этому поведению.

При взаимодействии между внешним интерфейсом и пользователем на некоторые вещи может реагировать только внешний интерфейс. Например, мы сделали функцию калькулятора на веб-странице.После того, как пользователь вводит формулу, JS может напрямую вычислить результат и отобразить его пользователю. Весь процесс может быть завершен без участия сервера.

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

Итак, как интерфейс передает задачу серверу и получает результат, обработанный сервером? Есть два основных способа: Ajax и Socket соединение.

Ajax — это наиболее распространенное взаимодействие между интерфейсом и сервером. Он завершает передачу информации между интерфейсом и сервером по принципу «запрос → ответ». Почти все традиционные требования к взаимодействию с формой могут быть преобразованы Ajax в интерактивный режим «отправки и получения обратной связи на месте», который не требует перехода по страницам, что эффективно улучшает взаимодействие с пользователем.

Для сцен с высоким уровнем реального времени лучшим выбором будет подключение к сокету. Он работает для установления непрерывного соединения перед задним концом, и информация может быть отправлена обратно на передний конец в любое время или отправлена на передний конец задним концом. Если мы хотим построить диалог в реальном времени, вы обычно используете соединение через сокет.

Какие технологии нужны для фронтенда?

Когда речь заходит о передовых технологиях, мы обычно говорим о «трех больших блоках»:

HTML
CSS
JS

Это три основные технологии интерфейса.

Далее речь пойдет о «многоуровневой архитектуре фронтенда». Принцип этой архитектуры — «заставить правильную технологию делать правильные вещи». Веб-страницу можно логически рассматривать как органичное сочетание этих трех слоев:

структурный слой: Роль этого слоя состоит в том, чтобы показать, какая информация содержится на странице и какова взаимосвязь между этой информацией. Этот слой технически реализован HTML.
уровень представления: этот слой определяет, как будет отображаться информация на странице. Этот слой реализован с помощью CSS.
поведенческий слой: этот слой управляет тем, как страница взаимодействует с пользователем. В традиционных презентационных веб-страницах для обеспечения полных функций может быть достаточно только «структурного уровня» и «презентационного уровня», в то время как современные веб-страницы несут в себе все больше и больше взаимодействий, что способствует постоянному совершенствованию возможностей «поведенческого слоя». Этот слой реализован JS.

Мы понимаем эту многоуровневую архитектуру на примере.

Например, я являюсь пользователем People.com и открываю страницу «Информация, которую я публикую» в «Центре пользователей».

HTML этой страницы описывает информацию и структуру информации. Даже без помощи CSS и JS страница по-прежнему отображает понятный контент (см. изображение выше). В верхней части страницы находятся некоторые навигационные элементы, за которыми следует заголовок «Информация на дисплее», который, в свою очередь, ведет к списку. Этот список, естественно, содержит всю информацию, которую я публикую в Народной Сети. (В дополнение к «Отображаемой информации» во второй половине страницы есть еще «Удаленная информация», поэтому я не буду повторяться здесь.)

Далее мы поработаем над уровнем представления, используя CSS для установки внешнего вида каждого элемента на странице. После этого слоя оформления контент на странице стал более красивым, а главное, функции и обязанности каждого элемента стали более интуитивно понятными и понятными (см. рисунок выше).

Это уже довольно хорошая веб-страница, но далее мы будем использовать JS, чтобы обогатить ее функции и повысить эффективность работы пользователей.

Как издателю сообщения мне может потребоваться изменить содержимое сообщения или сделать что-то вроде его «обновления». В традиционном взаимодействии мне нужно щелкнуть информацию, которую нужно обработать, в этом списке, а затем выбрать соответствующую операцию на странице сведений об информации.

Мы можем упростить этот процесс: мы добавим кнопку действия для каждой части информации в этом списке, когда пользователь нажимает кнопку действия определенной части информации, мы открываем панель управления на странице, и пользователь может напрямую выбрать нужную операцию, уменьшая промежуточные звенья (см. выше).

Можно видеть, что уровень структуры, уровень представления и уровень поведения имеют свои сильные стороны, и вместе они создают веб-страницу с полным набором функций и удобным интерфейсом.

Помимо базовых «трех блоков», нам как фронтенд-инженерам также необходимо овладеть следующими знаниями и навыками:

HTTP связанные: Поскольку интерфейсные ресурсы загружаются браузером через сеть, нам необходимо понимать соответствующие сетевые протоколы.
Связанные с браузером: внешний код выполняется в браузере.Нам необходимо понимать различные характеристики браузера и различные интерфейсы, которые браузер нам предоставляет.
Оптимизация производительности интерфейса: сделать веб-страницы быстрее и сократить время ожидания пользователей, что также является важной темой, с которой сталкиваются фронтенд-инженеры. Чтобы оптимизировать производительность внешнего интерфейса веб-страниц, нам необходимо иметь два вышеуказанных знания и овладеть инструментами и методами, связанными с оптимизацией производительности.
графическое изображение: информация веб-страницы включает не только текст, но и мультимедийную информацию, такую как изображения и видео. Как наиболее часто используемые медиа-ресурсы, изображения требуют от нас овладения навыками, связанными с ними. Например, понять применимые сценарии различных форматов изображений, основные методы обработки изображений и т. д.

(В лекции была организована демонстрационная сессия. Я продемонстрирую, как создать простую веб-страницу с нуля и отработаю руководящую идеологию «многоуровневой архитектуры внешнего интерфейса».)

Каков путь фронтенд-разработки?

Мы уже представили «три основных блока» фронтенд-технологии, но сейчас, когда мы пишем код этих трех блоков, мы уже не «голые». Это означает, что код, который мы пишем на этапе разработки, не совпадает с кодом, который фактически работает в среде браузера, а именно:

Мы генерируем HTML с помощью языка шаблонов.
Сгенерируйте код CSS с помощью препроцессора CSS.
Напишите код JS с синтаксисом и функциями ES6+.

Например, следующие три примера показывают эволюцию способа написания кода.

People.com использует два языка шаблонов, Jade и Jedi. В приведенном выше коде мы использовали только самый простой синтаксис разметки языка шаблонов и не вставляли какие-либо логические возможности языка шаблонов. Один только этот шаг показывает преимущества языков шаблонов.

Изначально, когда мы писали HTML-код, мы тратили много энергии на<,/,>Такой грамматический шум, при этом еще и очень сложно выявить вложенные отношения тегов. К счастью, современные языки шаблонов, такие как Jade и Jedi, освобождают фронтенд-инженеров. Вложенные отношения они выражают посредством отступов, а иерархические отношения понятны с первого взгляда, синтаксис более лаконичен и выразителен.

С точки зрения CSS, с одной стороны, препроцессор снижает нагрузку на разработчиков за счет более лаконичного синтаксиса, а с другой стороны, повышает выразительность кода за счет встроенных логических возможностей. Например, при использовании нативного CSS для написания кода один и тот же цвет, используемый разными элементами, может быть только разбросан по коду; после использования препроцессора CSS мы можем абстрагировать цвет того же значения в виде переменных, а потом вызывать его где угодно в коде. Это не только облегчает последующее обслуживание, но и облегчает понимание назначения кода при чтении кода в обычное время.

Что касается JS, мы начинаем пользоваться преимуществами новых функций, появившихся в ES6+. ES (ECMAScript) — это стандартная спецификация, определяющая язык JS. Начиная с шестого издания, ES продолжает быстро расширять возможности языка JS, выпуская одно издание каждый год.

В прошлом, если мы хотим добиться «найти элементы, отвечающие определенным критериям в массиве» спроса, часто требовалась помощь таких инструментов, как библиотека Underscore, называемая_.find()метод. В ES6 сам язык расширяет возможности массива, нам просто нужно прямыми звонкамиArray#find()интерфейс. Кроме того, новый синтаксис, такой как стрелочные функции, может еще больше упростить код.

В трех основных блоках HTML, CSS и JS мы отказываемся от «голого письма» и используем «высшие» языки для:

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

Конечно, внедрение этих языков более высокого уровня обходится не совсем бесплатно. Языки, которые мы используем на этапе разработки, больше не являются чистыми HTML, CSS и JS, и браузеры не могут их напрямую распознавать и запускать. Итак, когда мы отказываемся от «голого письма», это означает:

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

В People.com команда разработчиков интерфейса создала необходимую среду разработки, и разработчикам нужно сосредоточиться только на самой разработке.

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

модульный: модульность — одна из наиболее распространенных практик программирования, делающая нашу организацию кода более понятной и простой в обслуживании. ES6 добавляет к JS полное модульное решение, и наша ежедневная разработка также была перенесена на спецификацию модуля ES6.
управление пакетами: Как я могу использовать отличные компоненты в сообществе с открытым исходным кодом для себя? Здесь нельзя не упомянуть «npm», самый распространенный менеджер пакетов JS. Почти все отличные проекты с открытым исходным кодом в мире внешнего интерфейса выпускаются в репозиторий пакетов npm, а сторонние библиотеки, которые мы используем в нашей повседневной разработке, также управляются npm.

Инструменты упаковки могут интегрировать наш модульный исходный код и сторонние пакеты вместе, чтобы сформировать полный ресурс JS, необходимый для страницы. Комбинация «менеджер пакетов», «модульный», «инструмент для пакетов» - это, по сути, повседневная организация кода JS.
составной: В традиционной фронтенд-разработке коды HTML, CSS и JS имеют свои собственные независимые файлы, и эти файлы часто разбросаны по разным структурам каталогов.

Если разделение функциональных блоков страницы достаточно четкое, разработчики могут использовать понятие «компоненты» для разделения страницы, и вся страница будет рассматриваться как вложенность и комбинация нескольких компонентов; в то же время разработчики склонны Коды HTML, CSS и JS, относящиеся к каждому компоненту, интегрированы в один и тот же каталог (или в один и тот же файл) для простоты управления и обслуживания.

Это «компонентная» модель развития. Для достижения такого режима разработки обычно требуется взаимодействие интерфейсных фреймворков и инструментов сборки.
одностраничное приложение: History API HTML5 предоставляет внешнему интерфейсу возможность управлять поведением навигации браузера. Благодаря функции Ajax, обновляющей содержимое страницы без обновления, мы можем реализовать переключение нескольких представлений приложения на одной странице, избегая частых переходов страниц. , и обеспечить взаимодействие с приложением, подобным настольному. Например, такие продукты, как Gmail, являются типичными моделями одностраничных приложений, и большинство серверных систем People.com также являются одностраничными приложениями.
Другие практические знания оставлены для вас в вашей работе.

Это основной контент, которым я хочу поделиться с вами сегодня, спасибо за чтение, пока!

автор:Магия CSS@Внешняя архитектура
Введение: TL интерфейсной архитектуры People.com, переводчик «CSS Revealed», лектор CSS Conf, самопровозглашенный «дизайнер в инженерном халате».

Эта статья является лишь личной точкой зрения автора и не отражает позицию People's Network.
Автор: Lakexyde @ Pixabay

Эта статья была впервые опубликована в общедоступной учетной записи WeChat «Технической группы People's Network», отсканируйте код и немедленно подпишитесь: