构建💣 Bomb-Diggity 技术演示文稿（🎤 Mic Drop 可选）

👉🏻 构建你的演示文稿

JavaScript 中的 TypeScript

我从事技术演讲已有十年，期间也积累了一些经验。本系列旨在与大家分享这些经验。这些并非演讲者的最佳实践，也不是让你成为顶级演讲者的秘诀，而是基于个人经验的实用建议。

本系列内容：

• 为什么要说话？
• 在哪里演讲？
• 演讲形式
• 征集演讲
• 构建您的演示文稿（您在这里）
• 练习与反馈
• 准备旅行
• 演讲当天
• 演讲后及总结

👉🏻 构建你的演示文稿

您收到了录取通知书✅，现在是时候开始动工了🏗！您的演讲方式取决于许多因素，包括演讲格式。我总是从摘要和标题开始。我的承诺是什么？我在提交的演讲中描述了哪些关键要点？我对成功的定义是什么？显然，我希望观众能够感受到价值。这通常是通过讲故事和展示（也称为“演示”）相结合来实现的。让我们来详细分析一下。

故事

每个演示文稿都有一个故事。你可以控制情节的可预测性。一个涵盖所有最新 JavaScript 语言功能的演示文稿，可能只是简单地列出要分享的项目。“这是第一个功能：它的作用、外观、使用方式和时间，以及下一个功能。” 然而，一个更引人入胜的故事会包含一些非常具体的元素。

幸运的是，关于如何打造一个好故事，我们拥有丰富的知识体系。那么，究竟是什么成就了一个好故事呢？你会发现不同的公式，但我喜欢保持简单，并专注于“三力”的力量。以下是我关注的三个部分：

1. 精彩绝伦、令人震撼的开场白，能迅速抓住读者的兴趣。不妨想想你最喜欢的几本书的开篇段落，看看它们与你想表达的信息有何关联。
2. 主角遭遇的严重冲突。
3. 一个现实但令人惊讶的解决方案最终解决了问题，并且通常会带来意想不到的转折。

⭐提示：如果你真的想提高演讲水平，可以参考一些非技术类书籍。一些专注于提升故事讲述能力的书籍是一个不错的起点。销售也需要与受众建立联系，并讲好故事，而一些优秀的销售书籍恰好也能帮助你提升演讲水平。可以把它想象成“推销你的想法”。花点时间阅读一些非技术类书籍，它们可以帮助你提升软技能。

为了说明这一点，我举两个例子。

我所做的一个演讲一直受到好评，该演讲是关于无服务器技术的。

首先，我简要介绍了无服务器的概念，然后直接开始演示，展示我在对 API 进行负载测试时服务器是如何自动扩展的。这引起了一些初步的反应，并带来了一些“惊喜”。

冲突在于构建、托管、维护和扩展 Web 应用程序的难度和成本的结合。

我提供的解决方案是一套使用无服务器的演示和解决方案。

我做的另一个演讲是关于一种名为 WebAssembly 的较新技术以及一个建立在其之上的名为 Blazor 的框架。

在本次演讲中，我首先要提出一个挑战：无论您是 C、Ruby、PHP、C#、Rust、Go 还是其他语言的开发者，如果您编写的是客户端 Web 代码，就必须使用 JavaScript 或 TypeScript。您真的需要吗？“惊喜”之处在于，您可以将自己选择的语言与 WebAsssembly 结合使用。

该解决方案展示了使用该框架构建单页应用程序是多么容易。

回到三的力量，我发现在制作演示文稿时关注以下几点很有帮助：

1. 对于较长的演示，将演示分为三个不同的阶段。
2. 始终思考一个好故事的三个关键部分（惊喜、冲突、解决）。
3. 记住，你不是故事的主角！英雄应该永远是观众，而反派则可能是阻碍他们完成任务的某种东西。

作为一个快速练习，想一想你最喜欢的一个演示文稿。它包含这些元素吗？如果没有，它有什么不同？你能把它应用到你自己的演示文稿中吗？

演示

一场精彩的技术演示的核心在于演示。谈论技术是一回事，演示其工作原理又是另一回事。虽然制作一个演示来重点介绍所有最新的“酷炫”功能可能很诱人，但这也是一个与故事情节产生共鸣的机会。演示如何展现冲突及其解决方案？它是否能帮助观众解决问题，并让他们成为英雄？

