Web Notes
1.0.0
Читать онлайн >>
Кодовые чехлы · Справочные материалы
Веб -разработка легко начать, но трудно узнать. Он разделен на этапы, такие как первый взгляд на дверь, вход в комнату и интеграция всего процесса. Если вы впервые читаете серию статей автора, рекомендуется пойти на технический путь определенного медведя для полного понимания. В этой серии автор стремится изучить, как эффективно повысить эффективность НИОКР команды и своевременно и надежно полную доставку на протяжении всего жизненного цикла итерации продукта; В то же время он может контролировать общую сложность системы и постоянно оптимизировать производительность и опыт системы.
Оглядываясь назад на блестящие изменения в веб -технологии и экологии за последние десятилетия, мы пережили захватывающие изменения и часто теряются в замешательстве выбора. Благодаря инновациям версий браузера и улучшением производительности аппаратного обеспечения, разработка веб-фронта вступила в эксплуатацию быстро меняющейся и постоянно меняющейся эпохи. Бесчисленные фронтовые рамки разработки и технические системы конкурируют за красоту, что заставило разработчиков растеряться и даже в утрате. Особенно с появлением современных фронтовых фронтовых рамок (Angular, React, Vue.js), улучшения языковых функций, таких как JavaScript, CSS, HTML и т. Д., И предлагаемые теоретические концепции, такие как инженерные, кросс-платформированные, микрофронтальные, большие фронтальные и BFF, технологии и сообщество для веб-фронта, также постоянно обоснованы. статус Что касается так называемых современных фронт-инженеров, им обычно необходимо использовать много профессиональных знаний для решения инженерных задач, включая то, как модулировать проект, как проектировать взаимодействие между компонентами, как улучшить способность повторного использования, как повысить эффективность упаковки, оптимизировать производительность браузера и т. Д.; Больше не так, как раньше, им нужна только рутина HTML/CSS/JS для разработки статических страниц.
В целом, любая экосистема программирования пройдет три этапа, прежде всего, исходный период. Поскольку необходимо расширить язык и основные API, этот этап будет рожать большое количество вспомогательных инструментов. На втором этапе, поскольку сделанные вещи становятся более сложными, необходимо больше организаций, и будет введено большое количество моделей дизайна и архитектурных моделей. Этот этап будет родить большое количество рамок. На третьем этапе, с дальнейшей сложностью спроса и расширением команды, он вышел на инженерную стадию, и появились различные иерархические системы MVC, MVP, MVVM и т. Д., Визуальное развитие, автоматическое тестирование и сотрудничество команды.
Интересно, что когда мы стоим в разные моменты времени, разделение этих трех этапов также является непоследовательным. Согласно текущему пониманию автора, оно разделено на три различных этапа: рендеринг шаблона, разделение фронта и одностраничное применение, инженерная и микрофронтальная, большая фронтальная и без сервера.
Конечно, каждая небольшая стадия будет сопровождаться появлением новых рамок и новых инструментов:
Развитие веб-фронта может быть прослежена до публичного упоминания Тима Бернерса-Ли о описании HTML в 1991 году, а затем W3C выпустил стандарт HTML4 в 1999 году. Этот этап был в основном B/S, и не было так называемой концепции развития фронта. В настоящее время это были в основном статические страницы, основанные на рендеринге шаблонов. Главное - написать несколько динамических шаблонов через JSP, PHP и другие технологии, а затем разобрать шаблоны в файлы HTML через веб -сервер. Браузер отвечает только за то, что эти HTML -файлы. На этом этапе нет разделения труда между передним и задним концом, и обычно инженер заднего фонда пишет переднюю страницу.
В ближайшие несколько лет, с внедрением архитектурных стандартов, таких как технология Ajax и отдых, концепции разделения фронта и богатого клиента становятся все более признанными. Нам нужно расширить язык и основные API. На этом этапе появилась серия фронтальных вспомогательных инструментов, представленных JQuery. Основываясь на Ajax, передние и задние концы также открыли дорогу разделения, а архитектура разделения передней и задней части постепенно стала популярной. Фронт-энд отвечает за интерфейс и взаимодействие, и задняя часть отвечает за обработку бизнес-логики. Передние и задние концы взаимодействуют через интерфейс. Нам больше не нужно писать трудности HTML на каждом бэкэнд-языке. Сложность веб-страниц также перешла от бэкэнд-веб-сервера к JavaScript на стороне браузера.
С 2009 года разработка смартфонов стала популярной, а волна мобильных терминалов невозможно остановить. Концепция дизайна SPA одностраничного приложения также стала популярной. Связанная передняя модульность, компонентизация, отзывчивое развитие, гибридное развитие и другие технологии срочны. Особенно появление Node.js в 2009 году, а также сопутствующие спецификации CommonJS и механизм управления пакетами NPM породили серию превосходных рамок, таких как Angular 1 и Ionic, а также такие стандарты модуля, как AMD, CMD, UMD, требования, SeaJS и такие инструменты, как Grint и Gulp. Инженеры фронта также стали специальной областью разработки с технической системой и моделью архитектуры, независимыми от бэкэнда.
В прошлом нам нужно было только простой HTML и JS. Теперь нам пришлось использовать диспетчер пакетов для автоматической загрузки сторонних пакетов, используйте Module Manager, чтобы создать один файл сценария, используйте компилятор Translation для применения новых функций JavaScript и использования Task Runner для автоматического выполнения каждого шага конструкции.
За последние два года, с увеличением сложности веб-приложений, расширением персонала команды и спросом пользователя на дружелюбие на странице и оптимизацию производительности, нам нужна более превосходная и гибкая структура разработки, чтобы помочь нам лучше завершить разработку фронта. Этот этап появился много структур с относительно концентрированными проблемами и лучшими концепциями дизайна. Например, компонентные рамки, такие как React, Vue.js и Angular 2, позволяют нам заменить императивное программирование на операции DOM в качестве ядра с декларативным программированием, которое ускоряет развитие компонентов и повышает повторную способность компонентов и композицию. Redux, который следует за функциональным программированием, и MOBX, который заимствует концепцию адаптивного программирования, являются очень хорошими вспомогательными рамками управления государством, помогая разработчикам отделить бизнес -логику от визуализации, разделить структуру проекта более разумно, лучше реализовать принцип единой ответственности и улучшить обслуживание кода. В инструментах по строительству проектов управление операцией задач, представленное Grunt и Gulp и инструментами упаковки проекта, представленные WebPack, Rollup и JSPM, все лидируют, помогая разработчикам лучше строить передние процессы и выполнять предварительную обработку, асинхронную нагрузку, полифилирование, компрессию и другие операции в автоматизированной манере.
Зрелость цепочки инструментов также привела к инженерному спросу, благодаря бизнесу ведущего бизнеса и технологий. Фронтовая инженерия заключается в стандартизации и стандартизации процесса разработки, технологий, инструментов, опыта, опыта и т. Д. На основе конкретных характеристик бизнеса. Его цель состоит в том, чтобы позволить передовым разработке сформировать свою собственную систему, максимизировать эффективность разработки инженеров фронт-эндов и снизить затраты на координацию и коммуникацию, вызванные выбором технологий, фронт-элитным и контрольным вводом в эксплуатацию и т. Д.
Собственная логическая сложность приложения, инженерная нагрузка и улучшение сложности комбинации также приводят к определенным проблемам для выполнения фронта. Например, компонентные структуры, такие как React, будут иметь белое время экрана при инициализации страницы, что не является дружественным для SEO; Фронт-энд начал пытаться решить эту проблему с помощью серверного рендеринга и заменить шаблоны языков сервера, таких как JSP и PHP на основе изоморфных приложений, реализованных React, Vue и т. Д., Или, или вернуть их в браузер в форме полного документа HTML.
Сосредоточив внимание на полном стеке, после многих лет разработки Node.js полностью обладала способностью поддерживать приложения на уровне предприятий и имеет большое количество практик во многих внутренних и иностранных компаниях, таких как Lowe, Netflix и Alibaba. Более того, Node.js имеет сродство естественного языка, что облегчает разработчикам обязанности полного стека. С ростом концепций, таких как архитектура микросервиса и облачная собственная и без сервера, бэкэнд-интерфейсы постепенно становятся атомными, а интерфейсы микросервиса больше не сталкиваются непосредственно на странице, а передние вызовы становятся сложными. Следовательно, концепция BFF (Backend for Frontend), представленная GraphQL. Слоя BFF добавляли между микросервисом и передним, и интерфейс был агрегирован и обрезан BFF, а затем выводился на передний костюм.
Решая проблемы координации и агрегации интерфейса, BFF также оказывает первоначальное одновременное давление на бэкэнд, который также приносит много разработки и эксплуатационного давления и обслуживания инженеров фронт-энда. Без сервера может облегчить эту проблему. Мы можем использовать функции для реализации агрегации и обрезки интерфейсов; Передний запрос для BFF преобразуется в триггер для триггеров FAAS HTTP. Эта функция реализует бизнес-логику для запроса, такую как вызов нескольких микросервисов для получения данных, а затем возврат результатов обработки на фронт. Таким образом, давление работы и технического обслуживания сместилось с предыдущего сервера BFF на службы FAAS, и фронт-концу больше не нужно заботиться о сервере. Без сервера также можно применить к рендерингу на стороне сервера, разделяя каждый предыдущий маршрут на функции, а затем развертывание соответствующих функций на FAAS. Таким образом, путь, запрашиваемый пользователем, соответствует каждой отдельной функции. Таким образом, операции по эксплуатации и обслуживанию передаются на платформу FAAS. Когда фронт-энда отображает на стороне сервера, нет необходимости заботиться об работе и техническом обслуживании программы сервера. Кроме того, мини-программы, такие как WeChat и Alipay, также предоставляют платформы облачных разработок, которые соответствуют концепциям без серверов, что расширяет возможности быстрого итерации бизнес-фронта.
Для получения дополнительной информации и гидов см. Введение.
Китайская версия | Английская версия
Если вы очень опытный разработчик и хотите знать о фронтальной инженерии и архитектуре, рекомендуется прочитать фронт-энтуальную эволюцию статьи.
Если у вас нет полного понимания базового синтаксиса JavaScript, рекомендуется сначала просмотреть «современные основы синтаксиса JavaScript и инженерную практику», чтобы понять базовый синтаксис JavaScript и практические приложения.
Если вы хотите понять, что Node.js Development вы можете обратиться к Node-Notes.
Понимая теоретические знания, рекомендуется перейти в WX-FE, чтобы проверить все передовые проекты с открытым исходным кодом автора.
Все статьи автора подчиняются Creative Commons Attribution-Non-Commercial Prophybited Ensulanation 4.0 Международная лицензия. Перепечатка приветствуется, и авторские права уважаются. Вы также можете перейти на домашнюю страницу NGTE Books, чтобы просмотреть список книг по нескольким категориям, включая систему знаний, язык программирования, разработку программного обеспечения, модель и архитектуру, веб-сайт и крупные фронтальные, практику разработки на стороне сервера и инженерную архитектуру, распределенную инфраструктуру, искусственный интеллект и глубокое обучение, операции продукта и энтрипренция, а также другие:: другие:: другие::: Другие::: Другие::
