发文的版块名：博客发文的标题名：WEB学习进阶之路四帖子内容链接：https://bbs.huaweicloud.com/blogs/178453如不能通过请说明详细原因，我再修改，谢谢！

我想请教各位前辈一个关于北向应用与OceanConnect平台对接的问题。背景：我用的是旧版平台。因为这个平台我之前就用过，所以用的比较习惯。但是之前也只进行了南向设备接入，现在想与北向应用对接。我的理解是这样，不知道对不对，还望各位前辈订正。北向对接有两种方式：一种是直接使用应用软件与之对接，这要使用Appid、AppKey和CA证书等信息，平台信息鉴权后接入，但这需要应用软件周期性查询平台数据，也用不到web服务器，应用软件属于被动查询的方式，平台上的Java Demo Https应该就是这种方式？另一种就是订阅推送的方式了，将Web服务器（如华为云、阿里云等服务器）的Url接口和OceanConnect平台进行订阅绑定，然后主动接收平台变更的信息，这个时候应用服务器属于主动接收的方式，只要有数据就会推送过来，然后应用服务器再将接收的数据进行存储就可以了。。不知道这个思路对不对，我是做嵌入式的，对北向应用软件不是太熟，最近看了一些资料，思路这样对吗？谢谢各位前辈指点...

亲爱的开发者们相信大家已经关注华为云有段时间了你关注和加入华为云的原因是什么领先全栈全场景的普惠AI功能鲲鹏，昇腾，5G，loT等技术的一把抓还是力争构建智能世界的伟大信念更或者是因为Made in China的根本......你最想get华为云哪一点你是不是也很希望跟着华为云大牛学到很多既干又优质的正经技术让自己Made in HUAWEISo，华为云这次推出【华为云WEB前端全栈开发者成长计划】不玩虚的不挖坑，只为帮你get到你想要的东西3个月，全程免费学习构建前端全栈技能体系                                               1.什么是【WEB前端全栈成长计划】本次课程是华为云精心为开发者们准备的前端全栈课程，集成华为研发经验的高质量前端课程，覆盖HTML/JavaScript/Node.js等华为云技术核心知识点，为你构建前端全栈技能体系，助力前端技能快速提升，向全栈工程师迈进！向了解华为云更进一步！ ◎适合人群：阶段1：0基础想要进阶的开发者（学生/0基础开发者皆可）阶段2/3：想要全面完善前端技术框架，学习华为云开发技术的开发者向下翻看报名二维码，点击报名，立得300码豆 2. 进阶式学习，看谁能“一战到底”◎活动招募启动：（05/22）◎L1：前端基础入门（06/08-06/30 ~4周）◎L2：迈入脚本及框架开发（07/01-07/31 4~6周）◎L3：全栈化进阶（08/03-08/31 4~6周）◎考试进阶：练习考核认证（~1周） 3. “战利品”必不可少且相当丰厚根据课程段位不同，奖品也不同，奖品详情如下：  4. 报名时间及方式具体活动、课程及奖品详情识别下方二维码还在等什么，马上行动吧~长按识别，马上参与 各位开发者小哥哥/小姐姐，现在立即报名【全栈开发者课程】即送300华为云码豆和预前课程；还有，我们特意开设了【全栈开发者学习群】，组织小伙伴们一起学习交流，帮你答疑解惑，助你查缺补漏，还有技术大牛不定时空降群内发福利，更有超多惊喜进阶奖励等着泥萌哦~~~ 赶紧识别下方二维码或搜索【华为云小助手01】微信号：hwcloud01 带你进入学习群吧~z   今天有WEB前端全栈开发者成长计划明天就会有鲲鹏，昇腾，物联网等各技术领域排队和大家来一场这样的面对面定会让你受益匪浅离华为云更近的机会就在这里请各位开发者和预备开发者抓紧时间，立即报名祝/助各位开发者们成长快乐鸭~

