开发可扩展(和可持续)Shopify主题的最佳实践

这种情况发生在我们大多数人身上:截止日期临近，压力上升，有时我们只是为了让客户满意而匆忙完成工作。虽然这可能会为您的客户的新电子商务业务带来一个漂亮的自定义主题，但现在剩下的部分是:没有注释来继续处理自定义代码，有太多嵌套的代码片段，以及许多大而复杂的代码行液体。

别误会，没什么从技术上讲这种工作方式是错误的——每个人都有自己的开发风格(我们中的一些人可能天生比其他人更混乱)。但是，请始终记住，在构建主题时，应该以一种更容易与您自己，其他开发人员和(特别是)客户交互的方式创建主题。

话虽如此，这里有一些经验教训，从Shopify主题老兵-迪斯科乐队的Gavin Ballard和Shopify的卡森·谢尔德。使用他们的建议来增强你自己的设计过程，并在你的主题开发机制中实施最佳实践。我们还将介绍可以用来增强整体过程的技术，以及使用Liquid, JavaScript或CSS编码的最佳实践。

改进设计过程的最佳实践

1.为你的设计过程添加结构

在设计过程中添加基本结构有多种好处:可伸缩性、可用性和整体生产力。本质上，结构是允许您以适应增长和变化的一致方式进行开发的任何东西。

创建结构可以像概述创建GitHub问题的流程一样简单，到开发完整的工作流程——不断迭代以尽可能高效。

以下是一些如何在设计过程中轻松创建结构的例子:

• 建立良好的GitHub工作流程
• 为你的设计过程创建阶段
• 收集工具、技巧和技巧来节省工作流程中的时间

通过创建此基础，您可以使用接下来的步骤来确保您始终构建可扩展和可持续的Shopify主题。

2.探索设计过程

在开始构建主题之前，你应该仔细看看它的所有要求:

• 是否有相同的(经过验证的)元素被跨主题使用，您可以重用以缩短特定领域的开发时间?
• 是否存在可以从模式库中使用的共享模式?
• 创建每个元素需要多长时间?
• 这些要素将如何实施?
• 他们有反应吗?表演起初?a11y访问()？

在你的编码过程中始终如一地实现这种敏锐的眼光的一个简单方法是将主题的每个元素分离成一个模块——任何你可以构建的代码片段，除了任何其他代码片段。您可以将这些模块添加到电子表格中，就像Carson Shold所展示的那样Shopify的Unite大会。

上半年:

第二部分:

下面是对表格中每一栏的简要解释:

模块/模板-主题的各种元素，“细节”是更具体的细节和模块的目标。

页面-概述模块/模板将生活在电子商务网站，一旦完成。

1 3 5 8-每个数字代表完成特定模块所需的时间和精力。一个是速胜;3需要更多的时间，但仍然相对简单;5开始花费更多的时间，是一个更复杂的项目;8是不确定的(直到获得更多信息才能做出决定)。

3.原型，原型，原型

在深入到您的Shopify主题的实际开发之前，重要的是原型。为什么?因为你希望能够在设计过程的早期解决问题并创造解决方案。这样，当你接近完成主题时，你就不会遇到任何开发障碍。

原型可以节省时间，资源，并最终创建一个反馈循环，只能使您的新Shopify主题受益。

以下是一些你可以使用的原型制作工具:

草图(99美元)——Sketch是一款mac专用程序，可以让你快速创建线框图和原型。有多种开源资源可用于素描。

InVision(价格取决于您的计划)- InVision不仅用于原型设计，还作为项目管理套件和协作工具。非常适合自由职业者和设计机构。

奇迹(价格取决于您的计划)- Marvel是基于浏览器的，并且可以免费入门。OB欧宝娱乐APP轻松创建原型模型并与同事分享。然而，只有付费版本的计划允许合作。

如果您想了解更多关于原型的信息，请访问下面的Shopify合作伙伴资源，了解更多关于原型工具的信息，以及哪一个最适合您的下一个Shopify主题项目。

你可能还喜欢:测试你的网页和手机设计的5个最佳原型工具

4.构建每个模块

现在可以开始编码了。OB欧宝娱乐APP在构建每个模块时，应确保最终产品:

• 适用于所有设备和浏览器
• 是完全响应的
• 是否有格式良好的代码审查拉取请求
• 方便(友好)
• 是否通过了完整性检查，确保代码是内聚的和健全的
• 生产质量如何?

另一个关键的考虑因素是性能。您的代码是否紧密地协同工作以形成性能优先的主题?是否存在加载缓慢的脚本，从而影响用户体验?

以下是你可以用来测试这些元素的三个网站:

• Webpagetest.org
• 谷歌PageFeed洞察
• YSlow

在发布之前，你确定了主题的一些改进地方了吗?这里有一些快速提高主题性能的方法:

