向钢铁侠学习怎样开发软件[每日前端夜话0xB7]

在这段旅程结束时，将会成就你自己

现在要写出优秀的代码并不是一个真正的问题。一切都只是先进行 Google 搜索，然后只需找到 Stackoverflow 的第一个链接，找到最受欢迎或赞同最多的答案并复制粘贴就足够了！

但是这些人面临的真正挑战是接下来该怎么办，或者是说他们所学到的东西到底能够做些什么。我们都对最新框架的文章和视频列表感到无力，这些文章所描述的确实比每个人似乎都在使用的其他框架都更好，但无论如何我们都会抱怨。好吧，实际上大多数只是看看，然后留下一个赞，还有一些评论，然后就结束了。几天之后，你遇到的下一个文章列表也是如此。

人们以惊人的速度去浏览这些文章或视频。学习新东西并没有什么不妥，但真正的问题是怎样在教程中使用的 Demo 之外来做一些东西。

如果它像 React 或 Vue 那样的框架，它将用来开发一个 To-Do 列表程序。如果它与 Tensorflow 或 keras 之类的机器学习有关，那么它十有八九会用在 MNIST 数据集（识别手写数字）上。

我明白了，除了扩展教程中提供的示例代码之外，很难想出一个应用这些技术的项目。有很多人在 To-Do 程序中添加了 2 个或更多按钮，然后就去更新你的简历。因为你想学习新的技术来处理你的项目，因为你知道自己该从哪里开始，也知道自己的目的，所以很自然的就去找一些资料来学习。但是很多人不会采取下一步措施，因为他们要么确信自己已经从一门课程中掌握了框架，并且能够在需要时使用它（这是个大错误），或者他们对使用这些框架不太自信，因为他们缺乏经验（这是很常见但没有错）。然后你把自己与那些创业前辈放在一起比较，他们在一个车库里的简单计算机上编写Google，你觉得更加不自信了。

每个程序员都会在某些时候经历这些。好吧，我们知道你在这里做什么。你已经学习了很多东西，却对它们一无所知，可能你觉得自己更像是个冒牌货。那么我们该怎么办？

 嗯，这里有一些人生建议：当陷入困境时，总是去寻找灵感，最终你会找到出路。

这时，我们需要从 MCU 宇宙中的一个角色身上汲取一些灵感——钢铁侠……

让我们开始吧，我们将探讨托尼在他作为钢铁侠的11年中所穿的几件主要的战衣。

Mark 1（堆砌并拼凑）

这是在洞穴中建造的战衣，其中的材料是从导弹中拆出来的。

在早期阶段，在学习编码或使用框架时，你自己完成所有工作，去 google 出现的每一个问题，以某种方式拼凑你的代码，这样可以加载一些 HTML 页面或消息显示。

你可以解决 Stackoverflow 答案中的所有问题，并在需要时进行回顾。

这类似于托尼如何在洞穴里拼凑他的第一个战衣。

Mark 2（美学与质量控制）

虽然 Mark 1 很厉害，但它仍然很笨重，是拼凑出来的，无法自如的飞行，穿戴的过程也必须依靠手动才行。就像你第一次尝试创建的某些东西一样，大多数代码都足以显示某些内容并满足你的基本目的。点击一个 90 年代风格的按钮并很酷的打开一个显示着 Hello World 的弹出窗口，这真的是你想要的东西吗？

当然不是。要像 Mark 2 一样全面升级，从美学到自动化装配和飞行功能，你的代码也需要第二次迭代，否则它不会给其他人留下深刻的印象。

所以你从网上挑选一些设计并尝试重新创建它们。在这里你可以找到一些设计灵感来激发你的创意：

•Behance

•Reddit/r/Design

•Reddit/r/userexperience

•Reddit/r/UI_Design

现在你已经获得了一些灵感，下一步就是弄清楚怎样才能把这种设计变为现实。好吧，如果你正在创建一个网站或 webapp，这很简单。你可以使用工具包或 UI 框架，其中包含预先设置样式的所有必要组件，然后开始自定义。而不是从头开始构建。你可用的一些工具包或 UI 框架是：

•Bootstrap (我喜欢它！)

•Bulma

•Daemonite’s Material (基于Google的Material Design)

你可以通过阅读 Google 的 UI/UX 案例研究和指南，学习设计适合绝大多数设备和用例的用户界面。

Mark 3（测试和错误修复）