作者：doodlewind链接：https://www.zhihu.com/question/396878847/answer/1261374042来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。据本台刚刚收到的消息，SpaceX 龙飞船的触控 UI 基于 Chromium + JavaScript 技术栈开发，开放的 Web 技术就此成为了人类首个应用到载人航天领域的 GUI 技术栈。相信这对数百万前端开发者们来说是个更为历史性的时刻。这个基于 Web 技术打造的触控 UI 界面是这样的：<img src="https://pic4.zhimg.com/50/v2-42d7b42106770263c825f25aeb2b1f4d_hd.jpg" data-rawwidth="1020" data-rawheight="675" data-size="normal" data-caption="" data-default-watermark-src="https://pic3.zhimg.com/50/v2-02e88afdb2468a01437ab97b19afa174_hd.jpg" class="origin_image zh-lightbox-thumb" width="1020" data-original="https://pic4.zhimg.com/v2-42d7b42106770263c825f25aeb2b1f4d_r.jpg"/>这个消息可能为业界带来什么重大影响呢？下面是本台洋葱新闻时间：仅在一夜之间，Electron 风评即由「笨重臃肿的 Chrome 马甲套壳」变成了「稳定安全的航天级 GUI 基础架构」。在飞船 UI 系统宕机时，宇航员手册中记载了最后的应急方案，那就是删掉 node_modules 然后 npm install。「面试造火箭」一语成谶，「宇宙飞船 UI 架构设计」现已加入 BAT 前端面试题库。前端培训班题材纷纷由「高仿美团饿了么首页」转向「高仿宇宙飞船控制台」，全套教学视频 + 源码仅需 998。各大前端框架争相游说各国载人航天团队，史称前端太空竞赛。社区开始争论 React Hooks 和 Vue Composition API 哪个更适合登月。SpaceMVC 项目取代 TodoMVC，成为了下一个前端框架的 battle 标准。工程师一旦发现飞船超重，第一个排查问题的位置就是 node_modules。某国湿婆神号飞船任务失败，原因竟是该国程序员屏幕上的咖喱混淆了 == 和  ===，导致类型比较出错。言归正传，这条新闻的出处仅仅是一条非官方的 Tweet。在 Fake News 横行的今天，怎样确定龙飞船 2 号用的就是 JavaScript 呢？SpaceX 并没有开源他们的技术栈，但仍然有不少可供交叉验证的有趣信息源，今天摸到了条大鱼啊（笑）。首先，推文中附上了四年前 Stack Exchange 上 对猎鹰 9 号计算机技术栈的讨论，其中的主要信息源则是 Reddit 上 SpaceX 软件团队的 AMA 介绍 。另外，Hacker News 上近期也有活跃的 后续讨论帖。这里对其中（与 GUI 部分相关的）主要信息整理如下：龙飞船 2 号和猎鹰 9 号的飞控软件系统基于 Linux，其底层均由 C/C++ 实现。Chromium + JavaScript 属于这一系统中的太空舱界面（flight interface）部分。UI 界面有 100% 的测试覆盖率，包括对图形绘制结果的验证。UI 屏幕彼此之间是完全独立的，相当于冗余备份。UI 系统可以重启，在直播中对接国际空间站时就有这样的例子。除了飞控系统中的 UI 外，SpaceX 还有其他需要 GUI 的地方。负责地面软件的团队使用 LabView 开发地面指挥中心的 GUI，企业 IT 团队则使用常见的 Web 技术栈开发项目管理、库存管理等内部后台系统。上面这些信息除了 AMA 之外都可能有偏差，主要讨论者也未必是这套触屏 UI 的实际开发者。不过稍加搜索就能发现更有趣的料，那就是这套 UI 界面设计师自己的 Portfolio 页面：<img src="https://pic3.zhimg.com/50/v2-89ec0ec5370d4abf067d5e2e56f56e33_hd.jpg" data-rawwidth="987" data-rawheight="848" data-size="normal" data-caption="" data-default-watermark-src="https://pic3.zhimg.com/50/v2-e9e2424ae6d998c63b057bced1e9b935_hd.jpg" class="origin_image zh-lightbox-thumb" width="987" data-original="https://pic3.zhimg.com/v2-89ec0ec5370d4abf067d5e2e56f56e33_r.jpg"/>看到这个页面的时候，我第一印象是这真不是「Lorem Ipsum」式的 Demo 吗……这也太梦幻了吧。但在找到设计师 AJ Fitzpartrick 的 LinkedIn 之后，基本可以确定这还真不是 PPT，有被羡慕到。所以为宇宙飞船设计触屏 UI，到底是在干嘛呢？具体细节仍然处于保密状态，但这位设计师公开的工作描述包括了这些：将航天员在飞行阶段的职责转化为软件需求，与太空运营团队合作，创建出用于驾驶舱触屏显示器的线框和 UI 流程。向 SpaceX 团队和 NASA 客户（包括龙飞船的宇航员机组在内）介绍设计和 UI 流程。基于太空旅行的独特条件，制定风格指南和设计规范，例如适应宇航员手套的触摸目标，以及保证震动时的易读性。与软件工程师紧密合作，了解硬件和技术限制，确定用户体验上的空白和设计任务的优先级。将设计产物和用于生产的素材交付给软件工程师。虽然好像也不是特别复杂，但是这牛逼真是可以吹一辈子啊……这里还有一个有趣之处，那就是这位 UI/UX 设计师此前并非来自「航空航天体制内」，而是做 App 与 Web 的设计出身的。他的代表作品包括索尼的全球设计规范和图片编辑器，还有 iOS 的社交应用等。这也体现了 SpaceX 在组建精英团队时的多元文化（例如做上面介绍的飞控软件的团队，其背景就来自于游戏、消费者软件、Web 开发、金融、电信、航空、学术界等）。所以做交互的同学们还是要有点志气，万一哪天我国的宇宙飞船也要招人做设计稿了呢？至于 SpaceX 正式对外的分享资料，则主要来自 2016 年的 GDC 分享 。他们在其中介绍了新一代软件工具技术对他们的价值：<img src="https://pic1.zhimg.com/50/v2-7c6c32ea27e7100bb56964ce12031d6d_hd.jpg" data-rawwidth="2410" data-rawheight="1419" data-size="normal" data-caption="" data-default-watermark-src="https://pic2.zhimg.com/50/v2-b15a1ad29ca638fed3e22f85f677bac2_hd.jpg" class="origin_image zh-lightbox-thumb" width="2410" data-original="https://pic4.zhimg.com/v2-7c6c32ea27e7100bb56964ce12031d6d_r.jpg"/>这页 PPT 直译过来是这样的：算力上的进步开启了全新的可能性存储、计算和渲染能力上的突破，使实现 3D 渲染和交互式地图等特性成为了可能。移动设备在重量和能耗上的改进非常显著。触摸屏已经很便宜，普及到随处可见。浏览器是界面开发的新平台各种库和框架提供了稳定的功能，并能快速实现原型。现代化的开发和调试工具提高了迭代速度。技术的跨业界通用性扩大了潜在的人选范围，减少了磨合时间。PPT 上还有专门的一页讲了触摸屏技术：<img src="https://pic4.zhimg.com/50/v2-841e0b6a2b15fbd03bf27328c68e2f60_hd.jpg" data-rawwidth="2280" data-rawheight="1227" data-size="normal" data-caption="" data-default-watermark-src="https://pic3.zhimg.com/50/v2-20f29c3f36465ffc65c6b685fb7cde1c_hd.jpg" class="origin_image zh-lightbox-thumb" width="2280" data-original="https://pic3.zhimg.com/v2-841e0b6a2b15fbd03bf27328c68e2f60_r.jpg"/>要点直译过来也很简单：将操作控制移到显示屏上后，极大地减少了空间占用和混乱。通过多个相同的显示屏，很容易实现冗余备份。触摸屏的泛用性使得开发变得容易，还能流水线式地执行训练和测试。基于软件的界面布局，提高了迭代速度。这就是新一代 UI 技术栈对航天领域的影响了。不过对于到此为止的这些内容，仍然可能会有些「这不就只是用 JS 画了点花里胡哨的东西而已吗」的质疑。但其实在即将发射的 詹姆斯·韦伯太空望远镜（JWST）里，NASA 已经在用 JavaScript 操控太空望远镜的观测计划了：在 JWST 机载架构中，活动计划均由地面上传。每个计划都包含了多个 Visit，它们通过上层的机载 JavaScript 来处理。而每个 Visit 则会包含由下层机载脚本处理的观测活动（如探测器配置、回转请求等）。这些机载脚本会构建出命令和遥测请求，从而操作观测子系统（如科学仪器、航天器总线中的姿态控制子系统等）。这个架构设计写在了介绍 JWST 的论文（JWST: Maximizing Efficiency and Minimizing Ground Systems）里，如图所示：<img src="https://pic1.zhimg.com/50/v2-3df0c3a20a3905503f3a655ca3a1ffd1_hd.jpg" data-rawwidth="500" data-rawheight="843" data-size="normal" data-caption="" data-default-watermark-src="https://pic1.zhimg.com/50/v2-4ce8985534952ed59b8c6056952b383c_hd.jpg" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic3.zhimg.com/v2-3df0c3a20a3905503f3a655ca3a1ffd1_r.jpg"/>对于这个破天荒地引入 JS 引擎的操作，其实还有另一篇论文，讲了事件驱动的 JWST 操作设计（Event-driven James Webb Space Telescope Operations）。NASA 使用的是一个由 Nombas 公司开发的普通商用级 JS 引擎，它被嵌入在了 VxWorks 实时操作系统中。论文中探讨了在 JWST 中引入事件驱动架构的优势，值得感兴趣的同学拓展一下视野。Nombas 公司在《JavaScript 20 年》中登场过。它虽然名不见经传，但其实也是首次 TC39 会议的参与者，当时的产品是名称跟 C++ 相反的 Cmm（C minus minus）语言。后来他们在此基础上研发出了嵌入式 ECMAScript 引擎 ScriptEase，亦即被 NASA 选用的产品。这家公司后来被 Openwave 收购。到此为止，我们已经看到 JavaScript 这门「罄竹难书」的语言，居然已经开始在无比高大上的航天领域崭露头角了。在《JavaScript 20 年》史书的结尾处，JS 之父 Brendan Eich 是这样为 JS 正名的：最早他们说 JavaScript 没法做「富互联网应用」。然后他们说 JavaScript 没法快起来。然后他们说 JavaScript 没法修复语言问题。然后他们说 JavaScript 没法做多核与 GPU 运算。今天我们可以再补一条：然后他们说 JavaScript 没法做航天级项目。作者：doodlewind链接：https://www.zhihu.com/question/396878847/answer/1261374042来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。据本台刚刚收到的消息，SpaceX 龙飞船的触控 UI 基于 Chromium + JavaScript 技术栈开发，开放的 Web 技术就此成为了人类首个应用到载人航天领域的 GUI 技术栈。相信这对数百万前端开发者们来说是个更为历史性的时刻。这个基于 Web 技术打造的触控 UI 界面是这样的：<img src="https://pic4.zhimg.com/50/v2-42d7b42106770263c825f25aeb2b1f4d_hd.jpg" data-rawwidth="1020" data-rawheight="675" data-size="normal" data-caption="" data-default-watermark-src="https://pic3.zhimg.com/50/v2-02e88afdb2468a01437ab97b19afa174_hd.jpg" class="origin_image zh-lightbox-thumb" width="1020" data-original="https://pic4.zhimg.com/v2-42d7b42106770263c825f25aeb2b1f4d_r.jpg"/>这个消息可能为业界带来什么重大影响呢？下面是本台洋葱新闻时间：仅在一夜之间，Electron 风评即由「笨重臃肿的 Chrome 马甲套壳」变成了「稳定安全的航天级 GUI 基础架构」。在飞船 UI 系统宕机时，宇航员手册中记载了最后的应急方案，那就是删掉 node_modules 然后 npm install。「面试造火箭」一语成谶，「宇宙飞船 UI 架构设计」现已加入 BAT 前端面试题库。前端培训班题材纷纷由「高仿美团饿了么首页」转向「高仿宇宙飞船控制台」，全套教学视频 + 源码仅需 998。各大前端框架争相游说各国载人航天团队，史称前端太空竞赛。社区开始争论 React Hooks 和 Vue Composition API 哪个更适合登月。SpaceMVC 项目取代 TodoMVC，成为了下一个前端框架的 battle 标准。工程师一旦发现飞船超重，第一个排查问题的位置就是 node_modules。某国湿婆神号飞船任务失败，原因竟是该国程序员屏幕上的咖喱混淆了 == 和  ===，导致类型比较出错。言归正传，这条新闻的出处仅仅是一条非官方的 Tweet。在 Fake News 横行的今天，怎样确定龙飞船 2 号用的就是 JavaScript 呢？SpaceX 并没有开源他们的技术栈，但仍然有不少可供交叉验证的有趣信息源，今天摸到了条大鱼啊（笑）。首先，推文中附上了四年前 Stack Exchange 上 对猎鹰 9 号计算机技术栈的讨论，其中的主要信息源则是 Reddit 上 SpaceX 软件团队的 AMA 介绍 。另外，Hacker News 上近期也有活跃的 后续讨论帖。这里对其中（与 GUI 部分相关的）主要信息整理如下：龙飞船 2 号和猎鹰 9 号的飞控软件系统基于 Linux，其底层均由 C/C++ 实现。Chromium + JavaScript 属于这一系统中的太空舱界面（flight interface）部分。UI 界面有 100% 的测试覆盖率，包括对图形绘制结果的验证。UI 屏幕彼此之间是完全独立的，相当于冗余备份。UI 系统可以重启，在直播中对接国际空间站时就有这样的例子。除了飞控系统中的 UI 外，SpaceX 还有其他需要 GUI 的地方。负责地面软件的团队使用 LabView 开发地面指挥中心的 GUI，企业 IT 团队则使用常见的 Web 技术栈开发项目管理、库存管理等内部后台系统。上面这些信息除了 AMA 之外都可能有偏差，主要讨论者也未必是这套触屏 UI 的实际开发者。不过稍加搜索就能发现更有趣的料，那就是这套 UI 界面设计师自己的 Portfolio 页面：<img src="https://pic3.zhimg.com/50/v2-89ec0ec5370d4abf067d5e2e56f56e33_hd.jpg" data-rawwidth="987" data-rawheight="848" data-size="normal" data-caption="" data-default-watermark-src="https://pic3.zhimg.com/50/v2-e9e2424ae6d998c63b057bced1e9b935_hd.jpg" class="origin_image zh-lightbox-thumb" width="987" data-original="https://pic3.zhimg.com/v2-89ec0ec5370d4abf067d5e2e56f56e33_r.jpg"/>看到这个页面的时候，我第一印象是这真不是「Lorem Ipsum」式的 Demo 吗……这也太梦幻了吧。但在找到设计师 AJ Fitzpartrick 的 LinkedIn 之后，基本可以确定这还真不是 PPT，有被羡慕到。所以为宇宙飞船设计触屏 UI，到底是在干嘛呢？具体细节仍然处于保密状态，但这位设计师公开的工作描述包括了这些：将航天员在飞行阶段的职责转化为软件需求，与太空运营团队合作，创建出用于驾驶舱触屏显示器的线框和 UI 流程。向 SpaceX 团队和 NASA 客户（包括龙飞船的宇航员机组在内）介绍设计和 UI 流程。基于太空旅行的独特条件，制定风格指南和设计规范，例如适应宇航员手套的触摸目标，以及保证震动时的易读性。与软件工程师紧密合作，了解硬件和技术限制，确定用户体验上的空白和设计任务的优先级。将设计产物和用于生产的素材交付给软件工程师。虽然好像也不是特别复杂，但是这牛逼真是可以吹一辈子啊……这里还有一个有趣之处，那就是这位 UI/UX 设计师此前并非来自「航空航天体制内」，而是做 App 与 Web 的设计出身的。他的代表作品包括索尼的全球设计规范和图片编辑器，还有 iOS 的社交应用等。这也体现了 SpaceX 在组建精英团队时的多元文化（例如做上面介绍的飞控软件的团队，其背景就来自于游戏、消费者软件、Web 开发、金融、电信、航空、学术界等）。所以做交互的同学们还是要有点志气，万一哪天我国的宇宙飞船也要招人做设计稿了呢？至于 SpaceX 正式对外的分享资料，则主要来自 2016 年的 GDC 分享 。他们在其中介绍了新一代软件工具技术对他们的价值：<img src="https://pic1.zhimg.com/50/v2-7c6c32ea27e7100bb56964ce12031d6d_hd.jpg" data-rawwidth="2410" data-rawheight="1419" data-size="normal" data-caption="" data-default-watermark-src="https://pic2.zhimg.com/50/v2-b15a1ad29ca638fed3e22f85f677bac2_hd.jpg" class="origin_image zh-lightbox-thumb" width="2410" data-original="https://pic4.zhimg.com/v2-7c6c32ea27e7100bb56964ce12031d6d_r.jpg"/>这页 PPT 直译过来是这样的：算力上的进步开启了全新的可能性存储、计算和渲染能力上的突破，使实现 3D 渲染和交互式地图等特性成为了可能。移动设备在重量和能耗上的改进非常显著。触摸屏已经很便宜，普及到随处可见。浏览器是界面开发的新平台各种库和框架提供了稳定的功能，并能快速实现原型。现代化的开发和调试工具提高了迭代速度。技术的跨业界通用性扩大了潜在的人选范围，减少了磨合时间。PPT 上还有专门的一页讲了触摸屏技术：<img src="https://pic4.zhimg.com/50/v2-841e0b6a2b15fbd03bf27328c68e2f60_hd.jpg" data-rawwidth="2280" data-rawheight="1227" data-size="normal" data-caption="" data-default-watermark-src="https://pic3.zhimg.com/50/v2-20f29c3f36465ffc65c6b685fb7cde1c_hd.jpg" class="origin_image zh-lightbox-thumb" width="2280" data-original="https://pic3.zhimg.com/v2-841e0b6a2b15fbd03bf27328c68e2f60_r.jpg"/>要点直译过来也很简单：将操作控制移到显示屏上后，极大地减少了空间占用和混乱。通过多个相同的显示屏，很容易实现冗余备份。触摸屏的泛用性使得开发变得容易，还能流水线式地执行训练和测试。基于软件的界面布局，提高了迭代速度。这就是新一代 UI 技术栈对航天领域的影响了。不过对于到此为止的这些内容，仍然可能会有些「这不就只是用 JS 画了点花里胡哨的东西而已吗」的质疑。但其实在即将发射的 詹姆斯·韦伯太空望远镜（JWST）里，NASA 已经在用 JavaScript 操控太空望远镜的观测计划了：在 JWST 机载架构中，活动计划均由地面上传。每个计划都包含了多个 Visit，它们通过上层的机载 JavaScript 来处理。而每个 Visit 则会包含由下层机载脚本处理的观测活动（如探测器配置、回转请求等）。这些机载脚本会构建出命令和遥测请求，从而操作观测子系统（如科学仪器、航天器总线中的姿态控制子系统等）。这个架构设计写在了介绍 JWST 的论文（JWST: Maximizing Efficiency and Minimizing Ground Systems）里，如图所示：<img src="https://pic1.zhimg.com/50/v2-3df0c3a20a3905503f3a655ca3a1ffd1_hd.jpg" data-rawwidth="500" data-rawheight="843" data-size="normal" data-caption="" data-default-watermark-src="https://pic1.zhimg.com/50/v2-4ce8985534952ed59b8c6056952b383c_hd.jpg" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic3.zhimg.com/v2-3df0c3a20a3905503f3a655ca3a1ffd1_r.jpg"/>对于这个破天荒地引入 JS 引擎的操作，其实还有另一篇论文，讲了事件驱动的 JWST 操作设计（Event-driven James Webb Space Telescope Operations）。NASA 使用的是一个由 Nombas 公司开发的普通商用级 JS 引擎，它被嵌入在了 VxWorks 实时操作系统中。论文中探讨了在 JWST 中引入事件驱动架构的优势，值得感兴趣的同学拓展一下视野。Nombas 公司在《JavaScript 20 年》中登场过。它虽然名不见经传，但其实也是首次 TC39 会议的参与者，当时的产品是名称跟 C++ 相反的 Cmm（C minus minus）语言。后来他们在此基础上研发出了嵌入式 ECMAScript 引擎 ScriptEase，亦即被 NASA 选用的产品。这家公司后来被 Openwave 收购。到此为止，我们已经看到 JavaScript 这门「罄竹难书」的语言，居然已经开始在无比高大上的航天领域崭露头角了。在《JavaScript 20 年》史书的结尾处，JS 之父 Brendan Eich 是这样为 JS 正名的：最早他们说 JavaScript 没法做「富互联网应用」。然后他们说 JavaScript 没法快起来。然后他们说 JavaScript 没法修复语言问题。然后他们说 JavaScript 没法做多核与 GPU 运算。今天我们可以再补一条：然后他们说 JavaScript 没法做航天级项目。Wrong every time!于是我们再次应证了这条规律：Always bet on JS.当然了，用不用 JS 说到底看的还是实际场景，龙飞船成功的关键也并不是 JS，而是大量前沿科学与工程领域实打实的硬核积累。但作为 GUI 开发者，这里还是许个小小的祝愿，希望有生之年大家做的 UI，能有机会帮助人类飞向更大的世界吧。Wrong every time!于是我们再次应证了这条规律：Always bet on JS.当然了，用不用 JS 说到底看的还是实际场景，龙飞船成功的关键也并不是 JS，而是大量前沿科学与工程领域实打实的硬核积累。但作为 GUI 开发者，这里还是许个小小的祝愿，希望有生之年大家做的 UI，能有机会帮助人类飞向更大的世界吧。

