现代网络技术 pdf_介绍现代网络

现代网络技术 pdf

什么是现代网络？ (What is Modern Web?)

We are excited to finally introduce our brand new project: Modern Web.

我们很高兴最终介绍我们的全新项目： Modern Web 。

A few years ago we started the Open Web Components project. Our goal was to help people develop web components, and we created guides and tools to help people do this. While working on this project, we realized that a lot of the things we were making weren’t necessarily specific to web components.

几年前，我们启动了Open Web Components项目。 我们的目标是帮助人们开发Web组件，我们创建了指南和工具来帮助人们做到这一点。 在从事该项目时，我们意识到我们所做的许多事情不一定特定于Web组件。

To maintain focus within the Open Web Components project and to share our work with the larger developer community, we decided to split up the project and create Modern Web. Don’t worry, Open Web Components isn’t going away! It’ll gain a renewed focus for web component–specific topics, while in Modern Web, we’ll work on generic tools and guides for web development.

为了保持对Open Web Components项目的关注并与更大的开发人员社区共享我们的工作，我们决定拆分该项目并创建Modern Web。 不用担心，Open Web Components不会消失！ 它将重新聚焦于特定于Web组件的主题，而在Modern Web中，我们将致力于Web开发的通用工具和指南。

现代网络的目标 (The Goal for Modern Web)

“Our goal is to provide developers with the guides and tools they need to build for the modern web. We aim to work closely with the browser and avoid complex abstractions.”

“我们的目标是为开发人员提供构建现代Web所需的指南和工具。 我们旨在与浏览器紧密合作，避免复杂的抽象。”

Modern browsers are a powerful platform for building websites and applications. We try to work with what’s available in the browser first before reaching for custom solutions.

现代浏览器是用于构建网站和应用程序的强大平台。 在寻求自定义解决方案之前，我们会先尝试使用浏览器中的可用功能。

When you’re working with the browser rather than against it, code, skills, and knowledge remain relevant for a longer time. Development becomes faster, and debugging is easier because there are fewer layers of abstractions involved.

当你的浏览器，而不是反对它的工作，代码，技能和知识仍然有用更长的时间。 开发变得更快，调试也更容易，因为涉及的抽象层更少。

At the same time, we’re aware of the fact that not all problems can be solved elegantly by the browser today. We support developers making informed decisions about introducing tools and customizations to their projects in such a way that developers can upgrade later as browser support improves.

同时，我们意识到，当今的浏览器并不能完美解决所有问题。 我们支持开发人员就将工具和自定义项引入其项目做出明智的决定，以便开发人员可以在以后随着浏览器支持的改善而升级。

我们的未来计划 (Our Plan for the Future)

This announcement marks the official release of Modern Web. Our website is live at modern-web.dev, and our packages are available on npm under the @web namespace. Our code is open source and publicly available on GitHub.

该公告标志着Modern Web的正式发布。 我们的网站位于modern-web.dev上 ，我们的软件包位于npm @web命名空间下。 我们的代码是开源的，可以在GitHub上公开获得。

For updates, you can follow us on Twitter, and if you like what you see, please consider sponsoring the project on Open Collective.

有关更新，您可以在Twitter上关注我们，如果您喜欢所看到的内容，请考虑在Open Collective上赞助该项目。

We’ve been working on a lot of different projects in the last couple of years. In this article, we’ll walk you through some of our projects and how we’re planning to fit them into the Modern Web project.

在过去的几年中，我们一直在从事许多不同的项目。 在本文中，我们将引导您完成一些项目，以及如何计划将它们适合Modern Web项目。

导游 (Guides)

On our all-new website, we have a dedicated Guides section. It’s meant to help you become confident in building for the modern web. It features step-by-step guides to work with our tools, and we document common issues developers run into when doing buildless development.

在我们全新的网站上 ，我们有专门的指南部分。 它旨在帮助您对构建现代Web充满信心。 它提供了与我们的工具一起使用的逐步指南，并且记录了开发人员在进行无构建开发时遇到的常见问题。