现在 Mark 2 看起来与第一代完全不同（你可以说两者之间存在明显的对比）Mark 2 在各方面都领先一步，但它还有自己的缺陷。这是我们的第3课。不断测试！

在 Tony 完成设计并穿上 Mark 2 之后，他开始测试，他直接跳到了飞行测试中，用套战衣飞得很高。由于结冰，它无法在更高的高度上工作。如果他在没有考虑到这些结果的情况下进入战斗，他就不会如此优雅地取胜。

因此，要尽可能地去测试你的代码。这里有几个为 Python 和 JavaScript 编写测试的链接

•Python 单元测试(https://www.youtube.com/watch?v=6tNS--WetLI)

•JavaScript 单元测试(https://www.youtube.com/watch?v=r9HdJ8P6GQI)

•对 React 进行额外测试 (是的，这是非常需要的！)(https://www.youtube.com/watch?v=4Fl5GH4eYZ8)

你编写的测试越多，对代码的信心也就越大，特别是在演示或部署代码时。

与 Mark 2 相比，Mark 3 可能是一个小小的增量更新，但这是必要的，你知道为什么。所以不要跳过测试。

Mark 5（便携性）

Mark 5是一款专注于便携和易装备的战衣

这是非常小的，但在某些时候你要意识到项目文件夹中的源文件太大而无法随身携带进行演示，你不能总是希望从自己的笔记本电脑中进行演示。所以要考虑将你的项目打包成可执行文件或部署到服务器，以便在你外出时更方便你访问和演示。

Mark 6（重大的重新设计和规格变更）

从外观来看，Mark 4 可能看起来就像是一个微小的设计调整。但是它有一个全新的反应堆，完全用一种新元素重建。他之所以决定这样做，因为从长远来看，之前的能源核心并不成功。

这就是第 4 课，识别无法解决的问题。

有时候，当你工作时，会意识到所付出的努力并没有真正实现，这是因为你所处的环境，选择的框架等所施加的限制。托尼面临同样的问题。因此，当你的 PHP 脚本（请不要使用PHP）等核心组件无法满足你的需求时，就应该换工具了。

   这是我早年作试图构建自己的“贾维斯”(https://github.com/SushritPasupuleti/Braggi-A-Python-Based-Contextual-Chatbot-Framework)时遇到的问题。当我在大约 6 年前刚开始时，决定使用依赖 C# 的 Windows Forms（是的，我这样做了，并不值得骄傲，但是你肯定会很高兴看到原因）。它提供了我当时设计所需的一切。通过 .Net 进行语音识别，轻松拖放UI构建器（当时我选择它的主要原因）。这样我构建了第一个版本并提供下载。

请忽略图中那可怕的PPT背景

  这不是最好看的，但我为此感到自豪。但很快我意识到 WinForms 已经过时了，所以我决定将 WPF 转换为另一种用于 UI 设计的 Windows 技术，它提供了更精细的控制（与 WinForms 相比） 它支持XAML，基本上是一种用 HTML 创建 UI 的美化方式，通过添加标签、属性、同时仍然保持拖放功能。在这一点上，我开始欣赏像 HTML 这样的控件的控制水平，我可以做动画，自定义主题。这让我想要学习越来越多的东西。在这一点上，我逐渐喜欢上了 Material Design 并继续前进。

这是我为桌面版本做的最后一次迭代，然后转而使用网络技术

这是我为桌面版本做的最后一次迭代，然后转而使用 web 技术

正如你所看到的，我在 SAM 的开发过程中多次更改了自己的核心平台，现在是Braggi(https://github.com/SushritPasupuleti/Braggi-A-Python-Based-Contextual-Chatbot-Framework)。不断改变平台是一个巨大的痛苦，而从 WinForms 到 WPF 的转换仍然在 C# 上，一旦我切换到 React，就应该使用 JavaScript。所有代码都会变得毫无用处，但正是这些变化使我成了全栈开发人员。

因此对于本节的结论，我想说的是，大胆地思考怎样更改，直到不再削减它的规格和框架。你做出改变的速度越快，麻烦也就越少。

托尼也采取同样的方法。始终保留旧工作的备份，防止万一没有按计划进行，你至少可以展示一些东西。

Mark 7-50（部署）

Mark 7

Mark 42

所有不断更新的战衣都有一个共同点：就是它们装备起来非常容易，Mark 7 可以作为一个完整的包裹被自动送达，而 Mark 42 可以由微小的零件自动组装。

这里的关键点是对于 Web 开发人员来说是必不可少的。

当你的产品依赖于用户的互联网连接时，来回传输的每个字节都必须尽可能的进行有效地压缩和组织。

让我们看看在将网站部署到托管服务时必须要执行的一些操作。

1.压缩你的 JS 和 CSS。从代码中删除冗余数据节省空间。当额外文件空间的每个字节都会影响网站加载时间和服务器负载时，这一点至关重要。

左：常规 CSS | 右：压缩 CSS

2.使用CDN。 CDN（内容分发网络）存储经常请求的图像和视频等文件（例如你的网站上加载的 Logo 或促销视频），因为这些文件的大小通常比整个网站更大，并且总是随需求变化，它们给你的服务器增加了很大的负担，因此利用 CDN 是一种很好的策略，CDN 是为你托管媒体的分布式服务器，可以加速访问。这些服务器通常比托管服务快得多，故障率也较低。例子包括：

◾AWS

◾Cloudflare

2.使用像 Webpack 的捆绑包：捆绑包基本上将所有源文件粘合在一起，就像 React Apps 的情况一样，让它们一起工作，这样它们可以通过服务器提供。所有文件都根据你的规范链接、定义入口点和出口点、哪些页面设置为在何时出现等。再次捆绑可减少磁盘和 Web 上的加载时间和空间利用率，从而节省带宽和用户等待时间。

Mark 50 - 85（模块化，自动化和混合方法）

Mark 50 - 85 基本上都是关于使战衣适应环境、搭载武器和灵活的支持。这是一种混合和模块化的方法。

每个战衣都是如此灵活，每个战衣都有一套武器，这是它自己的目的，不是所有的都可以进入外太空，或者能让绿巨人也能操作。

虽然为某些用例编写自定义模块很好，但你希望能够尽可能多地重用代码。当然，你所拥有的那些过渡动画很酷，100 行的 CSS 使它们看上去就像是真正的艺术作品，但是如果它们只能使主页上的滑块看起来很好的话，那会有什么用呢？

编写代码时，应记住可以重用某些组件的位置。

像 React 这样的框架非常关注可重用的组件。几乎三分之二的登录表单都可以重复使用下面这种组件。

尽量减少重写相同组件和逻辑，尽可能重用。设定一些条件，以便在检测到状态更改时，表单的某些元素能够被禁用和隐藏。例如，如果表单状态设置为“登录”，则不应显示密码确认和全名字段，并且必须将文本更改为“登录”。请记住，避免冗余代码可以节省空间，最重要的是能够提升性能！

在电子表格或 Adobe XD 上逐步规划你的设计（这是免费且令人惊叹的专业展示）。随着时间的推移，你会习惯于在纸张上规划你的设计，然后将你的代码混合在一起。

另一个有用的提示是为自己创建样板模板，这样你就可以从新项目的模板开始，而不是再次搜索所有内容。所以，即使你完成了这个项目，你也可以立刻开始一个新项目。

我建议的一些好的bootstrap存储库是：

•基础 React(https://github.com/facebook/create-react-app)

•高级React（使用路由器，Redux，Express后端）(https://github.com/flexdinesh/react-redux-boilerplate)

•Django，Flask 和其他一些框架都有自己的 Boilerplate，这是很好的起点。

•对于静态网站，去找一些免费模板，并尝试通过混合和匹配来进行修改以满足你的要求。

写下你的要求并分析你的项目所需的更多内容并了解它们。一旦你完成学习，将它们整合到你的项目中，不断打磨并重复，直到有了一个能让你有信心向全世界展示的版本。

请记住，成为软件工程师的旅程将是一个需要大量学习，理解和重新学习的过程。每个框架和语言都有自己的学习曲线和优缺点。在做出决定之前，请务必始终考虑这些因素。

正如我之前所说的，我花了很长时间才意识到自己真正想要的项目，最终的产品在经过多次推翻后才得以实现。如果你发现自己经常推翻自己的想法，不要害怕。最终你会更习惯于构建东西。所以请继续制造疯狂的东西，打破它们，修复它们并重新加工它们。

所以这一切都在我身边，请在下面的评论中告诉我你的想法。很想听听你的经历和建议。

坚持下去！

原文：https://towardsdatascience.com/how-to-build-software-like-tony-stark-95484a2d2173