第一阶段技术文章打卡活动已于7月5日 23:59截止（请严格按照回复示例进行回复，格式不对会影响获奖哦~） 为了巩固大家的学习成果，紧跟学习进度请将需要完成的前端技术文章内容按要求回复到本帖下方按要求格式回复即可获得积分累计阶段奖品，还能有机会获得附加幸运奖哦~征集时间2020.06.08-2020.07.05 23:59征集要求1.本学习阶段任意时间内，在【华为云】-【博客】发表与WEB前端开发的任意博客内容，可以是开发技术技巧，可以是开发心得体会，不可以发布课程笔记作为博文，将文章链接回复至本帖内2.文章需为原创，在发布博客时，需要勾选文章创作类型：原创文章一项。用户承诺，发表的文章不存在任何知识产权问题并自行承担全部责任3.文章字数≥600字，图文并茂，助手审核通过后发放奖励4.回复格式：华为云ID+博客文章链接5.如果曾在外部博客发表过的文章，可将文章迁移到华为云博客即可奖励方式每阶段每篇有效博客文章可获得10积分，每阶段获取上限100分，阶段学习将以积分排行榜的形式，对前300名小伙伴进行奖励哦！此外还有附加奖励，每阶段奖励作者300元华为云代金券/篇每阶段评选1-3篇最佳博文，奖励华为GT智能手表~积分排行榜奖品                                                 活动注意事项1. 学习任务提交后，小助手会在本阶段学习周期内，按序完成审核，并增加活动积分；2. 本次活动通过完成提交前端技术文章博客链接任务，可获得的积分上限为100分/每阶段；3. 请务必按照上述要求提交内容，以免影响积分增加；4. 若积分值相同则以完成学习任务的时间先后排序，其中任务完成时间的判定优先级为：提交前端技术文章>提交每周学习笔记>每章随堂测验打卡；5. 其他积分获取方式请查看活动社群公告。想了解更多关于全栈成长计划课程内容请移步主帖：https://bbs.huaweicloud.com/forum/thread-57007-1-1.html除了本帖任务，其他学习任务可以通过以下链接进行查看： 查看随堂测验打卡帖：【WEB前端全栈成长计划】第一阶段·每章随堂测验打卡帖查看学习笔记征集帖：【WEB前端全栈成长计划】第一阶段·每周学习笔记征集帖