• 将顶部加载的JavaScript从页眉移动到正文的底部
• 使用ImageOptim，ImageAlpha,或Kraken.io在您的主题开发过程中自动图像优化
• 使用JavaScript库在正确的设备上显示正确的图像
• 通过使用src-set来利用现代浏览器

你可能还喜欢:如何优化主题的性能

5.进行设计审查和bug搜索

一旦你完成了你的构建，进行设计审查。这种审查的一部分可以包括允许一个特殊的用户子集(他们不是开发的一部分)访问主题，目的是发现错误和故障。

别担心。你实际上并不需要很多用户来进行成功的bug搜索/设计审查。根据尼尔森诺曼集团的研究，你只需要5个用户就能识别90%的问题与你的产品或主题。

你甚至可以通过付费来激励这些用户深入挖掘你的主题并发现这些错误。例如，Shopify举办了漏洞搜索活动，并向每个报告错误的用户支付10美元。然而，如果你打算采用这种方法，请确保你的主题尽可能完美，以尽量减少成本。

如果你没有这样做，那么bug搜索将变得非常昂贵，非常快速，并且最终将失去作为可靠反馈来源的价值。

你可能还喜欢:来自纳斯达克的Aaron Irizarry的12条设计评论规则

保持Liquid、JavaScript和CSS整洁的最佳实践

既然我们已经完成了总体设计过程的一些最佳实践，现在是时候进入本质:保持代码简单和干净的技巧和技巧。

1.有很多大而复杂的液体?创建一个新的代码片段

您可能已经在您的主题工作流中包含了片段，但是对于那些还没有的人，这里有一个复习。与服务器端语言中常见的“partials”和“includes”类似，snippet是包含可重用代码的.liquid文件——通常出现在主题的多个页面上，但不会贯穿整个主题本身。

例如，如果您要向每个产品类型页面添加“相关产品”，则应该创建一个related-products.liquid片段。这样，您就可以通过添加{%包括“相关产品”%}在适用的情况下-而不是复杂的液体串。

Shopify主题化的片段功能的其他常见用途包括:

• 社交分享按钮
• 分页
• 评论
• 限量版产品

你可能还喜欢:在您的Shopify主题中使用片段的提示

2.嵌套代码段太多可能会造成问题

Gavin建议将嵌套代码段最大限制为两层，否则就会变得混乱。就是这么简单。

3.添加注释以记住代码的详细信息

您是否为客户创建了一个有趣的新功能，并且花费了几个小时的时间来开发?您可能希望在代码上方留下注释，以记住其结构和目的的所有细节。

使用{%注释%}无论你想在哪里添加更多的解释——这将有助于你未来的自己，以及其他为你的主题工作的开发人员，更有凝聚力和一致性。

额外的好处是:如果你需要做任何改变，你会节省很多时间。

4.许多Shopify CSS最佳实践与常规CSS相同

然而，Shopify的独特之处在于sas预处理器的支持，这意味着你可以使用像@extend .message;。

您还可以使用Liquid将主题设置中的值输出到主题的CSS文件中——尽管支持SAS，但它不能进行导入。

你可能还喜欢:在Liquid中创建有用的CSS钩子

5.提取尽可能多的JavaScript并创建新的JavaScript文件

通过为您的Shopify主题上运行的每个脚本创建新的JavaScript文件，利用主题的资产目录。这不仅允许您从整个主题的目录中提取资源，还允许浏览器缓存JavaScript，而不是每次有人访问您客户的电子商务网站的页面时重新加载它。

根据Gavin的说法，另一个JavaScript最佳实践是防御性地编写JavaScript——创建不依赖于彼此的模块JavaScript项，但它们可以相互紧密地协同工作。这也将有助于提高性能，并减少您的代码被第三方产品的实现破坏的可能性。

6.删除的东西

如果您的主题有加载缓慢的组件，或者需要大量带宽的组件，请删除它们。这不仅可以提高主题的性能，还可以提高客户电子商务网站的用户体验。欧宝体育百家乐

需要一个快速的起点吗?OB欧宝娱乐APP丢掉JavaScript旋转木马。旋转木马是典型的用户体验噩梦-错过幻灯片的用户通常很难导航回去。JavaScript carousel占用大量带宽，加载速度也很慢，所以选择用图像代替carousel是一个更注重性能、更友好的决定。

总之

你的设计过程可能与你的同事和竞争对手不同，这是完全正常的。然而，重要的是建立一个实现最佳实践的工作流程，这样你就可以高效地工作，有效地创建可扩展和可持续的Shopify主题。

如果您想了解更多关于构建Shopify主题的信息，请参加Gavin Ballard的SkillShare课程:高级Shopify主题开发。在这里，Gavin分享了我们在本文中分享的最佳实践，以及建立结构良好的主题工作流的其他提示和技巧。

您在开发过程中使用了哪些最佳实践?请在下面的评论中告诉我们!