This section is a work in progress. We’re looking to add more over time and would love your feedback and improvements. Feel free to hit “Edit this page on GitHub!”, open issues, or join the discussions.

本部分正在进行中。 我们希望随着时间的推移增加更多，希望您能提供反馈和改进。 随时点击“在GitHub上编辑此页面！”， 打开问题或加入讨论 。

网络测试运行器 (Web Test Runner)

We’re very excited to announce Web Test Runner, one of the major projects we’ve been working on for the past few months.

我们非常高兴地宣布Web Test Runner ，它是过去几个月来我们一直在致力于的主要项目之一。

There are already a lot of testing solutions out there today. Unfortunately, all of them either run tests in Node.js and mock browser APIs using something like Jsdom, or they don’t support native ES modules out of the box.

今天已经有很多测试解决方案。 不幸的是，它们全部都在Node.js中运行测试，并使用诸如Jsdom之类的模拟浏览器API进行测试，或者它们都不支持现成的本机ES模块。

We think that making browser code compatible for testing in Node is unnecessarily complex. Running tests in real browsers gives greater confidence in (cross-browser) compatibility and makes writing and debugging tests more approachable.

我们认为使浏览器代码兼容于Node中的测试不必要地复杂。 在实际的浏览器中运行测试可以增强对(跨浏览器)兼容性的信心，并使编写和调试测试更容易实现。

That’s why we created Web Test Runner.

这就是为什么我们创建了Web Test Runner。

强调 (Highlights)

• Headless testing using Puppeteer, Playwright, or Selenium

  使用Puppeteer ， Playwright或Selenium进行无头测试

• Reports logs, 404s, and errors from the browser
  报告浏览器的日志，404和错误
• Debug opens a real browser window with dev tools
  调试使用开发工具打开一个真实的浏览器窗口

• Mock ES modules via Import Maps

  通过导入地图模拟ES模块

• Exposes browser properties like viewport size and dark mode
  公开浏览器属性，例如视口大小和暗模式
• Runs tests in parallel and isolation
  并行和隔离地运行测试
• Interactive watch mode
  互动观看模式
• Fast development by rerunning only changed tests
  通过仅运行已更改的测试来快速开发

• Powered by the esbuild and Rollup plugins

  由esbuild和Rollup插件提供支持

入门 (Getting started)

There is a beta version of the test runner available today on npm as @web/test-runner. It’s almost feature-complete. We’ll have a v1 release soon!

今天，npm上有一个测试运行程序的beta版本， @web/test-runner 。 它几乎功能齐全。 我们即将发布v1！

If you want to get started now, take a look at our Web Test Runner Getting Started guide.

如果要立即开始，请查看我们的《 Web Test Runner 入门指南》 。

Web开发服务器 (Web Dev Server)

es-dev-server is the most popular package at Open Web Components, but it isn’t specific to web components alone. That’s why we’re working on its spiritual successor in the Modern Web project. We’ll call it Web Dev Server, and it’ll be published as @web/dev-server.

es-dev-server是Open Web Components中最受欢迎的软件包，但它并不仅仅针对Web组件。 这就是为什么我们在Modern Web项目中致力于它的精神继任者。 我们将其称为Web Dev Server，并将其发布为@web/dev-server 。

If you’re doing a buildless development, you can use any web server for development. Our dev server helps out by providing developer productivity features and making your code compatible with older browsers.

如果您要进行无构建开发，则可以使用任何Web服务器进行开发。 我们的开发服务器通过提供开发人员生产力功能并使您的代码与旧版浏览器兼容来提供帮助。

强调 (Highlights)

• Acts like a real web server. Without any flags, it serves code untransformed to the browser.
  就像真正的Web服务器一样。 没有任何标志，它提供未转换到浏览器的代码。