第一阶段读书笔记打卡活动已于7月5日 23:59截止（请严格按照回复示例进行回复，格式不对会影响获奖哦~）为了巩固大家的学习成果，紧跟学习进度请将需要完成的每周学习笔记按要求回复到本帖下方按要求格式回复即可获得积分累计阶段奖品，还能有机会获得附加幸运奖哦~征集时间2020.06.08-2020.07.05 23:59征集要求在本帖中，回复自己本周课程内容的学习笔记回复格式：华为云ID+笔记内容（字数≥200字）奖励方式每周每篇有效笔记可获得5积分阶段学习将以积分排行榜的形式，对前300名小伙伴进行奖励哦！此外还有附加奖励，每周在本周内提交学习笔记的用户中，抽取10位幸运奖奖励华为云定制鼠标垫 积分排行榜奖品 活动注意事项1. 学习任务提交后，小助手会在本阶段学习周期内，按序完成审核，并增加活动积分；2. 本次活动通过完成提交学习笔记任务，可获得的积分上限为5分/每周；3. 请务必按照上述要求提交内容，以免影响积分增加；4. 若积分值相同则以完成学习任务的时间先后排序，其中任务完成时间的判定优先级为：提交前端技术文章>提交每周学习笔记>每章随堂测验打卡；5. 其他积分获取方式请查看活动社群公告。想了解更多关于全栈成长计划课程内容请移步主帖：https://bbs.huaweicloud.com/forum/thread-57007-1-1.html除了本帖任务，其他学习任务可以通过以下链接进行查看： 查看随堂测验打卡帖：【WEB前端全栈成长计划】第一阶段·每章随堂测验打卡帖查看前端技术文章征集帖：【WEB前端全栈成长计划】第一阶段·前端技术文章征集帖

第一阶段随堂测验打卡活动已于7月5日 23:59截止（请严格按照回复示例进行回复，格式不对会影响获奖哦~）（回复格式：华为云ID+截图）为了巩固大家的学习成果，紧跟学习进度请将需要完成的每章随堂测验内容按要求回复到本帖下方按要求格式回复即可获得积分累计阶段奖品，还能有机会获得附加幸运奖哦~打卡时间2020.06.08-2020.07.05 23:59打卡要求在本帖中，回复对应章节的随堂测验并提交截图 ↓                                              回复格式：华为云ID+课程完成截图（露出右上角华为云ID，且有效提交次数≥1）如图所示华为云ID：grandmaster 奖励方式每章节每次有效打卡可获得2积分阶段学习将以积分排行榜的形式，对前300名小伙伴进行奖励！此外还有附加奖励，每周在本周内提交随堂测验的用户中随机抽取10位幸运奖奖励华为云定制数据线 积分排行榜奖品 活动注意事项 由于本帖回复内容为随堂测试结果，已设置回帖仅版主可见1. 学习任务提交后，小助手会在本阶段学习周期内，按序完成审核，并增加活动积分；2. 本次活动通过完成随堂测验打卡任务，可获得的积分上限为2分/每章节；3. 请务必按照上述要求提交内容，以免影响积分增加；4. 若积分值相同则以完成学习任务的时间先后排序，其中任务完成时间的判定优先级为：提交前端技术文章>提交每周学习笔记>每章随堂测验打卡；5. 其他积分获取方式请查看活动社群公告。想了解更多关于全栈成长计划课程内容请移步主帖：https://bbs.huaweicloud.com/forum/thread-57007-1-1.html除了本帖任务，其他学习任务可以通过以下链接进行查看： 查看学习笔记征集帖：【WEB前端全栈成长计划】第一阶段·每周学习笔记征集帖查看前端技术文章征集帖：【WEB前端全栈成长计划】第一阶段·前端技术文章征集帖

【直播简介】3个月构建WEB前端全栈知识体系，目标全栈 向成长致敬：集成华为研发经验的高质量前端课程覆盖HTML/Javascript/Node.js等核心知识点，助力前端技能快速提升 向全栈工程师迈进！【三大学习阶段 路线更清晰入门更容易】阶段一：前端基础入门  HTML/CSS/标签/表单/选择器等阶段二： 迈入脚本及框架开发  JavaScript/变量/数据类型/Vue.js等阶段三：迈入脚本及框架开发  Node.js/ES6/Express/Restful API等考核进阶：练习实践考核  随堂练习/题目评测/阶段考核等【直播亮点】告别小白：前端全栈开发名词解释段位升级：前端开发职业发展规划硬核技能：前端全站知识体系介绍大神操作：华为云前端工程师学习方法揭秘【专家简介】主讲人：张宇华为高校教育解决方案专家、华为资深前端开发工程师【扫码预约今晚课程！】【互动方式】在直播间中回答问题的同学有机会获取双肩包一份【互动奖品】✖5【活动规则】1.互动抽奖活动时间是2020年6月4日，直播期间，在直播间所有参与评论互动的用户中，所有回答问题的小伙伴就有机会获得礼品，在直播间公告栏与本帖中公布中奖名单。2.获奖结果将在活动结束后3个工作日内进行公示3.每个ID只能参与一次评选，同一ID不可重复中奖。4.本次回帖内容需满足华为云论坛发帖规范https://bbs.huaweicloud.com/forum/thread-23077-1-1.html

