Magento
Magento是一个基于PHP的开源平台，用于构建电子商务解决方案。 由Magento公司（现在是Adobe的一部分）构建，它被全世界350,000多名开发人员使用。 它使创建高度可定制的数字店面成为企业对客户和企业对企业的目的。 Magento 2是Magento电子商务平台的转换版本，具有全新的体系结构，编码结构和数据库设计。
a）概述Magento的平台基于PHP和MySQL。 在其10年的生命周期（2008年3月发布的1.0版和2015年11月的2.0版）中，它的结构和开发模式发生了变化，现在是其第二个主要版本Magento 2。
Magento的结构由两个主要部分组成，一个是后端，包括数据库和MySQL，以及Model，Data和Service接口，如图3所示。这些直接连接并用于Magento的Blocks，Layouts，和模板，它们将被定义为应用程序的前端。
b）产品搜索产品搜索功能是任何网站上最重要的功能之一，它允许用户输入术语来搜索产品。 收集搜索结果后，用户通常可以按类别或产品属性对这些结果进行排序或过滤。
在Magento中，搜索通常使用MySQL，Solr或Elasticsearch来索引目录。 目录索引确定在输入新的搜索词或更改已收集结果中的过滤选项时将哪些结果返回到店面。
c）ElasticSearchElasticsearch是基于Apache Lucene构建的免费开放源代码搜索引擎。 它在处理大量数据以及需要快速检索该数据时特别使用。 使用MySQL时，如果有大量数据，则查询数据可能会花费很长时间。 因此，Elasticsearch的主要卖点是将查询速度乘以数百。 它通过将数据索引到具有键和值的文档中来工作，并且附带了一个API，该API可以检索这些索引文档。
在Magento商店上使用时，该目录在Elasticsearch节点中建立索引。 只需启用它并从商店的管理面板中指定Elasticsearch节点所在主机的IP地址和端口，即可轻松配置它。
d）搜索APIMagento有大量的REST API端点，其中一个可用于搜索产品。 该搜索API端点将数据发送给称为搜索条件的数组作为数据，该数组具有以下结构
要发出请求，客户端必须将GET请求发送到附加到商店基本URL的特定路径。 路径是/ rest / V1 /搜索/？ 附加搜索条件的位置。
2. ReactJS
a）作为工具进行反应React是Facebook创建的JavaScript库，旨在构建用户界面。 它依靠使用组件和状态来呈现网页上的动态内容，而无需页面加载。 这是当今最流行和受支持的UI接口JavaScript库之一。
与较早的JavaScript解决方案（涉及在页面上手动触发更改）不同，React在组件状态更改时“知道”何时需要更新UI并在页面上重新呈现UI。 将React与其他库或框架（例如AngularJS，Knockout）区别开来的主要思想是使用“虚拟DOM”，该虚拟DOM通过减少DOM上发生的更改数量来提高性能。
b）React的虚拟DOM从技术上讲，React的虚拟DOM听起来很像。 它是在组件渲染和状态更改时创建的DOM。 所使用的方法是在某些元素需要重新渲染时创建一个新的虚拟DOM，并将其与应用程序先前状态的另一个虚拟DOM表示形式进行比较，使用算法制作“ diff”，然后仅在DOM中重新渲染需要改变的元素。
虚拟DOM是DOM的完整表示，而不是实际DOM，这意味着创建新的虚拟DOM的过程要比创建实际页面的DOM快得多。 因此，由于React每当每次需要重新渲染时都会创建一个新的虚拟DOM，因此它实际上不需要知道发生了什么变化。 这意味着开发人员无需控制渲染过程，因为React仅在需要实际更改时才更改页面的DOM。 从性能角度来看，这是重新渲染需要更改的DOM的最佳方法之一。
c）国家管理图书馆当使用JavaScript库（例如React）时，开发人员创建的组件在大多数情况下是有状态的，这意味着每个组件都具有可以更改的状态并触发组件更新。 当应用程序变得庞大且包含许多相互连接的组件时，它可能变得很麻烦，并且可能需要将状态从父母传递给孩子，反之亦然。 要解决此问题，存在状态管理库。 它们允许将应用程序的状态保存在一个位置，以便于状态管理。 与React一起使用的两个最受欢迎的库是Redux和MobX。
3. React和Magento
Magento 2.3使用了一个称为PWA Studio的新工具。 它是一个渐进式Web应用程序工具，使开发人员可以“无头”的方式使用Magento，这意味着前端不直接与后端绑定，并且可以通过API进行通信。
到目前为止，Magento用户界面是通过使用具有模板（phtml文件）和PHP块的所谓“块”来创建的。 数据通常通过来自后端的这些块，模型和接口在页面加载时呈现。
PWA Studio使用React，Redux和webpack进行开发。
a）什么是渐进式Web应用程序（PWA）？渐进式Web App是一种Web应用程序，它应用Web功能（HTML，CSS，Javascript）来提供模仿本地应用程序的出色用户体验。 更具体地说，PWA的功能类似于带有移动主屏幕上的图标的本机应用程序，启动页面（打开应用程序后），全屏显示，推送通知等。
所有PWA必须确保三个基本标准：快速（几乎立即响应用户交互），可靠（能够在恶劣的网络条件下工作）和参与（提供类似应用程序的流畅体验）。
PWA和本机应用程序之间有一些主要区别：- 当PWA由移动浏览器支持并且在iOS和Android上受支持时，本机应用程序只能在特定操作系统（iOS或Android）上运行。
- 您必须从应用程序商店下载本机应用程序； 同时，添加到主屏幕后可以快速安装PWA。
- 用户必须访问其应用程序商店才能获取本机应用程序的最新版本，但必须刷新才能获取PWA更新。
- 由于PWA在Web浏览器中运行，因此与本地应用程序相比，商店所有者更容易共享和推广PWA。 PWA按需工作，而不会像本机应用程序那样占用设备的内存
b）Magento和PWA2017年，Magento与Google合作，到2018年底将最好的PWA功能带入Magento平台。Magento2.3于2018年11月28日发布，进行了大量令人印象深刻的更新，Magento PWA就是其中之一。
实际上，Magento是使用户能够充分利用PWA潜力的首批电子商务平台之一。 Magento还推出了PWA Studio，它为开发人员提供了必要的工具，以在Magento之上成功创建和维护PWA店面。
c）为什么要在Magento 2中应用PWA？
渐进式Web App集成已引起Magento用户的极大关注，尤其是在发布Magento 2 PWA Studio时。 以下是将您的网站转换为Magento PWA的三个主要动机：
- 增强了在移动设备上的用户体验：轻松地在用户的移动设备上获取PWA，无需下载，但这只是他们体验令人惊叹的功能（如脱机模式（即使失去Internet连接也可以访问应用程序），后台同步（推迟））的大门直到网络连接稳定为止）和其他类似应用的功能。
- 与本地应用程序相比，开发和维护成本更低：对于本地应用程序，您将必须开发两个单独的应用程序（一个用于iOS，另一个用于Android），这将导致应用程序开发和维护的时间和精力增加了一倍。 另一方面，需要一个代码库来创建可以在不考虑操作系统的情况下运行的PWA。
- Magento 2网站中的PWA不仅是一个激烈的趋势，还将是应用程序的未来：许多Magento商店都采用了该技术，并发现其移动用户满意度得到了显着提高。
d）为什么Magento专注于PWA？上图显示，2018年电子商务销售额中有63.5％是通过手机和平板电脑进行的。 2019年，手持设备的销售额预计将达到67.2％。
由于移动商务推动了更多的在线销售，因此Magento做出了明智的举动，将PWA等先进趋势引入其平台。
e）Magento PWA如何改善在线业务？
极高的速度-速度是所有在线商店的重要因素。 如果移动网站的加载时间超过三秒钟，那么移动访问量将下降53％。 换句话说，如果加载时间超过三秒钟，则53％的客户将离开网站。 PWA在这里将发挥重要作用，因为它们的速度非常快。 PWA更快的原因是浏览器级缓存，这可能是由于服务工作者所致。 PWA使用服务工作者预先缓存Web应用程序的一部分，以便在用户下次打开它时立即加载。
跨平台兼容性 -PWA可以在几乎所有广泛使用的移动浏览器和平
台上平稳运行。 这包括Chrome，Safari，Edge和Firefox等浏览器。 一个Web代码库足以在包括台式机在内的多个平台上运行。 因此，企业不必为不同平台开发和维护应用程序。 此外，不必从应用程序商店中更新PWA。 可以像网站一样实时提供更新。
响应式设计 -实施PWA将在台式机，移动电话和平板电脑等设备上带来一致的体验。 这将有助于改善客户体验。 谷歌表示，具有自适应网页设计的网站将在Google搜索结果中排名更高。 因此，实施PWA可以使网站在Google搜索结果中的排名更高。
脱机支持 -整个PWA网站的一部分可以脱机工作。 例如，客户可以浏览您的电子商务网站的产品，并将其添加到没有Internet连接的购物车中（前提是他们以前访问过这些页面）。 客户甚至可以离线下订单，一旦互联网连接，订单将被处理。
SEO友好 -由于PWA网站具有很高的吸引力和可靠性，因此访客可能会比平常停留更长的时间。 而且，诸如速度，脱机支持等因素将有助于提高用户参与度。 在SEO方面使用PWA的另一个重要优势是“移动优先指数”。 谷歌最近宣布，该网站的移动版本将首先被索引。 这意味着没有适用于移动设备的版本的网站在排名中的表现将不佳。
推送通知 -推送通知是作为通知从应用程序发送的消息。 据说他们将参与度提高了88％。 推送通知对于电子商务企业来说很重要，它可以使客户随时了解最新交易，报价和订单更新。
添加到主屏幕 -PWA网站的应用程序图标（看起来像本机应用程序图标）可以添加到智能手机的主屏幕。 用户可以单击该图标直接访问该站点，而不用先浏览器再浏览该网站。 这将增加用户在应用程序上花费的时间，最终将导致更高的转化率。
f）PWA可以为电子商务企业带来哪些好处？由于PWA结合了本机应用程序和移动网络这两个世界的优点，因此它们同时解决了电子商务行业面临的两个重要问题：
ü更高的转化率-与移动应用相比，移动网络上的转化次数要少。 PWA提供无缝的类似应用程序的体验，并结合了脱机支持，速度和跨平台兼容性等功能； 转换率会上升。
ü用户数量增加-客户仅下载成熟的电子商务企业的移动应用程序。 使用PWA，客户只需单击一个按钮，即可将在线商店的PWA添加到手机的主屏幕。
g）将Magento 2网站转换为PWA的方法？- 安装Magento 2 PWA扩展
- 使用Magento 2 PWA Studio创建自己的PWA
- 使用Magento 2 PWA主题将网站转换为PWA
h）PWA案例研究速卖通
全球速卖通是最大的电子商务业务之一，不仅在中国而且在全球。 一旦实施了PWA，他们将在几天内看到结果。 他们在网站上花费的时间增加了74％，页面浏览量增加了一倍。
Flipkart
Flipkart是印度最大的电子商务商店，并推出了Flipkart Lite作为其PWA。
使用PWA，用户在网站上的时间增加到3.5分钟，对于本机应用程序，该时间更早为70秒。 通过“添加到主屏幕”功能到达的客户看到了更高的参与率，转化率提高了40％，转化率提高了70％。 数据使用量也减少到三分之一。
OLX
OLX是印度的领先市场，移动网络的跳出率很高。 他们一半的流量来自移动网络，他们选择了PWA来解决他们的问题。
实施PWA后，跳出率下降了80％，广告的点击率（CTR）上升了146％。 借助推送通知，参与度提高了250％。
朱米亚
Jumia是非洲最受欢迎的电子商务商店，在见证了PWA的好处之后，他们将PWA应用于其其他业务，例如Jumia Travel。 他们的PWA流量比原生应用（Android和iOS）的总流量增长了12倍。 完成第一笔交易所需的数据使用量减少了五倍，所需数据减少了两倍。 除此之外，所需的数据存储量减少了25倍。
孔加
Konga在尼日利亚是一个重要的参与者，他们使用PWA来减少数据消耗。 通过实施PWA，初始负载减少了92％的数据，而完成第一个事务所需的数据减少了82％。
利用PWA有限功能的企业为了充分利用PWA的潜力，应该从头开始构建该站点。 这可能是相当昂贵的。 但是，也可以仅将所需的PWA功能集成到现有网站。
企业可以集中精力于将产生最大影响的功能并加以实施。 这也将大大增加客户体验。 让我们看一些使用PWA选定功能的企业的示例。
柏林航空柏林航空利用PWA的离线功能为机场的客户提供可靠的离线支持。 添加了脱机支持，并且初始加载时间减少到不到一秒钟。 这样，他们的乘客就可以在没有互联网连接的情况下访问登机牌和旅程的详细信息。
华盛顿邮报《华盛顿邮报》使用PWA演示为其最重要的新闻提要构建了一个简单的PWA版本。 他们专注于速度。 页面加载时间减少到80ms。 您可以在WAPO.com/PWA上观看此产品的实时演示。 由于他们看到了令人难以置信的结果，因此他们决定将PWA用于他们的核心移动Web体验。