模块和模块化前端开发入门

本文概述

• 拼贴模块
• 构建前端开发模块
• 模块化按钮
• 那更复杂的东西呢？
• 让客户参与
• 重复使用积木

每个人都知道并喜欢乐高积木。我小时候迷上了乐高积木, 今天我仍然爱他们。你可以通过各种方式, 从一件乐高玩具组装玩具, 一次一件。然后, 你可以从头开始, 用相同的零件制作另一个玩具。可能性是无止境。

网站上的模块与Legos非常相似。将模块视为乐高积木, 可以使你构建网站。当你以正确的方式将它们连接在一起时, 它们就会形成网页。要构建像Legos这样的网站, 你必须将网站视为独立模块的集合。本文将帮助你完成前端开发和设计。

拼贴模块

进入项目的设计阶段时, 我倾向于从组装设计灵感拼贴和模块拼贴开始。这个过程与Dan Mall的过程非常相似, 后者称这些拼贴设计为后期制作时代的可交付成果。灵感拼贴是我呈现给客户的屏幕截图的集合, 目的只是为了大致了解我们要前进的视觉方向。它们只是我和客户喜欢的网站的屏幕截图。

收到确认信息后, 就样式而言, 我们位于同一页面上, 我可以跳入图形编辑器(我更喜欢Sketch)并创建模块拼贴。这些拼贴是最常用的模块的集合-按钮, 表单, 标题, 段落, 列表, 图片等。模块拼贴使我可以快速创建网站外观的片段。

这是我最近的模块拼贴的一部分, 这是我在项目开始时在Sketch中设计的一个按钮示例：

也许你想知道静态合成器何时向客户展示完美的像素设计。他们没有-我几乎完全跳过了这些过程。跳过该过程的这一部分, 使我可以在项目和代码原型的早期阶段就开始研究代码(很快便会介绍), 或者换句话说, 在浏览器中进行设计。以下是在浏览器中进行设计的一些优点：

• 浏览器是网站的自然环境, 坚持图形编辑器中的想法可能适得其反。在浏览器中测试并做出设计决策是很自然的。你之前曾听过, 你会再次听到-它与外观无关, 而与它的工作原理有关。

浏览器是网站的自然环境, 坚持图形编辑器中的想法可能适得其反。

鸣叫

• 静态模拟与你将其翻译成代码后最终在浏览器中获得的内容之间始终会存在设计不一致。为避免这些不一致, 请跳入代码编辑器和浏览器以解决实际的设计问题。

• 静态补偿可能无法传达正确的信息。一旦集成了交互性, 外观和感觉就会大不相同-例如悬停状态, 过渡和动画。

• 我可以花很多时间通过早点编写代码来节省大量时间, 而不必花很多时间为几种分辨率设计几个静态模型。通过调整CSS, 我可以在智能手机, 平板电脑等各种设备上快速向客户端演示更改和响应方面。

因此, 节省时间并打开代码编辑器和浏览器, 以尽早开始创建UX。根据我的经验, 大多数客户会要求在进行编码之前先准备一个或两个页面的完整模型, 这完全可以。对客户来说, 对未来的设计有很好的了解很重要。我通常使用InVision, 这是跟踪早期模型, 更改, 注释等的好工具。但是, 对于客户而言, 了解Sketch和InVision不会使他们走得太远非常重要。

构建前端开发模块

一旦客户对我设计的模块拼贴和模型感到满意, 我就可以开始编码并定义这些元素的真实外观。

模块化设计与模块化开发在迭代过程中交织在一起。我对模块进行了编码, 然后在浏览器中进行尝试以查看其工作原理, 然后根据需要进行迭代。同样, 此过程非常类似于构建乐高积木-你基本上同时设计和开发并尝试各种变体, 直到对它感到满意为止。

我经常通过构建简单的东西(例如按钮)来开始开发模块。想象一下, 你要自己构建一个, 并且需要编写一个橙色按钮, 通常用于联系表单。这是你可能会想到的：

.submit-button { 
	background: orange;
	color: #fff;
	padding: 10px 20px;
	font-size: 16px;
}

<a href="#" class="submit-button">A link</a>

很简单, 对不对？你将.submit-button类应用于HTML, 就可以解决当前的问题。现在, 当你需要创建一个新按钮(就像那个按钮一样, 但背景颜色为蓝色)时会发生什么？你可能会复制该确切的班级, 然后更改班级名称和背景色。快速又脏。现在, 假设你需要使用相同的按钮, 但背景为橙色。你可以看到它的发展方向-你可能最终会重复很多CSS。在一个超小型项目上, 这可能不是一个真正的问题, 但是在较大的项目上, 它可能会成为现实。在不知不觉中, 你的CSS变得肿且难以维护。