0基础前端开发者养成记，进阶拿奖不停歇！      海量免费课程，满满都是干货，0基础也可以参加！激动到搓手手！最重要的是从报名到学习全程赢码豆到手软哦！【课程简介】华为前端开发学习路线-【WEB前端全栈成长计划】-0基础入门前端技能体系3个月构建前端全栈技能体系，集成华为研发经验的高质量前端课程，覆盖HTML/JavaScript/Node.js等核心知识点，助力前端技能快速提升，向全栈工程师迈进！点此查看更多详情：WEB前端全栈成长计划传送门活动参与流程：一、盖楼有奖：（即日起至6月8日）      方式：直接在本帖回复想学的内容      中奖设置：幸运6楼、16楼、26楼、36楼、46楼、56楼、66楼、76楼、86楼、96楼幸运小盆友获得200码豆      盖楼规则：同一账号不可连续盖楼超过10层，每个用户只有一次领取机会二、报名课程：想参加课程的开发者们，可先报名占坑，毕竟机会难得又少见，况且报名课程就有无理由300码豆相赠，码豆数量有限，先到先得哦~课程大纲：https://developer.huaweicloud.com/resource/roadmap/website.html点我报名课程点我报名课程呀~三、完成活动分享：.转发活动海报至朋友圈，+转发语：华为WEB前端全栈成长计划，进阶课程免费学~，公开可见保持2小时以上，截图回复至指定分享帖（点击下方提示连接）中。前30名有效分享，必得HUAWEI定制数据线。30名后每10个有效楼层，抽取1位幸运用户，赠送HUAWEI定制数据线每人仅可获奖一次，数量有限，先到先得。点击下方文字提示链接，截图反馈即可！点我参与分享活动点我参与分享活动~课程不可缺少的奖品：根据阶段不同，奖品也不同，版主只能说无论是实物奖品还是虚拟奖品都是相当丰厚，最重要的一点：任何形式/阶段学习都有惊喜奖励（雷柏机械键盘、无线鼠标、百万码豆…）等着大家~具体的奖品详情请持续关注后面的更新~各位开发者小哥哥们，不要太动心哦~ 全栈成长计划阶段时间：◎活动招募启动：05/25-06/07◎第一阶段课程：06/08-06/30◎第二阶段课程：07/01-07/31◎第三阶段课程：08/03-08/31 着重注意：所有活动奖品将在活动结束后15个工作日内完成发放；活动奖品颜色随机，且部分奖品数量有限发完即止；本次活动回帖内容需满足华为云论坛发帖规范：https://bbs.huaweicloud.com/forum/thread-23077-1-1.html本次全栈开发者成长计划，定会让你受益匪浅，离华为最近的机会就在这里，请各位开发者和预备开发者期待我们成长计划的大幕开启！ 请耐心等待开课哟~

利用DevCloud平台构建智能路灯web应用后，注册设备失败，但是设备验证码是对的啊。按照指导书做的。设置阈值，led灯也能正常亮。但是网站不出来灯状态和开关次数。

操作系统：CentOS Linux release 8.1.1911

【WEB前端全栈成长计划】活动分享有礼~第一阶段分享活动已截止，中奖名单已出，下阶段再见◎分享要求：转发上方活动海报至朋友圈，+转发语：华为WEB前端全栈成长计划，进阶课程免费学~，公开可见保持2小时以上，将转发内容截图回复至下方评论区◎分享活动期限：即日起-6月30日23:59，结束即抽奖◎中奖方式：前30名有效分享，必得华为云定制3合1数据线 //以版主点评认证的顺序为准哦，图片为准，占楼无效，需要补上图片才可哦~                （前三十位名单已出，详见下方评论区，看到自己昵称的小伙伴请在6月3日前把自己的“姓名+电话+地址”私信给版主）                   30名后每10个有效楼层，抽取1位幸运用户，奖励华为云定制3合1数据线各位开发者们，抓紧时间参与分享呀~◎活动规则：1. 版主会在分享期时间结束后3个工作日内开奖，本次开奖以反馈楼层为准，抽奖过程和中奖名单会以动图/视频形式更新到本帖和征文活动帖中~请大家在保持关注哦~2. 每用户仅可获得一次奖励，奖品颜色随机且数量有限发完即止。3. 本次活动回帖内容需满足华为云论坛发帖规范：https://bbs.huaweicloud.com/forum/thread-23077-1-1.html

