2018web开发_Web设计人员和开发人员的新鲜资源（2018年1月）

新年2018在这里。 如果我们看一下五年前Web开发的进展，那与今天的情况完全不同。 如今，有新的方法，工具，甚至全新的范式都改变了我们今天构建网站的方式-VirtualDOM就是其中之一。

DOM（文档对象模型）是一种树形模型，用于定义网站的结构 。 选择，遍历和操作DOM可能是非常昂贵的操作，并且可能会妨碍您网站的呈现性能 。

但是，在本文中，我们将不讨论VirtualDOM的工作原理，而是与其他工具一起探讨允许您立即实现VirtualDOM的库 。 让我们检查一下。

VirtualDOM的一种实现 ，使您可以构建流畅的用户界面，该界面不断更新周围的数据。 这是一个纯JavaScript 且未指定语言的库，因此可以将其与合成语言（例如CoffeeScript，TypeScript和JSX）一起使用 。 React.js的绝佳替代库； 相比之下，MaquetteJS的大小要小得多（只有3kb ）。

这是我最喜欢的VirtualDOM库之一，因为仅通过查看语法就可以很容易地找到它。 仅需2Kb即可构建快速渲染的网页或自定义HTML组件。 该库包含两个主要函数el ，它们用于创建或操作元素 ，以及进行mount以将其添加到选定的元素。 您可以使用NodeJS在浏览器和服务器端加载它。

一个模板UI库，用于构建高度交互的Web应用程序 。 ReactiveJS最初是为TheGuardian构建的，旨在跨浏览器和移动设备工作。 因此您可以依靠它的可靠性。 ReactiveJS还具有开箱即用的现代Web应用程序所需的许多功能 ，例如范围CSS，自定义组件，SVG和动画。

RitoJS使用起来很愉快，并且对于初学者来说更容易学习，因为它允许使用HTML元素和HTML属性定义自定义组件，而以前的库将强制使用纯JavaScript语法。

RiotJS与Node.js环境或浏览器兼容，并且鉴于相似之处 ，它可能是Vue.js的绝佳替代品 。

顾名思义 ， hyperHTML 在呈现和处理DOM时具有性能 。 您可以使用它来创建自定义元素和Web组件。 它与jQuery一样容易，在jQuery中可以通过从CDN加载脚本并访问hyperHTML在浏览器中使用它。 无需复杂的工具 。

听起来很酷，Mithril是功能强大JavaScript库 。 除了VirutalDOM和组件之外，Mithril还配备了Routing和XHR， 您可以使用它们来构建单页Web应用程序而无需依赖任何其他库 。 基准测试表明，它的性能优于某些流行的库，例如Vue.js，React.js和Angular。

SlimJS是一个JavaScript库，用于使用本机Web组件API构建自定义Web组件 。 由于SlimJS是围绕本机浏览器组件构建的，因此它配备了Polyfill ，该填充器在尚不支持它的浏览器中填充API 。 如果您喜欢采用本机方式，那么这是一个很好的框架。

尽管SVG具有与HTML相似的语法，但它是另一种具有自身怪异特征的野兽。 顾名思义，该库将允许您即时创建和操作SVG 。

EmotionSH是使用VirtualDOM构建网站时可能需要CSS-in-JS框架 。 这样一来，您仅需交付站点上所需的少量CSS，就可以动态更新样式，而不必担心类的命名和特殊性，因为样式仅适用于所应用的Component。

如果您在过去的几年中一直在关注网络，那么您将在几乎所有地方找到React。 这是一个介绍React的5短视频课程 。 如果您想跟上行业发展的步伐，那么这些可能就是开始的正确位置。

Elements是iOS组件的集合， 用于在Sketch中创建iOS应用原型 。 它是由Sketch制作的，并已通过iPhone X UI进行了更新。

Modaal是一个在考虑可访问性的情况下构建JavaScript库。 （我认为） “ WCAG 2.0 Level AA支持”已经过验证，它是当今最易访问的 “模态”库。 它轻巧，兼容jQuery，可用于图像，视频甚至Instagram 。 此外，这门来自Google的短期课程将帮助您开始使用Web Accessibility及其重要性。

一个NPM软件包，可让您在几分钟内启动并运行WordPress开发环境。 都使用Gulp，LiveReload，PostCSS，Babel等现代工具进行设置，因此您可以专注于开发项目而不是调整配置。

Lando还是方便快捷的工具，可以快速轻松地启动开发环境，就像我们上面刚刚提到的WordPressify 。 但是它代替了Node.js，而是利用了Docker的轻量级容器化技术，并且在您要在开发中使用的堆栈方面提供了更大的灵活性。

例如，您可以指定PHP版本，启用XDebug并安装Composer 。

WP-Docklines是图像的集合，您可以将其用作基准，以对Bitbucket，CircleCI和Gitlab等服务中的WordPress主题和插件执行持续集成和交付 。 每个图像都捆绑有开发WordPress时通常需要的工具，例如PHP Code Sniffer，PHPUnit和WP-CLI。

WP-Locker是Docker Compose的配置，可在短短几分钟内启动WordPress开发环境。 它使用Apache，MySQL和phpMyAdmin进行设置，并且由于它扩展了WP-Docklines图像，因此它还可以直接在图像上执行额外的工具。

只需键入bin/start即可，配置localhost并安装您在配置文件中配置的插件和主题。

来自Facebook的另一种开源计划Docusaurus是用于创建您的项目的文档网站的工具 。 使用React和Markdown构建，您可以轻松地编写文档，进行维护，甚至为您的站点创建博客，并将其发布到Github Pages 。

Yeoman是一个Node软件包，可让您通过选择适合您的项目的预制脚手架来快速启动项目 。 如果您使用的是Visual Studio Code，则此插件将使您可以直接在Visual Studio Code窗口中运行“ Yo”命令，从而进一步简化了启动工作流程。

一个JavaScript库， 可让您今天在所有浏览器中使用Promise ， await ， async ； 说它甚至可以在Netscape中使用。 Promise是最新JavaScript规范中的强项之一，它将使您的代码更简洁，易读且易于维护 。

Prettier是一种用于格式化代码以使其符合该语言的编码标准的工具 。 它将按照规则允许您和您的团队提高工作效率，而不用争论代码编写样式，从规则中重写代码。

翻译自: https://www.hongkiat.com/blog/designers-developers-monthly-01-2018/