• Efficient caching of unchanged files between reloads
  重新加载之间有效缓存未更改的文件

• Resolve bare-module imports using --node-resolve

  使用--node-resolve解决裸模块导入

• Autoreload on file changes with --watch

  自动重载与文件更改--watch

• Compatibility with older browsers using --esbuild-target

  与使用--esbuild-target旧版浏览器兼容

• Extensive plugin system

  广泛的插件系统

• Integration with esbuild for fast transformation of JS, TS, and JSX

  与esbuild集成，可快速转换JS，TS和JSX

• Reuse most Rollup plugins in the dev server

  重用开发服务器中的大多数汇总插件

• Plugin for polyfilling import maps during development

  在开发过程中用于填充进口地图的插件

Our Web Dev Server isn’t quite finished yet, but we’ve already built the basic parts to power our Web Test Runner. This means that many of the listed features and plugins apply to our test runner as well.

我们的Web Dev Server 尚未完成，但是我们已经构建了一些基本组件来为我们的Web Test Runner提供支持。 这意味着列出的许多功能和插件也适用于我们的测试运行程序。

We’re working hard on finalizing the open tasks on Web Dev Server, so stay tuned for further updates.

我们正在努力完成Web Dev Server上的未完成任务，敬请期待进一步的更新。

生产建筑 (Building for Production)

While we try to avoid complex builds during development, they’re still a requirement for production optimizations. Here, too, things can get pretty complex. Through plugins and guides, we’ll make it easier to integrate production builds with buildless development workflows.

尽管我们在开发过程中尽量避免复杂的构建，但它们仍然是生产优化的要求。 在这里，事情也会变得非常复杂。 通过插件和指南，我们将使生产构建与无构建开发工作流程的集成变得更加容易。

A good example here is @open-wc/rollup-plugin-html, which we’ll move into the @web namespace. This plugin enables running Rollup on an existing HTML page. Rollup will bundle and optimize any module scripts found in the HTML. It works with single pages but also with multiple pages, code splitting, and sharing common code between pages.

一个很好的例子是@ open-wc / rollup-plugin-html ，我们将其移到@web命名空间中。 此插件可在现有HTML页面上运行汇总。 汇总将捆绑和优化在HTML中找到的所有模块脚本。 它适用于单个页面，但也适用于多个页面，代码拆分以及页面之间共享通用代码。

We plan to expand on this plugin further, adding support for optimizing assets such as images and CSS.

我们计划进一步扩展此插件，增加对优化资产(如图像和CSS)的支持。

渐进式Web应用 (Progressive Web Apps)

When we talk about modern web apps, we also talk about progressive web apps (PWAs). PWAs are a great way to provide an engaging and user-friendly experience for your user, by allowing your app to work offline and being able to install your web app on the user’s home screen, among many other benefits.

当我们谈论现代Web应用程序时，我们也讨论了渐进式Web应用程序 (PWA)。 PWA是允许用户离线使用应用程序并能够在用户主屏幕上安装Web应用程序的一种很好的方式，为用户提供引人入胜且用户友好的体验，还有许多其他好处。

Unfortunately, service workers are close to rocket science, and implementing PWA features isn’t always as straightforward as it could be. That’s why we’ll provide technical guides and tools to make your life as a developer easier.

不幸的是，服务人员接近火箭科学，并且实施PWA功能并不总是那么简单。 因此，我们将提供技术指南和工具，使您作为开发人员的生活更加轻松。

Not only do we ship rollup-plugin-workbox to help you generate your service worker at build time, but in the future, we’ll also have a set of zero-dependency PWA helpers as web components and Vanilla JavaScript functions — as well as Codelabs to help you get started building your modern progressive web apps.

我们不仅提供汇总工具插件来帮助您在构建时生成服务工作者，而且在将来，我们还将提供一组零依赖的PWA帮助器，它们是Web组件和Vanilla JavaScript函数-以及Codelabs可帮助您开始构建现代的渐进式Web应用程序。