【引言】前段时间写过一篇关于前端技术的概括性文章《前端技术的选择]》(http://3ms.huawei.com/km/blogs/details/7971337)，本文就对于当下顶级的前端开发技术做个相对详尽的探究，目的是为了解开这些前端技术的面纱，看看各自的庐山真面目。 【React】React（也被称为React.js或ReactJS）是一个用于构建用户界面的JavaScript库。它由Facebook和一个由个人开发者和公司组成的社区来维护。 React可以作为开发单页或移动应用的基础。然而，React只关注向DOM渲染数据，因此创建React应用通常需要使用额外的库来进行状态管理和路由，Redux和React Router分别是这类库的例子。基本用法下面是一个简单的React在HTML中使用JSX和JavaScript的例子。 <div id="myReactApp"></div> <script type="text/babel">  function Greeter(props) {    return <h1>{props.greeting}</h1>;  }  var App = <Greeter greeting="Hello World!" />;  ReactDOM.render(App, document.getElementById("myReactApp"));</script>  Greeter函数是一个React组件，它接受一个属性问候语。变量App是Greeter组件的一个实例，其中问候语属性被设置为 "Hello World！"。然后，ReactDOM.render方法将我们的Greeter组件渲染在DOM元素（id为 myReactApp）中。 在web浏览器中显示时，结果将是： <div id="myReactApp">  <h1>Hello World!</h1></div>  显著特点 组件化React代码由称为组件的实体组成。组件可以使用React DOM库渲染到DOM中的一个特定元素。当渲染一个组件时，可以传入被称为 "props "的值。 ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));  React中声明组件的两种主要方式是通过功能函数组件和基于类的组件。 功能函数组件 功能组件是用一个函数声明，用来返回一些JSX。 const Greeting = (props) => <div>Hello, {props.name}!</div>;  类组件基于类的组件是使用ES6类来声明的。它们也被称为 "有状态 "组件，因为它们的状态可以在整个组件中保持，并且可以通过props传递给子组件。class ParentComponent extends React.Component {  state = { color: 'green' };  render() {    return (      <ChildComponent color={this.state.color} />    );  }} 虚拟 DOM另一个值得注意的特点是React使用了虚拟文档对象模型，也就是虚拟DOM。React创建了一个内存中的数据结构缓存，计算得出变化差异，只渲染实际变化的子组件, 从而高效地更新浏览器显示的DOM。 生命周期方法生命周期方法是指在组件的生命周期内，允许在设定的点执行代码的hooks处理函数。 l  shouldComponentUpdate允许开发者在不需要渲染的情况下，通过返回false来防止不必要的重新渲染组件。l  componentDidMount是在组件 "挂载 "后调用的（组件已经在用户界面中创建了，通常是通过将其与DOM节点关联起来）。这通常用于通过API从远程数据源触发数据加载。l  componentWillUnmount是在组件被拆解或 "解挂 "之前立即调用的。这通常用于清除组件的资源依赖关系，这些依赖关系不会随着组件的卸载而简单地被移除（例如，移除任何与组件相关的setInterval()实例，或者因为组件的存在而在 "文档 "上设置的 "eventListener"）。l  render是最重要的生命周期方法，也是任何组件中唯一必须存在的方法。它通常在每次更新组件的状态时都会被调用。 JSXJSX，即JavaScript XML，是对JavaScript语言语法的扩展。JSX在外观上类似于HTML，它提供了一种开发者熟悉的语法结构化组件渲染的方法。React组件通常是使用JSX编写的，尽管不一定非要使用JSX（组件也可以用纯JavaScript编写）。JSX类似于Facebook为PHP创建的另一种名为XHP的扩展语法。 JSX代码的一个例子:class App extends React.Component {  render() {    return (      <div>        <p>Header</p>        <p>Content</p>        <p>Footer</p>      </div>    );  }}  嵌套元素同一层次上的多个元素需要被包裹在一个容器元素中，如上图中的<div>元素。 属性JSX提供了一系列的元素属性，旨在对应HTML提供的属性。这些自定义的属性也可以传递给组件，所有的属性都会被组件作为props接收。 JavaScript表达式JavaScript表达式（但不是语句）可以在JSX内部通过大括号{}使用。<h1>{10+1}</h1> 上面代码的显示结果是：<h1>11</h1> 条件语句If-else语句不能在JSX中使用，但可以使用条件表达式来代替。下面的例子当i为1时将 { i === 1 ? 'true' : 'false' } 呈现为字符串 'true'。 class App extends React.Component {  render() {    const i = 1;    return (      <div>        <h1>{ i === 1 ? 'true' : 'false' }</h1>      </div>    );  }} 结果会是：<div>  <h1>true</h1></div> 函数和JSX可以用于条件表达式中:class App extends React.Component {  render() {    const sections = [1, 2, 3];    return (      <div>        {sections.length > 0 && sections.map(n => (            /* 'key'必须唯一 */            <div key={"section-" + n}>Section {n}</div>        ))}      </div>    );  }} 结果会是：  <div>  <div>Section 1</div>  <div>Section 2</div>  <div>Section 3</div></div> 用JSX编写的代码需要被Babel等工具进行转换以后才能被Web浏览器所理解，这种处理一般是在软件构建过程中进行的，然后再部署构建后的应用程序。 超越HTML的架构React的基本架构不仅仅适用于在浏览器中渲染HTML。例如，Facebook有动态图表，可以渲染到<canvas>标签，而Netflix和PayPal使用通用加载，在服务器和客户端上渲染相同的HTML。 React HooksHooks是让开发者从函数组件中 "钩入"React状态和生命周期特性的函数。它们使代码具有更强的可读性且更易理解。Hooks并不在类组件内工作，它的终极目标是在React中消除类组件的存在。 React提供了一些内置的Hooks，如useState、useContext、useReducer和useEffect等。它们都在Hooks API参考书中做了说明。使用最多的是useState和useEffect，分别在React组件中控制状态和检测状态变化。  Hooks规则 Hooks也有一些规则，在使用Hooks之前必须遵循这些规则: l  钩子只能在顶层调用（不能在循环或if语句中调用）。l  钩子只能在React函数组件中调用，不能在普通函数或类组件中调用。 定制Hooks构建自己的Hooks，也就是所谓的自定义Hooks，可以让你把组件逻辑提取到可重用的函数中。自定义钩子是一个名称以 "use "开头的JavaScript函数，它可以调用其他的钩子。钩子的规则也适用于它们。 常用术语 React并没有试图提供一个完整的 "应用程序库"。它是专门为构建用户界面而设计的，因此并不包括许多一些开发者认为构建应用程序所需的工具。这使得开发者可以选择任何一个库来完成诸如执行网络访问或本地数据存储等任务。这种情况也就决定了React技术在创建网页应用时标准无法统一。 Flux架构的使用为了支持React的单向数据流的概念（与AngularJS/Angular的双向数据流形成对比），Flux架构是流行的模型-视图-控制器(MVC)架构的具有代表性的替代方案。Flux的特点是，数据动作通过中央调度器发送到一个存储仓库，而对存储仓库数据的变化会被传送回视图。当与React一起使用时，这种传送是通过组件属性完成的。 Flux可以被认为是观察者模式的一个变种。 Flux架构下的React组件不应该直接修改传递给它的任何props，而是应该传递回调函数，这些回调函数可以创建由调度器发送的数据动作来修改存储仓库。数据动作是一个对象，其职责是描述已经发生的事情：例如，一个数据动作描述的是一个用户 "follow"另一个用户。它可能包含如下数据：用户ID，目标用户ID，以及USER_FOLLOWED_ANOTHER_USER枚举类型。存储仓库，是一个数据模型，可以根据从调度器接收到的数据动作来改变自己。这种模式有时被表述为 "属性向下流动，数据动作向上流动"。自Flux诞生以来，Flux的许多实现被创造出来，其中最著名的是Redux，它的特点是单一的存储仓库，通常被称为单一的数据真相源。 历史React是由Facebook的软件工程师Jordan Walke创建的，受PHP的HTML组件库XHP的启发，发布了React的早期原型，名为 "FaxJS"，。它于2011年首次部署在Facebook的News Feed上，后来于2012年部署在Instagram上。2013年5月在美国JSConf大会上开源。 React Native是2015年2月在Facebook的React Conf上宣布的，2015年3月开源的React Native，实现了原生的Android、iOS和UWP开发。 2017年4月18日，Facebook宣布了React Fiber，这是React库的一个新的核心算法，用于构建用户界面，React Fiber将成为React库未来任何改进和功能开发的基础。 2017年9月26日，React 16.0正式对外发布。 2019年2月16日，React 16.8正式对外发布，该版本引入了React Hooks。 常用命令 创建工程：npx create-react-app my-app开发环境运行：npm start 生产环境打包：npm run build 【官方网站】http://reactjs.org/ 【最新版本】16.13.1于2020年3月19日【授权】MIT License  【Angular】Angular（通常被称为 "Angular 2+"或 "Angular v2及以上版本"）是一个基于TypeScript的开源Web应用框架，由Google的Angular团队和由个人以及企业组成的社区领导。 Angular是由构建AngularJS的同一个团队从零开始重写的。 Angular和AngularJS的区别 l  Angular没有 "Scope"或控制器的概念，相反，它使用组件的层次结构作为其主要的架构特征。l  Angular有不同的表达式语法，重点是"[]"用于属性绑定，"() "用于事件绑定l  模块化 - 许多核心功能已转移到模块上l  Angular推荐使用微软的TypeScript语言，它引入了以下特性。n  静态键入，包括Genericsn  注解l  TypeScript是ECMAScript 6 (ES6)的超集，向后兼容ECMAScript 5（即：JavaScript）。l  动态加载l  异步模板编译l  由RxJS提供的迭代回调。RxJS限制了状态的可见性和调试，但这些问题可以通过像ngReact或ngrx这样的反应式附加组件来解决。l  支持Angular Universal，可以在服务器上运行Angular应用程序。 历史命名最初，AngularJS的重写被称为 "Angular 2"，但这导致了开发人员的迷糊。为了澄清，团队宣布，每个框架使用不同的术语，其中 "AngularJS "指的是1.X版本， "Angular " 指的是2及以上版本。 版本2Angular 2.0在2014年10月22-23日的ng-Europe大会上宣布。2.0版本的剧烈变化在开发者中引起了相当大的争议。 2015年4月30日，Angular开发者宣布Angular 2从Alpha转为开发者预览版，2015年12月Angular 2转为Beta版，2016年5月发布了第一个发布候选版本，2016年9月14日发布了最终版本。 版本42016年12月13日Angular 4发布，跳过了3，避免了因路由器包的版本错位导致的混乱，当时已经发布的版本为v3.3.0。最终版本于2017年3月23日发布，Angular 4向后兼容Angular 2。 Angular 4.3版本是一个小版本，它是4.x.x版本的替换版本。 4.3版本的功能 l  介绍了HttpClient，一个更小、更容易使用、更强大的HTTP请求库。l  为守护者和解析器提供了新的路由器生命周期事件。四个新事件。GuardsCheckStart、GuardsCheckEnd、ResolveStart、ResolveEnd加入了现有的NavigationStart等生命周期事件集。l  有条件地禁用动画。  版本5Angular 5于2017年11月1日发布，Angular 5的主要改进包括支持渐进式Web应用、构建优化器以及与Material Design相关的改进。版本6Angular 6于2018年5月4日发布。这个版本，关注的重点不在于底层框架，更多的是工具链，以及让Angular在未来的更新和升级更加容易，比如：ngupdate、ng add、Angular元素、Angular Material+CDK组件、Angular Material入门组件、CLI工作区、库支持、树形摇动提供者、动画性能提升、RxJS v6。版本7Angular 7已于2018年10月18日发布。更新内容涉及到应用性能、Angular Material & CDK、虚拟滚动、Selects的可访问性改进、现在支持自定义元素使用Web标准的内容投影，以及关于Typescript 3.1、RxJS 6.3、Node 10（仍支持Node 8）的依赖性更新。版本8Angular 8已于2019年5月28日发布。具有所有应用代码的差异化加载、惰性路由的动态导入、Web工作者、TypeScript 3.4支持、以及Angular Ivy作为预览版可配置使用。Angular Ivy预览包括： l  生成的代码，在运行时更容易阅读和调试。l  更快的重建时间l  减少有效载荷l  改进了模板类型检查l  向后兼容 版本9Angular 9已于2020年2月6日发布。第9版在默认情况下使用Ivy编译器。Angular可以与TypeScript 3.6和3.7兼容。除了数百个bug修复之外，Ivy编译器和运行时还提供了许多优势: l  更小的软件包l  更快的测试l  更好的调试l  改进的CSS类和样式绑定l  改进的类型检查l  改善了构建错误l  改善了构建时间，默认开启AOT功能l  提高国际化功能 特点组件化一个组件例子Html部分 <h2>Products</h2> <div *ngFor="let product of products">   <h3>      {{ product.name }}  </h3> </div>  Typescript部分export class ProductListComponent {  products = products;}  路由 @NgModule({  imports: [    BrowserModule,    ReactiveFormsModule,    RouterModule.forRoot([      { path: '', component: ProductListComponent },      { path: 'products/:productId', component: ProductDetailsComponent },    ])  ], 数据管理定义服务类export class CartService {  items = [];   constructor(    private http: HttpClient  ) {}   addToCart(product) {    this.items.push(product);  }   getItems() {    return this.items;  }   clearCart() {    this.items = [];    return this.items;  }   getShippingPrices() {    return this.http.get('/assets/shipping.json');  }}调用服务类export class ShippingComponent implements OnInit {  shippingCosts;   constructor(    private cartService: CartService  ) {  }   ngOnInit() {    this.shippingCosts = this.cartService.getShippingPrices();  } }常用命令 从终端上，全局安装Angular CLI：npm install -g @angular/cli 使用 ng new 命令创建一个新的 Angular CLI 工作区:ng new my-project-name 开发环境运行：ng serve 生产环境打包：ng build --prod 【官方网站】https://angular.io/ 【最新版本】9.1.2于2020年4月15日【授权】MIT License  【Vue】 Vue.js（通常被称为Vue；发音为/vjuː/，类似于 "view"）是一个开源的Model-view-viewmodel JavaScript框架，用于构建用户界面和单页面应用程序。它由Evan You创建，由他和来自Netlify和Netguru等多家公司的核心成员维护。 概述 Vue.js的特点是，它采用了一个渐进式的架构，专注于声明式渲染和组件合成。复杂应用所需的高级功能，如路由、状态管理和构建工具等，都是通过官方维护的支持库和包提供的，其中Nuxt.js是最受欢迎的解决方案之一。 Vue.js可以让你用称为指令（directives）的HTML属性来扩展HTML。 历史Vue是由Evan You创建的。在Google工作期间，他使用AngularJS技术参与了多个项目的开发的，之后创建了Vue。他后来总结了自己的思考过程。"我想，如果我可以把AngularJS真正优秀的部分提取出来，然后构建一些轻量级的东西，会怎么样呢？" 项目的第一个版本源码提交日期是2013年7月，Vue在2014年2月首次发布。 特点组件化Vue 组件扩展了基本的 HTML 元素来封装可重用的代码。从高层次的角度看，组件是Vue编译器附加行为的自定义元素。在Vue中，组件本质上就是一个带有预设选项的Vue实例。下面的代码片段包含了一个Vue组件的例子。该组件显示了一个按钮，并打印出按钮被点击的次数。 <div id="tuto">    <button-clicked v-bind:initial-count="0"></button-clicked></div> <script>Vue.component('button-clicked', {  props: [ "initialCount" ],  data: () => ({    count: 0,  }),  template: `<button v-on:click="onClick">Clicked {{ count }} times</button>`,  computed: {    countTimesTwo() {      return this.count * 2;    }  },  watch: {    count(newValue, oldValue) {      console.log(`The value of count is changed from ${oldValue} to ${newValue}.`);    }  },  methods: {    onClick() {        this.count += 1;    }  },  mounted() {    this.count = this.initialCount;  }}); new Vue({  el: '#tuto',});</script> 模板Vue使用基于HTML的模板语法，允许将渲染的DOM绑定到Vue实例的底层数据。所有 Vue 模板都是有效的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。Vue 将模板编译成虚拟 DOM 渲染函数。虚拟文档对象模型（或 "DOM"）允许Vue在更新浏览器之前在其内存中渲染组件。结合反应式系统，Vue能够计算出需要重新渲染的组件的最小数量，并在App状态发生变化时，启动最小量的DOM操作。 Vue用户可以使用模板语法，也可以选择使用JSX直接编写渲染函数，渲染函数允许从软件组件中构建应用程序。 反应式系统Vue的特点是采用了反应式系统，它使用纯JavaScript对象和优化的重渲染。每个组件在渲染过程中都会跟踪其反应式的依赖关系，因此系统可以精确地知道什么时候重新渲染，以及哪些组件需要重新渲染。 变换效果当从DOM中插入、更新或删除项目时，Vue提供了多种方法来部署变换效果。这包括了以下工具： l  自动应用CSS变换和动画的类l  集成第三方CSS动画库，如Animate.css等。l  在变换hooks期间，使用JavaScript直接操作DOM。l  集成第三方JavaScript动画库，如Velocity.js等。 当在变换组件中的元素**入或移除时，会出现这样的情况：l  Vue会自动检测到目标元素是否应用了CSS变换或动画。如果有，CSS变换类将在适当的时间添加/删除。l  如果变换组件提供了JavaScript hooks，这些hooks将在适当的时间被调用。l  如果没有检测到CSS变换/动画，并且没有提供JavaScript hooks，那么插入和/或移除的DOM操作将在下一帧中立即执行。  路由单页面应用程序（SPA）的一个传统缺点是无法分享到特定网页中的确切 "子 "页面的链接。由于SPA只向用户提供一个基于URL的服务器响应（它通常服务于index.html或index.vue），因此通常情况下，将某些屏幕作为书签或分享到特定部分的链接是很困难的，甚至是不可能的。为了解决这个问题，许多客户端路由器用 "hashbang"(#!)来划分动态URL，例如page.com/#!/。然而，在HTML5中，大多数现代浏览器都支持不使用hashbang的路由。 Vue提供了一个界面，可以根据当前的URL路径来改变页面上显示的内容 – 可以有多种方式（无论是通过电子邮件链接、刷新还是页面内链接）。此外，当某些浏览器事件（如点击）发生在按钮或链接上时，使用前端路由器可以有意识地转换浏览器路径。Vue本身并没有自带前端路由。但开源的 "vue-router "包提供了一个API来更新应用程序的URL，支持返回按钮（导航历史记录），并支持电子邮件密码重置或电子邮件验证链接的认证URL参数。它支持将嵌套路由映射到嵌套组件，并提供精细化的过渡控制。添加了vue-router后，组件只需映射到它们所属的路由，父/根路由必须指明子路由的渲染位置。 <div id="app">  <router-view></router-view></div>... <script>...const User = {  template: '<div>User {{ $route.params.id }}</div>'} const router = new VueRouter({  routes: [    { path: '/user/:id', component: User }  ]})...</script> 上面的代码: l  在websitename.com/user/<id>中设置一个前端路径。l  这将在(const User...)中定义的User组件中呈现。l  允许用户组件使用$route对象的params键输入用户的特定ID：$route.params.id。l  这个模板（根据传递到路由器中的参数变化）将被渲染到DOM的div#app里面的<router-view></router-view>。l  最后生成的HTML将是：websitename.com/user/1： <div id="app">  <div>    <div>User 1</div>  </div></div> 生态系统核心库自带的工具和库都是由核心团队和贡献者开发的。 官方工具l  Devtools - 用于调试Vue.js应用程序的浏览器devtools扩展。l  Vue CLI - 用于快速开发Vue.js的标准工具书l  Vue Loader - 一个webpack加载器，允许以单文件组件（SFCs）的格式编写Vue组件。 官方程序库 l  Vue Router - Vue.js的官方路由器l  Vuex – 基于 Flux模式的 Vue.js 的集中式状态管理。l  Vue Server Renderer - 用于 Vue.js 的服务器端渲染。 常用命令安装工具npm install -g @vue/cli 创建工程：vue create my-project 开发环境运行：npm run serve 生产环境打包：npm run build 【官方网站】https://vuejs.org/ 【最新版本】2.6.1于2019年12月13日【授权】MIT License                           【小结】本文对于当前顶级的前端技术做了较为详尽的探索，前端技术一个大的方向是单页应用 (SPA，Single Page Application)，我们在选取针对本业务的前端技术时需要结合如下几个方面来考虑： 1.     成员当前技能，这是一个很现实的问题，大多数程序员会选择自己比较熟悉的技术。这里要思考一下，目前自己熟悉的技术是不是最优选项？2.     可利用的学习时间，如果发现要使用的技术需要一些时间学习，这个时间的开销到底会不会与开发进度有冲突？3.     能否保证项目的复杂度最低，这个是比较关键的因素。先进技术之所以先进就是因为可以让开发者把时间和精力放在真正的业务开发上面来，如果要使用的技术需要进行很多与业务不相关的配置，就需要问一个问题，有没有更好的办法？ 最后，希望本文对现有或者以后的业务开发有指导或者借鉴作用。

作者 : 华为云VPN服务团队1.   组网拓扑云下华为USG为客户的出口防火墙，通过该设备配置VPN与华为云VPC连通，两端的子网信息和连接方式如下拓扑所示。                                              云下客户侧         网关：8.1.1.77         子网：192.168.77.0/24华为云侧         网关：9.1.1.9         子网：192.168.9.0/242. 协商策略两端建立VPN连接使用华为云缺省策略，策略详情见下图。3. USG配置3.1 IPSec基础配置登录防火墙管理页面，选择“网络-IPSec”进行新建IPSec连接，详情见下图所示。虚拟系统：选择默认即可策略名称：客户自行指定本端接口：配置对接本端公网IP的接口本端地址：本端公网IP对端地址：对端公网IP认证方式：预共享密钥本端ID与对端ID：IP地址，并填入对应的公网IP待加密数据流：源地址为云下子网，目标地址为云上子网，请勿使用地址组名称配置 安全提议：按照华为云策略配置，要求两端配置信息一致DPD：勾选DPD，选择按需发送，配置信息默认即可 3.2 路由配置点击“网络-路由-静态路由”，新建一条目的为华为云子网的静态路由，下一跳指向本地出接口网关IP。协议类型：IPv4源虚拟路由器：选择默认的public目的地址/掩码：云端子网地址目的虚拟路由器：选择默认的public出接口：本端公网IP配置的接口下一跳：本端公网地址下一跳其余配置默认即可，存在多出口时，须额外添加访问云端公网IP从此出接口流出的路由 3.3 NAT配置点击“策略-NAT策略-源NAT”，新建一条本地子网访问华为云不做NAT的策略。源安全区域：本端子网所在安全区域目的区域：华为云子网所在安全区域，一般为untrust转换前源地址：本端子网目的地址：华为云对端子网服务：any转换方式：不做NAT转换为确保该策略优先匹配，请将该策略置顶请注意接口地址出外网不做NAT。例如已配置缺省策略：源区域为any，访问目标区域any，出口转换为接口地址。请额外添加一条NAT策略：源区域为local，目标区域为any，转换方式为不做NAT转换，并将 该策略置于缺省策略之上。3.4 安全策略配置点击“策略-安全策略-安全策略”，新建一条本地子网访问华为云的放行策略。源安全区域：本端子网所在区域源安全区域：本端子网所在安全区域目的区域：华为云子网所在安全区域，一般为untrust转换前源地址：本端子网目的地址：华为云对端子网服务：any动作：允许为确保该策略优先匹配，请将该策略置顶4. 配置验证完成配置后，请选择“网络-IPSec-IPSec”在对应连接上选择诊断来发现连接协商。连接状态详细在“IPSec-监控”中查看，诊断示意截图如下数据面验证略。

【WEB前端全栈成长计划-三阶段正式开课】1个月免费破解前端神器Node&Vue的秘密 亲爱的开发者们，web前端全栈成长计划一，二阶段已结束相信很多伙伴们都在一阶段收获了很多知识完成最后的考核顺利毕业但是这是一次进阶课程，上次的完结预示着新阶段的开启迈进更好的前端学习领域，学习更高阶的前端知识所以，第三阶段，它来了【WEB前端全栈成长计划-三阶段正式开启】Node&Vue，免费学，赢大礼，全速进阶新阶段，冲鸭~ 01.活动介绍&适合人群 3个月构建前端全栈技能体系，集成华为研发经验的高质量前端课程，覆盖HTML/JavaScript/Node.js等核心知识点，助力前端技能快速提升，向全栈工程师迈进！适合人群：阶段1：0基础想要进阶的开发者 【html&css】课程链接：web前端全栈成长计划·第一阶段阶段2：迈入脚本及框架开发 【JavaScript&Ajax】课程链接：web前端全栈成长计划·第二阶段阶段3：前端高阶框架开发【Node&Vue】更新时间：8月19日-9月20日，课程链接：web前端全栈成长计划·第三阶段 02.活动参与流程 一、报名课程：- 课程报名入口：   点此报名课程- 报名福利：   报名课程就有无理由300码豆相赠，码豆数量有限，先到先得哦~ //阶段课程结束后统一发放，请耐心等待- 课程大纲：   点此查看课程大纲二、加入学习社群：有人一起学习，有人帮你解惑，有考试助你查缺补漏，还有华为大牛不定时空降答疑，更有超多惊喜奖励等着泥萌~~~扫描下方二维码添加小助手企业微信：华为云小助手01，加入学习群吧~（已在之前web前端群内开发者不用重复添加）三、分享本次活动赢数据线：前30名有效分享，必得HUAWEI定制数据线。30名后每10个有效楼层，抽取1位幸运用户，赠送HUAWEI定制数据线，数量有限，速速参与：分享有礼分享有礼分享有礼点这里 03.课程安排&学习任务 一、第三阶段课程安排：（8月19日-9月20日）二、学习任务&附加奖励：三、学习任务提交入口：  1.随堂测验打卡贴：【WEB前端全栈成长计划】第三阶段·每章随堂测验打卡帖  2.学习笔记征集帖：【WEB前端全栈成长计划】第三阶段·每周学习笔记征集帖  3.前端技术文章征集帖：【WEB前端全栈成长计划】第三阶段·前端技术文章征集帖   4.第三阶段最终考核打卡帖：【WEB前端全栈成长计划】第三阶段·最终考核打卡帖   5.第三阶段最终积分和成绩帖：【WEB前端全栈成长计划·第三阶段】最终积分排行榜和最终考核成绩出炉！ 04.活动奖励 本次活动不仅免费跟大牛学习技术，更有积分大礼等着大家~每次有效提交的学习任务都会得到对应积分，累计阶段积分即可获得雷柏机械键盘，还有幸运的附加奖励等着大家（华为GT手表、华为云定制鼠标垫......） 05.活动常见问题 1.课程录播为主，每两个工作日更新一章内容，不定时直播，直播会另外通知，直播可有回放有互动奖品，回放链接就是当次直播的链接2.每章每周每阶段会有对应的学习任务，按照指定要求完成学习任务并回复到指定社区帖中，累计积分，既有机会获得惊喜奖励3.报名链接就是课程链接，大家可以在电脑和手机端将链接收藏一下，app目前不能学习本次课程4.课程视频没有倍速不会添加倍速，电脑端观看建议使用谷歌浏览器，手机端建议使用默认浏览器，手机观看解锁锁屏模式横屏后右拉即可观看视频5.学习内容每2-3个工作日10点左右更新，大家按照活动和课程要求完成任务，进行回帖即可6.关于活动的所有链接在小助手朋友圈和本帖上方活动介绍中都有，请大家随时翻看7.复制链接到微信文件传输助手即可在电脑端观看内容8.报名时填写必填项即可，学号工号信息可随意填写，目前注册只支持中国大陆手机号，课程后奖品也只支持中国大陆内快递9.本次课程每阶段都有结业证书，电子版，不具备任何法律和华为内推效益，请大家知晓10.大家有任何问题都可以帖子下方留言或者到学习交流群内咨询 06.活动注意事项 ○所有活动奖品将在活动结束后20个工作日内完成发放，具体发放时间见群内/小助手通知；○活动奖品颜色随机，且部分奖品数量有限发完即止；○本次活动回帖内容需满足华为云论坛发帖规范：https://bbs.huaweicloud.com/forum/thread-23077-1-1.html 07.活动附加项目 第一阶段·最终积分排名和最终考核成绩排名：https://bbs.huaweicloud.com/blogs/185921第一阶段所有内容大集合：https://bbs.huaweicloud.com/forum/thread-65194-1-1.html第二阶段所有内容大集合：https://bbs.huaweicloud.com/forum/thread-71849-1-1.html全阶段实体证书正在核对信息中，请获得三个阶段电子证书的开发者私信【华为云小助手01】核对信息并领取实体证书兑换方式！！！兑换截止日期为12月2日！过期不候！过期不候！！过期不候！！！！云服务器、云数据库等16+热门产品免费试用，点击链接抓紧时间领取：（详细领取规则参见活动描述）云服务器免费试用点这里点这里点这里阶段积分榜单更新啦，之后积分榜更新都会在这里，快来看看自己到底排在第几位：https://bbs.huaweicloud.com/blogs/175270【web前端全栈成长计划】学习情况调查问卷，和版主反馈下你的态度？发发牢骚？学习调查问卷点这里点这里点这里奖励彩蛋：【WEB前端全栈成长计划】追加福利，快来围观~本次积分前100名的用户，可享受申请云享专家直通车的权益。本次云享专家直通车，是让各位优秀的开发者进行申请后直接通过初审，进行终审。本次申请成为云享专家，可以获得礼品+100代金券。专家资料介绍链接：https://bbs.huaweicloud.com/blogs/112362?from=singlemessage&isappinstalled=0云享专家申请链接：https://bbs.huaweicloud.com/community/certifiedinfo云声送Mate Pad啦，云声平台8月建议反馈活动如期而至，这次为您准备了华为平板，荣耀手环等，您的建议越详尽越好，可以采用图文方式描述存在的问题和解决方案，还在等什么，赶快来云声提交优化建议吧~https://bbs.huaweicloud.com/activity/suggestion.html本次全栈开发者成长计划，定会让你受益匪浅离华为云最近的机会就在这里请各位开发者和预备开发者和华为一起吧~