我最常见的演示方法是先构建演示，然后围绕这些演示创建叙述。这样我就可以突出演示中具体涉及的功能。在其他情况下，我会先创建叙述，然后确定哪个演示最能支持故事情节。

一个大的还是多个小的？

演示有几种方法。在我之前提到的无服务器演讲中，我有几个独立的演示，分别展示了无服务器堆栈的特定部分。我每个演示都是从头开始构建的，因为目标是展示从零开始是多么容易，并获得诸如弹性扩展和弹性等优势。在其他演示中，我可能会构建一个完整的应用程序，而“演示”则侧重于运行最终产品并演示使其成功的各个组件。

您还可以构建一个重构的“骨架”项目来展示新技术如何改进最终产品。

片段和提交

代码片段是你的好朋友。实时编码有很多动态部分，因此尽量减少拼写错误，专注于主线至关重要。你可以将流程分解成几个步骤，并将代码存储为代码片段（具体存储方式取决于你的开发环境）或宏，执行这些宏即可生成代码块。在某些情况下，我会创建一套包含代码块的分步说明，以便轻松复制粘贴。当我复制粘贴代码时（我解释说这样做是为了避免让观众看到我打字并避免拼写错误），我可以浏览笔记，确保没有遗漏任何解释点。

这是另一种方法：