文档(火箭) (Documentation (Rocket))

In the past few years, we’ve used different frameworks and tools to build our websites. Recently we’ve become big fans of 11ty. It’s simple to use, works with markdown, and generates just plain HTML. There’s no runtime JavaScript involved to display page content, making it super fast.

在过去的几年中，我们使用了不同的框架和工具来构建我们的网站。 最近，我们已经成为11ty的忠实粉丝。 它简单易用，可与markdown一起使用，并且仅生成纯HTML。 无需运行时JavaScript即可显示页面内容，从而使其超快。

To add interactivity to our page, we started using web components and applied Rollup with our plugins for HTML and workbox.

为了增加页面的交互性，我们开始使用Web组件，并将Rollup与HTML和workbox的插件一起应用。

This way, our JavaScript is optimized, and common code is shared between pages. workbox adds a service worker, making our website available offline and precaches pages resulting in super fast navigation.

这样，我们JavaScript得到了优化，并且公共代码在页面之间共享。 Workbox增加了一名服务人员，使我们的网站可以脱机使用，并预缓存了页面，从而实现了超快速的导航。

For a great content-authoring experience, we integrated 11ty with our dev server. This adds features like resolving bare imports and reloading the browser when files change.

为了获得出色的内容创作体验，我们将11ty与我们的开发服务器集成在一起。 这增加了一些功能，例如解决裸导入并在文件更改时重新加载浏览器。

By combining existing tools in this way, we think we’ve made something very powerful that’ll be useful for other people as well. That’s why we started a child project in the Modern Web family, which we codenamed Rocket.

通过以这种方式组合现有工具，我们认为我们已经做出了非常强大的事情，对其他人也将有用。 这就是为什么我们在Modern Web系列中启动了一个子项目，我们将其代号为Rocket。

It’s still in its early stages, but we’re already using a prototype for our own website. We’re still missing some features, but we’ll continue to evolve it and an announcement will follow as soon as it’s finished. So keep an eye out for it!

它仍处于初期阶段，但是我们已经在为自己的网站使用原型。 我们仍然缺少一些功能，但是我们将继续对其进行改进，并在完成后立即发布公告。 因此，请留意！

现代网络家庭 (Modern Web Family)

Welp, that was a lot of information for a first announcement post — we realize. But many of these projects have been years in the making and are finally finding their right home. As we mentioned before, Modern Web is all about making the life of developers easier, reducing the complexity of tools, and staying close to the browser.

抱歉，我们了解到很多关于首次发布公告的信息。 但是，其中许多项目已经进行了多年，终于找到了合适的住所。 如前所述，Modern Web旨在使开发人员的生活更轻松，减少工具的复杂性并与浏览器保持紧密联系。

While we’ve now spread out over multiple repositories, like Open Web Components, Modern Web, and Rocket, we’d like to assure you that all of these projects fall under the same Modern Web family, and we aim to help make your life as developers easier.

尽管我们现在已经分散在多个存储库中，例如Open Web Components，Modern Web和Rocket，但我们想向您保证，所有这些项目都属于同一个Modern Web系列，并且我们致力于帮助您度过一生作为开发人员更容易。

谢谢阅读 (Thanks for Reading)

We’re incredibly proud of what we’ve achieved so far and the direction we’re heading, and we invite you to join us on our path forward.

我们为迄今为止所取得的成就和前进方向感到无比自豪，我们邀请您加入我们的前进道路。

There’s much, much more to come, so follow us on Twitter, and if you like what you see, please consider sponsoring the project on Open Collective.

还有更多的事情要做，因此请在Twitter上关注我们，如果您喜欢所看到的内容，请考虑在Open Collective上赞助该项目。

Written with ♥️ by the Modern Web core team.

由Modern Web核心团队与♥️撰写。

翻译自: https://medium.com/better-programming/introducing-modern-web-dfafe83beeeb

现代网络技术 pdf