向钢铁侠学习怎样开发软件

时间 2019-11-08

标签钢铁学习怎样开发软件繁體版

原文原文链接

做者：Sushrit Pasupuleti
翻译：疯狂的技术宅html

原文：https://towardsdatascience.co...前端

未经容许严禁转载react

在这段旅程结束时，你将会成就本身webpack

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

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

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

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

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

每一个程序员都会在某些时候经历这些。好吧，咱们知道你在这里作什么。你已经学习了不少东西，却对它们一无所知，可能你以为本身更像是个冒牌货。那么咱们该怎么办？redux

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

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

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

Mark 1（堆砌并拼凑）

在早期阶段，在学习编码或使用框架时，你本身完成全部工做，去 google 出现的每个问题，以某种方式拼凑你的代码，这样能够加载一些 HTML 页面或消息显示。

你能够解决 Stackoverflow 答案中的全部问题，并在须要时进行回顾。

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

Mark 2（美学与质量控制）

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

固然不是。要像 Mark 2 同样全面升级，从美学到自动化装配和飞行功能，你的代码也须要第二次迭代，不然它不会给其余人留下深入的印象。

因此你从网上挑选一些设计并尝试从新建立它们。在这里你能够找到一些设计灵感来激发你的创意：

如今你已经得到了一些灵感，下一步就是弄清楚怎样才能把这种设计变为现实。好吧，若是你正在建立一个网站或 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 编写测试的连接

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

与 Mark 2 相比，Mark 3 多是一个小小的增量更新，但这是必要的，你知道为何。因此不要跳过测试。

Mark 5（便携性）

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

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

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

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

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

这是我早年做试图构建本身的“ 贾维斯”时遇到的问题。当我在大约 6 年前刚开始时，决定使用依赖 C## 的 Windows Forms（是的，我这样作了，并不值得骄傲，可是你确定会很高兴看到缘由）。它提供了我当时设计所需的一切。经过 .Net 进行语音识别，轻松拖放UI构建器（当时我选择它的主要缘由）。这样我构建了第一个版本并提供下载。

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

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

正如你所看到的，我在 SAM 的开发过程当中屡次更改了本身的核心平台，如今是Braggi。不断改变平台是一个巨大的痛苦，而从 WinForms 到 WPF 的转换仍然在 C# 上，一旦我切换到 React，就应该使用 JavaScript。全部代码都会变得毫无用处，但正是这些变化使我成了全栈开发人员。

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

托尼也采起一样的方法。始终保留旧工做的备份，防止万一没有按计划进行，你至少能够展现一些东西。

Mark 7-50（部署）

全部不断更新的战衣都有一个共同点：就是它们装备起来很是容易，Mark 7 能够做为一个完整的包裹被自动送达，而 Mark 42 能够由微小的零件自动组装。

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

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

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

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

左：常规 CSS | 右：压缩 CSS

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

使用像 Webpack 的捆绑包：捆绑包基本上将全部源文件粘合在一块儿，就像 React Apps 的状况同样，让它们一块儿工做，这样它们能够经过服务器提供。全部文件都根据你的规范连接、定义入口点和出口点、哪些页面设置为在什么时候出现等。再次捆绑可减小磁盘和 Web 上的加载时间和空间利用率，从而节省带宽和用户等待时间。

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

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

每一个战衣都是如此灵活，每一个战衣都有一套武器，这是它本身的目的，不是全部的均可以进入外太空，或者能让绿巨人也能操做。

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

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

像 React 这样的框架很是关注可重用的组件。几乎三分之二的登陆表单均可以重复使用下面这种组件。

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

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

另外一个有用的提示是为本身建立样板模板，这样你就能够重新项目的模板开始，而不是再次搜索全部内容。因此，即便你完成了这个项目，你也能够马上开始一个新项目。

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

基础 React
高级React（使用路由器，Redux，Express后端）
Django，Flask 和其余一些框架都有本身的 Boilerplate，这是很好的起点。
对于静态网站，去找一些免费模板，并尝试经过混合和匹配来进行修改以知足你的要求。

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

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

正如我以前所说的，我花了很长时间才意识到本身真正想要的项目，最终的产品在通过屡次推翻后才得以实现。若是你发现本身常常推翻本身的想法，不要惧怕。最终你会更习惯于构建东西。因此请继续制造疯狂的东西，打破它们，修复它们并从新加工它们。

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

坚持下去！

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...