"scripts": {

这个仓库记录了每一次提交，并逐步解释了如何实现最终结果。演示时，我可以检出单个提交，并展示代码在每个步骤中是如何变化的。

实时编码

关于演讲，我最初听过一条建议，但从未遵循过：“永远不要现场编程。太多事情可能会出错。” 虽然现场编程确实可能出现很多问题，但根据我的经验，听众更喜欢看到现场代码，并且更愿意参与到整个过程，而不是从成品开始。我通常会在第一次演讲前进行两到三次练习，但如果是现场编程，我会练习几十遍。我希望对演讲材料了如指掌，这样才能应对任何意想不到的障碍。

⭐⭐专业提示：反正你都要练习你的演示，为什么不把它们录下来呢？这样做有两个目的。首先，如果遇到技术问题，你可以参考视频。如果我做的演示依赖于网络，并且不确定网络连接质量如何，我会录制视频。播放时，我不会使用声音，而是现场解说，而且经常会开个玩笑，比如“我已经练习过很多次了，我甚至不需要把手放在键盘上。” 之后，我可以给视频配上字幕，发布到网上作为资源。

甲板

演示文稿是演示的重要组成部分，但你得确保它不会成为你的拐杖。我会用演示文稿来记录要点和插图，并提供链接和背景信息供观众参考。同样，我发现一个很棒的分解演示文稿的方法就是“三力法”。举几个例子：

• 对于我的Azure Cosmos DB演示，我将其分为三个阶段：什么是 NoSQL、什么是 Azure Cosmos DB，以及演示以强调要点。
• 对于我的无服务器平台演示，我首先回答这个问题：“什么是无服务器？”然后列举平台的各个组件，最后将它们结合在一起。
• 对于我的Blazor演示，我首先通过解释 WebAssembly 的背景，然后介绍 Blazor 的功能，最后以演示结束。

每个部分也可以细分为自己的话题。

一些总体建议：

• 自我介绍要简洁。人们可以通过阅读你的个人简介或之后与你交谈来了解你。我过去常常花太多时间推销自己，好像我必须证明为什么观众应该听我说话。现在我明白了，在一张幻灯片上用几句简介来突出我是谁就足够了；真正的可信度在于演示本身。
• 避免长篇大论。如果我必须阅读，我就会停止关注你，然后我会想知道你为什么在那里——直接给我幻灯片就行了！除非我想提供参考资料。在这种情况下，我会解释幻灯片是供参考的，然后继续（或者更好的是，隐藏幻灯片，让它在演示文稿中，而不是演示文稿的一部分）。
• 图片很有趣，但不要试图把它们作为中心。用它们来放大你的信息。使用图片，尤其是动态GIF时，务必理解并遵守版权法。为了避免任何问题，我已经开始只使用我自己的照片。
• 添加链接。这是方便读者事后查找资料的好方法。
• 我总是看着每张幻灯片并问自己：“如果我没有看到我的演讲，这是否有意义？”如果答案是“否”，那么我会对其进行调整，以便演示文稿可以在演讲后作为资源继续使用。
• 保持字体大小一致！如果可能，请使用模板的内置布局；如果您使用的是编程解决方案，请使用样式表。
• 禁止使用小图像或文字！确保房间后排的人和前排的人一样舒适。
• 跳过视频，除非它们很重要并且与强调某个观点相关。

根据您使用的软件，我还有一些其他建议。

微软幻灯片软件

PowerPoint 是我最喜欢用的软件。其他一些演示软件，包括开源软件，也具备类似的功能，但由于我对它们不太熟悉，所以没有好的建议。欢迎在下面的讨论中分享你的想法！

• 演示文稿中的字体应该保持一致（包括大小），但更重要的是，字体需要安装在主机上。如果您不嵌入字体或使用预装的标准字体，那么当您的演示文稿在其他计算机上进行演示时，可能会看起来完全不同。以下是 Windows 字体，以下是 macOS 字体。
• 设计模式是一项新功能，可以帮助像我这样审美受限的开发者创建简洁美观的幻灯片。想了解你的电脑中是否有该功能以及如何使用，请查看这篇文章。
• Smart Art是你的好帮手。我尽量避免在幻灯片上使用项目符号，而是使用 SmartArt 列表。这样可以保持要点简短明了，而且比长篇大论的文字更具视觉吸引力。
• 如果你有变形效果，效果会非常棒。你可以用它来在幻灯片之间切换。如果你想让列表或形状动起来，基本上可以复制幻灯片，针对动画的每一帧进行调整，然后使用变形效果在幻灯片之间流畅地切换。
• PowerPoint 现已推出隐藏式字幕功能！开启此功能即可获得实时字幕，让您的演示文稿更易于理解。它甚至可以翻译成其他语言！点击此处查看详情。

Reveal.js

我喜欢用Reveal.js进行 JavaScript 和网页演示。它能创建出一个很棒的、可共享的项目。

• 字体应符合“网络安全”标准，以便在每个人的设备上一致运行。如果您使用表情符号，请记住设置<meta charset="UTF-8">。
• 用这个框架演示实时代码非常棒。例如，当我演示一些 JavaScript 代码时，我可能会直接把代码嵌入到这个框架中，并演示它的运行方式。祝您玩得开心，发挥您的创造力！

你的里程可能会有所不同

每个人都不一样。我花了十年时间学习如何制作精彩的演讲，但第一次尝试仍然功亏一篑。这篇文章只是触及皮毛，希望能提供一些思考的空间。我打造精彩演讲的秘诀就是人。在演讲之前，我总会先和同事们讨论我的演讲稿，他们愿意投入时间和精力，而且经常会收到几页宝贵的反馈。同一场演讲可以重复多次，尤其是在不同地点进行。我的一些最佳演讲就是多次演讲的结果，并根据听众的反馈修改演讲稿、演示稿，甚至故事情节。本系列的后续内容将详细介绍这一点，但现在希望你已经奠定了打造演讲稿的基础。接下来，我们将讨论上台前的练习和反馈！

⭐提示：考虑创建一份全面的“培训师培训”文档，其中包含演讲的分步说明和视频。它至少能让参会者轻松下载并跟随你的演示。如果有人采纳我的演讲，甚至拿起我的演示稿稍加修改，使其成为自己的内容并分享给观众，我就认为成功了。这是一种赋能其他开发者（包括演讲者和参会者）的方式，并且能够触及我可能不知道的渠道。此外，每个人的演讲方式都各不相同，同一个演讲，换个角度来看，可能会产生不同的效果。

🗣让我们讨论一下：你认为精彩演讲的关键要素是什么？你使用哪些技巧来打造高效的演讲？你最喜欢的演示软件或框架是什么？请在下方评论区分享你的想法！

上一页 征集演讲
下一页 练习和反馈

在本文前面，我提到了一个记录每次提交的仓库。演示文稿是关于 TypeScript 的，演示就是这个故事。我以一个现有的 JavaScript 应用程序为例，并将其重构为 TypeScript。有很多演讲描述了 TypeScript 的优势；我想展示这些优势，并让这些工具不言自明。每个片段都是我演示文稿中的一个步骤，我将它们分成了几分钟的小片段。完整列表可在此处查看：从 JavaScript 到 TypeScript。