如果你曾经开发过大中型项目, 那么毫无疑问你会经历很多头痛。这些可能是由于以下任何原因引起的：

• 混乱, 不一致, 难以扫描和理解的代码。
• 膨胀的代码和XXL CSS文件有很多重复项。
• 难以维护的代码。
• 缺乏结构和皮肤的分离。

别担心, 你并不孤单。我敢打赌, 所有前端开发人员都会时不时地遇到那些痛苦的问题, 而且可能还会经历更多。可以肯定地说, 过去我有很多项目都遇到过那些典型的问题。

避免或最小化这些问题的一种方法是以模块化的方式进行构建。

模块化按钮

如何以模块化方式编码该按钮？模块化方法是编写可重用的代码。记住那些乐高积木, 它们可以再次使用和重用。

.button {
	padding: 10px 20px;
	font-size: 16px;
}

.button-orange {
	background: orange;
	color: #fff;
}

<a href="#" class="button button-orange">A link</a>

我们要做的是巧妙地分离样式。 .button类包含项目中每个按钮使用的样式, 因此你无需重复。 .button-orange类仅使用与橙色按钮相关的样式。你将对所有其他按钮执行相同的操作, 并定义其背景和文本颜色。

你的按钮模块可能最终由几个独立的按钮组成, 可以在需要时随时使用。

那更复杂的东西呢？

你可能需要的每个其他组件都遵循相同的原则。目的是创建独立于其他模块的独立元素模块。当这些模块组合在一起时, 将形成模板, 你可以在其中简单地根据需要重复使用这些模块, 并努力完成设计。

为了进一步阅读模块化前端开发, 我强烈推荐SMACSS, 这是我倾向于在所有大小项目中使用的体系结构。

请记住, 模块化过程全都涉及构建, 测试和迭代。首先在编辑器中生成一个模块, 然后在浏览器中对其进行测试, 然后根据需要进行迭代。必要时重复该循环。

让客户参与

不要忘记客户的需求-他们希望保持联系, 并确认他们已经物有所值。此开发过程的美妙之处在于, 客户可以成为你团队的积极成员。你可以安全地向他们展示模块, 并且他们可以随时忽略开发过程并投入使用, 以使产品更好。他们不必等到完成静态比赛或达到里程碑就可以看到真正的进步。如果你花一些时间向客户解释模块的工作方式, 他们将对设计过程以及构建它们所花费的时间有更好的理解和评价。

我通常向客户展示模块的方式很像Bootstrap一样-设置隔离的模块及其代码是使所有设计人员, 开发人员和客户都参与流程的好方法。

将已构建的模块用作页面的构建块。对于索引页面, 你可以将导航模块放在顶部, 将英雄模块放在下面, 将某些内容模块放在下面, 然后将页脚放在底部。在不知不觉中, 你已经有了HTML原型的页面。但是究竟是什么原型？我一直喜欢莉亚·布利(Leah Buley)的一本很棒的书, 即《用户体验团队之一》中对原型的定义：

设计一旦实现, 应如何运作和运作的功能或半功能示例。

通过构建原型, 这就是你在项目早期阶段将获得的—半功能的网站。在静态模型和InVision不足的地方, HTML原型出类拔萃。该原型可为你的客户提供完美的响应式交付。一旦客户对原型的外观和感觉满意, 你需要做的就是对其进行抛光, 直到它按需要的方式工作为止。构建, 测试, 迭代。

重复使用积木

模块和原型将使你能够为当前项目重用代码, 但也可以为将来的项目重用代码。调整上一个项目中的模块可以节省大量时间, 每个项目中所需的模块通常很相似。我有一个经常重复使用的模块大库：选项卡, 导航菜单, 按钮, 面包屑, 表单, 表格, 分页, 列表等。尽管这些模块的代码在所有项目中都不完全相同, 但其中很多可以重复使用, 为我节省了很多开发时间。我对你的建议是也为自己创建可重用的模块。查看BASSCSS, Pure和Refill以获得灵感。

如果切换到模块化设计和开发需要时间, 请不要气disc。自然, 如果你对模块化原理不熟悉, 则它们将需要对设计和开发过程进行调整, 但是更改可能证明是值得的。

我在本文中介绍的模块化方法和技术只是在摸索。不过, 我衷心希望本文对你有所帮助, 并让你对模块化设计和开发感兴趣。