西西木科技-专业的shopify liquid开发机构-前端JS丨react后端丨API接口丨shopify plus丨外贸独立站
目标读者：
对 Shopify 感兴趣或正在解锁 Shopify开发技能的产品、架构师、程序员以及朋友
低代码播放器：
2014年，知名研究机构Forrester正式提出低代码开发的概念，并致力于该平台的研究。 国外有Salesforce（成立于1999年）、OutSystems（成立于2001年）、Mendix（成立于2005年）、Kony（成立于2007年）、Scratch（成立于2008年MIT），国内有iVX（成立于2008年） 、J2Paas（成立于2017年）、Start（成立于2006年）、亿达（成立于2015年）、YonBuilder（成立于2020年）其中，OutSystems于2018年宣布融资3.6亿美元外贸建站，被视为中低端独角兽。 – 代码轨道。
最近shopify开发，我们的开发团队一直在解锁shopify开发技能。 我们将shopify这样的电商平台理解为一个生态系统，因此我们计划更全面、更深入地挖掘这个快速崛起的shopify。
上一篇文章《Shopify产品概述》从更大的角度粗略介绍了Shopify的产品技术架构。 本文将从开发的角度来谈谈它的低代码设计。
第 1 部分：Shopify Git Flow在线代码编辑器
大多数时候我们都是在做app或者web开发，所以当我们第一次接触shopify这个陌生的东西时，我们并不是从常规的代码项目角度出发。
我们使用shopify admin提供的代码编辑器。 由于我们一开始应对业务需求比较被动，所以没有阅读其强大的API文档。
使用在线代码编辑器来响应业务需求可谓是刀耕火种，但这种艰难时期只持续了很短的时间。
我们见过很多在线代码编辑器。 除非是专业的在线代码编辑器业务，比如codepen、codesandbox，否则一般产品附带的在线代码编辑器就像是临时借用的，并没有花太多心思去优化编程体验。 所以体验是相当不好的。
这体现在：
版本管理困难，回滚困难，代码没有全局视图（代码目录结构）shopify 主题开发者，开发效率极低……
Online Code Editor的工作机制基本是这样的：
shopify在线代码编辑器 flowLocal Code Editor v1.0
显然，在线代码编辑器的体验并不像上面那样好。 久而久之，程序员肯定会停止工作。
在这种效率低下的情况下，自然希望将代码拉到本地开发。 查阅shopify开发文档后发现shopify提供了命令行工具themeKit。 其中，theme watch命令用于监控本地代码变化，并自动将变化的代码上传到代码服务器。 我这里就不详细说了。
同时，为了解决之前代码版本管理和回滚的困难，我们将从shopify商店拉取的主题代码托管到gitlab上。
我们放弃了在线代码编辑器并使用本地代码编辑器。 但是我们生成了双码，代码同步操作有点奇怪。
虽然gitlab代码托管解决了版本管理和回滚的问题，但随着时间的推移和业务需求类型的增加，我们很快就看到本地代码编辑器模式存在一些问题：
本地代码（即Local Code Editor）更新可以通过操作同学轻松覆盖后台主题编辑器的配置。 当多个开发修改同一文件时，Shopify 不提供分支冲突解决方案。 当多人协作时，代码通常很容易互相覆盖。
这两个问题源于我们对shopify整个前后端系统的了解不够。 我们忽略了管理端主题编辑器的修改输入。
其中Theme Editor是shopify低代码设计理念中非常重要的设计实现。 本文将在第 2 部分讨论它。
本地代码编辑器 v2.0
事实上shopify 主题开发者；Shopify Git Flow 和低代码产品设计，我们基于主题手表所做的改进并没有解决多人协作时的冲突问题。
好在shopify的设计足够强大，并且开放了编译脚本。 因此，之前我们使用theme watch自动编译这个方法的时候，我们又放弃了，转而通过调用编译脚本的方式进行编译。
这样就会出现下图： 代码提交到gitlab后，会自动触发shopify主题编译程序，自动完成在线更新。
要实现这个改进，这里有一个关键操作，即：
将线上主题复制2份，最后分别命名为xxx-development、xxx-staging、xxx-product，形成三个同源主题。
master分支直接对应2个主题——xxx-staging、xxx-Production。
.gitlab-ci.yml文件的具体操作流程和配置可以参考这里。 本文将不再赘述。
推送到master的代码可以通过预览地址进行测试。
至此，你会感觉一个完整的shopify git流程已经搭建起来了。
还没有！ 因为我们每次提交代码都需要等待ci构建完成之后才能预览，即调试不是实时的！
本地代码编辑器 v2.1
因此，我们需要一个本地代码调试解决方案。
幸运的是，Shopify 在最近的 Shopify Unite 2021 大会上发布了许多重大更新，其中一个很棒的工具就是 Shopify CLI。 话不多说，我们安装好工具后shopify 主题开发者，尝试了以下操作：
// 以 your_store.myshopify.com 开发为例
// 拉取托管仓库代码
git clone git@gitlab.com:your_store_gitlab_url/your_store.com.git
// 执行一次退出，减少账户干扰
shopify logout
// 执行登录操作
shopify login --store your_store.myshopify.com
// => Authenticated successfully. You may now close this page.
// 这一命令会将本地代码同步到shopify 建一个临时调试中的主题
shopify theme serve
// 本地调试开启成功！ 好了，至此，程序员GG终于可以使用熟悉的git流程进行shopify主题开发！
shopify git 流程总结
从以上shopify git flow的坑经验，我们可以得出一些关于低代码设计核心部分的基本认识：
第二部分：低代码产品设计低代码基于可视化和模型驱动的理念，结合云原生和多终端体验技术。 它可以在大多数业务场景下实现效率的大幅提升和成本的降低，为专业开发提供了全新的高生产力开发范式。 另一方面，低代码允许不懂代码的人通过“拖放”组件开发来构建应用程序。 从某种意义上说，低代码可以弥补专业技术人才日益扩大的缺口，同时推动业务与技术深度协作的终极敏捷形式。
低代码产品设计
＃去做
西西木科技是shopify官方合作伙伴，通过了Shopify Partner Academy认证，具备多年shopify lic主题开发经验，熟悉Liquid和各项计算机语言。